@velastack/cms 0.5.0 → 0.6.0

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

@@ -2,7 +2,7 @@
 	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 '../cms/structured-registry.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';

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;
+};

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/rich-text-input.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * A rich text field inside a structured editor: the same TipTap setup as
+	 * the inline `CmsRichText` editor, bound to a local value instead of a
+	 * CMS path.
+	 */
+	import { onDestroy, onMount, untrack } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Toolbar from '../cms/cms-rich-text-toolbar.svelte';
+
+	type Props = {
+		value: string;
+		onChange: (html: string) => void;
+		label?: string;
+		placeholder?: string;
+	};
+	let { value, onChange, label }: Props = $props();
+
+	let host = $state<HTMLDivElement>();
+	let wrap = $state<HTMLDivElement>();
+	let editor = $state<Editor>();
+	let focused = $state(false);
+	let tick = $state(0);
+
+	onMount(() => {
+		editor = new Editor({
+			element: host,
+			extensions: [StarterKit.configure({ heading: { levels: [2, 3] } })],
+			content: value,
+			editorProps: { attributes: { class: 'cms-rich-text-input-pm' } },
+			onUpdate: ({ editor }) => onChange(editor.isEmpty ? '' : editor.getHTML()),
+			onTransaction: () => {
+				tick++;
+			}
+		});
+	});
+	onDestroy(() => editor?.destroy());
+
+	$effect(() => {
+		if (!editor || focused) return;
+		const next = value;
+		untrack(() => {
+			if (editor && editor.getHTML() !== next) {
+				editor.commands.setContent(next, { emitUpdate: false });
+			}
+		});
+	});
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-1.5">
+	{#if label}<span class="vela:text-[12px] vela:text-bar-text-secondary">{label}</span>{/if}
+	<div
+		class="cms-rich-text-input vela:relative vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:px-3 vela:py-2 vela:text-[13px] vela:text-bar-text"
+		class:focused
+		bind:this={wrap}
+		onfocusin={() => (focused = true)}
+		onfocusout={(e) => {
+			const next = e.relatedTarget as Node | null;
+			if (next && wrap?.contains(next)) return;
+			focused = false;
+		}}
+	>
+		{#if editor && focused}
+			<div class="vela:mb-2">
+				<Toolbar {editor} {tick} />
+			</div>
+		{/if}
+		<div bind:this={host}></div>
+	</div>
+</div>
+
+<style>
+	.cms-rich-text-input.focused {
+		border-color: var(--cms-accent, #534ab7);
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm) {
+		outline: none;
+		min-height: 3em;
+		line-height: 1.5;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm > :first-child) {
+		margin-top: 0;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm > :last-child) {
+		margin-bottom: 0;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm ul),
+	.cms-rich-text-input :global(.cms-rich-text-input-pm ol) {
+		padding-left: 1.25em;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+type Props = {
+    value: string;
+    onChange: (html: string) => void;
+    label?: string;
+    placeholder?: string;
+};
+declare const RichTextInput: import("svelte").Component<Props, {}, "">;
+type RichTextInput = ReturnType<typeof RichTextInput>;
+export default RichTextInput;

package/dist/components/admin-bar/structured-editor-popover.svelte

@@ -24,6 +24,7 @@
 	import PencilIcon from './icons/pencil.svelte';
 	import { Button } from './ui/button/index.js';
 	import { Input } from './ui/input/index.js';
+	import { Textarea } from './ui/textarea/index.js';
 	import * as Popover from './ui/popover/index.js';
 	import * as Sheet from './ui/sheet/index.js';
 	import * as Tabs from './ui/tabs/index.js';
@@ -155,12 +156,20 @@
 						<span class="vela:text-[12px] vela:text-bar-text-secondary vela:truncate">
 							{f.source}
 						</span>
-						<Input
-							type="text"
-							value={translationValue(tab, f)}
-							placeholder={f.source}
-							oninput={(e) => setTranslation(tab, f, e.currentTarget.value)}
-						/>
+						{#if f.source.length > 80 || f.source.includes('<')}
+							<Textarea
+								value={translationValue(tab, f)}
+								placeholder={f.source}
+								oninput={(e) => setTranslation(tab, f, e.currentTarget.value)}
+							/>
+						{:else}
+							<Input
+								type="text"
+								value={translationValue(tab, f)}
+								placeholder={f.source}
+								oninput={(e) => setTranslation(tab, f, e.currentTarget.value)}
+							/>
+						{/if}
 					</label>
 				{/each}
 			{/if}

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-collection.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	/**
+	 * `CmsCollection`: services, rooms, programmes, tours, projects. One list,
+	 * rendered whole on its page and sliced (`limit`, `featured`, `tag`) on
+	 * the home page through `scope="root"` or the list page's scope id.
+	 */
+	export * from '../../core/shapes/collection.js';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Structured from './cms-structured.svelte';
+	import {
+		cmsCollection,
+		collectionView,
+		type CmsCollectionValue,
+		type CollectionItem,
+		type CollectionItemView
+	} from '../../core/shapes/collection.js';
+
+	type Props = {
+		name: string;
+		scope?: string;
+		/** The full value, or a bare item list. */
+		fallback?: Partial<CmsCollectionValue> | Partial<CollectionItem>[];
+		value?: unknown;
+		/** Render at most this many items. */
+		limit?: number;
+		/** Only featured items. */
+		featured?: boolean;
+		/** Only items carrying this tag. */
+		tag?: string;
+		children: Snippet<[CollectionItemView[]]>;
+	};
+	let { name, scope, fallback, value, limit, featured, tag, children }: Props = $props();
+</script>
+
+<Structured
+	schema={cmsCollection}
+	{name}
+	{scope}
+	{fallback}
+	{value}
+	view={(v: CmsCollectionValue) => collectionView(v, { limit, featured, tag })}
+	{children}
+/>

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

@@ -0,0 +1,25 @@
+/**
+ * `CmsCollection`: services, rooms, programmes, tours, projects. One list,
+ * rendered whole on its page and sliced (`limit`, `featured`, `tag`) on
+ * the home page through `scope="root"` or the list page's scope id.
+ */
+export * from '../../core/shapes/collection.js';
+import type { Snippet } from 'svelte';
+import { type CmsCollectionValue, type CollectionItem, type CollectionItemView } from '../../core/shapes/collection.js';
+type Props = {
+    name: string;
+    scope?: string;
+    /** The full value, or a bare item list. */
+    fallback?: Partial<CmsCollectionValue> | Partial<CollectionItem>[];
+    value?: unknown;
+    /** Render at most this many items. */
+    limit?: number;
+    /** Only featured items. */
+    featured?: boolean;
+    /** Only items carrying this tag. */
+    tag?: string;
+    children: Snippet<[CollectionItemView[]]>;
+};
+declare const CmsCollection: import("svelte").Component<Props, {}, "">;
+type CmsCollection = ReturnType<typeof CmsCollection>;
+export default CmsCollection;

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

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+	/** `CmsContact`: address, phones, emails and the links a template renders from them. */
+	export * from '../../core/shapes/contact.js';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Structured from './cms-structured.svelte';
+	import {
+		cmsContact,
+		contactView,
+		type CmsContactValue,
+		type ContactView
+	} from '../../core/shapes/contact.js';
+
+	type Props = {
+		name: string;
+		scope?: string;
+		fallback?: Partial<CmsContactValue>;
+		value?: unknown;
+		children: Snippet<[ContactView]>;
+	};
+	let { name, scope, fallback, value, children }: Props = $props();
+</script>
+
+<Structured schema={cmsContact} {name} {scope} {fallback} {value} view={contactView} {children} />

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

@@ -0,0 +1,14 @@
+/** `CmsContact`: address, phones, emails and the links a template renders from them. */
+export * from '../../core/shapes/contact.js';
+import type { Snippet } from 'svelte';
+import { type CmsContactValue, type ContactView } from '../../core/shapes/contact.js';
+type Props = {
+    name: string;
+    scope?: string;
+    fallback?: Partial<CmsContactValue>;
+    value?: unknown;
+    children: Snippet<[ContactView]>;
+};
+declare const CmsContact: import("svelte").Component<Props, {}, "">;
+type CmsContact = ReturnType<typeof CmsContact>;
+export default CmsContact;

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}
+/>