@velastack/cms 0.3.1 → 0.5.0

package/dist/components/admin-bar/site-options-panel.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	/**
+	 * Site Options: the few project-wide values that do not render on the
+	 * page — the schema.org type, the default share image, which locales are
+	 * enabled. Anything a visitor sees (hours, contact, navigation, branding)
+	 * lives in the root layout scope and is edited where it renders.
+	 *
+	 * The schema comes from `createCms({ site })`; storage is one
+	 * non-localised tree per project.
+	 */
+	import { page } from '$app/state';
+	import { cmsStore } from '../cms/cms-store.svelte.js';
+	import type { CmsPayload, SiteFieldSchema, SiteSchema } from '../cms/scope.js';
+	import FieldInput from './field-input.svelte';
+	import PanelFooter from './panel-footer.svelte';
+	import PanelHeader from './panel-header.svelte';
+	import Panel from './panel.svelte';
+	import { Button } from './ui/button/index.js';
+
+	type Props = { onClose: () => void; onSave: () => void | Promise<void> };
+	let { onClose, onSave }: Props = $props();
+
+	const cms = $derived(page.data.cms as CmsPayload | undefined);
+	const schema = $derived<SiteSchema>(cms?.site?.schema ?? {});
+	const endpoint = $derived(cms?.endpoint ?? '/api/cms');
+
+	// Flat (path → schema) view for save/reset; sections preserved for layout.
+	const sections = $derived(Object.entries(schema));
+	const allFieldPaths = $derived.by(() => {
+		const out: Array<{ path: string; schema: SiteFieldSchema }> = [];
+		for (const [sectionKey, section] of sections) {
+			for (const [fieldKey, fieldSchema] of Object.entries(section.fields)) {
+				out.push({ path: `${sectionKey}.${fieldKey}`, schema: fieldSchema });
+			}
+		}
+		return out;
+	});
+
+	const persistedValue = (path: string): unknown => cmsStore.getSiteValue(path);
+
+	// Local form state — typing only updates `local`; nothing reaches
+	// `cmsStore.siteDraft` until Save fires (matches seo-panel.svelte).
+	let local = $state<Record<string, unknown>>({});
+
+	$effect(() => {
+		const next: Record<string, unknown> = {};
+		for (const { path } of allFieldPaths) next[path] = persistedValue(path);
+		local = next;
+	});
+
+	const handleSave = async () => {
+		for (const { path } of allFieldPaths) {
+			const v = local[path];
+			if (v !== persistedValue(path)) cmsStore.setSiteValue(path, v);
+		}
+		await onSave();
+	};
+</script>
+
+<Panel ariaLabel="Site options" {onClose}>
+	<PanelHeader title="Site options" {onClose}>
+		{#snippet subtitle()}
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">
+				settings that don't render on the page
+			</span>
+		{/snippet}
+	</PanelHeader>
+
+	<form
+		class="vela:overflow-y-auto vela:px-4 vela:pb-4 vela:flex vela:flex-col vela:gap-5"
+		onsubmit={(e) => {
+			e.preventDefault();
+			handleSave();
+		}}
+	>
+		{#if sections.length === 0}
+			<p class="vela:text-[13px] vela:text-bar-text-tertiary vela:py-2">
+				No site options have been declared. Pass a <code>site</code> schema to
+				<code>createCms()</code> to add fields here. Text that renders on the page belongs in the root
+				layout, edited in place.
+			</p>
+		{:else}
+			{#each sections as [sectionKey, section] (sectionKey)}
+				<section class="vela:flex vela:flex-col vela:gap-3">
+					<h3
+						class="vela:text-[10px] vela:font-semibold vela:uppercase vela:tracking-widest vela:text-bar-text-tertiary vela:m-0"
+					>
+						{section.label}
+					</h3>
+
+					{#each Object.entries(section.fields) as [fieldKey, fieldSchema] (fieldKey)}
+						{@const path = `${sectionKey}.${fieldKey}`}
+						<FieldInput
+							type={fieldSchema.type}
+							label={fieldSchema.label}
+							placeholder={fieldSchema.placeholder}
+							values={fieldSchema.values ?? []}
+							value={local[path]}
+							onChange={(v) => (local[path] = v)}
+							{endpoint}
+						/>
+					{/each}
+				</section>
+			{/each}
+		{/if}
+	</form>
+
+	<PanelFooter>
+		<span>Save to keep your changes</span>
+		<div class="vela:flex vela:items-center vela:gap-1.5">
+			<Button variant="ghost" size="pill" onclick={onClose}>Cancel</Button>
+			<Button size="pill" onclick={handleSave}>Save</Button>
+		</div>
+	</PanelFooter>
+</Panel>

package/dist/components/admin-bar/site-options-panel.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onClose: () => void;
+    onSave: () => void | Promise<void>;
+};
+declare const SiteOptionsPanel: import("svelte").Component<Props, {}, "">;
+type SiteOptionsPanel = ReturnType<typeof SiteOptionsPanel>;
+export default SiteOptionsPanel;

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;