@velastack/cms 0.4.0 → 0.5.0

package/dist/components/admin-bar/ui/sheet/sheet-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../utils.js';
+declare const SheetHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type SheetHeader = ReturnType<typeof SheetHeader>;
+export default SheetHeader;

package/dist/components/admin-bar/ui/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'vela:fixed vela:inset-0 vela:z-[9998] vela:bg-black/50 vela:data-[state=open]:animate-in vela:data-[state=closed]:animate-out vela:data-[state=closed]:fade-out-0 vela:data-[state=open]:fade-in-0',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/admin-bar/ui/sheet/sheet-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetOverlay: import("svelte").Component<SheetPrimitive.OverlayProps, {}, "ref">;
+type SheetOverlay = ReturnType<typeof SheetOverlay>;
+export default SheetOverlay;

package/dist/components/admin-bar/ui/sheet/sheet-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn('vela:text-[15px] vela:font-semibold vela:m-0', className)}
+	{...restProps}
+/>

package/dist/components/admin-bar/ui/sheet/sheet-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetTitle: import("svelte").Component<SheetPrimitive.TitleProps, {}, "ref">;
+type SheetTitle = ReturnType<typeof SheetTitle>;
+export default SheetTitle;

package/dist/components/admin-bar/ui/sheet/sheet-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

package/dist/components/admin-bar/ui/sheet/sheet-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetTrigger: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
+type SheetTrigger = ReturnType<typeof SheetTrigger>;
+export default SheetTrigger;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />

package/dist/components/admin-bar/ui/sheet/sheet.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Sheet: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/admin-bar/ui/switch/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch };

package/dist/components/admin-bar/ui/switch/index.js

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch };

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'vela:peer vela:inline-flex vela:h-5 vela:w-9 vela:shrink-0 vela:items-center vela:rounded-full vela:border vela:border-transparent vela:transition-colors vela:cursor-pointer vela:focus-visible:outline-none vela:focus-visible:ring-2 vela:focus-visible:ring-[var(--cms-accent)] vela:disabled:cursor-not-allowed vela:disabled:opacity-50 vela:data-[state=checked]:bg-[var(--cms-accent)] vela:data-[state=unchecked]:bg-[var(--cms-bar-divider)]',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class="vela:pointer-events-none vela:block vela:size-4 vela:rounded-full vela:bg-white vela:shadow vela:transition-transform vela:data-[state=checked]:translate-x-4 vela:data-[state=unchecked]:translate-x-0.5"
+	/>
+</SwitchPrimitive.Root>

package/dist/components/admin-bar/ui/switch/switch.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../utils.js';
+declare const Switch: import("svelte").Component<WithoutChildrenOrChild<SwitchPrimitive.RootProps>, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/admin-bar/ui/tabs/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/components/admin-bar/ui/tabs/index.js

@@ -0,0 +1,7 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, 
+//
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/components/admin-bar/ui/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn('vela:flex-1 vela:outline-none', className)}
+	{...restProps}
+/>

package/dist/components/admin-bar/ui/tabs/tabs-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const TabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

package/dist/components/admin-bar/ui/tabs/tabs-list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		'vela:inline-flex vela:self-start vela:items-center vela:justify-center vela:p-0.5 vela:rounded-md vela:bg-[var(--cms-bar-bg-hover)] vela:border vela:border-[var(--cms-bar-divider)]',
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

package/dist/components/admin-bar/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		'vela:inline-flex vela:items-center vela:justify-center vela:gap-1.5 vela:px-2.5 vela:py-1 vela:rounded vela:text-[11px] vela:font-medium vela:whitespace-nowrap vela:cursor-pointer vela:transition-colors vela:text-bar-text-secondary vela:hover:text-bar-text vela:data-[state=active]:bg-bar-bg vela:data-[state=active]:text-bar-text vela:focus-visible:outline-none vela:focus-visible:ring-2 vela:focus-visible:ring-[var(--cms-accent)] vela:disabled:pointer-events-none vela:disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/admin-bar/ui/tabs/tabs-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn('vela:flex vela:flex-col vela:gap-2', className)}
+	{...restProps}
+/>

