npm - @nucel/ui - Versions diffs - 0.2.0 → 0.10.0 - Mend

@nucel/ui 0.2.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/package.json +8 -32
package/src/lib/components/BottomSheet.svelte +96 -0
package/src/lib/components/Breadcrumbs.svelte +57 -0
package/src/lib/components/Checkbox.svelte +64 -0
package/src/lib/components/CodeBlock.svelte +264 -0
package/src/lib/components/CodeEditor.svelte +175 -0
package/src/lib/components/ColorInput.svelte +41 -0
package/src/lib/components/ColorInput.test.ts +126 -0
package/src/lib/components/Combobox.svelte +103 -0
package/src/lib/components/CommandPalette.svelte +135 -0
package/src/lib/components/CopyButton.svelte +95 -0
package/src/lib/components/CopyButton.test.ts +213 -0
package/src/lib/components/DataTable.svelte +202 -0
package/src/lib/components/DateRangePicker.svelte +185 -0
package/src/lib/components/DiffEditor.svelte +174 -0
package/src/lib/components/Drawer.svelte +69 -0
package/src/lib/components/Fab.svelte +59 -0
package/src/lib/components/Form.svelte +38 -0
package/src/lib/components/FormField.svelte +51 -0
package/src/lib/components/IconButton.svelte +86 -0
package/src/lib/components/IconButton.test.ts +139 -0
package/src/lib/components/InlineCode.svelte +28 -0
package/src/lib/components/Pagination.svelte +65 -0
package/src/lib/components/Radio.svelte +60 -0
package/src/lib/components/RadioGroup.svelte +26 -0
package/src/lib/components/SearchInput.svelte +77 -0
package/src/lib/components/Skeleton.svelte +76 -0
package/src/lib/components/StatCard.svelte +97 -0
package/src/lib/components/ThemeProvider.svelte +157 -0
package/src/lib/components/ThemeToggle.svelte +68 -0
package/src/lib/components/ThreeWayMerge.svelte +185 -0
package/src/lib/components/ui/MarkdownRenderer.svelte +126 -8
package/src/lib/components/ui/Sparkline.svelte +1 -1
package/src/lib/components/ui/StatusBadge.svelte +6 -3
package/src/lib/components/ui/StatusDot.svelte +3 -3
package/src/lib/index.ts +120 -45
package/src/lib/utils/detectLanguage.ts +187 -0
package/src/lib/utils/monaco-workers.d.ts +32 -0
package/src/lib/utils/monacoLoader.ts +167 -0
package/src/lib/utils/shikiHighlighter.ts +78 -0
package/src/styles.css +100 -32
package/src/lib/components/ui/Alert.svelte +0 -47
package/src/lib/components/ui/Alert.test.ts +0 -206
package/src/lib/components/ui/AppCard.svelte +0 -76
package/src/lib/components/ui/AppShell.svelte +0 -14
package/src/lib/components/ui/AppSidebar.svelte +0 -45
package/src/lib/components/ui/BranchPill.svelte +0 -19
package/src/lib/components/ui/BranchPill.test.ts +0 -121
package/src/lib/components/ui/CommentPill.svelte +0 -12
package/src/lib/components/ui/CostDisplay.svelte +0 -26
package/src/lib/components/ui/CostDisplay.test.ts +0 -1115
package/src/lib/components/ui/FormField.svelte +0 -34
package/src/lib/components/ui/FormField.test.ts +0 -41
package/src/lib/components/ui/ListCard.svelte +0 -9
package/src/lib/components/ui/NavItem.svelte +0 -42
package/src/lib/components/ui/NavSection.svelte +0 -17
package/src/lib/components/ui/PageHeader.svelte +0 -25
package/src/lib/components/ui/PageHeader.test.ts +0 -72
package/src/lib/components/ui/PermissionChips.svelte +0 -49
package/src/lib/components/ui/ProgressRing.test.ts +0 -239
package/src/lib/components/ui/Section.svelte +0 -21
package/src/lib/components/ui/Section.test.ts +0 -44
package/src/lib/components/ui/SectionTitle.svelte +0 -16
package/src/lib/components/ui/StatCard.svelte +0 -19
package/src/lib/components/ui/StatusBadge.test.ts +0 -150
package/src/lib/components/ui/StatusPill.svelte +0 -54
package/src/lib/components/ui/StatusPill.test.ts +0 -125
package/src/lib/components/ui/editor/RichEditor.svelte +0 -580
package/src/lib/components/ui/editor/mention-suggestion.ts +0 -144
package/src/lib/components/ui/table/Table.svelte +0 -12
package/src/lib/components/ui/table/Table.test.ts +0 -317
package/src/lib/components/ui/table/TableBody.svelte +0 -10
package/src/lib/components/ui/table/TableCaption.svelte +0 -10
package/src/lib/components/ui/table/TableCell.svelte +0 -10
package/src/lib/components/ui/table/TableHead.svelte +0 -10
package/src/lib/components/ui/table/TableHeader.svelte +0 -10
package/src/lib/components/ui/table/TableRow.svelte +0 -10
package/src/lib/components/ui/table/index.ts +0 -7

