@velastack/cms 0.3.1 → 0.5.0

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

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	import { variants, type VariantProps } from '../../variants.js';
+
+	export const sheetVariants = variants({
+		base: 'vela:fixed vela:z-[9999] vela:flex vela:flex-col vela:gap-4 vela:bg-bar-bg vela:text-bar-text vela:shadow-[0_12px_32px_rgba(0,0,0,0.45)] vela:transition vela:ease-in-out vela:data-[state=open]:animate-in vela:data-[state=closed]:animate-out vela:data-[state=closed]:duration-200 vela:data-[state=open]:duration-300',
+		variants: {
+			side: {
+				top: 'vela:inset-x-0 vela:top-0 vela:border-b vela:border-[var(--cms-bar-divider)] vela:data-[state=closed]:slide-out-to-top vela:data-[state=open]:slide-in-from-top',
+				bottom:
+					'vela:inset-x-0 vela:bottom-0 vela:max-h-[85vh] vela:rounded-t-2xl vela:border-t vela:border-[var(--cms-bar-divider)] vela:data-[state=closed]:slide-out-to-bottom vela:data-[state=open]:slide-in-from-bottom',
+				left: 'vela:inset-y-0 vela:left-0 vela:h-full vela:w-3/4 vela:max-w-sm vela:border-r vela:border-[var(--cms-bar-divider)] vela:data-[state=closed]:slide-out-to-left vela:data-[state=open]:slide-in-from-left',
+				right:
+					'vela:inset-y-0 vela:right-0 vela:h-full vela:w-3/4 vela:max-w-sm vela:border-l vela:border-[var(--cms-bar-divider)] vela:data-[state=closed]:slide-out-to-right vela:data-[state=open]:slide-in-from-right'
+			}
+		},
+		defaultVariants: { side: 'bottom' }
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import XIcon from '../../icons/x.svelte';
+	import { cn, type WithoutChildrenOrChild } from '../../utils.js';
+	import SheetOverlay from './sheet-overlay.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'bottom',
+		portalProps,
+		showCloseButton = true,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal to=".vela-admin-bar" {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close
+				data-slot="sheet-close"
+				class="vela:absolute vela:top-3 vela:right-3 vela:inline-flex vela:items-center vela:justify-center vela:w-7 vela:h-7 vela:rounded-full vela:text-bar-text-secondary vela:hover:text-bar-text vela:hover:bg-[var(--cms-bar-bg-hover)] vela:focus:outline-none vela:focus-visible:ring-2 vela:focus-visible:ring-[var(--cms-accent)] vela:cursor-pointer"
+			>
+				<XIcon class="vela:size-4" />
+				<span class="vela:sr-only">Close</span>
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>

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

@@ -0,0 +1,17 @@
+import { type VariantProps } from '../../variants.js';
+export declare const sheetVariants: (props?: {
+    side?: "bottom" | "left" | "right" | "top" | undefined;
+}) => string;
+export type Side = VariantProps<typeof sheetVariants>['side'];
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../utils.js';
+type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: SheetPrimitive.PortalProps;
+    side?: Side;
+    showCloseButton?: boolean;
+    children: Snippet;
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

package/dist/components/admin-bar/ui/sheet/sheet-description.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.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn('vela:text-[12px] vela:text-bar-text-secondary vela:m-0', className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn(
+		'vela:mt-auto vela:flex vela:items-center vela:justify-end vela:gap-1.5 vela:px-4 vela:py-2.5 vela:border-t vela:border-[var(--cms-bar-divider)]',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('vela:flex vela:flex-col vela:gap-1 vela:px-4 vela:pt-3.5 vela:pb-3', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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/')) {