format

.github/workflows/lint.yml

@@ -11,8 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
-      - run: corepack enable
+      - run: npm i -g --force corepack && corepack enable
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/preview.yml

@@ -11,8 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
-      - run: corepack enable
+      - run: npm i -g --force corepack && corepack enable
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/release.yml

@@ -13,8 +13,7 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v4
-
-      - run: corepack enable
+      - run: npm i -g --force corepack && corepack enable
 
       - uses: actions/setup-node@v4
         with:

.prettierrc

@@ -17,5 +17,6 @@
 				"parser": "markdown"
 			}
 		}
-	]
+	],
+	"tailwindStylesheet": "./src/app.css"
 }

package.json

@@ -81,8 +81,8 @@
 		"@docsearch/js": "^3.8.3",
 		"@playwright/test": "^1.50.1",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.16.1",
-		"@sveltejs/package": "^2.3.9",
+		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/package": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.0.3",
@@ -112,7 +112,7 @@
 		"publint": "^0.3.2",
 		"shiki": "^2.2.0",
 		"superjson": "^2.2.2",
-		"svelte": "^5.19.6",
+		"svelte": "^5.19.7",
 		"svelte-check": "^4.1.4",
 		"svelte-docgen": "https://pkg.pr.new/svelte-docgen/svelte-docgen/svelte-docgen@146593b",
 		"tailwind-merge": "^2.6.0",
@@ -121,10 +121,10 @@
 		"tailwindcss-animate": "^1.0.7",
 		"three": "^0.173.0",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.22.0",
+		"typescript-eslint": "^8.23.0",
 		"vite": "^6.0.11",
 		"vite-plugin-svelte-docgen": "https://pkg.pr.new/svelte-docgen/svelte-docgen/vite-plugin-svelte-docgen@146593b",
-		"vitest": "^3.0.4"
+		"vitest": "^3.0.5"
 	},
 	"packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }

src/app.css