package/src/lib/components/CodeEditor.svelte ADDED Viewed

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import type * as MonacoNs from 'monaco-editor';
+	import { cn } from '../utils.js';
+	import { loadMonaco, resolveMonacoTheme } from '../utils/monacoLoader.js';
+	import Skeleton from './Skeleton.svelte';
+	export type CodeEditorTheme = 'light' | 'dark' | 'auto';
+	type Props = {
+		/** Editor content (bindable). */
+		value?: string;
+		/** Monaco language id, e.g. "typescript", "yaml", "markdown". */
+		language?: string;
+		/** Theme mode. "auto" follows the .dark class on <html>. */
+		theme?: CodeEditorTheme;
+		/** Read-only mode (disables editing but keeps copy/select). */
+		readOnly?: boolean;
+		/** CSS height for the editor container. */
+		height?: string;
+		/** Show Monaco's minimap. Off by default to keep things calm. */
+		minimap?: boolean;
+		/** Show line numbers. */
+		lineNumbers?: boolean;
+		/** Soft word wrap. */
+		wordWrap?: boolean;
+		/** Tab size (spaces). */
+		tabSize?: number;
+		/** Container className. */
+		class?: string;
+		/** Optional placeholder shown when value is empty. */
+		placeholder?: string;
+		/** Called on every value change. */
+		onchange?: (value: string) => void;
+		/** Aria label for the editor (accessibility). */
+		ariaLabel?: string;
+	};
+	let {
+		value = $bindable(''),
+		language = 'plaintext',
+		theme = 'auto',
+		readOnly = false,
+		height = '400px',
+		minimap = false,
+		lineNumbers = true,
+		wordWrap = true,
+		tabSize = 2,
+		class: className,
+		placeholder,
+		onchange,
+		ariaLabel,
+	}: Props = $props();
+	let container: HTMLDivElement;
+	let editor: MonacoNs.editor.IStandaloneCodeEditor | null = null;
+	let monacoRef: typeof MonacoNs | null = null;
+	let ready = $state(false);
+	let suppressNextChange = false;
+	onMount(() => {
+		const p = loadMonaco();
+		if (!p) return;
+		let disposed = false;
+		p.then((monaco) => {
+			if (disposed || !container) return;
+			monacoRef = monaco;
+			editor = monaco.editor.create(container, {
+				value: value ?? '',
+				language,
+				theme: resolveMonacoTheme(theme),
+				readOnly,
+				minimap: { enabled: minimap },
+				lineNumbers: lineNumbers ? 'on' : 'off',
+				wordWrap: wordWrap ? 'on' : 'off',
+				tabSize,
+				automaticLayout: true,
+				scrollBeyondLastLine: false,
+				fontSize: 13,
+				fontFamily:
+					'"JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+				smoothScrolling: true,
+				cursorBlinking: 'smooth',
+				padding: { top: 12, bottom: 12 },
+				renderLineHighlight: 'all',
+				ariaLabel: ariaLabel ?? `Code editor (${language})`,
+			});
+			editor.onDidChangeModelContent(() => {
+				if (!editor || suppressNextChange) {
+					suppressNextChange = false;
+					return;
+				}
+				const next = editor.getValue();
+				value = next;
+				onchange?.(next);
+			});
+			ready = true;
+		}).catch((err) => {
+			// eslint-disable-next-line no-console
+			console.error('[@nucel/ui] Monaco failed to load', err);
+		});
+		return () => {
+			disposed = true;
+		};
+	});
+	onDestroy(() => {
+		editor?.dispose();
+		editor = null;
+	});
+	// React to prop changes after mount.
+	$effect(() => {
+		if (!editor) return;
+		const current = editor.getValue();
+		if (value !== current) {
+			suppressNextChange = true;
+			editor.setValue(value ?? '');
+		}
+	});
+	$effect(() => {
+		if (!editor || !monacoRef) return;
+		const model = editor.getModel();
+		if (model && model.getLanguageId() !== language) {
+			monacoRef.editor.setModelLanguage(model, language);
+		}
+	});
+	$effect(() => {
+		if (!monacoRef) return;
+		monacoRef.editor.setTheme(resolveMonacoTheme(theme));
+	});
+	$effect(() => {
+		editor?.updateOptions({
+			readOnly,
+			minimap: { enabled: minimap },
+			lineNumbers: lineNumbers ? 'on' : 'off',
+			wordWrap: wordWrap ? 'on' : 'off',
+			tabSize,
+		});
+	});
+</script>
+<div
+	bind:this={container}
+	data-slot="code-editor"
+	class={cn(
+		'border-border bg-background relative overflow-hidden rounded-lg border',
+		className,
+	)}
+	style="height: {height};"
+	role="group"
+	aria-label={ariaLabel ?? `Code editor (${language})`}
+>
+	{#if !ready}
+		<div class="absolute inset-0 p-2">
+			<Skeleton class="h-full w-full" />
+		</div>
+	{/if}
+	{#if ready && placeholder && (!value || value.length === 0)}
+		<div
+			class="text-muted-foreground pointer-events-none absolute left-14 top-3 font-mono text-[13px] opacity-60"
+		>
+			{placeholder}
+		</div>
+	{/if}
+</div>

package/src/lib/components/ColorInput.svelte ADDED Viewed

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../utils.js';
+	// Native <input type="color"> wrapper styled to match @nucel/ui form
+	// controls (matching border/ring/focus tokens). Used for label colours,
+	// theme pickers, etc. Optionally renders the current hex value alongside.
+	type Props = Omit<WithElementRef<HTMLInputAttributes>, 'type'> & {
+		value?: string;
+		/** Show the current hex value next to the swatch. */
+		showValue?: boolean;
+		class?: string;
+	};
+	let {
+		ref = $bindable(null),
+		value = $bindable('#000000'),
+		showValue = false,
+		class: className,
+		'data-slot': dataSlot = 'color-input',
+		...restProps
+	}: Props = $props();
+</script>
+<span data-slot={dataSlot} class={cn('inline-flex items-center gap-2', showValue && 'min-w-0')}>
+	<input
+		bind:this={ref}
+		type="color"
+		bind:value
+		class={cn(
+			'h-9 w-12 cursor-pointer rounded-md border border-input bg-background p-1 shadow-xs transition-[color,box-shadow] outline-none',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'disabled:cursor-not-allowed disabled:opacity-50',
+			className,
+		)}
+		{...restProps}
+	/>
+	{#if showValue}
+		<span class="text-muted-foreground font-mono text-xs uppercase">{value}</span>
+	{/if}
+</span>

package/src/lib/components/ColorInput.test.ts ADDED Viewed

@@ -0,0 +1,126 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import ColorInput from './ColorInput.svelte';
+/** Grab the native color input from a rendered ColorInput. */
+function getColorInput(container: HTMLElement): HTMLInputElement {
+	return container.querySelector('input[type="color"]') as HTMLInputElement;
+}
+describe('ColorInput', () => {
+	it('renders a native <input type="color"> inside the color-input slot', () => {
+		const { container } = render(ColorInput, { props: { value: '#3b82f6' } });
+		const wrapper = container.querySelector('[data-slot="color-input"]');
+		expect(wrapper).toBeInTheDocument();
+		const input = getColorInput(container);
+		expect(input).toBeInTheDocument();
+		expect(input.type).toBe('color');
+	});
+	it('reflects the initial value on the input', () => {
+		const { container } = render(ColorInput, { props: { value: '#22c55e' } });
+		expect(getColorInput(container).value).toBe('#22c55e');
+	});
+	it('defaults to #000000 when no value is supplied', () => {
+		const { container } = render(ColorInput, { props: {} });
+		expect(getColorInput(container).value).toBe('#000000');
+	});
+	it('does not show the hex value by default', () => {
+		const { container } = render(ColorInput, { props: { value: '#abcdef' } });
+		const wrapper = container.querySelector('[data-slot="color-input"]')!;
+		// Only the <input> child, no trailing text span.
+		expect(wrapper.querySelectorAll('span').length).toBe(0);
+	});
+	it('shows the hex value (uppercased via class) when showValue is set', () => {
+		const { container } = render(ColorInput, {
+			props: { value: '#abcdef', showValue: true },
+		});
+		const wrapper = container.querySelector('[data-slot="color-input"]')!;
+		const valueSpan = wrapper.querySelector('span');
+		expect(valueSpan).toBeInTheDocument();
+		expect(valueSpan).toHaveTextContent('#abcdef');
+		expect(valueSpan?.className).toContain('uppercase');
+		expect(valueSpan?.className).toContain('font-mono');
+	});
+	it('updates the displayed hex value when the input changes', async () => {
+		const { container } = render(ColorInput, {
+			props: { value: '#000000', showValue: true },
+		});
+		const input = getColorInput(container);
+		input.value = '#ff8800';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await tick();
+		const valueSpan = container.querySelector('[data-slot="color-input"] span');
+		expect(valueSpan).toHaveTextContent('#ff8800');
+	});
+	it('propagates an input change through the two-way bound value', async () => {
+		// `bind:value` drives the `showValue` span; if the bound value updates
+		// on input, the rendered hex text reflects the new colour.
+		const { container } = render(ColorInput, {
+			props: { value: '#111111', showValue: true },
+		});
+		const input = getColorInput(container);
+		input.value = '#00ff00';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await tick();
+		expect(input.value).toBe('#00ff00');
+		expect(container.querySelector('[data-slot="color-input"] span')).toHaveTextContent(
+			'#00ff00',
+		);
+	});
+	it('emits a change event consumers can listen to', async () => {
+		const onchange = vi.fn();
+		const { container } = render(ColorInput, {
+			props: { value: '#000000', onchange },
+		});
+		const input = getColorInput(container);
+		input.value = '#123456';
+		input.dispatchEvent(new Event('change', { bubbles: true }));
+		await tick();
+		expect(onchange).toHaveBeenCalledOnce();
+	});
+	it('forwards the disabled attribute to the native input', () => {
+		const { container } = render(ColorInput, {
+			props: { value: '#ef4444', disabled: true },
+		});
+		expect(getColorInput(container)).toBeDisabled();
+	});
+	it('merges a custom class onto the input', () => {
+		const { container } = render(ColorInput, {
+			props: { value: '#000000', class: 'my-swatch' },
+		});
+		const input = getColorInput(container);
+		expect(input.className).toContain('my-swatch');
+		// Base styling is preserved.
+		expect(input.className).toContain('rounded-md');
+	});
+	it('honours a custom data-slot', () => {
+		const { container } = render(ColorInput, {
+			props: { value: '#000000', 'data-slot': 'theme-color' },
+		});
+		expect(container.querySelector('[data-slot="theme-color"]')).toBeInTheDocument();
+	});
+	it('forwards arbitrary props (e.g. aria-label) to the input', () => {
+		const { getByLabelText } = render(ColorInput, {
+			props: { value: '#000000', 'aria-label': 'Pick a label colour' },
+		});
+		expect(getByLabelText('Pick a label colour')).toBeInTheDocument();
+	});
+});

package/src/lib/components/Combobox.svelte ADDED Viewed

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	export type ComboboxOption = {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	};
+</script>
+<script lang="ts">
+	import { Combobox as ComboboxPrimitive } from 'bits-ui';
+	import { CheckIcon, ChevronsUpDownIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+	type Props = {
+		options: ComboboxOption[];
+		value?: string;
+		placeholder?: string;
+		emptyMessage?: string;
+		disabled?: boolean;
+		class?: string;
+		inputClass?: string;
+		contentClass?: string;
+		onValueChange?: (value: string) => void;
+	};
+	let {
+		options,
+		value = $bindable(''),
+		placeholder = 'Select…',
+		emptyMessage = 'No results',
+		disabled = false,
+		class: className,
+		inputClass,
+		contentClass,
+		onValueChange,
+	}: Props = $props();
+	let search = $state('');
+	const filtered = $derived.by(() => {
+		const q = search.trim().toLowerCase();
+		if (!q) return options;
+		return options.filter((o) => o.label.toLowerCase().includes(q));
+	});
+	const inputValue = $derived(options.find((o) => o.value === value)?.label ?? '');
+</script>
+<ComboboxPrimitive.Root
+	type="single"
+	bind:value
+	{inputValue}
+	{disabled}
+	{onValueChange}
+>
+	<div data-slot="combobox" class={cn('relative w-full', className)}>
+		<ComboboxPrimitive.Input
+			oninput={(e: Event) => (search = (e.currentTarget as HTMLInputElement).value)}
+			class={cn(
+				'border-input bg-background placeholder:text-muted-foreground flex h-9 w-full rounded-md border px-3 py-1 pr-8 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				inputClass,
+			)}
+			{placeholder}
+		/>
+		<ComboboxPrimitive.Trigger
+			class="text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2 outline-none"
+			aria-label="Open options"
+		>
+			<ChevronsUpDownIcon class="size-4" />
+		</ComboboxPrimitive.Trigger>
+	</div>
+	<ComboboxPrimitive.Portal>
+		<ComboboxPrimitive.Content
+			sideOffset={4}
+			class={cn(
+				'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out z-50 max-h-72 min-w-[var(--bits-combobox-anchor-width)] overflow-hidden rounded-md border p-1 shadow-md',
+				contentClass,
+			)}
+		>
+			<ComboboxPrimitive.Viewport class="max-h-64 overflow-y-auto p-1">
+				{#each filtered as opt (opt.value)}
+					<ComboboxPrimitive.Item
+						value={opt.value}
+						label={opt.label}
+						disabled={opt.disabled}
+						class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+					>
+						{#snippet children({ selected })}
+							<span class="flex-1">{opt.label}</span>
+							{#if selected}
+								<CheckIcon class="size-4" />
+							{/if}
+						{/snippet}
+					</ComboboxPrimitive.Item>
+				{:else}
+					<div class="text-muted-foreground px-2 py-3 text-center text-sm">
+						{emptyMessage}
+					</div>
+				{/each}
+			</ComboboxPrimitive.Viewport>
+		</ComboboxPrimitive.Content>
+	</ComboboxPrimitive.Portal>
+</ComboboxPrimitive.Root>

package/src/lib/components/CommandPalette.svelte ADDED Viewed

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+	import type { Component } from 'svelte';
+	export type CommandPaletteItem = {
+		id: string;
+		label: string;
+		description?: string;
+		group?: string;
+		keywords?: string[];
+		shortcut?: string;
+		icon?: Component<{ class?: string }>;
+		onSelect?: () => void;
+		disabled?: boolean;
+	};
+</script>
+<script lang="ts">
+	import { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import { SearchIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+	type Props = {
+		open?: boolean;
+		items: CommandPaletteItem[];
+		placeholder?: string;
+		emptyMessage?: string;
+		label?: string;
+		class?: string;
+		/** Close palette on item select (defaults true) */
+		closeOnSelect?: boolean;
+	};
+	let {
+		open = $bindable(false),
+		items,
+		placeholder = 'Type a command or search…',
+		emptyMessage = 'No results found.',
+		label = 'Command palette',
+		class: className,
+		closeOnSelect = true,
+	}: Props = $props();
+	// Group items by `group` (default group = "")
+	const grouped = $derived.by(() => {
+		const map = new Map<string, CommandPaletteItem[]>();
+		for (const item of items) {
+			const g = item.group ?? '';
+			if (!map.has(g)) map.set(g, []);
+			map.get(g)!.push(item);
+		}
+		return Array.from(map.entries());
+	});
+	function handleSelect(item: CommandPaletteItem) {
+		if (item.disabled) return;
+		item.onSelect?.();
+		if (closeOnSelect) open = false;
+	}
+</script>
+<DialogPrimitive.Root bind:open>
+	<DialogPrimitive.Portal>
+		<DialogPrimitive.Overlay
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+		/>
+		<DialogPrimitive.Content
+			class={cn(
+				'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out fixed top-[20%] left-1/2 z-50 w-full max-w-lg -translate-x-1/2 overflow-hidden rounded-lg border shadow-lg',
+				className,
+			)}
+		>
+			<DialogPrimitive.Title class="sr-only">{label}</DialogPrimitive.Title>
+			<DialogPrimitive.Description class="sr-only">{placeholder}</DialogPrimitive.Description>
+			<CommandPrimitive.Root {label} class="flex flex-col" loop>
+				<div class="border-border flex items-center gap-2 border-b px-3">
+					<SearchIcon class="text-muted-foreground size-4 shrink-0" />
+					<CommandPrimitive.Input
+						{placeholder}
+						class="placeholder:text-muted-foreground flex h-11 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50"
+					/>
+				</div>
+				<CommandPrimitive.List class="max-h-80 overflow-y-auto p-1">
+					<CommandPrimitive.Empty
+						class="text-muted-foreground py-6 text-center text-sm"
+					>
+						{emptyMessage}
+					</CommandPrimitive.Empty>
+					<CommandPrimitive.Viewport>
+						{#each grouped as [group, groupItems] (group)}
+							<CommandPrimitive.Group value={group || 'default'} class="overflow-hidden p-1">
+								{#if group}
+									<CommandPrimitive.GroupHeading
+										class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+									>
+										{group}
+									</CommandPrimitive.GroupHeading>
+								{/if}
+								<CommandPrimitive.GroupItems>
+									{#each groupItems as item (item.id)}
+										<CommandPrimitive.Item
+											value={item.id}
+											keywords={item.keywords}
+											disabled={item.disabled}
+											onSelect={() => handleSelect(item)}
+											class="data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+										>
+											{#if item.icon}
+												{@const Icon = item.icon}
+												<Icon class="size-4 shrink-0" />
+											{/if}
+											<div class="flex flex-1 flex-col">
+												<span>{item.label}</span>
+												{#if item.description}
+													<span class="text-muted-foreground text-xs">{item.description}</span>
+												{/if}
+											</div>
+											{#if item.shortcut}
+												<kbd
+													class="bg-muted text-muted-foreground ms-auto rounded px-1.5 py-0.5 font-mono text-[10px]"
+												>
+													{item.shortcut}
+												</kbd>
+											{/if}
+										</CommandPrimitive.Item>
+									{/each}
+								</CommandPrimitive.GroupItems>
+							</CommandPrimitive.Group>
+						{/each}
+					</CommandPrimitive.Viewport>
+				</CommandPrimitive.List>
+			</CommandPrimitive.Root>
+		</DialogPrimitive.Content>
+	</DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/src/lib/components/CopyButton.svelte ADDED Viewed

@@ -0,0 +1,95 @@
+<script lang="ts" module>
+	export type CopyButtonVariant = ButtonVariant;
+	export type CopyButtonSize = ButtonSize;
+</script>
+<script lang="ts">
+	import { CheckIcon, CopyIcon } from '@lucide/svelte';
+	import Button, { type ButtonVariant, type ButtonSize } from './ui/button/button.svelte';
+	import { cn } from '../utils.js';
+	type Props = {
+		/** The text to write to the clipboard. */
+		value: string;
+		/** Visible label. Pass `false`/empty for an icon-only button. */
+		label?: string | false;
+		/** Label swapped in after a successful copy. */
+		copiedLabel?: string;
+		/** How long (ms) the "copied" state lasts before reverting. */
+		timeout?: number;
+		variant?: CopyButtonVariant;
+		size?: CopyButtonSize;
+		/** Hide the leading icon (e.g. when you only want a text toggle). */
+		hideIcon?: boolean;
+		class?: string;
+		disabled?: boolean;
+		/** Fired after a successful copy. */
+		onCopy?: (value: string) => void;
+		/** Fired when the clipboard write throws (e.g. permission denied). */
+		onError?: (err: unknown) => void;
+		'aria-label'?: string;
+	};
+	let {
+		value,
+		label = 'Copy',
+		copiedLabel = 'Copied',
+		timeout = 2000,
+		variant = 'outline',
+		size = 'sm',
+		hideIcon = false,
+		class: className,
+		disabled = false,
+		onCopy,
+		onError,
+		'aria-label': ariaLabel,
+		...restProps
+	}: Props = $props();
+	let copied = $state(false);
+	let timer: ReturnType<typeof setTimeout> | null = null;
+	const iconOnly = $derived(label === false || label === '');
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(value);
+			copied = true;
+			onCopy?.(value);
+			if (timer) clearTimeout(timer);
+			timer = setTimeout(() => {
+				copied = false;
+				timer = null;
+			}, timeout);
+		} catch (err) {
+			onError?.(err);
+		}
+	}
+	$effect(() => () => {
+		if (timer) clearTimeout(timer);
+	});
+</script>
+<Button
+	{variant}
+	size={iconOnly && size === 'sm' ? 'icon-sm' : size}
+	{disabled}
+	onclick={copy}
+	data-slot="copy-button"
+	data-copied={copied ? '' : undefined}
+	aria-label={ariaLabel ?? (iconOnly ? (copied ? copiedLabel : (label || 'Copy')) : undefined)}
+	class={cn(className)}
+	{...restProps}
+>
+	{#if !hideIcon}
+		{#if copied}
+			<CheckIcon class="text-success" />
+		{:else}
+			<CopyIcon />
+		{/if}
+	{/if}
+	{#if !iconOnly}
+		<span>{copied ? copiedLabel : label}</span>
+	{/if}
+</Button>