@velastack/cms 0.1.0

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

@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import ImagesIcon from './icons/images.svelte';
+	import { cmsStore, type MediaItem } from '../cms/cms-store.svelte.js';
+	import CmsMediaPicker from '../cms/cms-media-picker.svelte';
+	import type { CmsPayload, SiteFieldSchema, SiteSchema } from '../cms/scope.js';
+	import { clickOutside } from './click-outside.js';
+	import PanelFooter from './panel-footer.svelte';
+	import PanelHeader from './panel-header.svelte';
+	import Panel from './panel.svelte';
+	import { Button } from './ui/button/index.js';
+	import { Input } from './ui/input/index.js';
+	import { Textarea } from './ui/textarea/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). That
+	// keeps the bar's "X drafts" count from flickering as the user explores.
+	let local = $state<Record<string, unknown>>({});
+
+	$effect(() => {
+		const next: Record<string, unknown> = {};
+		for (const { path } of allFieldPaths) next[path] = persistedValue(path);
+		local = next;
+	});
+
+	// Per-field media library popover state — keyed by field path.
+	let openLibrary = $state<string | null>(null);
+
+	const fieldLabelClass = 'vela:text-[12px] vela:text-bar-text-secondary';
+
+	const stringValue = (v: unknown): string => (typeof v === 'string' ? v : '');
+	const numberValue = (v: unknown): number | null =>
+		typeof v === 'number' && !Number.isNaN(v) ? v : null;
+
+	const setNumber = (path: string, raw: string) => {
+		if (raw === '') local[path] = undefined;
+		else {
+			const n = Number(raw);
+			local[path] = Number.isFinite(n) ? n : undefined;
+		}
+	};
+
+	const onLibrarySelect = (path: string, item: MediaItem) => {
+		local[path] = item.url;
+		openLibrary = null;
+	};
+
+	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 settings" {onClose}>
+	<PanelHeader title="Site settings" {onClose} />
+
+	<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 settings have been declared. Pass a <code>site</code> schema to
+				<code>createCms()</code> to add fields here.
+			</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}`}
+						{#if fieldSchema.type === 'markdown'}
+							<label class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<Textarea
+									value={stringValue(local[path])}
+									placeholder={fieldSchema.placeholder ?? ''}
+									oninput={(e) => (local[path] = e.currentTarget.value)}
+								/>
+							</label>
+						{:else if fieldSchema.type === 'number'}
+							<label class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<Input
+									type="number"
+									value={numberValue(local[path]) ?? ''}
+									placeholder={fieldSchema.placeholder ?? ''}
+									oninput={(e) => setNumber(path, e.currentTarget.value)}
+								/>
+							</label>
+						{:else if fieldSchema.type === 'datetime'}
+							<label class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<Input
+									type="datetime-local"
+									value={stringValue(local[path])}
+									oninput={(e) => (local[path] = e.currentTarget.value)}
+								/>
+							</label>
+						{:else if fieldSchema.type === 'color'}
+							<label class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<div class="vela:flex vela:items-center vela:gap-2">
+									<input
+										type="color"
+										value={stringValue(local[path]) || '#000000'}
+										oninput={(e) => (local[path] = e.currentTarget.value)}
+										class="vela:h-9 vela:w-12 vela:rounded vela:border vela:border-[var(--cms-bar-divider)] vela:bg-[var(--cms-bar-bg-hover)] vela:cursor-pointer"
+									/>
+									<Input
+										type="text"
+										value={stringValue(local[path])}
+										placeholder={fieldSchema.placeholder ?? '#1f1f1f'}
+										oninput={(e) => (local[path] = e.currentTarget.value)}
+									/>
+								</div>
+							</label>
+						{:else if fieldSchema.type === 'url'}
+							<label class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<Input
+									type="url"
+									value={stringValue(local[path])}
+									placeholder={fieldSchema.placeholder ?? 'https://…'}
+									oninput={(e) => (local[path] = e.currentTarget.value)}
+								/>
+							</label>
+						{:else if fieldSchema.type === 'image'}
+							<div class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<div class="vela:relative vela:flex vela:items-center vela:gap-2">
+									<Input
+										type="url"
+										value={stringValue(local[path])}
+										placeholder={fieldSchema.placeholder ?? 'https://…'}
+										oninput={(e) => (local[path] = e.currentTarget.value)}
+									/>
+									<Button
+										type="button"
+										variant="ghost"
+										size="pill-icon"
+										aria-label="Choose from media library"
+										onclick={() => (openLibrary = openLibrary === path ? null : path)}
+									>
+										<ImagesIcon class="vela:size-4" />
+									</Button>
+									{#if openLibrary === path}
+										<div
+											role="dialog"
+											aria-label="Choose from media library"
+											class="vela:absolute vela:right-0 vela:top-full vela:mt-1 vela:z-30
+												vela:p-2 vela:rounded-md vela:bg-bar-bg
+												vela:border vela:border-[var(--cms-bar-divider)]
+												vela:shadow-[0_8px_24px_rgba(0,0,0,0.35)]"
+											use:clickOutside={() => (openLibrary = null)}
+										>
+											<CmsMediaPicker {endpoint} onSelect={(item) => onLibrarySelect(path, item)} />
+										</div>
+									{/if}
+								</div>
+								{#if stringValue(local[path])}
+									<img
+										src={stringValue(local[path])}
+										alt=""
+										class="vela:max-h-24 vela:w-auto vela:rounded vela:border vela:border-[var(--cms-bar-divider)] vela:object-contain vela:bg-[var(--cms-bar-bg-hover)]"
+									/>
+								{/if}
+							</div>
+						{:else}
+							<label class="vela:flex vela:flex-col vela:gap-1.5">
+								<span class={fieldLabelClass}>{fieldSchema.label}</span>
+								<Input
+									type="text"
+									value={stringValue(local[path])}
+									placeholder={fieldSchema.placeholder ?? ''}
+									oninput={(e) => (local[path] = e.currentTarget.value)}
+								/>
+							</label>
+						{/if}
+					{/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-settings-panel.svelte.d.ts

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

package/dist/components/admin-bar/status-pill.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from './utils.js';
+
+	type Variant = 'clean' | 'warn' | 'edit';
+
+	type Props = {
+		variant: Variant;
+		onclick?: () => void;
+		class?: string;
+		children: Snippet;
+	};
+	let { variant, onclick, class: className, children }: Props = $props();
+
+	const variantClass: Record<Variant, string> = {
+		clean: 'vela:text-[var(--cms-status-clean-text)]',
+		warn: 'vela:bg-[var(--cms-status-warn-bg)] vela:text-[var(--cms-status-warn-text)] vela:animate-bar-pulse',
+		edit: 'vela:bg-[var(--cms-status-edit-bg)] vela:text-[var(--cms-status-edit-text)]'
+	};
+	const dotClass: Record<Variant, string> = {
+		clean: 'vela:bg-[var(--cms-status-clean-dot)]',
+		warn: 'vela:bg-[var(--cms-status-warn-dot)]',
+		edit: 'vela:bg-[var(--cms-status-edit-dot)]'
+	};
+
+	const baseClass =
+		'vela:inline-flex vela:items-center vela:gap-1.5 vela:h-7 vela:pl-2.5 vela:pr-3 vela:rounded-full vela:text-[13px]';
+</script>
+
+{#if onclick}
+	<button
+		type="button"
+		{onclick}
+		class={cn(
+			baseClass,
+			variantClass[variant],
+			'vela:cursor-pointer vela:hover:bg-[var(--cms-status-warn-bg-hover)] vela:focus:outline-none',
+			className
+		)}
+	>
+		<span class={cn('vela:w-1.5 vela:h-1.5 vela:rounded-full', dotClass[variant])}></span>
+		{@render children()}
+	</button>
+{:else}
+	<div class={cn(baseClass, variantClass[variant], className)}>
+		<span class={cn('vela:w-1.5 vela:h-1.5 vela:rounded-full', dotClass[variant])}></span>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/admin-bar/status-pill.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Variant = 'clean' | 'warn' | 'edit';
+type Props = {
+    variant: Variant;
+    onclick?: () => void;
+    class?: string;
+    children: Snippet;
+};
+declare const StatusPill: import("svelte").Component<Props, {}, "">;
+type StatusPill = ReturnType<typeof StatusPill>;
+export default StatusPill;

package/dist/components/admin-bar/theme.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared theme state for the admin bar and editable CMS components.
+ *
+ * The View → Theme menu writes here; the bar's wrapper, every editable
+ * component's `<CssRoot>`, and the system-preference listener all read from
+ * the same singleton so theme changes propagate everywhere immediately.
+ */
+export type AdminBarTheme = 'system' | 'light' | 'dark';
+declare class AdminBarThemeState {
+    pref: AdminBarTheme;
+    systemPrefersDark: boolean;
+    get resolved(): 'light' | 'dark';
+    setPref(next: AdminBarTheme): void;
+}
+export declare const adminBarTheme: AdminBarThemeState;
+export {};

package/dist/components/admin-bar/theme.svelte.js

@@ -0,0 +1,39 @@
+/**
+ * Shared theme state for the admin bar and editable CMS components.
+ *
+ * The View → Theme menu writes here; the bar's wrapper, every editable
+ * component's `<CssRoot>`, and the system-preference listener all read from
+ * the same singleton so theme changes propagate everywhere immediately.
+ */
+import { browser } from '$app/environment';
+const STORAGE_KEY = 'cms.theme';
+const readStoredTheme = () => {
+    if (typeof localStorage === 'undefined')
+        return null;
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw === 'system' || raw === 'light' || raw === 'dark' ? raw : null;
+};
+class AdminBarThemeState {
+    pref = $state(browser ? (readStoredTheme() ?? 'system') : 'system');
+    systemPrefersDark = $state(false);
+    get resolved() {
+        return this.pref === 'system' ? (this.systemPrefersDark ? 'dark' : 'light') : this.pref;
+    }
+    setPref(next) {
+        this.pref = next;
+        try {
+            localStorage.setItem(STORAGE_KEY, next);
+        }
+        catch {
+            /* private mode etc. — non-fatal */
+        }
+    }
+}
+export const adminBarTheme = new AdminBarThemeState();
+if (browser) {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    adminBarTheme.systemPrefersDark = mq.matches;
+    mq.addEventListener('change', (e) => {
+        adminBarTheme.systemPrefersDark = e.matches;
+    });
+}

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

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+	import { variants, type VariantProps } from '../../variants.js';
+
+	export const badgeVariants = variants({
+		base: 'vela:inline-flex vela:items-center vela:justify-center vela:gap-1 vela:rounded-md vela:px-2 vela:py-0.5 vela:text-[11px] vela:font-medium vela:tracking-tight vela:whitespace-nowrap',
+		variants: {
+			variant: {
+				default: 'vela:bg-[var(--cms-bar-bg-hover)] vela:text-bar-text-secondary',
+				warn: 'vela:bg-[var(--cms-status-warn-bg)] vela:text-[var(--cms-status-warn-text)]',
+				success:
+					'vela:bg-[var(--cms-status-success-bg)] vela:text-[var(--cms-status-success-text)]',
+				edit: 'vela:bg-[var(--cms-status-edit-bg)] vela:text-[var(--cms-status-edit-text)]',
+				destructive: 'vela:bg-[var(--cms-status-error-bg)] vela:text-[var(--cms-status-error-text)]'
+			},
+			size: {
+				default: 'vela:px-2 vela:py-0.5 vela:text-[11px]',
+				sm: 'vela:px-1.5 vela:py-0.5 vela:text-[10px] vela:font-semibold vela:uppercase vela:tracking-wider'
+			}
+		},
+		defaultVariants: { variant: 'default', size: 'default' }
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+	export type BadgeSize = VariantProps<typeof badgeVariants>['size'];
+
+	export type BadgeProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: BadgeVariant;
+			size?: BadgeSize;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		children,
+		...restProps
+	}: BadgeProps = $props();
+</script>
+
+{#if href}
+	<a bind:this={ref} class={cn(badgeVariants({ variant, size }), className)} {href} {...restProps}>
+		{@render children?.()}
+	</a>
+{:else}
+	<span bind:this={ref} class={cn(badgeVariants({ variant, size }), className)} {...restProps}>
+		{@render children?.()}
+	</span>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+import { type VariantProps } from '../../variants.js';
+export declare const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "warn" | "success" | "edit" | undefined;
+    size?: "default" | "sm" | undefined;
+}) => string;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+export type BadgeSize = VariantProps<typeof badgeVariants>['size'];
+export type BadgeProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+};
+declare const Badge: import("svelte").Component<BadgeProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

@@ -0,0 +1,4 @@
+import Root from './badge.svelte';
+export { badgeVariants, type BadgeProps, type BadgeSize, type BadgeVariant } from './badge.svelte';
+export { Root, Root as Badge };
+export default Root;

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

@@ -0,0 +1,4 @@
+import Root from './badge.svelte';
+export { badgeVariants } from './badge.svelte';
+export { Root, Root as Badge };
+export default Root;

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

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { variants, type VariantProps } from '../../variants.js';
+
+	export const buttonVariants = variants({
+		base: 'vela:inline-flex vela:items-center vela:justify-center vela:gap-2 vela:whitespace-nowrap vela:rounded-md vela:text-sm vela:font-medium vela:transition-colors vela:focus-visible:outline-none vela:focus-visible:ring-1 vela:focus-visible:ring-ring vela:disabled:pointer-events-none vela:disabled:opacity-50 vela:cursor-pointer',
+		variants: {
+			variant: {
+				default: 'vela:bg-primary vela:text-primary-foreground vela:hover:bg-primary/90',
+				destructive:
+					'vela:bg-destructive vela:text-destructive-foreground vela:hover:bg-destructive/90',
+				outline:
+					'vela:border vela:border-[var(--cms-bar-divider)] vela:bg-transparent vela:text-bar-text-secondary vela:hover:text-bar-text vela:hover:bg-[var(--cms-bar-bg-hover)]',
+				'outline-destructive':
+					'vela:border vela:border-[var(--cms-status-error-border)] vela:bg-transparent vela:text-[var(--cms-status-error-text-base)] vela:hover:text-[var(--cms-status-error-text-hover)] vela:hover:bg-[var(--cms-status-error-bg-hover)]',
+				secondary: 'vela:bg-secondary vela:text-secondary-foreground vela:hover:bg-secondary/80',
+				ghost:
+					'vela:bg-transparent vela:text-bar-text-secondary vela:hover:text-bar-text vela:hover:bg-[var(--cms-bar-bg-hover)]',
+				link: 'vela:text-primary vela:underline-offset-4 vela:hover:underline'
+			},
+			size: {
+				default: 'vela:h-9 vela:px-4 vela:py-2',
+				sm: 'vela:h-8 vela:rounded-md vela:px-3 vela:text-xs',
+				lg: 'vela:h-10 vela:rounded-md vela:px-8',
+				icon: 'vela:h-9 vela:w-9',
+				pill: 'vela:h-7 vela:rounded-full vela:px-3 vela:text-[12px]',
+				'pill-icon': 'vela:h-7 vela:w-7 vela:rounded-full',
+				xs: 'vela:h-6 vela:rounded-md vela:px-2 vela:text-[11px]'
+			}
+		},
+		defaultVariants: { variant: 'default', size: 'default' }
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from '../../variants.js';
+export declare const buttonVariants: (props?: {
+    variant?: "link" | "default" | "destructive" | "outline" | "outline-destructive" | "secondary" | "ghost" | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "pill" | "pill-icon" | "xs" | undefined;
+}) => string;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,4 @@
+import Root from './button.svelte';
+export { buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant } from './button.svelte';
+export { Root, Root as Button };
+export default Root;

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

@@ -0,0 +1,4 @@
+import Root from './button.svelte';
+export { buttonVariants } from './button.svelte';
+export { Root, Root as Button };
+export default Root;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref data-slot="collapsible" {...restProps} />

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

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

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

@@ -0,0 +1,4 @@
+import Root from './collapsible.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Content from './collapsible-content.svelte';
+export { Root, Trigger, Content, Root as Collapsible, Trigger as CollapsibleTrigger, Content as CollapsibleContent };

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

@@ -0,0 +1,6 @@
+import Root from './collapsible.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Content from './collapsible-content.svelte';
+export { Root, Trigger, Content, 
+//
+Root as Collapsible, Trigger as CollapsibleTrigger, Content as CollapsibleContent };

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

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

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

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