@@ -13,13 +13,13 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
+	}
 }
 
 @layer base {

src/content/examples/clusters/Clusters.svelte

@@ -14,7 +14,7 @@
 		<Checkbox id="cluster" bind:checked={cluster} />
 		<Label
 			for="cluster"
-			class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Cluster</Label
+			class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Cluster</Label
 		>
 	</div>
 	<div class="flex flex-1 grow flex-col gap-y-4">

src/content/examples/globe-atmosphere/Globe.svelte

@@ -29,7 +29,7 @@
 
 	<!-- Control -->
 	<div
-		class="absolute left-3 top-3 z-10 flex min-w-[200px] flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
+		class="absolute top-3 left-3 z-10 flex min-w-[200px] flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
 	>
 		<div class="mb-4 flex flex-col items-center space-y-2 px-2">
 			<label for="theta" class="leading-none">Theta ({thetaDeg})</label>

src/content/examples/limit-interaction/LimitInteraction.svelte

@@ -35,7 +35,7 @@
 	minPitch={pitchRange[0]}
 	maxPitch={pitchRange[1]}
 >
-	<div class="absolute right-3 top-3 z-10 flex flex-col gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm">
+	<div class="absolute top-3 right-3 z-10 flex flex-col gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm">
 		<div class="mb-3 flex flex-col items-center space-y-2.5 px-2">
 			<Label for="zoom" class="leading-none">Zoom Range ({zoomRange})</Label>
 			<Slider type="multiple" id="zoom" bind:value={zoomRange} min={0} max={22} />

src/content/examples/terradraw/TerraDraw.svelte

@@ -73,7 +73,7 @@
 
 	<!-- Draw controls -->
 	<div
-		class="absolute left-3 top-3 z-10 flex flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
+		class="absolute top-3 left-3 z-10 flex flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
 	>
 		{#each modeNames as modeName}
 			<label><input type="radio" bind:group={mode} value={modeName} class="mr-1" /> {modeName}</label>

src/content/examples/terradraw/content.svelte.md

@@ -1,6 +1,6 @@
 ---
 title: Terra Draw
-description: Use Terra Draw to draw a geometry in various forms such as point, line or polygon on your map. 
+description: Use Terra Draw to draw a geometry in various forms such as point, line or polygon on your map.
 ---
 
 <script lang="ts">

src/content/examples/terrain/Terrain.svelte

@@ -84,7 +84,7 @@
 	</RasterDEMTileSource>
 
 	<div
-		class="absolute left-3 top-3 z-10 flex min-w-[200px] flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
+		class="absolute top-3 left-3 z-10 flex min-w-[200px] flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
 	>
 		<Tabs.Root bind:value={mode} class="flex h-full flex-col">
 			<Tabs.List class="grid w-full grid-cols-2">

src/lib/components/Index.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <nav>
-	<h2 class="mb-4 text-lg font-bold leading-none">{name}</h2>
+	<h2 class="mb-4 text-lg leading-none font-bold">{name}</h2>
 	{#each toc as subtoc}
 		<h3 class="my-3">{subtoc.title}</h3>
 		<ul class="flex flex-col text-sm">

src/lib/maplibre/controls/GeolocateControl.svelte

@@ -49,12 +49,14 @@
 	});
 
 	$effect(() => {
-		if (mapCtx.map?.loaded()) {
-			control?.trigger();
-		} else {
-			mapCtx.map?.once('load', () => {
+		if (autoTrigger) {
+			if (mapCtx.map?.loaded()) {
 				control?.trigger();
-			});
+			} else {
+				mapCtx.map?.once('load', () => {
+					control?.trigger();
+				});
+			}
 		}
 	});
 

src/lib/maplibre/ext/contour/MapLibreContourSource.svelte

@@ -16,7 +16,7 @@
 		demSource?: DemSource;
 		tileOptions: GlobalContourTileOptions;
 		attribution?: string;
-		manager?: LocalDemManager;
+		getTile?: LocalDemManager['getTile'];
 	}
 
 	let {
@@ -32,11 +32,12 @@
 		actor,
 		tileOptions,
 		attribution,
-		manager
+		/** Custom getTile function for LocalDemManager (experimental) */
+		getTile
 	}: Props = $props();
 
 	$effect(() => {
-		if (manager) {
+		if (getTile) {
 			worker = false;
 		}
 		(async () => {
@@ -50,8 +51,8 @@
 				worker, // offload isoline computation to a web worker to reduce jank
 				actor
 			});
-			if (manager) {
-				demSource.manager = manager;
+			if (getTile && 'getTile' in demSource.manager) {
+				demSource.manager.getTile = getTile;
 			}
 			demSource.setupMaplibre(maplibregl);
 		})();

src/routes/+layout.svelte

@@ -23,8 +23,8 @@
 <ModeWatcher />
 <ViewTransition />
 
-<header class="sticky top-0 z-40 border-b bg-background bg-opacity-85 backdrop-blur-sm">
-	<div class="mx-auto px-4 xl:container md:px-8">
+<header class="bg-opacity-85 sticky top-0 z-40 border-b bg-background backdrop-blur-sm">
+	<div class="mx-auto px-4 md:px-8 xl:container">
 		<Header bind:globalTocOpen />
 	</div>
 </header>

src/routes/+page.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="container mx-auto w-full px-4 py-10 md:py-12">
-	<main class="prose dark:prose-invert mx-auto">
+	<main class="mx-auto prose dark:prose-invert">
 		<h1 class="mb-0">Svelte MapLibre GL</h1>
 		<p>
 			Svelte 5 wrapper for 🗺

src/routes/DarkModeSelector.svelte

@@ -9,8 +9,8 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
-		<Sun class="size-5! rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 md:size-6!" />
-		<Moon class="absolute size-5! rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 md:size-6!" />
+		<Sun class="size-5! scale-100 rotate-0 transition-all md:size-6! dark:scale-0 dark:-rotate-90" />
+		<Moon class="absolute size-5! scale-0 rotate-90 transition-all md:size-6! dark:scale-100 dark:rotate-0" />
 		<span class="sr-only">Toggle theme</span>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content align="end">

src/routes/GlobalToc.svelte

@@ -26,14 +26,14 @@
 <div
 	id="global-toc"
 	class={cn(
-		`ease duration-400 fixed inset-0 z-50 bg-background/40 transition-all md:hidden`,
-		open ? 'opacity-100 backdrop-blur-xs' : 'pointer-events-none opacity-0 backdrop-blur-0'
+		`ease fixed inset-0 z-50 bg-background/40 transition-all duration-400 md:hidden`,
+		open ? 'opacity-100 backdrop-blur-xs' : 'backdrop-blur-0 pointer-events-none opacity-0'
 	)}
 >
 	<div class="absolute inset-0" aria-hidden="true" onmousedown={() => (open = false)}></div>
 	<div
 		class={cn(
-			`ease duration-400 absolute inset-0 z-50 w-72 overflow-scroll bg-muted/90 transition-all md:hidden`,
+			`ease absolute inset-0 z-50 w-72 overflow-scroll bg-muted/90 transition-all duration-400 md:hidden`,
 			open ? 'translate-x-0 shadow-lg' : '-translate-x-full shadow-none'
 		)}
 	>

src/routes/Header.svelte

@@ -89,7 +89,7 @@
 		>
 			<GitHub class="size-5! md:size-6!" />
 		</Button>
-		<div class="-ml-1 -mr-1 md:ml-1">
+		<div class="-mr-1 -ml-1 md:ml-1">
 			<DarkModeSelector />
 		</div>
 	</div>

src/routes/docs/[slug]/+layout.svelte

@@ -5,8 +5,8 @@
 	let { children } = $props();
 </script>
 
-<div class="mx-auto grid gap-4 px-4 xl:container md:grid-cols-[210px_minmax(0,1fr)] md:px-8">
-	<aside class="sticky bottom-0 top-[4.5rem] hidden h-[calc(100vh-4rem)] overflow-scroll py-10 md:block">
+<div class="mx-auto grid gap-4 px-4 md:grid-cols-[210px_minmax(0,1fr)] md:px-8 xl:container">
+	<aside class="sticky top-[4.5rem] bottom-0 hidden h-[calc(100vh-4rem)] overflow-scroll py-10 md:block">
 		<Index name="Docs" {toc} />
 	</aside>
 	<main class="grid-cols-[1fr_210px]">

src/routes/docs/components/[slug]/+layout.svelte

@@ -5,8 +5,8 @@
 	let { children } = $props();
 </script>
 
-<div class="mx-auto grid gap-4 px-4 xl:container md:grid-cols-[210px_minmax(0,1fr)] md:px-8">
-	<aside class="sticky bottom-0 top-[4.5rem] hidden h-[calc(100vh-4rem)] overflow-scroll py-10 md:block">
+<div class="mx-auto grid gap-4 px-4 md:grid-cols-[210px_minmax(0,1fr)] md:px-8 xl:container">
+	<aside class="sticky top-[4.5rem] bottom-0 hidden h-[calc(100vh-4rem)] overflow-scroll py-10 md:block">
 		<Index name="API Reference" {toc} />
 	</aside>
 	<main class="grid-cols-[1fr_210px]">

src/routes/docs/components/[slug]/+page.svelte

@@ -28,7 +28,7 @@
 		<Table.Root>
 			<Table.Header>
 				<Table.Row>
-					<Table.Head class="min-w-[120px] max-w-[25%]">Property</Table.Head>
+					<Table.Head class="max-w-[25%] min-w-[120px]">Property</Table.Head>
 					<Table.Head>Type</Table.Head>
 					<Table.Head>Description</Table.Head>
 				</Table.Row>

src/routes/docs/components/[slug]/Prop.svelte

@@ -7,7 +7,7 @@
 
 <Table.Row>
 	<Table.Cell class="">
-		<code class="break-all font-bold">{name}</code>
+		<code class="font-bold break-all">{name}</code>
 		<div class="text-xs font-semibold">
 			{#if prop.isOptional}
 				<span class="text-muted-foreground">optional</span>

src/routes/examples/[slug]/+layout.svelte

@@ -5,8 +5,8 @@
 	let { children } = $props();
 </script>
 
-<div class="mx-auto grid gap-4 px-4 xl:container md:grid-cols-[210px_minmax(0,1fr)] md:px-8">
-	<aside class="sticky bottom-0 top-[4.5rem] hidden h-[calc(100vh-4rem)] overflow-scroll py-10 md:block">
+<div class="mx-auto grid gap-4 px-4 md:grid-cols-[210px_minmax(0,1fr)] md:px-8 xl:container">
+	<aside class="sticky top-[4.5rem] bottom-0 hidden h-[calc(100vh-4rem)] overflow-scroll py-10 md:block">
 		<Index name="Examples" {toc} />
 	</aside>
 	<main class="grid-cols-[1fr_210px]">