@velastack/cms 0.5.1 → 0.6.1

package/README.md

@@ -42,6 +42,8 @@ CMS identity therefore can't be `(component file + field name)`. It has to be `(
 npm install @velastack/cms
 ```
 
+Requires SvelteKit 3, Svelte 5.57.1+, Vite 8.0.12+ and Node 22.17+. SvelteKit 2 projects stay on `@velastack/cms@^0.5`.
+
 ## Quick start
 
 ### 1. Register the Vite plugin
@@ -57,9 +59,20 @@ export default defineConfig({
 });
 ```
 
-The plugin reads `src/routes/` and `src/lib/` by default. Override with `cms({ routesDir, libDir })` if your project is laid out differently.
+The plugin reads `src/routes/` and `src/lib/` by default. Override with `cms({ routesDir, libDir })` if your project is laid out differently. Imports through `#lib/…` (and any other `#` subpath import in your `package.json` `imports`) are followed, as are older `$lib/…` ones.
+
+### 2. Create the CMS in `src/lib/cms.ts`
 
-### 2. Create the CMS in `$lib/cms.ts`
+SvelteKit 3 projects import `src/lib` through the `#lib` subpath import, which `sv create` (and `sv migrate sveltekit-3`) declares in `package.json`:
+
+```json
+{
+	"imports": {
+		"#lib": "./src/lib/index.js",
+		"#lib/*": "./src/lib/*"
+	}
+}
+```
 
 ```ts
 // src/lib/cms.ts
@@ -84,7 +97,7 @@ Optionally include `svelte-meta-tags` for easy page metadata handling, but it is
 // src/routes/+layout.server.ts
 import { error, redirect, type ServerLoad } from '@sveltejs/kit';
 import { defineBaseMetaTags } from 'svelte-meta-tags';
-import { loadCms } from '$lib/cms.js';
+import { loadCms } from '#lib/cms.js';
 
 export const load: ServerLoad = async (event) => {
 	const { baseMetaTags } = defineBaseMetaTags({
@@ -199,6 +212,27 @@ Only URLs that flow through `apiAdapter` responses are rewritten. If you build a
 
 If `endpoint` is omitted (e.g. when using `mockAdapter` for tests/demos), the plugin's media steps are no-ops — builds proceed exactly as before.
 
+### Static sites: `@velastack/cms/adapter`
+
+A fully static site uses the bundled adapter, a wrapper around `@sveltejs/adapter-static` (same options). SvelteKit 3 takes the adapter in `sveltekit({...})`:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { cms } from '@velastack/cms/vite';
+import cmsAdapter from '@velastack/cms/adapter';
+
+export default defineConfig({
+	plugins: [
+		cms({ endpoint: 'https://cms.example.com/v1/projects/p1/cms' }),
+		sveltekit({ adapter: cmsAdapter({ fallback: '200.html' }) })
+	]
+});
+```
+
+After adapter-static writes the site, it adds what the admin bar needs to preview and create pages that were not prerendered: a `__fallback.json` next to each parameterized route (`rooms/__fallback.json` for `/(marketing)/rooms/[slug]`), and a `__velastack_manifest` of the creatable routes' prerendered entries injected into the `fallback` page. The manifest needs `fallback` set and the `cms()` plugin in the same build; the adapter warns if the plugin never reported.
+
 ## CMS components
 
 Every CMS component shares the same prop shape:
@@ -370,7 +404,7 @@ A component is treated as a CMS component if **any** of the following hold:
 
    Use it from any route: `<CmsLink name="hero.cta" />`. The plugin picks up `hero.cta` as a field on the page's scope; no plugin config edit required.
 
-2. **It's a named export from your local `src/lib/components/cms/index.{ts,js}` barrel.** Re-export your component there if you prefer a single import path..
+2. **It's a named export from your local `src/lib/components/cms/index.{ts,js}` barrel** (imported as `#lib/components/cms/index.js`). Re-export your component there if you prefer a single import path.
 
 3. **It's imported from the `@velastack/cms` package itself.** Every named import from `@velastack/cms` is a CMS component, whether or not the bundler resolved the package.
 

package/dist/backend/index.d.ts

