@velastack/cms 0.4.0 → 0.5.0

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

@@ -0,0 +1,250 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+	/**
+	 * The editor every structured component opens: a popover anchored to the
+	 * slot (a bottom sheet under 600px, per DESIGN.md §8.2) holding a form
+	 * over a local draft, committed to the CMS draft on Done.
+	 *
+	 * Locales are tabs. The default locale's tab is the component's own form
+	 * (`editor` snippet) and owns the structure; every other locale's tab
+	 * lists the translatable strings with the default text as reference and
+	 * writes only `<name>.$t.<id>.<field>` (see `core/structured.ts`). The
+	 * popover opens on the locale the editor is previewing.
+	 */
+	import { onMount, type Snippet } from 'svelte';
+	import { cmsStore } from '../cms/cms-store.svelte.js';
+	import type { CmsField } from '../cms/use-cms-field.svelte.js';
+	import {
+		stripTranslations,
+		translatableFields,
+		translationPath,
+		type Structured,
+		type TranslatableField
+	} from '../../core/structured.js';
+	import CssRoot from './css-root.svelte';
+	import PencilIcon from './icons/pencil.svelte';
+	import { Button } from './ui/button/index.js';
+	import { Input } from './ui/input/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';
+
+	type Props = {
+		field: CmsField<T>;
+		schema: Structured<T>;
+		/** Human label for the header, e.g. "Opening hours". */
+		label: string;
+		open?: boolean;
+		/** What the visitor sees; rendered in place with the edit affordance. */
+		preview: Snippet;
+		/** The default-locale form over a local draft. */
+		editor: Snippet<[T, (next: T) => void]>;
+	};
+	let { field, schema, label, open = $bindable(false), preview, editor }: Props = $props();
+
+	const locales = $derived(cmsStore.locales);
+	const defaultLocale = $derived(cmsStore.defaultLocale);
+	const otherLocales = $derived(locales.filter((l) => l !== defaultLocale));
+
+	// Local drafts: structure for the default locale, strings per other locale.
+	let draft = $state<T>({} as T);
+	let translations = $state<Record<string, Record<string, string>>>({});
+	let tab = $state('');
+
+	const reset = () => {
+		draft = structuredClone($state.snapshot(field.current)) as T;
+		translations = {};
+		tab = locales.includes(cmsStore.activeLocale) ? cmsStore.activeLocale : defaultLocale;
+	};
+
+	$effect(() => {
+		if (open) reset();
+	});
+
+	$effect(() => {
+		if (open && tab && tab !== defaultLocale) void cmsStore.loadLocaleOverlay(tab);
+	});
+
+	const update = (next: T) => {
+		draft = next;
+	};
+
+	const fields = $derived<TranslatableField[]>(translatableFields(draft, schema));
+
+	/** Stored translation for a field in `locale`, unless edited in this session. */
+	const translationValue = (locale: string, f: TranslatableField): string => {
+		const local = translations[locale]?.[`${f.id}.${f.field}`];
+		if (local !== undefined) return local;
+		const stored = field.getIn(locale, `$t.${f.id}.${f.field}`);
+		return typeof stored === 'string' ? stored : '';
+	};
+	const setTranslation = (locale: string, f: TranslatableField, value: string) => {
+		translations = {
+			...translations,
+			[locale]: { ...(translations[locale] ?? {}), [`${f.id}.${f.field}`]: value }
+		};
+	};
+
+	const done = () => {
+		field.set(stripTranslations($state.snapshot(draft)), defaultLocale);
+		for (const [locale, strings] of Object.entries(translations)) {
+			for (const [key, value] of Object.entries(strings)) {
+				const dot = key.indexOf('.');
+				const id = key.slice(0, dot);
+				const f = key.slice(dot + 1);
+				field.setAt(translationPath('', id, f).slice(1), value === '' ? null : value, locale);
+			}
+		}
+		open = false;
+	};
+
+	const clear = () => {
+		field.set(null, defaultLocale);
+		open = false;
+	};
+
+	// Under 600px the popover becomes a bottom sheet (DESIGN.md §8.2).
+	let isMobile = $state(false);
+	onMount(() => {
+		const mq = window.matchMedia('(max-width: 600px)');
+		const sync = () => (isMobile = mq.matches);
+		sync();
+		mq.addEventListener('change', sync);
+		return () => mq.removeEventListener('change', sync);
+	});
+</script>
+
+{#snippet body()}
+	<div class="vela:flex vela:items-center vela:justify-between vela:px-4 vela:pt-3.5 vela:pb-2">
+		<div class="vela:flex vela:items-baseline vela:gap-2 vela:min-w-0">
+			<h2 class="vela:text-[14px] vela:font-semibold vela:m-0">{label}</h2>
+			<span class="vela:font-mono vela:text-[11px] vela:text-bar-text-tertiary vela:truncate">
+				{field.name}
+			</span>
+		</div>
+	</div>
+
+	{#if otherLocales.length > 0}
+		<Tabs.Root bind:value={tab} class="vela:px-4">
+			<Tabs.List aria-label="Language">
+				{#each locales as locale (locale)}
+					<Tabs.Trigger value={locale} class="vela:font-mono vela:uppercase">{locale}</Tabs.Trigger>
+				{/each}
+			</Tabs.List>
+		</Tabs.Root>
+	{/if}
+
+	<div
+		class="vela:overflow-y-auto vela:max-h-[60vh] vela:px-4 vela:py-3 vela:flex vela:flex-col vela:gap-3"
+	>
+		{#if tab === defaultLocale || otherLocales.length === 0}
+			{@render editor(draft, update)}
+		{:else}
+			{#if fields.length === 0}
+				<p class="vela:text-[12px] vela:text-bar-text-tertiary vela:m-0">
+					Nothing to translate yet. Add content in
+					<span class="vela:font-mono vela:uppercase">{defaultLocale}</span> first.
+				</p>
+			{:else}
+				<p class="vela:text-[11px] vela:text-bar-text-tertiary vela:m-0">
+					Structure is shared with
+					<span class="vela:font-mono vela:uppercase">{defaultLocale}</span>; only the text
+					translates. Blank fields show the original.
+				</p>
+				{#each fields as f (`${f.id}.${f.field}`)}
+					<label class="vela:flex vela:flex-col vela:gap-1">
+						<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)}
+						/>
+					</label>
+				{/each}
+			{/if}
+		{/if}
+	</div>
+
+	<div
+		class="vela:flex vela:items-center vela:justify-between vela:px-4 vela:py-2.5 vela:border-t vela:border-[var(--cms-bar-divider)] vela:text-[12px] vela:text-bar-text-tertiary"
+	>
+		<Button variant="ghost" size="pill" onclick={clear}>Clear</Button>
+		<div class="vela:flex vela:items-center vela:gap-1.5">
+			<Button variant="ghost" size="pill" onclick={() => (open = false)}>Cancel</Button>
+			<Button size="pill" onclick={done}>Done</Button>
+		</div>
+	</div>
+{/snippet}
+
+<CssRoot>
+	<span class="cms-structured-edit" data-open={open ? '' : undefined} data-cms-name={field.name}>
+		<span class="cms-structured-edit__preview">{@render preview()}</span>
+		{#if isMobile}
+			<Sheet.Root bind:open>
+				<Sheet.Trigger class="cms-structured-edit__trigger" aria-label={`Edit ${label}`}>
+					<PencilIcon class="vela:size-3" />
+					{label}
+				</Sheet.Trigger>
+				<Sheet.Content side="bottom" class="vela:gap-0" showCloseButton={false}>
+					{@render body()}
+				</Sheet.Content>
+			</Sheet.Root>
+		{:else}
+			<Popover.Root bind:open>
+				<Popover.Trigger class="cms-structured-edit__trigger" aria-label={`Edit ${label}`}>
+					<PencilIcon class="vela:size-3" />
+					{label}
+				</Popover.Trigger>
+				<Popover.Content class="vela:w-[420px] vela:max-w-[calc(100vw-2rem)]">
+					{@render body()}
+				</Popover.Content>
+			</Popover.Root>
+		{/if}
+	</span>
+</CssRoot>
+
+<style>
+	.cms-structured-edit {
+		position: relative;
+		display: block;
+		border-radius: 0.125rem;
+		outline: 1px dashed rgba(127, 127, 127, 0.6);
+		outline-offset: 4px;
+	}
+	.cms-structured-edit:hover,
+	.cms-structured-edit:focus-within,
+	.cms-structured-edit[data-open] {
+		outline: 2px solid var(--cms-accent, #534ab7);
+		outline-offset: 4px;
+	}
+	.cms-structured-edit__preview {
+		display: contents;
+	}
+	:global(.cms-structured-edit__trigger) {
+		position: absolute;
+		top: -0.5rem;
+		right: -0.5rem;
+		z-index: 40;
+		display: none;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.125rem 0.5rem;
+		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-sans-serif, system-ui, sans-serif;
+		line-height: 1.4;
+		white-space: nowrap;
+	}
+	.cms-structured-edit:hover :global(.cms-structured-edit__trigger),
+	.cms-structured-edit:focus-within :global(.cms-structured-edit__trigger),
+	.cms-structured-edit[data-open] :global(.cms-structured-edit__trigger) {
+		display: inline-flex;
+	}
+</style>

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

@@ -0,0 +1,48 @@
+/**
+     * The editor every structured component opens: a popover anchored to the
+     * slot (a bottom sheet under 600px, per DESIGN.md §8.2) holding a form
+     * over a local draft, committed to the CMS draft on Done.
+     *
+     * Locales are tabs. The default locale's tab is the component's own form
+     * (`editor` snippet) and owns the structure; every other locale's tab
+     * lists the translatable strings with the default text as reference and
+     * writes only `<name>.$t.<id>.<field>` (see `core/structured.ts`). The
+     * popover opens on the locale the editor is previewing.
+     */
+import { type Snippet } from 'svelte';
+import type { CmsField } from '../cms/use-cms-field.svelte.js';
+import { type Structured } from '../../core/structured.js';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        field: CmsField<T>;
+        schema: Structured<T>;
+        /** Human label for the header, e.g. "Opening hours". */
+        label: string;
+        open?: boolean;
+        /** What the visitor sees; rendered in place with the edit affordance. */
+        preview: Snippet;
+        /** The default-locale form over a local draft. */
+        editor: Snippet<[T, (next: T) => void]>;
+    };
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const StructuredEditorPopover: $$IsomorphicComponent;
+type StructuredEditorPopover<T extends Record<string, unknown>> = InstanceType<typeof StructuredEditorPopover<T>>;
+export default StructuredEditorPopover;

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import CheckIcon from '../../icons/check.svelte';
+	import MinusIcon from '../../icons/minus.svelte';
+	import { cn, type WithoutChildrenOrChild } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="checkbox"
+	class={cn(
+		'vela:peer vela:size-4 vela:shrink-0 vela:rounded-[4px] vela:border vela:border-[var(--cms-bar-divider)] vela:bg-transparent vela:cursor-pointer vela:transition-colors 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=checked]:border-[var(--cms-accent)] vela:data-[state=checked]:text-white vela:data-[state=indeterminate]:bg-[var(--cms-accent)] vela:data-[state=indeterminate]:text-white',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="vela:flex vela:size-full vela:items-center vela:justify-center vela:text-current">
+			{#if indeterminate}
+				<MinusIcon class="vela:size-3" />
+			{:else if checked}
+				<CheckIcon class="vela:size-3" />
+			{/if}
+		</span>
+	{/snippet}
+</CheckboxPrimitive.Root>

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import Root from './popover.svelte';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+import Close from './popover-close.svelte';
+export { Root, Content, Trigger, Close, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose };

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

@@ -0,0 +1,7 @@
+import Root from './popover.svelte';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+import Close from './popover-close.svelte';
+export { Root, Content, Trigger, Close, 
+//
+Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose };

package/dist/components/admin-bar/ui/popover/popover-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 6,
+		align = 'start',
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<PopoverPrimitive.ContentProps> & {
+		portalProps?: PopoverPrimitive.PortalProps;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!-- Portal targets `.vela-admin-bar` (not body) so the @scope-wrapped utilities apply. -->
+<PopoverPrimitive.Portal to=".vela-admin-bar" {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'vela:z-[9999] vela:w-80 vela:rounded-xl vela:border vela:border-[var(--cms-bar-divider)] vela:bg-bar-bg vela:text-bar-text vela:shadow-[0_12px_32px_rgba(0,0,0,0.45)] vela:outline-hidden 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 vela:data-[state=closed]:zoom-out-95 vela:data-[state=open]:zoom-in-95 vela:duration-150',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</PopoverPrimitive.Content>
+</PopoverPrimitive.Portal>

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

@@ -0,0 +1,10 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../utils.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithoutChildrenOrChild<PopoverPrimitive.ContentProps> & {
+    portalProps?: PopoverPrimitive.PortalProps;
+    children?: Snippet;
+};
+declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import Root from './sheet.svelte';
+import Close from './sheet-close.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { Root, Close, Trigger, Overlay, Content, Header, Footer, Title, Description, Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

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

@@ -0,0 +1,12 @@
+import Root from './sheet.svelte';
+import Close from './sheet-close.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { Root, Close, Trigger, Overlay, Content, Header, Footer, Title, Description, 
+//
+Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

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

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

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

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

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>