package/dist/components/admin-bar/ui/tabs/tabs.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "value" | "ref">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

@@ -1,35 +1,26 @@
 <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';
 
 	type Props = {
 		name: string;
+		scope?: string;
 		initial?: boolean;
 		value?: unknown;
 		children?: Snippet<[boolean]>;
 	};
-	let { name, initial = false, value, children }: Props = $props();
+	let { name, scope, initial = false, 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): boolean => (typeof raw === 'boolean' ? raw : raw === null ? false : initial)
 	);
 
-	const resolved = $derived.by(() => {
-		if (value !== undefined) return value;
-		return ref ? cmsStore.getValue(ref, name) : undefined;
-	});
-
-	const current = $derived(typeof resolved === 'boolean' ? resolved : initial);
-	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
-
-	const toggle = () => {
-		if (ref) cmsStore.setValue(ref, name, !current);
-	};
+	const current = $derived(field.current);
+	const toggle = () => field.set(!current);
 </script>
 
-{#if editable && ref}
+{#if field.editable && field.ref}
 	<span class="cms-boolean-edit">
 		{@render children?.(current)}
 		<button

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 type Props = {
     name: string;
+    scope?: string;
     initial?: boolean;
     value?: unknown;
     children?: Snippet<[boolean]>;

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

@@ -16,7 +16,7 @@
 	);
 
 	const live = $derived(cmsStore.getValue(scope, name));
-	const display = $derived(typeof live === 'string' ? live : (initial ?? ''));
+	const display = $derived(typeof live === 'string' ? live : live === null ? '' : (initial ?? ''));
 
 	let el = $state<HTMLInputElement>();
 
@@ -29,8 +29,8 @@
 
 	const onInput = (e: Event) => {
 		const raw = (e.currentTarget as HTMLInputElement).value;
-		if (raw === '') return;
-		cmsStore.setValue(scope, name, raw);
+		// An emptied input clears the field explicitly (`null`).
+		cmsStore.setValue(scope, name, raw === '' ? null : raw);
 	};
 </script>
 

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-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,69 @@
 <script lang="ts" module>
+	/**
+	 * Stored shape of an image slot. Seeds and fallbacks may pass a bare URL
+	 * string; it is normalized to `{ url }`. A cleared slot stores `url: null`.
+	 */
 	export type CmsImageValue = {
-		url?: string;
-		alt?: string;
+		url?: string | null;
+		alt?: string | null;
 		width?: number;
 		height?: number;
 	};
+
+	export const normalizeImage = (raw: unknown): CmsImageValue => {
+		if (raw == null) return {};
+		if (typeof raw === 'string') return { url: raw };
+		if (typeof raw === 'object' && !Array.isArray(raw)) {
+			const r = raw as Record<string, unknown>;
+			const out: CmsImageValue = {};
+			if (typeof r.url === 'string') out.url = r.url;
+			if (typeof r.alt === 'string') out.alt = r.alt;
+			if (typeof r.width === 'number') out.width = r.width;
+			if (typeof r.height === 'number') out.height = r.height;
+			return out;
+		}
+		return {};
+	};
 </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';
 
 	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,22 @@
+/**
+ * Stored shape of an image slot. Seeds and fallbacks may pass a bare URL
+ * string; it is normalized to `{ url }`. A cleared slot stores `url: null`.
+ */
 export type CmsImageValue = {
-    url?: string;
-    alt?: string;
+    url?: string | null;
+    alt?: string | null;
     width?: number;
     height?: number;
 };
+export declare const normalizeImage: (raw: unknown) => CmsImageValue;
 import type { Snippet } from 'svelte';
 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;
 };