@@ -7,7 +7,7 @@
  * export const cms = createCmsBackend();
  *
  * // src/routes/cms/[...path]/+server.ts
- * import { cms } from '../server/cms';
+ * import { cms } from '../server/cms.js';
  * export const prerender = false;
  * export const fallback = cms.handler;
  * ```
@@ -25,10 +25,12 @@
  * default; enabling it with an `origin` predicate that returns `true`
  * unconditionally lets any site drive the mutating endpoints with a signed-in
  * editor's cookie, because SvelteKit's CSRF check only guards form content
- * types and these are JSON. And SvelteKit *does* guard `multipart/form-data`,
- * so a cross-origin `POST /media` needs the site's origin in
- * `kit.csrf.trustedOrigins` — that check is production-only, so it will not
- * show up in `vela dev`.
+ * types (and, since Kit 3, requests with no content type) and these are JSON.
+ * The admin bar sends every mutation with a JSON content type for that reason.
+ * SvelteKit *does* guard `multipart/form-data`, so a cross-origin
+ * `POST /media` needs the site's origin in the backend app's
+ * `sveltekit({ csrf: { trustedOrigins: ['https://site.example'] } })` — that
+ * check is production-only, so it will not show up in `vela dev`.
  *
  * The session cookie is scoped to the mount path (`/cms`, or
  * `/v1/projects/<id>/cms`), so several projects on one origin hold independent

package/dist/backend/index.js

@@ -7,7 +7,7 @@
  * export const cms = createCmsBackend();
  *
  * // src/routes/cms/[...path]/+server.ts
- * import { cms } from '../server/cms';
+ * import { cms } from '../server/cms.js';
  * export const prerender = false;
  * export const fallback = cms.handler;
  * ```
@@ -25,10 +25,12 @@
  * default; enabling it with an `origin` predicate that returns `true`
  * unconditionally lets any site drive the mutating endpoints with a signed-in
  * editor's cookie, because SvelteKit's CSRF check only guards form content
- * types and these are JSON. And SvelteKit *does* guard `multipart/form-data`,
- * so a cross-origin `POST /media` needs the site's origin in
- * `kit.csrf.trustedOrigins` — that check is production-only, so it will not
- * show up in `vela dev`.
+ * types (and, since Kit 3, requests with no content type) and these are JSON.
+ * The admin bar sends every mutation with a JSON content type for that reason.
+ * SvelteKit *does* guard `multipart/form-data`, so a cross-origin
+ * `POST /media` needs the site's origin in the backend app's
+ * `sveltekit({ csrf: { trustedOrigins: ['https://site.example'] } })` — that
+ * check is production-only, so it will not show up in `vela dev`.
  *
  * The session cookie is scoped to the mount path (`/cms`, or
  * `/v1/projects/<id>/cms`), so several projects on one origin hold independent

package/dist/backend/types.d.ts

