@velastack/cms 0.4.0 → 0.5.1

package/dist/components/cms/cms-date-time.svelte

@@ -5,6 +5,7 @@
 
 	export type CmsDateTimeProps = {
 		name: string;
+		scope?: string;
 		/**
 		 * `'datetime'` (default) → `<input type="datetime-local">`, stores
 		 * `YYYY-MM-DDTHH:MM`. `'date'` → `<input type="date">`, stores
@@ -13,44 +14,43 @@
 		 */
 		mode?: CmsDateTimeMode;
 		fallback?: string;
-		/** Per-item override used by `CmsRepeater`. */
+		/** Per-item override used by structured components. */
 		value?: unknown;
 		children?: Snippet<[string]>;
 	};
 </script>
 
 <script lang="ts">
-	import { getCmsScope } from './scope.js';
-	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+	import { useCmsField } from './use-cms-field.svelte.js';
 
-	let { name, mode = 'datetime', fallback, value, children }: CmsDateTimeProps = $props();
+	let { name, scope, mode = 'datetime', fallback, value, children }: CmsDateTimeProps = $props();
 
-	const scope = getCmsScope();
-	const ref = $derived<CmsScopeRef | null>(
-		scope ? { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params } : null
+	const field = useCmsField(
+		() => ({ name, scope, value }),
+		(raw): string | undefined => {
+			if (raw === undefined) return fallback;
+			return typeof raw === 'string' ? raw : '';
+		}
 	);
 
-	const resolved = $derived.by(() => {
-		if (value !== undefined) return value;
-		return ref ? cmsStore.getValue(ref, name) : undefined;
-	});
-
-	const current = $derived(typeof resolved === 'string' ? resolved : fallback);
-	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
+	const current = $derived(field.current);
 </script>
 
-{#if editable && ref}
+{#if field.editable && field.ref}
 	{#await import('./cms-date-time-editable.svelte') then { default: Editable }}
-		<Editable scope={ref} {name} {mode} initial={current} />
+		<Editable scope={field.ref} {name} {mode} initial={current} />
 	{/await}
 {:else if current && children}
 	{@render children(current)}
 {:else if current}
 	{current}
+{:else if field.raw === null}
+	<!-- cleared by the editor -->
 {:else if children}
 	{@render children('')}
 {:else}
-	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>{name}</span
+	<span class="cms-missing" data-cms-name={name} data-cms-scope={field.ref?.scopeId ?? '?'}
+		>{name}</span
 	>
 {/if}
 

package/dist/components/cms/cms-date-time.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 export type CmsDateTimeMode = 'datetime' | 'date' | 'time';
 export type CmsDateTimeProps = {
     name: string;
+    scope?: string;
     /**
      * `'datetime'` (default) → `<input type="datetime-local">`, stores
      * `YYYY-MM-DDTHH:MM`. `'date'` → `<input type="date">`, stores
@@ -10,7 +11,7 @@ export type CmsDateTimeProps = {
      */
     mode?: CmsDateTimeMode;
     fallback?: string;
-    /** Per-item override used by `CmsRepeater`. */
+    /** Per-item override used by structured components. */
     value?: unknown;
     children?: Snippet<[string]>;
 };

package/dist/components/cms/cms-faq.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" module>
+	/** `CmsFaq`: questions and rich answers. */
+	export * from '../../core/shapes/faq.js';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Structured from './cms-structured.svelte';
+	import { cmsFaq, faqView, type CmsFaqValue, type FaqItem } from '../../core/shapes/faq.js';
+
+	type Props = {
+		name: string;
+		scope?: string;
+		/** The full value, or a bare item list. */
+		fallback?: Partial<CmsFaqValue> | Array<Partial<CmsFaqValue['items'][number]>>;
+		value?: unknown;
+		children: Snippet<[FaqItem[]]>;
+	};
+	let { name, scope, fallback, value, children }: Props = $props();
+</script>
+
+<Structured schema={cmsFaq} {name} {scope} {fallback} {value} view={faqView} {children} />

package/dist/components/cms/cms-faq.svelte.d.ts

@@ -0,0 +1,15 @@
+/** `CmsFaq`: questions and rich answers. */
+export * from '../../core/shapes/faq.js';
+import type { Snippet } from 'svelte';
+import { type CmsFaqValue, type FaqItem } from '../../core/shapes/faq.js';
+type Props = {
+    name: string;
+    scope?: string;
+    /** The full value, or a bare item list. */
+    fallback?: Partial<CmsFaqValue> | Array<Partial<CmsFaqValue['items'][number]>>;
+    value?: unknown;
+    children: Snippet<[FaqItem[]]>;
+};
+declare const CmsFaq: import("svelte").Component<Props, {}, "">;
+type CmsFaq = ReturnType<typeof CmsFaq>;
+export default CmsFaq;

package/dist/components/cms/cms-gallery.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	/** `CmsGallery` preset: image and caption. */
+	export type { CmsGalleryValue, GalleryItem } from '../../core/shapes/presets.js';
+	export { cmsGallery } from '../../core/shapes/presets.js';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Structured from './cms-structured.svelte';
+	import { cmsGallery, type CmsGalleryValue, type GalleryItem } from '../../core/shapes/presets.js';
+
+	type Props = {
+		name: string;
+		scope?: string;
+		/** The full value, or a bare item list. */
+		fallback?: Partial<CmsGalleryValue> | Partial<GalleryItem>[];
+		value?: unknown;
+		children: Snippet<[GalleryItem[]]>;
+	};
+	let { name, scope, fallback, value, children }: Props = $props();
+</script>
+
+<Structured
+	schema={cmsGallery}
+	{name}
+	{scope}
+	{fallback}
+	{value}
+	view={(v: CmsGalleryValue) => v.items.filter((i) => i.image !== null)}
+	{children}
+/>

package/dist/components/cms/cms-gallery.svelte.d.ts

@@ -0,0 +1,16 @@
+/** `CmsGallery` preset: image and caption. */
+export type { CmsGalleryValue, GalleryItem } from '../../core/shapes/presets.js';
+export { cmsGallery } from '../../core/shapes/presets.js';
+import type { Snippet } from 'svelte';
+import { type CmsGalleryValue, type GalleryItem } from '../../core/shapes/presets.js';
+type Props = {
+    name: string;
+    scope?: string;
+    /** The full value, or a bare item list. */
+    fallback?: Partial<CmsGalleryValue> | Partial<GalleryItem>[];
+    value?: unknown;
+    children: Snippet<[GalleryItem[]]>;
+};
+declare const CmsGallery: import("svelte").Component<Props, {}, "">;
+type CmsGallery = ReturnType<typeof CmsGallery>;
+export default CmsGallery;

package/dist/components/cms/cms-hours-editable.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	/**
+	 * The bespoke editor for `CmsHours`: a week grid (closed toggle, one or
+	 * two ranges per day, copy Monday across) above the shape's other fields
+	 * (note, exceptions, labels) rendered through the generic form.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { Tree } from '../../core/path.js';
+	import type { FormShape } from '../../core/shapes/form.js';
+	import {
+		DAY_KEYS,
+		dayNames,
+		type CmsHoursValue,
+		type DayKey,
+		type HoursRange
+	} from '../../core/shapes/hours.js';
+	import type { CmsField } from './use-cms-field.svelte.js';
+	import { cmsStore } from './cms-store.svelte.js';
+	import StructuredEditorPopover from '../admin-bar/structured-editor-popover.svelte';
+	import FieldsForm from '../admin-bar/fields-form.svelte';
+	import { Button } from '../admin-bar/ui/button/index.js';
+	import { Input } from '../admin-bar/ui/input/index.js';
+	import { Switch } from '../admin-bar/ui/switch/index.js';
+
+	type Props = {
+		field: CmsField<CmsHoursValue>;
+		schema: FormShape<CmsHoursValue>;
+		preview: Snippet;
+	};
+	let { field, schema, preview }: Props = $props();
+
+	const names = $derived(dayNames(cmsStore.activeLocale || 'en', 'long'));
+	const DEFAULT_RANGE: HoursRange = { open: '09:00', close: '17:00' };
+
+	const setDay = (
+		draft: CmsHoursValue,
+		key: DayKey,
+		patch: Partial<CmsHoursValue['days'][DayKey]>
+	) => ({
+		...draft,
+		days: { ...draft.days, [key]: { ...draft.days[key], ...patch } }
+	});
+	const setRange = (
+		draft: CmsHoursValue,
+		key: DayKey,
+		index: number,
+		patch: Partial<HoursRange>
+	): CmsHoursValue =>
+		setDay(draft, key, {
+			ranges: draft.days[key].ranges.map((r, i) => (i === index ? { ...r, ...patch } : r))
+		});
+	const toggleClosed = (draft: CmsHoursValue, key: DayKey, closed: boolean): CmsHoursValue =>
+		setDay(draft, key, {
+			closed,
+			ranges:
+				!closed && draft.days[key].ranges.length === 0 ? [DEFAULT_RANGE] : draft.days[key].ranges
+		});
+	const copyMonday = (draft: CmsHoursValue, keys: readonly DayKey[]): CmsHoursValue => {
+		const mon = draft.days.mon;
+		const days = { ...draft.days };
+		for (const k of keys)
+			days[k] = { closed: mon.closed, ranges: mon.ranges.map((r) => ({ ...r })) };
+		return { ...draft, days };
+	};
+</script>
+
+<StructuredEditorPopover {field} {schema} label={schema.label} {preview}>
+	{#snippet editor(draft: CmsHoursValue, update: (next: CmsHoursValue) => void)}
+		<div class="vela:flex vela:flex-col vela:gap-2">
+			{#each DAY_KEYS as key (key)}
+				{@const day = draft.days[key]}
+				<div class="vela:flex vela:items-start vela:gap-2">
+					<label
+						class="vela:flex vela:w-24 vela:shrink-0 vela:items-center vela:gap-2 vela:pt-2 vela:text-[13px] vela:text-bar-text"
+					>
+						<Switch
+							checked={!day.closed}
+							onCheckedChange={(open) => update(toggleClosed(draft, key, !open))}
+							aria-label={`${names[key]} open`}
+						/>
+						<span class="vela:truncate">{names[key]}</span>
+					</label>
+					<div class="vela:flex vela:flex-1 vela:flex-col vela:gap-1">
+						{#if day.closed}
+							<span class="vela:pt-2 vela:text-[12px] vela:text-bar-text-tertiary"
+								>{draft.labels.closed}</span
+							>
+						{:else}
+							{#each day.ranges as range, i (i)}
+								<div class="vela:flex vela:items-center vela:gap-1">
+									<Input
+										type="time"
+										value={range.open}
+										aria-label={`${names[key]} opens`}
+										oninput={(e) =>
+											update(setRange(draft, key, i, { open: e.currentTarget.value }))}
+									/>
+									<span class="vela:text-bar-text-tertiary">–</span>
+									<Input
+										type="time"
+										value={range.close}
+										aria-label={`${names[key]} closes`}
+										oninput={(e) =>
+											update(setRange(draft, key, i, { close: e.currentTarget.value }))}
+									/>
+									{#if day.ranges.length > 1}
+										<Button
+											size="icon"
+											variant="ghost"
+											class="vela:h-6 vela:w-6 vela:shrink-0"
+											aria-label="Remove shift"
+											onclick={() =>
+												update(
+													setDay(draft, key, { ranges: day.ranges.filter((_, j) => j !== i) })
+												)}
+										>
+											×
+										</Button>
+									{:else}
+										<Button
+											size="xs"
+											variant="ghost"
+											class="vela:shrink-0"
+											aria-label="Add a second shift"
+											onclick={() =>
+												update(
+													setDay(draft, key, {
+														ranges: [...day.ranges, { open: '18:00', close: '22:00' }]
+													})
+												)}
+										>
+											+ Split
+										</Button>
+									{/if}
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
+			{/each}
+			<div class="vela:flex vela:gap-1.5">
+				<Button
+					variant="outline"
+					size="pill"
+					onclick={() => update(copyMonday(draft, ['tue', 'wed', 'thu', 'fri']))}
+				>
+					Copy Monday to weekdays
+				</Button>
+				<Button variant="outline" size="pill" onclick={() => update(copyMonday(draft, DAY_KEYS))}>
+					Copy to all
+				</Button>
+			</div>
+		</div>
+		<FieldsForm
+			fields={schema.fields}
+			value={draft as unknown as Tree}
+			onChange={(next) => update(next as unknown as CmsHoursValue)}
+		/>
+	{/snippet}
+</StructuredEditorPopover>

package/dist/components/cms/cms-hours-editable.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+     * The bespoke editor for `CmsHours`: a week grid (closed toggle, one or
+     * two ranges per day, copy Monday across) above the shape's other fields
+     * (note, exceptions, labels) rendered through the generic form.
+     */
+import type { Snippet } from 'svelte';
+import type { FormShape } from '../../core/shapes/form.js';
+import { type CmsHoursValue } from '../../core/shapes/hours.js';
+import type { CmsField } from './use-cms-field.svelte.js';
+type Props = {
+    field: CmsField<CmsHoursValue>;
+    schema: FormShape<CmsHoursValue>;
+    preview: Snippet;
+};
+declare const CmsHoursEditable: import("svelte").Component<Props, {}, "">;
+type CmsHoursEditable = ReturnType<typeof CmsHoursEditable>;
+export default CmsHoursEditable;

package/dist/components/cms/cms-hours.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	/**
+	 * `CmsHours`: opening hours, edited in a week grid and rendered from the
+	 * derived view (`rows`, `today`, `isOpenNow`) in the visitor's locale.
+	 * `isOpenNow` is computed when the page renders; a prerendered page
+	 * shows the state at build time.
+	 */
+	export * from '../../core/shapes/hours.js';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Structured from './cms-structured.svelte';
+	import { cmsStore } from './cms-store.svelte.js';
+	import {
+		cmsHours,
+		hoursView,
+		type CmsHoursValue,
+		type HoursView
+	} from '../../core/shapes/hours.js';
+
+	type Props = {
+		name: string;
+		scope?: string;
+		fallback?: Partial<CmsHoursValue>;
+		value?: unknown;
+		children: Snippet<[HoursView]>;
+	};
+	let { name, scope, fallback, value, children }: Props = $props();
+	const locale = $derived(cmsStore.activeLocale || 'en');
+</script>
+
+<Structured
+	schema={cmsHours}
+	{name}
+	{scope}
+	{fallback}
+	{value}
+	view={(v: CmsHoursValue) => hoursView(v, locale)}
+	editable={() => import('./cms-hours-editable.svelte')}
+	{children}
+/>

package/dist/components/cms/cms-hours.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `CmsHours`: opening hours, edited in a week grid and rendered from the
+ * derived view (`rows`, `today`, `isOpenNow`) in the visitor's locale.
+ * `isOpenNow` is computed when the page renders; a prerendered page
+ * shows the state at build time.
+ */
+export * from '../../core/shapes/hours.js';
+import type { Snippet } from 'svelte';
+import { type CmsHoursValue, type HoursView } from '../../core/shapes/hours.js';
+type Props = {
+    name: string;
+    scope?: string;
+    fallback?: Partial<CmsHoursValue>;
+    value?: unknown;
+    children: Snippet<[HoursView]>;
+};
+declare const CmsHours: import("svelte").Component<Props, {}, "">;
+type CmsHours = ReturnType<typeof CmsHours>;
+export default CmsHours;

package/dist/components/cms/cms-image-editable.svelte

@@ -29,13 +29,17 @@
 	// Read leaves through `getValue` so live drafts reflect immediately. Fall
 	// back to the snapshot the display passed in when nothing's been written.
 	const currentUrl = $derived.by(() => {
-		const v = pathGet(cmsStore.getValue(scope, name), 'url');
+		const stored = cmsStore.getValue(scope, name);
+		const v = pathGet(stored, 'url');
 		if (typeof v === 'string') return v;
+		if (v === null || stored === null) return '';
 		return initial.url ?? '';
 	});
 	const currentAlt = $derived.by(() => {
-		const v = pathGet(cmsStore.getValue(scope, name), 'alt');
+		const stored = cmsStore.getValue(scope, name);
+		const v = pathGet(stored, 'alt');
 		if (typeof v === 'string') return v;
+		if (v === null || stored === null) return '';
 		return initial.alt ?? '';
 	});
 
@@ -55,8 +59,13 @@
 	let uploading = $state(false);
 	let error: string | null = $state(null);
 
-	const writeUrl = (v: string) => cmsStore.setValue(scope, `${name}.url`, v);
-	const writeAlt = (v: string) => cmsStore.setValue(scope, `${name}.alt`, v);
+	// Whole-object writes (see `core/structured.ts`): a cleared image is
+	// `{ url: null }`, which merges over the published tree as "cleared"
+	// instead of falling back to the template's demo image.
+	const writeUrl = (v: string) =>
+		cmsStore.setValue(scope, name, { url: v || null, alt: currentAlt || null });
+	const writeAlt = (v: string) =>
+		cmsStore.setValue(scope, name, { url: currentUrl || null, alt: v || null });
 
 	const upload = async (file: File) => {
 		if (!file.type.startsWith('image/')) {

package/dist/components/cms/cms-image.svelte

@@ -1,62 +1,47 @@
 <script lang="ts" module>
-	export type CmsImageValue = {
-		url?: string;
-		alt?: string;
-		width?: number;
-		height?: number;
-	};
+	export { normalizeImage } from '../../core/shapes/image.js';
+	export type { CmsImageValue } from '../../core/shapes/image.js';
 </script>
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { getCmsScope } from './scope.js';
-	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+	import { useCmsField } from './use-cms-field.svelte.js';
+	import { normalizeImage, type CmsImageValue } from '../../core/shapes/image.js';
 
 	type Props = {
 		name: string;
-		/** Fallback alt text used when the branch has no `alt` leaf. */
+		scope?: string;
+		/** Fallback alt text used when the stored value has no `alt`. */
 		alt?: string;
-		fallback?: string;
+		/** A URL, or a full `{ url, alt }` value. */
+		fallback?: string | CmsImageValue;
 		value?: unknown;
 		children?: Snippet;
 	};
 
-	let { name, alt = '', fallback, value, children }: Props = $props();
+	let { name, scope, alt = '', fallback, value, children }: Props = $props();
 
-	const scope = getCmsScope();
-	const ref = $derived<CmsScopeRef | null>(
-		scope ? { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params } : null
+	const field = useCmsField(
+		() => ({ name, scope, value }),
+		(raw): CmsImageValue => (raw === undefined ? normalizeImage(fallback) : normalizeImage(raw))
 	);
 
-	const resolved = $derived.by(() => {
-		if (value !== undefined) return value;
-		return ref ? cmsStore.getValue(ref, name) : undefined;
-	});
-
-	// `<CmsImage>` owns a `{ url, alt, width?, height? }` branch. Accept a bare
-	// string as the URL leaf for legacy/value-prop callers.
-	const branch = $derived.by((): CmsImageValue | null => {
-		if (resolved == null) return null;
-		if (typeof resolved === 'string') return { url: resolved };
-		if (typeof resolved === 'object' && !Array.isArray(resolved)) return resolved as CmsImageValue;
-		return null;
-	});
-
-	const src = $derived(branch?.url ?? fallback ?? '');
-	const altText = $derived(branch?.alt ?? alt ?? '');
-	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
+	const src = $derived(field.current.url ?? '');
+	const altText = $derived(field.current.alt ?? alt);
 </script>
 
-{#if editable && ref}
+{#if field.editable && field.ref}
 	{#await import('./cms-image-editable.svelte') then { default: Editable }}
-		<Editable scope={ref} {name} initial={branch ?? {}} fallbackAlt={alt} />
+		<Editable scope={field.ref} {name} initial={field.current} fallbackAlt={alt} />
 	{/await}
 {:else if src}
 	<img class="cms-image" {src} alt={altText} />
+{:else if field.raw === null}
+	<!-- cleared by the editor -->
 {:else if children}
 	{@render children()}
 {:else}
-	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>
+	<span class="cms-missing" data-cms-name={name} data-cms-scope={field.ref?.scopeId ?? '?'}>
 		{name}
 	</span>
 {/if}

package/dist/components/cms/cms-image.svelte.d.ts

@@ -1,15 +1,14 @@
-export type CmsImageValue = {
-    url?: string;
-    alt?: string;
-    width?: number;
-    height?: number;
-};
+export { normalizeImage } from '../../core/shapes/image.js';
+export type { CmsImageValue } from '../../core/shapes/image.js';
 import type { Snippet } from 'svelte';
+import { type CmsImageValue } from '../../core/shapes/image.js';
 type Props = {
     name: string;
-    /** Fallback alt text used when the branch has no `alt` leaf. */
+    scope?: string;
+    /** Fallback alt text used when the stored value has no `alt`. */
     alt?: string;
-    fallback?: string;
+    /** A URL, or a full `{ url, alt }` value. */
+    fallback?: string | CmsImageValue;
     value?: unknown;
     children?: Snippet;
 };

package/dist/components/cms/cms-link-editable.svelte

@@ -4,6 +4,7 @@
 	import { page } from '$app/state';
 	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
 	import { resolveRouteUrl } from '../admin-bar/resolve-route.js';
+	import { fetchPageOptions, pageOptionValue, type PageOption } from '../admin-bar/page-options.js';
 	import type { CmsLinkValue, CmsLinkRenderProps } from './cms-link.svelte';
 	import { Button } from '../admin-bar/ui/button/index.js';
 	import { Input } from '../admin-bar/ui/input/index.js';
@@ -16,19 +17,6 @@
 	import XIcon from '../admin-bar/icons/x.svelte';
 	import Trash from '../admin-bar/icons/trash-2.svelte';
 
-	type PageEntry = {
-		params: Record<string, string>;
-		isDraft: boolean;
-		isDeletePending: boolean;
-		redirectTo?: string;
-		gone?: boolean;
-	};
-	type PageRoute = {
-		routeId: string;
-		ownedParams: string[];
-		entries: PageEntry[];
-	};
-
 	type Props = {
 		scope: CmsScopeRef;
 		name: string;
@@ -65,7 +53,7 @@
 	let urlInput = $state('');
 	let urlInputEl: HTMLInputElement | null = $state(null);
 
-	let pages: PageRoute[] = $state([]);
+	let pageOptions: PageOption[] = $state([]);
 	let pagesLoaded = $state(false);
 	let selectedValue = $state('');
 	let pageSelectOpen = $state(false);
@@ -128,61 +116,17 @@
 		else if (e.key === 'Escape') cancelMode(e);
 	};
 
-	const optionValueFor = (routeId: string, params: Record<string, string>) =>
-		`${routeId}::${JSON.stringify(params)}`;
-
 	const enterPageMode = async (e: Event) => {
 		e.preventDefault();
 		e.stopPropagation();
-		selectedValue = current.routeId ? optionValueFor(current.routeId, current.params ?? {}) : '';
+		selectedValue = current.routeId ? pageOptionValue(current.routeId, current.params ?? {}) : '';
 		mode = 'page';
 		if (!pagesLoaded) {
-			try {
-				const res = await fetch(`${endpoint}/pages`, { credentials: 'include' });
-				if (res.ok) {
-					const data = (await res.json()) as { routes: PageRoute[] };
-					pages = data.routes;
-				}
-			} catch {
-				/* ignore — picker shows "No pages found" */
-			}
+			pageOptions = await fetchPageOptions(endpoint);
 			pagesLoaded = true;
 		}
 	};
 
-	const pageOptions = $derived.by(() => {
-		const opts: {
-			value: string;
-			label: string;
-			routeId: string;
-			params: Record<string, string>;
-		}[] = [];
-		for (const r of pages) {
-			const entries =
-				r.entries.length > 0
-					? r.entries
-					: [{ params: {} as Record<string, string>, isDraft: false, isDeletePending: false }];
-			for (const ent of entries) {
-				// Tombstones (redirected / gone) aren't real link targets.
-				if (ent.redirectTo || ent.gone) continue;
-				let url: string;
-				try {
-					url = resolveRouteUrl(r.routeId, ent.params);
-				} catch {
-					continue;
-				}
-				opts.push({
-					value: optionValueFor(r.routeId, ent.params),
-					label: url,
-					routeId: r.routeId,
-					params: ent.params
-				});
-			}
-		}
-		opts.sort((a, b) => a.label.localeCompare(b.label));
-		return opts;
-	});
-
 	const applyPageValue = (value: string) => {
 		const opt = pageOptions.find((o) => o.value === value);
 		if (!opt) return;