@velastack/cms 0.4.0 → 0.5.1

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

@@ -0,0 +1,218 @@
+<script lang="ts">
+	/**
+	 * The generic structured form: one input per `FormField`, grouped into
+	 * tabs when fields name a `group`, `half` fields sharing a row with the
+	 * next one, and `list` fields rendered as cards through `ListField`.
+	 * Works over a local draft: every change emits a new whole object.
+	 */
+	import type { FormField } from '../../core/shapes/form.js';
+	import type { CmsImageValue } from '../../core/shapes/image.js';
+	import type { CmsLinkValue } from '../../core/shapes/link.js';
+	import { get, type Tree } from '../../core/path.js';
+	import { setIn } from '../../core/structured.js';
+	import FieldInput from './field-input.svelte';
+	import LinkInput from './link-input.svelte';
+	import RichTextInput from './rich-text-input.svelte';
+	import ListField from './list-field.svelte';
+	import { Button } from './ui/button/index.js';
+	import { Textarea } from './ui/textarea/index.js';
+	import * as Tabs from './ui/tabs/index.js';
+
+	type Props = {
+		fields: readonly FormField[];
+		value: Tree;
+		onChange: (next: Tree) => void;
+	};
+	let { fields, value, onChange }: Props = $props();
+
+	const GENERAL = 'General';
+
+	// Tabs: named groups in first-seen order; ungrouped fields share a
+	// "General" tab that comes first. One group means no tabs at all.
+	const groups = $derived.by(() => {
+		const names: string[] = [];
+		for (const f of fields) {
+			const g = f.group ?? GENERAL;
+			if (!names.includes(g)) names.push(g);
+		}
+		if (names.includes(GENERAL)) {
+			names.splice(names.indexOf(GENERAL), 1);
+			names.unshift(GENERAL);
+		}
+		return names.map((name) => ({
+			name,
+			rows: pairRows(fields.filter((f) => (f.group ?? GENERAL) === name))
+		}));
+	});
+	let tab = $state('');
+	$effect(() => {
+		if (!groups.some((g) => g.name === tab)) tab = groups[0]?.name ?? '';
+	});
+
+	/** A `half` field shares its row with the field after it. */
+	const pairRows = (list: readonly FormField[]): FormField[][] => {
+		const rows: FormField[][] = [];
+		for (let i = 0; i < list.length; i++) {
+			const f = list[i];
+			if (f.half && i + 1 < list.length && list[i + 1].type !== 'list') {
+				rows.push([f, list[i + 1]]);
+				i++;
+			} else rows.push([f]);
+		}
+		return rows;
+	};
+
+	const read = (key: string): unknown => get(value, key);
+	const write = (key: string, next: unknown) => onChange(setIn(value, key, next));
+
+	const str = (v: unknown): string => (typeof v === 'string' ? v : '');
+	const strings = (v: unknown): string[] =>
+		Array.isArray(v) ? v.map((s) => (typeof s === 'string' ? s : '')) : [];
+	const images = (v: unknown): CmsImageValue[] =>
+		Array.isArray(v) ? (v.filter((i) => i && typeof i === 'object') as CmsImageValue[]) : [];
+	const rating = (v: unknown): number => (typeof v === 'number' ? v : 0);
+	const asObject = (v: unknown): Tree => (v && typeof v === 'object' ? (v as Tree) : { url: null });
+</script>
+
+{#snippet input(f: FormField)}
+	{#if f.type === 'html'}
+		<RichTextInput
+			value={str(read(f.key))}
+			label={f.label}
+			onChange={(html) => write(f.key, html)}
+		/>
+	{:else if f.type === 'link'}
+		<LinkInput
+			value={(read(f.key) as CmsLinkValue | null) ?? null}
+			label={f.label}
+			onChange={(next) => write(f.key, next)}
+		/>
+	{:else if f.type === 'strings'}
+		<label class="vela:flex vela:flex-col vela:gap-1.5">
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">{f.label}</span>
+			<Textarea
+				value={strings(read(f.key)).join('\n')}
+				placeholder={f.placeholder ?? 'One per line'}
+				oninput={(e) => write(f.key, e.currentTarget.value.split('\n'))}
+			/>
+		</label>
+	{:else if f.type === 'rating'}
+		<div class="vela:flex vela:flex-col vela:gap-1.5">
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">{f.label}</span>
+			<div class="vela:flex vela:gap-0.5" role="radiogroup" aria-label={f.label}>
+				{#each [1, 2, 3, 4, 5] as n (n)}
+					<button
+						type="button"
+						role="radio"
+						aria-checked={rating(read(f.key)) === n}
+						aria-label={`${n} of 5`}
+						class="vela:cursor-pointer vela:text-[18px] vela:leading-none {n <= rating(read(f.key))
+							? 'vela:text-[var(--cms-status-warn-text)]'
+							: 'vela:text-bar-text-tertiary'}"
+						onclick={() => write(f.key, rating(read(f.key)) === n ? null : n)}
+					>
+						★
+					</button>
+				{/each}
+			</div>
+		</div>
+	{:else if f.type === 'images'}
+		{@const list = images(read(f.key))}
+		<div class="vela:flex vela:flex-col vela:gap-2">
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">{f.label}</span>
+			{#each list as img, i (i)}
+				<div class="vela:flex vela:items-start vela:gap-2">
+					<FieldInput
+						type="image"
+						value={img}
+						onChange={(next) =>
+							write(
+								f.key,
+								list.map((x, j) => (j === i ? next : x))
+							)}
+						class="vela:flex-1"
+					/>
+					<Button
+						size="icon"
+						variant="ghost"
+						class="vela:h-9 vela:w-6 vela:shrink-0 vela:text-[var(--cms-status-error-text-base)]"
+						aria-label="Remove image"
+						onclick={() =>
+							write(
+								f.key,
+								list.filter((_, j) => j !== i)
+							)}
+					>
+						×
+					</Button>
+				</div>
+			{/each}
+			<Button
+				variant="outline"
+				size="pill"
+				class="vela:self-start"
+				onclick={() => write(f.key, [...list, { url: null }])}
+			>
+				+ Add image
+			</Button>
+		</div>
+	{:else if f.type === 'image'}
+		<FieldInput
+			type="image"
+			label={f.label}
+			value={asObject(read(f.key))}
+			placeholder={f.placeholder}
+			onChange={(next) => write(f.key, next)}
+		/>
+	{:else if f.type === 'list'}
+		<ListField
+			label={f.label}
+			itemLabel={f.itemLabel ?? 'item'}
+			titleKey={f.titleKey}
+			fields={f.fields ?? []}
+			blank={f.blank ?? (() => ({}))}
+			items={(read(f.key) as Tree[] | undefined) ?? []}
+			onChange={(items) => write(f.key, items)}
+		/>
+	{:else}
+		<FieldInput
+			type={f.type}
+			label={f.label}
+			value={read(f.key)}
+			placeholder={f.placeholder}
+			values={f.values}
+			names={f.names}
+			onChange={(next) => write(f.key, next)}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet rows(list: FormField[][])}
+	{#each list as row, i (i)}
+		{#if row.length === 2}
+			<div class="vela:grid vela:grid-cols-2 vela:gap-2 vela:items-start">
+				{@render input(row[0])}
+				{@render input(row[1])}
+			</div>
+		{:else}
+			{@render input(row[0])}
+		{/if}
+	{/each}
+{/snippet}
+
+{#if groups.length > 1}
+	<Tabs.Root bind:value={tab}>
+		<Tabs.List aria-label="Sections">
+			{#each groups as g (g.name)}
+				<Tabs.Trigger value={g.name}>{g.name}</Tabs.Trigger>
+			{/each}
+		</Tabs.List>
+		{#each groups as g (g.name)}
+			<Tabs.Content value={g.name} class="vela:flex vela:flex-col vela:gap-3 vela:pt-3">
+				{@render rows(g.rows)}
+			</Tabs.Content>
+		{/each}
+	</Tabs.Root>
+{:else if groups.length === 1}
+	{@render rows(groups[0].rows)}
+{/if}

package/dist/components/admin-bar/fields-form.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+     * The generic structured form: one input per `FormField`, grouped into
+     * tabs when fields name a `group`, `half` fields sharing a row with the
+     * next one, and `list` fields rendered as cards through `ListField`.
+     * Works over a local draft: every change emits a new whole object.
+     */
+import type { FormField } from '../../core/shapes/form.js';
+import { type Tree } from '../../core/path.js';
+type Props = {
+    fields: readonly FormField[];
+    value: Tree;
+    onChange: (next: Tree) => void;
+};
+declare const FieldsForm: import("svelte").Component<Props, {}, "">;
+type FieldsForm = ReturnType<typeof FieldsForm>;
+export default FieldsForm;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	// Lucide `pencil` icon path data (https://lucide.dev) — ISC License,
+	// Copyright (c) Lucide Icons and Contributors. See ./types.ts.
+	import Icon from './icon.svelte';
+	import type { IconNode } from './types.js';
+
+	const iconNode: IconNode = [
+		[
+			'path',
+			{
+				d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'
+			}
+		],
+		['path', { d: 'm15 5 4 4' }]
+	];
+	let props = $props();
+</script>
+
+<Icon {iconNode} {...props} />

package/dist/components/admin-bar/icons/pencil.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Pencil: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pencil = ReturnType<typeof Pencil>;
+export default Pencil;

package/dist/components/admin-bar/keyboard-shortcuts-dialog.svelte

@@ -36,7 +36,7 @@
 			heading: 'Site',
 			entries: [
 				{ keys: '⌘N', label: 'New page' },
-				{ keys: '⌘,', label: 'Site settings' }
+				{ keys: '⌘,', label: 'Site options' }
 			]
 		},
 		{

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+	/**
+	 * A link field inside a structured editor: a page from the site or an
+	 * external URL, plus "open in a new tab". `value` is a `CmsLinkValue`
+	 * or `null`; `onChange(null)` clears it.
+	 */
+	import { untrack } from 'svelte';
+	import { page } from '$app/state';
+	import type { CmsLinkValue } from '../../core/shapes/link.js';
+	import { fetchPageOptions, pageOptionValue, type PageOption } from './page-options.js';
+	import { Input } from './ui/input/index.js';
+	import { Checkbox } from './ui/checkbox/index.js';
+
+	type Props = {
+		value: CmsLinkValue | null;
+		onChange: (next: CmsLinkValue | null) => void;
+		label?: string;
+	};
+	let { value, onChange, label }: Props = $props();
+
+	const endpoint = $derived(page.data.cms?.endpoint ?? '/api/cms');
+	const selectClass =
+		'vela:flex vela:h-9 vela:w-full vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)]' +
+		' vela:bg-[var(--cms-bar-bg-hover)] vela:px-3 vela:py-1 vela:text-[13px] vela:text-bar-text' +
+		' vela:focus:outline-none vela:focus:ring-2 vela:focus:ring-[var(--cms-accent)]';
+
+	let mode = $state<'page' | 'url'>(
+		untrack(() => (value?.href && !value.routeId ? 'url' : 'page'))
+	);
+	let options = $state<PageOption[] | null>(null);
+	$effect(() => {
+		if (mode === 'page' && options === null) {
+			void fetchPageOptions(endpoint).then((o) => (options = o));
+		}
+	});
+
+	const selected = $derived(
+		value?.routeId ? pageOptionValue(value.routeId, value.params ?? {}) : ''
+	);
+	const newTab = $derived(value?.newTab === true);
+
+	const emit = (next: CmsLinkValue) => {
+		onChange(next.href || next.routeId ? next : null);
+	};
+	const choosePage = (key: string) => {
+		const opt = options?.find((o) => o.value === key);
+		if (!opt) return emit({ newTab });
+		emit({ routeId: opt.routeId, params: opt.params, newTab });
+	};
+	const setUrl = (href: string) => emit({ href: href.trim(), newTab });
+	const setNewTab = (checked: boolean) => {
+		if (value) emit({ ...value, newTab: checked });
+	};
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-1.5">
+	<div class="vela:flex vela:items-center vela:justify-between">
+		<span class="vela:text-[12px] vela:text-bar-text-secondary">{label ?? 'Link'}</span>
+		<span
+			class="vela:inline-flex vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:p-0.5 vela:text-[11px]"
+			role="radiogroup"
+			aria-label="Link type"
+		>
+			{#each [['page', 'Page'], ['url', 'URL']] as const as [key, name] (key)}
+				<button
+					type="button"
+					role="radio"
+					aria-checked={mode === key}
+					class="vela:rounded vela:px-2 vela:py-0.5 vela:cursor-pointer vela:text-bar-text-secondary aria-checked:vela:bg-[var(--cms-bar-bg-hover)] aria-checked:vela:text-bar-text"
+					onclick={() => (mode = key)}
+				>
+					{name}
+				</button>
+			{/each}
+		</span>
+	</div>
+	{#if mode === 'page'}
+		<select
+			class={selectClass}
+			value={selected}
+			onchange={(e) => choosePage(e.currentTarget.value)}
+		>
+			<option value="">{options === null ? 'Loading…' : '— No link —'}</option>
+			{#each options ?? [] as opt (opt.value)}
+				<option value={opt.value}>{opt.label}</option>
+			{/each}
+		</select>
+	{:else}
+		<Input
+			type="url"
+			value={value?.href ?? ''}
+			placeholder="https://…"
+			oninput={(e) => setUrl(e.currentTarget.value)}
+		/>
+	{/if}
+	<label
+		class="vela:flex vela:items-center vela:gap-2 vela:text-[12px] vela:text-bar-text-secondary"
+	>
+		<Checkbox checked={newTab} onCheckedChange={(c) => setNewTab(c === true)} disabled={!value} />
+		Open in a new tab
+	</label>
+</div>

package/dist/components/admin-bar/link-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CmsLinkValue } from '../../core/shapes/link.js';
+type Props = {
+    value: CmsLinkValue | null;
+    onChange: (next: CmsLinkValue | null) => void;
+    label?: string;
+};
+declare const LinkInput: import("svelte").Component<Props, {}, "">;
+type LinkInput = ReturnType<typeof LinkInput>;
+export default LinkInput;

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+	/**
+	 * A list of items inside a structured form: one collapsible card per
+	 * item, up/down/remove buttons, and an add button. Every item carries a
+	 * stable `id` (new ones get a random one), so translations and reorders
+	 * never lose track of an item.
+	 */
+	import type { FormField } from '../../core/shapes/form.js';
+	import type { Tree } from '../../core/path.js';
+	import { moveItem, newItemId } from '../../core/structured.js';
+	import FieldsForm from './fields-form.svelte';
+	import ReorderButtons from './reorder-buttons.svelte';
+	import ChevronDownIcon from './icons/chevron-down.svelte';
+	import ChevronRightIcon from './icons/chevron-right.svelte';
+	import { Button } from './ui/button/index.js';
+
+	type Props = {
+		label: string;
+		itemLabel: string;
+		titleKey?: string;
+		fields: readonly FormField[];
+		blank: () => Tree;
+		items: Tree[];
+		onChange: (items: Tree[]) => void;
+	};
+	let { label, itemLabel, titleKey, fields, blank, items, onChange }: Props = $props();
+
+	let open = $state(new Set<string>());
+	const toggle = (id: string) => {
+		const next = new Set(open);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		open = next;
+	};
+
+	const idOf = (item: Tree, i: number): string =>
+		typeof item.id === 'string' && item.id !== '' ? item.id : `item-${i}`;
+
+	const titleOf = (item: Tree, i: number): string => {
+		const t = titleKey ? item[titleKey] : undefined;
+		if (typeof t === 'string' && t.trim() !== '') return t;
+		return `${itemLabel[0].toUpperCase()}${itemLabel.slice(1)} ${i + 1}`;
+	};
+
+	const add = () => {
+		const id = newItemId();
+		onChange([...items, { id, ...blank() }]);
+		open = new Set([...open, id]);
+	};
+	const replace = (i: number, next: Tree) => onChange(items.map((it, j) => (j === i ? next : it)));
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-2">
+	<span class="vela:text-[12px] vela:text-bar-text-secondary">{label}</span>
+	{#each items as item, i (idOf(item, i))}
+		{@const id = idOf(item, i)}
+		{@const expanded = open.has(id)}
+		<div class="vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)]">
+			<div class="vela:flex vela:items-center vela:gap-1 vela:pl-1 vela:pr-1.5 vela:py-1">
+				<button
+					type="button"
+					class="vela:flex vela:flex-1 vela:min-w-0 vela:items-center vela:gap-1.5 vela:cursor-pointer vela:text-left vela:text-[13px] vela:text-bar-text"
+					aria-expanded={expanded}
+					onclick={() => toggle(id)}
+				>
+					{#if expanded}
+						<ChevronDownIcon class="vela:size-3.5 vela:shrink-0 vela:text-bar-text-tertiary" />
+					{:else}
+						<ChevronRightIcon class="vela:size-3.5 vela:shrink-0 vela:text-bar-text-tertiary" />
+					{/if}
+					<span class="vela:truncate">{titleOf(item, i)}</span>
+				</button>
+				<ReorderButtons
+					index={i}
+					count={items.length}
+					label={itemLabel}
+					onMove={(from, to) => onChange(moveItem(items, from, to))}
+					onRemove={(idx) => onChange(items.filter((_, j) => j !== idx))}
+				/>
+			</div>
+			{#if expanded}
+				<div
+					class="vela:flex vela:flex-col vela:gap-3 vela:border-t vela:border-[var(--cms-bar-divider)] vela:p-3"
+				>
+					<FieldsForm {fields} value={item} onChange={(next) => replace(i, next)} />
+				</div>
+			{/if}
+		</div>
+	{/each}
+	<Button variant="outline" size="pill" class="vela:self-start" onclick={add}>
+		+ Add {itemLabel}
+	</Button>
+</div>

package/dist/components/admin-bar/list-field.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+     * A list of items inside a structured form: one collapsible card per
+     * item, up/down/remove buttons, and an add button. Every item carries a
+     * stable `id` (new ones get a random one), so translations and reorders
+     * never lose track of an item.
+     */
+import type { FormField } from '../../core/shapes/form.js';
+import type { Tree } from '../../core/path.js';
+type Props = {
+    label: string;
+    itemLabel: string;
+    titleKey?: string;
+    fields: readonly FormField[];
+    blank: () => Tree;
+    items: Tree[];
+    onChange: (items: Tree[]) => void;
+};
+declare const ListField: import("svelte").Component<Props, {}, "">;
+type ListField = ReturnType<typeof ListField>;
+export default ListField;

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

@@ -1,5 +1,9 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { cmsStore, type ReleaseItem } from '../cms/cms-store.svelte.js';
+	import type { CmsPayload } from '../cms/scope.js';
+	import { getStructured } from '../../core/structured-registry.js';
+	import { countTranslations, extractTranslations } from '../../core/structured.js';
 	import PanelFooter from './panel-footer.svelte';
 	import PanelHeader from './panel-header.svelte';
 	import Panel from './panel.svelte';
@@ -42,12 +46,48 @@
 
 	const counts = $derived(cmsStore.workingCopyCountsByLocale);
 
+	// Translatable strings inside structured values on this route, per
+	// locale: every usage the manifest recorded whose component registered a
+	// structured schema. Overlays for the other locales are loaded on open so
+	// stored translations count.
+	$effect(() => {
+		for (const locale of locales) {
+			if (locale !== defaultLocale) void cmsStore.loadLocaleOverlay(locale);
+		}
+	});
+
+	const stringCounts = $derived.by(() => {
+		const out = new Map<string, { total: number; missing: number }>();
+		const cms = page.data.cms as CmsPayload | undefined;
+		if (!cms) return out;
+		for (const locale of locales) {
+			if (locale === defaultLocale) continue;
+			let total = 0;
+			let missing = 0;
+			for (const scope of Object.values(cms.scopes)) {
+				const ref = { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params };
+				for (const usage of scope.usages ?? []) {
+					const schema = getStructured(usage.component);
+					if (!schema) continue;
+					const value = schema.read(cmsStore.getValue(ref, usage.name, defaultLocale), undefined);
+					const overlay = extractTranslations(cmsStore.getValue(ref, usage.name, locale));
+					const c = countTranslations(value, overlay, schema);
+					total += c.total;
+					missing += c.missing;
+				}
+			}
+			out.set(locale, { total, missing });
+		}
+		return out;
+	});
+
 	type Row = {
 		locale: string;
 		isDefault: boolean;
 		isCurrent: boolean;
 		edits: number;
 		missing: number;
+		strings: { total: number; missing: number } | null;
 	};
 
 	const rows = $derived.by<Row[]>(() => {
@@ -65,7 +105,8 @@
 				isDefault: locale === defaultLocale,
 				isCurrent: locale === currentLocale,
 				edits: counts[locale]?.total ?? 0,
-				missing
+				missing,
+				strings: stringCounts.get(locale) ?? null
 			};
 		});
 	});

package/dist/components/admin-bar/page-config.d.ts

@@ -57,5 +57,12 @@ export declare const normalizeField: (f: CmsPageField) => NormalizedField;
  * it was declared in shorthand string form or object form.
  */
 export declare const fieldType: (schema: MetadataFieldSchema) => MetadataPrimitive | "enum";
-/** Default metadata schema applied when a route has no `page.cms.ts`. */
+/**
+ * Metadata every route gets, with or without a `page.cms.ts`: the search
+ * snippet, the share card, and the two indexing controls. A route's own
+ * `metadata` schema is merged over this, so it only ever adds or overrides.
+ * The Vite plugin's `DEFAULT_PAGE_METADATA_PATHS` mirrors these keys.
+ */
 export declare const DEFAULT_METADATA_SCHEMA: CmsPageMetadataSchema;
+/** A route's effective metadata schema: the defaults plus its own keys. */
+export declare const metadataSchemaFor: (own: CmsPageMetadataSchema | undefined) => CmsPageMetadataSchema;

package/dist/components/admin-bar/page-config.js

@@ -17,8 +17,21 @@ export const normalizeField = (f) => typeof f === 'string'
  * it was declared in shorthand string form or object form.
  */
 export const fieldType = (schema) => typeof schema === 'string' ? schema : schema.type;
-/** Default metadata schema applied when a route has no `page.cms.ts`. */
+/**
+ * Metadata every route gets, with or without a `page.cms.ts`: the search
+ * snippet, the share card, and the two indexing controls. A route's own
+ * `metadata` schema is merged over this, so it only ever adds or overrides.
+ * The Vite plugin's `DEFAULT_PAGE_METADATA_PATHS` mirrors these keys.
+ */
 export const DEFAULT_METADATA_SCHEMA = {
     title: 'string',
-    description: 'long-string'
+    description: 'long-string',
+    ogTitle: 'string',
+    ogDescription: 'long-string',
+    ogImage: 'image',
+    twitterCard: { type: 'enum', values: ['summary', 'summary_large_image'] },
+    canonical: 'string',
+    noindex: 'boolean'
 };
+/** A route's effective metadata schema: the defaults plus its own keys. */
+export const metadataSchemaFor = (own) => own ? { ...DEFAULT_METADATA_SCHEMA, ...own } : DEFAULT_METADATA_SCHEMA;

package/dist/components/admin-bar/page-options.d.ts

@@ -0,0 +1,24 @@
+type PageEntry = {
+    params: Record<string, string>;
+    isDraft: boolean;
+    isDeletePending: boolean;
+    redirectTo?: string;
+    gone?: boolean;
+};
+type PageRoute = {
+    routeId: string;
+    ownedParams: string[];
+    entries: PageEntry[];
+};
+export type PageOption = {
+    /** `routeId::{params}` — stable key for a select. */
+    value: string;
+    /** The resolved URL, shown to the editor. */
+    label: string;
+    routeId: string;
+    params: Record<string, string>;
+};
+export declare const pageOptionValue: (routeId: string, params: Record<string, string>) => string;
+export declare const toPageOptions: (routes: PageRoute[]) => PageOption[];
+export declare const fetchPageOptions: (endpoint: string) => Promise<PageOption[]>;
+export {};

package/dist/components/admin-bar/page-options.js

@@ -0,0 +1,53 @@
+/**
+ * The site's pages as link targets, for the page picker in link editors.
+ * Fetched once per endpoint and shared by every picker on the page.
+ */
+import { resolveRouteUrl } from './resolve-route.js';
+export const pageOptionValue = (routeId, params) => `${routeId}::${JSON.stringify(params)}`;
+export const toPageOptions = (routes) => {
+    const opts = [];
+    for (const r of routes) {
+        const entries = r.entries.length > 0
+            ? r.entries
+            : [{ params: {}, 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;
+            try {
+                url = resolveRouteUrl(r.routeId, ent.params);
+            }
+            catch {
+                continue;
+            }
+            opts.push({
+                value: pageOptionValue(r.routeId, ent.params),
+                label: url,
+                routeId: r.routeId,
+                params: ent.params
+            });
+        }
+    }
+    opts.sort((a, b) => a.label.localeCompare(b.label));
+    return opts;
+};
+const cache = new Map();
+export const fetchPageOptions = (endpoint) => {
+    let p = cache.get(endpoint);
+    if (!p) {
+        p = fetch(`${endpoint}/pages`, { credentials: 'include' })
+            .then(async (res) => {
+            if (!res.ok)
+                return [];
+            const data = (await res.json());
+            return toPageOptions(data.routes);
+        })
+            .catch(() => {
+            cache.delete(endpoint);
+            return [];
+        });
+        cache.set(endpoint, p);
+    }
+    return p;
+};