@velastack/cms 0.1.0

package/dist/components/admin-bar/ui/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+	let { to = '.vela-admin-bar', ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {to} {...restProps} />

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

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

package/dist/components/admin-bar/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../utils.js';
+	import ChevronDownIcon from '../../icons/chevron-down.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn(
+		'vela:bg-bar-bg vela:z-10 vela:flex vela:cursor-default vela:items-center vela:justify-center vela:py-1 vela:bottom-0 vela:w-full',
+		className
+	)}
+	{...restProps}
+>
+	<ChevronDownIcon class="vela:size-3.5" />
+</SelectPrimitive.ScrollDownButton>

package/dist/components/admin-bar/ui/select/select-scroll-down-button.svelte.d.ts

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

package/dist/components/admin-bar/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../utils.js';
+	import ChevronUpIcon from '../../icons/chevron-up.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn(
+		'vela:bg-bar-bg vela:z-10 vela:flex vela:cursor-default vela:items-center vela:justify-center vela:py-1 vela:top-0 vela:w-full',
+		className
+	)}
+	{...restProps}
+>
+	<ChevronUpIcon class="vela:size-3.5" />
+</SelectPrimitive.ScrollUpButton>

package/dist/components/admin-bar/ui/select/select-scroll-up-button.svelte.d.ts

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

package/dist/components/admin-bar/ui/select/select-separator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { Separator } from '../separator/index.js';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn(
+		'vela:bg-[var(--cms-bar-divider)] vela:-mx-1 vela:my-1 vela:h-px vela:pointer-events-none',
+		className
+	)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '../../utils.js';
+	import ChevronDownIcon from '../../icons/chevron-down.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: 'sm' | 'default';
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		'vela:flex vela:w-fit vela:items-center vela:justify-between vela:gap-1.5 vela:whitespace-nowrap vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:bg-transparent vela:py-1 vela:pr-2 vela:pl-2.5 vela:text-xs vela:text-bar-text vela:transition-colors vela:select-none vela:outline-none vela:cursor-pointer vela:hover:bg-[var(--cms-bar-bg-hover)] vela:focus-visible:ring-2 vela:focus-visible:ring-[var(--cms-accent)] vela:disabled:cursor-not-allowed vela:disabled:opacity-50 vela:data-[size=default]:h-7 vela:data-[size=sm]:h-6 vela:data-placeholder:text-bar-text-tertiary',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon
+		class="vela:size-3.5 vela:text-bar-text-secondary vela:pointer-events-none vela:shrink-0"
+	/>
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,8 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import { type WithoutChild } from '../../utils.js';
+type $$ComponentProps = WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'default';
+};
+declare const SelectTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import Root from './separator.svelte';
+export { Root, 
+//
+Root as Separator };

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		'data-slot': dataSlot = 'separator',
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		'vela:bg-[var(--cms-bar-divider)] vela:shrink-0 vela:data-[orientation=horizontal]:h-px vela:data-[orientation=horizontal]:w-full vela:data-[orientation=vertical]:w-px vela:data-[orientation=vertical]:h-full',
+		className
+	)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,3 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };
+export default Root;

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

@@ -0,0 +1,3 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };
+export default Root;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLTextareaAttributes> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	bind:value
+	data-slot="textarea"
+	class={cn(
+		'vela:flex vela:min-h-[56px] vela:w-full vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:bg-transparent vela:px-3 vela:py-2 vela:text-[13px] vela:text-bar-text vela:placeholder:text-bar-text-tertiary vela:font-sans vela:transition-colors vela:focus:outline-none vela:focus:border-[var(--cms-accent)] vela:disabled:opacity-60 vela:disabled:cursor-not-allowed vela:resize-y',
+		className
+	)}
+	{...restProps}></textarea>

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

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