@@ -138,7 +138,7 @@ export type CmsBackendOptions = {
      *
      * Enabling this is a security decision, not a convenience one: the session
      * cookie is credentialed and the JSON mutation endpoints are not covered by
-     * SvelteKit's CSRF check (it only guards form content types). An `origin`
+     * SvelteKit's CSRF check (it only guards form and missing content types). An `origin`
      * predicate that returns `true` unconditionally lets any site on the
      * internet drive those endpoints with a signed-in editor's cookie. Allowlist
      * the origins you actually serve.

package/dist/components/admin-bar/admin-bar-internal.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-	import {
-		afterNavigate,
-		beforeNavigate,
-		goto,
-		invalidateAll,
-		replaceState
-	} from '$app/navigation';
+	import { afterNavigate, beforeNavigate, goto, refreshAll } from '$app/navigation';
 	import { page } from '$app/state';
 	import { pages } from 'virtual:vela-cms/pages';
 	import { cmsStore, type PageDeleteOutcome } from '../cms/cms-store.svelte.js';
@@ -14,6 +8,7 @@
 	import CssRoot from './css-root.svelte';
 	import { adminBarTheme, type AdminBarTheme } from './theme.svelte.js';
 	import type { CmsDeployState } from '../../core/wire.js';
+	import { cmsFetch } from '../../core/cms-fetch.js';
 	import DeletePageDialog, {
 		type DeletePageMode,
 		type RedirectTarget
@@ -186,7 +181,7 @@
 
 	const previewUrl = $derived.by(() => {
 		if (versionKey) {
-			const url = new URL(page.url);
+			const url = new URL(page.url.href);
 			url.searchParams.delete('edit');
 			url.searchParams.delete('preview');
 			url.searchParams.set('version', versionKey);
@@ -194,7 +189,7 @@
 		}
 		const key = previewKey;
 		if (!key) return '';
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		url.searchParams.delete('edit');
 		url.searchParams.set('preview', key);
 		return url.toString();
@@ -211,7 +206,7 @@
 	};
 
 	const setPreviewParam = async (key: string | null, opts: { replace?: boolean } = {}) => {
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		const current = url.searchParams.get('preview');
 		url.searchParams.delete('edit');
 		if (key) {
@@ -223,14 +218,14 @@
 		}
 		const path = url.pathname + url.search + url.hash;
 		if (opts.replace) {
-			replaceState(path, page.state);
+			await goto(path, { shallow: true, replace: true, state: page.state });
 		} else {
-			await goto(path, { keepFocus: true, noScroll: true });
+			await goto(path, { reset: false });
 		}
 	};
 
 	const setVersionParam = async (key: string | null, opts: { replace?: boolean } = {}) => {
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		const current = url.searchParams.get('version');
 		url.searchParams.delete('edit');
 		url.searchParams.delete('preview');
@@ -243,14 +238,14 @@
 		}
 		const path = url.pathname + url.search + url.hash;
 		if (opts.replace) {
-			replaceState(path, page.state);
+			await goto(path, { shallow: true, replace: true, state: page.state });
 		} else {
-			await goto(path, { keepFocus: true, noScroll: true });
+			await goto(path, { reset: false });
 			// Force the server load to re-fetch. SvelteKit's URL tracking
 			// doesn't always pick up our `?version=` access (it lives behind
 			// the `loadCms` helper) — visible on Exit, where we'd otherwise
 			// keep showing the past release's `page.data.cms.docs`.
-			await invalidateAll();
+			await refreshAll();
 		}
 	};
 
@@ -264,7 +259,7 @@
 	// (and on static-export sites with no server load to re-run). Like the
 	// other gating params, we strip the param when `null`.
 	const setLocaleParam = async (locale: string | null, opts: { replace?: boolean } = {}) => {
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		const current = url.searchParams.get('locale');
 		if (locale) {
 			if (current === locale) return;
@@ -275,18 +270,18 @@
 		}
 		const path = url.pathname + url.search + url.hash;
 		if (opts.replace) {
-			replaceState(path, page.state);
+			await goto(path, { shallow: true, replace: true, state: page.state });
 			return;
 		}
 		if (!locale) {
 			clearingLocale = true;
 			try {
-				await goto(path, { keepFocus: true, noScroll: true });
+				await goto(path, { reset: false });
 			} finally {
 				clearingLocale = false;
 			}
 		} else {
-			await goto(path, { keepFocus: true, noScroll: true });
+			await goto(path, { reset: false });
 		}
 	};
 
@@ -333,7 +328,7 @@
 	// Until then, the overlay-sync effect must NOT strip `?preview=` from the
 	// URL — `cmsStore.openRelease` is null pre-fetch, but that's "unknown",
 	// not "no draft". Without this gate, a hard refresh on `?preview=<key>`
-	// would treat the param as stale and replaceState it away.
+	// would treat the param as stale and shallow-replace it away.
 	let openReleaseFetched = $state(false);
 
 	// On mount and on subsequent URL/store changes: derive what to do (URL sync,
@@ -411,6 +406,7 @@
 	// appended; already-correct nav targets pass through unchanged. Full-page
 	// unloads (`willUnload`) and external/hash-only navs bypass.
 	beforeNavigate((nav) => {
+		if (nav.shallow) return;
 		if (nav.type === 'leave' || nav.willUnload) return;
 		if (!nav.to) return;
 		if (nav.to.url.origin !== location.origin) return;
@@ -434,10 +430,7 @@
 				nav.cancel();
 				const url = new URL(nav.to.url);
 				carryLocaleOnto(url);
-				void goto(url.pathname + url.search + url.hash, {
-					keepFocus: true,
-					noScroll: true
-				});
+				void goto(url.pathname + url.search + url.hash, { reset: false });
 				return;
 			}
 			// Target has no `?version=`. If we're exiting on purpose, let the nav
@@ -448,10 +441,7 @@
 			url.searchParams.delete('preview');
 			url.searchParams.set('version', versionKey);
 			carryLocaleOnto(url);
-			void goto(url.pathname + url.search + url.hash, {
-				keepFocus: true,
-				noScroll: true
-			});
+			void goto(url.pathname + url.search + url.hash, { reset: false });
 			return;
 		}
 
@@ -462,10 +452,7 @@
 			nav.cancel();
 			const url = new URL(nav.to.url);
 			carryLocaleOnto(url);
-			void goto(url.pathname + url.search + url.hash, {
-				keepFocus: true,
-				noScroll: true
-			});
+			void goto(url.pathname + url.search + url.hash, { reset: false });
 			return;
 		}
 
@@ -477,23 +464,26 @@
 		const url = new URL(nav.to.url);
 		if (key) url.searchParams.set('preview', key);
 		carryLocaleOnto(url);
-		void goto(url.pathname + url.search + url.hash, {
-			keepFocus: true,
-			noScroll: true
-		});
+		void goto(url.pathname + url.search + url.hash, { reset: false });
 	});
 
 	// Re-apply the overlay on every internal navigation. SvelteKit may strip
 	// the gating param when nav targets aren't preserve-params links, so we