package/dist/components/admin-bar/user-avatar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from './utils.js';
+
+	type Props = {
+		name: string;
+		class?: string;
+	};
+	let { name, class: className }: Props = $props();
+
+	const initials = $derived(
+		name
+			.trim()
+			.split(/\s+/)
+			.slice(0, 2)
+			.map((w) => w[0]?.toUpperCase() ?? '')
+			.join('')
+	);
+</script>
+
+<span
+	class={cn(
+		'vela:inline-flex vela:items-center vela:justify-center vela:w-7 vela:h-7 vela:rounded-full',
+		'vela:bg-[var(--cms-accent)] vela:text-white vela:text-[11px] vela:font-semibold',
+		className
+	)}
+	title={name}
+>
+	{initials}
+</span>

package/dist/components/admin-bar/user-avatar.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    name: string;
+    class?: string;
+};
+declare const UserAvatar: import("svelte").Component<Props, {}, "">;
+type UserAvatar = ReturnType<typeof UserAvatar>;
+export default UserAvatar;

package/dist/components/admin-bar/utils.d.ts

@@ -0,0 +1,10 @@
+import type { WithElementRef as BitsWithElementRef } from 'bits-ui';
+export type ClassValue = string | number | bigint | null | undefined | boolean | ClassValue[] | {
+    [key: string]: unknown;
+};
+export declare const clsx: (...inputs: ClassValue[]) => string;
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = BitsWithElementRef<T, U>;
+export type WithoutChild<T> = Omit<T, 'child'>;
+export type WithoutChildren<T> = Omit<T, 'children'>;
+export type WithoutChildrenOrChild<T> = Omit<T, 'children' | 'child'>;

package/dist/components/admin-bar/utils.js

@@ -0,0 +1,46 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+/**
+ * Joins class values the way `clsx` does — strings and numbers pass through,
+ * arrays flatten, and object keys are emitted for truthy values.
+ *
+ * Vendored (a port of clsx, MIT, Copyright (c) Luke Edwards) rather than
+ * depended on: it's ~20 lines, and the bar is the only consumer.
+ */
+const toValue = (mix) => {
+    if (typeof mix === 'string' || typeof mix === 'number' || typeof mix === 'bigint') {
+        return String(mix);
+    }
+    if (typeof mix !== 'object' || mix === null)
+        return '';
+    let str = '';
+    if (Array.isArray(mix)) {
+        for (const item of mix) {
+            if (!item)
+                continue;
+            const next = toValue(item);
+            if (next)
+                str += (str && ' ') + next;
+        }
+        return str;
+    }
+    for (const key in mix) {
+        if (mix[key])
+            str += (str && ' ') + key;
+    }
+    return str;
+};
+export const clsx = (...inputs) => {
+    let str = '';
+    for (const input of inputs) {
+        if (!input)
+            continue;
+        const next = toValue(input);
+        if (next)
+            str += (str && ' ') + next;
+    }
+    return str;
+};
+const twMerge = extendTailwindMerge({ prefix: 'vela' });
+export function cn(...inputs) {
+    return twMerge(clsx(...inputs));
+}

package/dist/components/admin-bar/variants.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Minimal stand-in for `tailwind-variants`.
+ *
+ * The bar only ever uses the flat case: a `base` string, one or more variant
+ * groups whose values are class strings, and `defaultVariants`. No slots, no
+ * compound variants, no responsive variants — so the real package isn't worth
+ * a runtime dependency for two components.
+ */
+type VariantGroups = Record<string, Record<string, string>>;
+type Selection<V extends VariantGroups> = {
+    [K in keyof V]?: keyof V[K];
+};
+/** Infers the accepted variant props from a `variants()` result. */
+export type VariantProps<F> = F extends (props?: infer P) => string ? NonNullable<P> : never;
+export declare const variants: <V extends VariantGroups>(config: {
+    base?: string;
+    variants: V;
+    defaultVariants?: Selection<V>;
+}) => (props?: Selection<V>) => string;
+export {};

package/dist/components/admin-bar/variants.js

@@ -0,0 +1,14 @@
+export const variants = (config) => (props = {}) => {
+    const out = [];
+    if (config.base)
+        out.push(config.base);
+    for (const group of Object.keys(config.variants)) {
+        const key = props[group] ?? config.defaultVariants?.[group];
+        if (key == null)
+            continue;
+        const cls = config.variants[group][key];
+        if (cls)
+            out.push(cls);
+    }
+    return out.join(' ');
+};

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getCmsScope } from './scope.js';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	type Props = {
+		name: string;
+		initial?: boolean;
+		value?: unknown;
+		children?: Snippet<[boolean]>;
+	};
+	let { name, 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 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);
+	};
+</script>
+
+{#if editable && ref}
+	<span class="cms-boolean-edit">
+		{@render children?.(current)}
+		<button
+			type="button"
+			role="switch"
+			aria-checked={current}
+			aria-label={`${name}: ${current ? 'on' : 'off'}`}
+			class="cms-boolean-toggle"
+			data-on={current}
+			onclick={toggle}
+		>
+			<span class="cms-boolean-toggle__name">{name}</span>
+			<span class="cms-boolean-toggle__pip"></span>
+		</button>
+	</span>
+{:else}
+	{@render children?.(current)}
+{/if}
+
+<style>
+	.cms-boolean-edit {
+		display: contents;
+	}
+	.cms-boolean-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.125rem 0.5rem;
+		margin: 0 0.25rem;
+		background: var(--cms-bar-bg, #1f1f1f);
+		color: var(--cms-bar-text, #f5f5f5);
+		border: 1px solid var(--cms-bar-divider, #3a3a3a);
+		border-radius: 999px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 0.6875rem;
+		font-family: ui-monospace, monospace;
+		line-height: 1;
+		vertical-align: middle;
+	}
+	.cms-boolean-toggle:hover {
+		background: var(--cms-bar-bg-hover, #2e2e2e);
+	}
+	.cms-boolean-toggle__pip {
+		display: inline-block;
+		width: 18px;
+		height: 10px;
+		border-radius: 999px;
+		background: rgba(127, 127, 127, 0.4);
+		position: relative;
+		transition: background-color 120ms;
+	}
+	.cms-boolean-toggle__pip::after {
+		content: '';
+		position: absolute;
+		top: 1px;
+		left: 1px;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: white;
+		transition: transform 120ms;
+	}
+	.cms-boolean-toggle[data-on='true'] .cms-boolean-toggle__pip {
+		background: var(--cms-accent, #534ab7);
+	}
+	.cms-boolean-toggle[data-on='true'] .cms-boolean-toggle__pip::after {
+		transform: translateX(8px);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    name: string;
+    initial?: boolean;
+    value?: unknown;
+    children?: Snippet<[boolean]>;
+};
+declare const CmsBoolean: import("svelte").Component<Props, {}, "">;
+type CmsBoolean = ReturnType<typeof CmsBoolean>;
+export default CmsBoolean;

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+	import type { CmsDateTimeMode } from './cms-date-time.svelte';
+
+	type Props = {
+		scope: CmsScopeRef;
+		name: string;
+		mode: CmsDateTimeMode;
+		initial?: string;
+	};
+
+	let { scope, name, mode, initial }: Props = $props();
+
+	const inputType = $derived(
+		mode === 'date' ? 'date' : mode === 'time' ? 'time' : 'datetime-local'
+	);
+
+	const live = $derived(cmsStore.getValue(scope, name));
+	const display = $derived(typeof live === 'string' ? live : (initial ?? ''));
+
+	let el = $state<HTMLInputElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (document.activeElement === el) return;
+		if (el.value === display) return;
+		el.value = display;
+	});
+
+	const onInput = (e: Event) => {
+		const raw = (e.currentTarget as HTMLInputElement).value;
+		if (raw === '') return;
+		cmsStore.setValue(scope, name, raw);
+	};
+</script>
+
+<input
+	bind:this={el}
+	class="cms-date-time-editable"
+	type={inputType}
+	data-cms-name={name}
+	data-cms-scope={scope.scopeId}
+	aria-label={name}
+	oninput={onInput}
+/>
+
+<style>
+	.cms-date-time-editable {
+		display: inline-block;
+		padding: 0.125rem 0.375rem;
+		margin: 0 0.125rem;
+		font: inherit;
+		font-family: ui-monospace, monospace;
+		font-size: 0.875em;
+		line-height: 1;
+		background: var(--cms-bar-bg, #1f1f1f);
+		color: var(--cms-bar-text, #f5f5f5);
+		border: 1px solid var(--cms-bar-divider, #3a3a3a);
+		border-radius: 0.25rem;
+		vertical-align: middle;
+	}
+	.cms-date-time-editable:focus {
+		outline: 2px solid var(--cms-accent, #534ab7);
+		outline-offset: 1px;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import { type CmsScopeRef } from './cms-store.svelte.js';
+import type { CmsDateTimeMode } from './cms-date-time.svelte';
+type Props = {
+    scope: CmsScopeRef;
+    name: string;
+    mode: CmsDateTimeMode;
+    initial?: string;
+};
+declare const CmsDateTimeEditable: import("svelte").Component<Props, {}, "">;
+type CmsDateTimeEditable = ReturnType<typeof CmsDateTimeEditable>;
+export default CmsDateTimeEditable;

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

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export type CmsDateTimeMode = 'datetime' | 'date' | 'time';
+
+	export type CmsDateTimeProps = {
+		name: string;
+		/**
+		 * `'datetime'` (default) → `<input type="datetime-local">`, stores
+		 * `YYYY-MM-DDTHH:MM`. `'date'` → `<input type="date">`, stores
+		 * `YYYY-MM-DD`. `'time'` → `<input type="time">`, stores `HH:MM`.
+		 * Storage is the raw native input string — no timezone conversion.
+		 */
+		mode?: CmsDateTimeMode;
+		fallback?: string;
+		/** Per-item override used by `CmsRepeater`. */
+		value?: unknown;
+		children?: Snippet<[string]>;
+	};
+</script>
+
+<script lang="ts">
+	import { getCmsScope } from './scope.js';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	let { name, 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 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);
+</script>
+
+{#if editable && ref}
+	{#await import('./cms-date-time-editable.svelte') then { default: Editable }}
+		<Editable scope={ref} {name} {mode} initial={current} />
+	{/await}
+{:else if current && children}
+	{@render children(current)}
+{:else if current}
+	{current}
+{:else if children}
+	{@render children('')}
+{:else}
+	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>{name}</span
+	>
+{/if}
+
+<style>
+	.cms-missing {
+		display: inline-block;
+		padding: 0 0.25rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, monospace;
+		font-size: 0.85em;
+		color: rgba(127, 127, 127, 0.9);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type CmsDateTimeMode = 'datetime' | 'date' | 'time';
+export type CmsDateTimeProps = {
+    name: string;
+    /**
+     * `'datetime'` (default) → `<input type="datetime-local">`, stores
+     * `YYYY-MM-DDTHH:MM`. `'date'` → `<input type="date">`, stores
+     * `YYYY-MM-DD`. `'time'` → `<input type="time">`, stores `HH:MM`.
+     * Storage is the raw native input string — no timezone conversion.
+     */
+    mode?: CmsDateTimeMode;
+    fallback?: string;
+    /** Per-item override used by `CmsRepeater`. */
+    value?: unknown;
+    children?: Snippet<[string]>;
+};
+declare const CmsDateTime: import("svelte").Component<CmsDateTimeProps, {}, "">;
+type CmsDateTime = ReturnType<typeof CmsDateTime>;
+export default CmsDateTime;