-	// reapply it via replaceState too. Merge (not reset) so unchanged-layout
+	// reapply it via a shallow replace too. Merge (not reset) so unchanged-layout
 	// overlays keep showing while new-page-scope fetches resolve.
-	afterNavigate(() => {
+	afterNavigate(({ shallow }) => {
+		if (shallow) return;
+
 		if (versionKey) {
-			const url = new URL(page.url);
+			const url = new URL(page.url.href);
 			if (url.searchParams.get('version') !== versionKey) {
 				url.searchParams.delete('preview');
 				url.searchParams.set('version', versionKey);
-				replaceState(url.pathname + url.search + url.hash, page.state);
+				void goto(url.pathname + url.search + url.hash, {
+					shallow: true,
+					replace: true,
+					state: page.state
+				});
 			}
 			// `reset` so a nav from one release to another wipes the prior
 			// snapshot's overlay before merging in the new one — otherwise
@@ -522,10 +512,14 @@
 			cmsStore.clearOverlay();
 			return;
 		}
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		if (url.searchParams.get('preview') !== key) {
 			url.searchParams.set('preview', key);
-			replaceState(url.pathname + url.search + url.hash, page.state);
+			void goto(url.pathname + url.search + url.hash, {
+				shallow: true,
+				replace: true,
+				state: page.state
+			});
 		}
 		void cmsStore.loadAndApplyOverlay(endpoint, currentScopes(), key, { locale: currentLocale });
 		void cmsStore.loadAndApplyEntriesOverlay(endpoint, currentEntriesRouteIds(), key, {
@@ -684,7 +678,7 @@
 		deploying = true;
 		deployError = null;
 		try {
-			const res = await fetch(`${endpoint}/deploy`, { method: 'POST', credentials: 'include' });
+			const res = await cmsFetch(`${endpoint}/deploy`, { method: 'POST' });
 			if (!res.ok) {
 				deployError = (await res.text()) || 'Could not start the deploy.';
 				return;
@@ -925,9 +919,8 @@
 
 	const onRegeneratePreviewKey = async () => {
 		if (versionKey && versionRelease) {
-			const res = await fetch(`${endpoint}/release/history/${versionRelease.id}/preview-key`, {
-				method: 'POST',
-				credentials: 'include'
+			const res = await cmsFetch(`${endpoint}/release/history/${versionRelease.id}/preview-key`, {
+				method: 'POST'
 			});
 			if (!res.ok) return;
 			const data = (await res.json()) as { preview_key: string };
@@ -948,9 +941,8 @@
 			return;
 		}
 
-		const res = await fetch(`${endpoint}/release/preview-key`, {
-			method: 'POST',
-			credentials: 'include'
+		const res = await cmsFetch(`${endpoint}/release/preview-key`, {
+			method: 'POST'
 		});
 		if (!res.ok) return;
 		await cmsStore.fetchOpenRelease(endpoint);
@@ -959,9 +951,8 @@
 
 	const onDiscardAllChanges = async () => {
 		if (!confirm('Discard all unpublished changes in your working copy?')) return;
-		const res = await fetch(`${endpoint}/release/discard`, {
-			method: 'POST',
-			credentials: 'include'
+		const res = await cmsFetch(`${endpoint}/release/discard`, {
+			method: 'POST'
 		});
 		if (!res.ok) return;
 		cmsStore.setOpenRelease(null);
@@ -1171,6 +1162,7 @@
 		const sourceContents: Record<string, unknown> = res.ok
 			? ((await res.json()) as { contents: Record<string, unknown> }).contents
 			: {};
+
 		const { metadata: meta, ...rest } = sourceContents as { metadata?: unknown } & Record<
 			string,
 			unknown
@@ -1179,6 +1171,7 @@
 			meta && typeof meta === 'object' && !Array.isArray(meta)
 				? (meta as Record<string, unknown>)
 				: {};
+
 		closeAllPanels();
 		duplicateSource = { tree: rest, metadata: sourceMetadata };
 		newDialog = config;
@@ -1261,7 +1254,7 @@
 			duplicateSource = null;
 			pagesOpen = false;
 			cmsStore.isEditing = true;
-			await goto(url, { keepFocus: true, noScroll: true });
+			await goto(url, { reset: false });
 		} finally {
 			newPageCreating = false;
 		}
@@ -1320,7 +1313,7 @@
 								<KbdShortcut keys="⌘E" class={menuShortcutClass} />
 							</Menubar.Item>
 							<Menubar.Item class={menuItemClass} onSelect={onOpenSeo}>
-								SEO &amp; Metadata
+								SEO & Metadata
 								<KbdShortcut keys="⌘I" class={menuShortcutClass} />
 							</Menubar.Item>
 							<Menubar.Separator class={menuSeparatorClass} />
@@ -1394,7 +1387,7 @@
 								onSelect={onOpenPublish}
 								disabled={counts.total === 0}
 							>
-								Review &amp; Publish…
+								Review & Publish…
 								{#if counts.total > 0}
 									<span class="vela:ml-auto vela:flex vela:items-center vela:gap-2">
 										<span
@@ -1410,9 +1403,11 @@
 									<KbdShortcut keys="⌘P" class={menuShortcutClass} />
 								{/if}
 							</Menubar.Item>
-							<Menubar.Item class={menuItemClass} onSelect={onShareLink} disabled={!previewUrl}>
-								Share Preview Link…
-							</Menubar.Item>
+
+							<Menubar.Item class={menuItemClass} onSelect={onShareLink} disabled={!previewUrl}
+								>Share Preview Link…</Menubar.Item
+							>
+
 							<Menubar.Item
 								class={menuItemDestructiveClass}
 								onSelect={onDiscardAllChanges}

package/dist/components/admin-bar/admin-bar.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { browser } from '$app/environment';
-	import { beforeNavigate, goto, invalidateAll, replaceState } from '$app/navigation';
+	import { browser } from '$app/env';
+	import { beforeNavigate, goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { cmsStore } from '../cms/cms-store.svelte.js';
+	import { cmsFetch } from '../../core/cms-fetch.js';
 	import { adminBarTheme, type AdminBarTheme } from './theme.svelte.js';
 
 	const STORAGE_KEY = 'cms.editEnabled';
@@ -53,7 +54,7 @@
 	// `cms.editEnabled` flag keeps it open. We deliberately do NOT
 	// react to `?edit` mid-session: a $effect on it would unconditionally
 	// re-set `cms.editEnabled='1'` and `barEnabled=true` every time the
-	// URL changed (including the replaceState we issue from teardown),
+	// URL changed (including the shallow `goto` we issue from teardown),
 	// resurrecting the bar after `closeBar`/`onLogout`.
 	if (browser) {
 		untrack(() => {
@@ -68,10 +69,10 @@
 				localStorage.setItem(STORAGE_KEY, '1');
 				barEnabled = true;
 				// Strip `?edit` so reloads don't re-grant access without the persisted flag.
-				const url = new URL(page.url);
+				const url = new URL(page.url.href);
 				url.searchParams.delete('edit');
 				const path = url.pathname + url.search + url.hash;
-				setTimeout(() => replaceState(path, page.state), 0);
+				setTimeout(() => void goto(path, { shallow: true, replace: true, state: page.state }), 0);
 			} else if (stored) {
 				barEnabled = true;
 			}
@@ -110,6 +111,7 @@
 
 	// ── Unsaved-changes guard ─────────────────────────────────────────
 	beforeNavigate((nav) => {
+		if (nav.shallow) return;
 		if (!cmsStore.isDirty) return;
 		if (!confirm('You have unsaved changes. Leave anyway?')) nav.cancel();
 	});
@@ -152,7 +154,7 @@
 
 	// ── Teardown (shared by closeBar + onLogout) ──────────────────────
 	const stripUrlParams = (...keys: string[]) => {
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		let changed = false;
 		for (const k of keys) {
 			if (url.searchParams.has(k)) {
@@ -190,7 +192,7 @@
 	const onLogout = async () => {
 		if (cmsStore.isDirty && !confirm('Discard unsaved changes?')) return;
 		try {
-			await fetch(`${endpoint}/logout`, { method: 'POST', credentials: 'include' });
+			await cmsFetch(`${endpoint}/logout`, { method: 'POST' });
 		} catch {
 			// Server call failed; tear down locally regardless.
 		}
@@ -206,9 +208,11 @@
 	{:else if barEnabled && authState === 'unauthed'}
 		<div class="cms-signin">
 			<span>Sign in to edit this site</span>
+
 			<button type="button" class="cms-signin__signin" onclick={() => (signinOpen = !signinOpen)}
 				>Sign in</button
 			>
+
 			<button type="button" class="cms-signin__close" aria-label="Close" onclick={closeBar}
 				>×</button
 			>

package/dist/components/admin-bar/history-panel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
+	import { cmsFetch } from '../../core/cms-fetch.js';
 	import PanelFooter from './panel-footer.svelte';
 	import PanelHeader from './panel-header.svelte';
 	import Panel from './panel.svelte';
@@ -68,8 +69,7 @@
 			return;
 		reverting = release.id;
 		try {
-			const res = await fetch(`${endpoint}/release/history/${release.id}/revert`, {
-				credentials: 'include',
+			const res = await cmsFetch(`${endpoint}/release/history/${release.id}/revert`, {
 				method: 'POST'
 			});
 			if (!res.ok) return;
@@ -146,11 +146,11 @@
 	);
 
 	const onView = async (release: PublishedRelease) => {
-		const url = new URL(page.url);
+		const url = new URL(page.url.href);
 		url.searchParams.delete('preview');
 		url.searchParams.delete('edit');
 		url.searchParams.set('version', release.preview_key);
-		await goto(url.pathname + url.search + url.hash, { keepFocus: true, noScroll: true });
+		await goto(url.pathname + url.search + url.hash, { reset: false });
 		onClose();
 	};
 </script>

package/dist/components/admin-bar/pages-panel.svelte

@@ -219,7 +219,7 @@
 		const key = cmsStore.openRelease?.preview_key;
 		if (key) url.searchParams.set('preview', key);
 		// onClose();
-		await goto(url, { keepFocus: true, noScroll: true });
+		await goto(url, { reset: false });
 	};
 
 	const onView = async (routeId: string, params: Record<string, string>) => {

package/dist/components/admin-bar/theme.svelte.js

@@ -5,7 +5,7 @@
  * component's `<CssRoot>`, and the system-preference listener all read from
  * the same singleton so theme changes propagate everywhere immediately.
  */
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 const STORAGE_KEY = 'cms.theme';
 const readStoredTheme = () => {
     if (typeof localStorage === 'undefined')

package/dist/components/cms/cms-store.svelte.js

@@ -27,8 +27,9 @@
  * Locales panel passes an explicit locale to inspect other locales'
  * working-copy state without switching the page.
  */
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 import { page } from '$app/state';
+import { cmsFetch } from '../../core/cms-fetch.js';
 import { mergeLocaleDocs, mergeLocaleEntries } from './locale-merge.js';
 import { composeKey } from './overlay-sync.js';
 import { get, has, mergeTree, set } from '../../core/path.js';
@@ -543,12 +544,14 @@ class CmsStore {
         if (!res.ok)
             throw new Error(`List failed (${res.status})`);
         const data = (await res.json());
-        return { ...data, items: data.items.map((i) => resolveMediaItem(i, endpoint)) };
+        return {
+            ...data,
+            items: data.items.map((i) => resolveMediaItem(i, endpoint))
+        };
     }
     async deleteMedia(endpoint, id) {
-        const res = await fetch(`${endpoint}/media/${id}`, {
-            method: 'DELETE',
-            credentials: 'include'
+        const res = await cmsFetch(`${endpoint}/media/${id}`, {
+            method: 'DELETE'
         });
         if (!res.ok)
             throw new Error(`Delete failed (${res.status})`);

package/dist/core/cms-fetch.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `fetch` for the CMS endpoint's mutating routes, with the editor's session
+ * cookie (`credentials: 'include'`) unless the caller overrides it.
+ *
+ * SvelteKit 3 treats a cross-origin `POST`/`PUT`/`PATCH`/`DELETE` that has no
+ * `content-type` like a form submission, and rejects it with a 403 unless the
+ * site's origin is in the backend's `csrf.trustedOrigins`. The admin bar talks
+ * to a cross-origin endpoint whenever the CMS is hosted (velastack.dev), so a
+ * bodiless mutation gets `content-type: application/json`. That turns it into a
+ * CORS-preflighted request, which the backend's `cors` option already answers.
+ *
+ * A caller-set `content-type` is kept, and so is the browser's own for a
+ * `FormData`, `Blob` or `URLSearchParams` body: multipart uploads keep their
+ * boundary.
+ */
+export declare const cmsFetch: (input: string | URL, init?: RequestInit) => Promise<Response>;

package/dist/core/cms-fetch.js

@@ -0,0 +1,24 @@
+/**
+ * `fetch` for the CMS endpoint's mutating routes, with the editor's session
+ * cookie (`credentials: 'include'`) unless the caller overrides it.
+ *
+ * SvelteKit 3 treats a cross-origin `POST`/`PUT`/`PATCH`/`DELETE` that has no
+ * `content-type` like a form submission, and rejects it with a 403 unless the
+ * site's origin is in the backend's `csrf.trustedOrigins`. The admin bar talks
+ * to a cross-origin endpoint whenever the CMS is hosted (velastack.dev), so a
+ * bodiless mutation gets `content-type: application/json`. That turns it into a
+ * CORS-preflighted request, which the backend's `cors` option already answers.
+ *
+ * A caller-set `content-type` is kept, and so is the browser's own for a
+ * `FormData`, `Blob` or `URLSearchParams` body: multipart uploads keep their
+ * boundary.
+ */
+export const cmsFetch = (input, init = {}) => {
+    const method = (init.method ?? 'GET').toUpperCase();
+    const headers = new Headers(init.headers);
+    const bodyHasOwnType = init.body != null && typeof init.body !== 'string';
+    if (method !== 'GET' && method !== 'HEAD' && !headers.has('content-type') && !bodyHasOwnType) {
+        headers.set('content-type', 'application/json');
+    }
+    return fetch(input, { credentials: 'include', ...init, headers });
+};

package/dist/core/shapes/nav.d.ts

@@ -18,4 +18,4 @@ export declare const cmsNav: import("./form.js").FormShape<CmsNavValue>;
 /** Items with resolved hrefs, dropping items that have no label. */
 export declare const navView: (value: CmsNavValue) => NavItemView[];
 /** Whether `item` (or one of its children) points at the current page. */
-export declare const isActive: (item: NavItemView, url: URL | string) => boolean;
+export declare const isActive: (item: NavItemView, url: Pick<URL, "pathname"> | string) => boolean;