@nqmcreative/ui 0.1.0

package/dist/components/Combobox.svelte

@@ -0,0 +1,268 @@
+<script lang="ts">
+	import { anchored } from '../actions/anchor.js';
+	import { clickOutside, portal } from '../actions/dismissable.js';
+	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	export interface ComboboxOption {
+		value: string;
+		label: string;
+		/** Second line under the label. */
+		description?: string;
+		disabled?: boolean;
+		/** Options sharing a group are rendered under one heading. */
+		group?: string;
+	}
+
+	interface Props {
+		/** Bindable — the selected option's `value`, or `''`. */
+		value?: string;
+		options: ComboboxOption[];
+		placeholder?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		disabled?: boolean;
+		/** Shows a clear button once something is selected. */
+		clearable?: boolean;
+		emptyText?: string;
+		id?: string;
+		name?: string;
+		onchange?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		placeholder,
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		clearable = true,
+		emptyText,
+		id,
+		name,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let open = $state(false);
+	let query = $state('');
+	let active = $state(0);
+	let wrapper: HTMLElement | null = $state(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+	let listEl: HTMLElement | null = $state(null);
+
+	const selected = $derived(options.find((option) => option.value === value));
+
+	const matches = $derived.by(() => {
+		const needle = query.trim().toLowerCase();
+		if (!needle) return options;
+		return options.filter(
+			(option) =>
+				option.label.toLowerCase().includes(needle) ||
+				option.description?.toLowerCase().includes(needle)
+		);
+	});
+
+	/** Options in render order, grouped when any option declares a `group`. */
+	const groups = $derived.by(() => {
+		const out: [string, ComboboxOption[]][] = [];
+		for (const option of matches) {
+			const key = option.group ?? '';
+			const bucket = out.find(([name]) => name === key);
+			if (bucket) bucket[1].push(option);
+			else out.push([key, [option]]);
+		}
+		return out;
+	});
+
+	const flat = $derived(groups.flatMap(([, items]) => items));
+
+	function openList() {
+		if (disabled || open) return;
+		open = true;
+		query = '';
+		active = Math.max(
+			0,
+			flat.findIndex((option) => option.value === value)
+		);
+	}
+
+	function choose(option: ComboboxOption) {
+		if (option.disabled) return;
+		value = option.value;
+		onchange?.(option.value);
+		open = false;
+		query = '';
+		inputEl?.focus();
+	}
+
+	function clear(event: MouseEvent) {
+		event.stopPropagation();
+		value = '';
+		query = '';
+		onchange?.('');
+		inputEl?.focus();
+	}
+
+	function move(step: number) {
+		if (flat.length === 0) return;
+		let next = active;
+		for (let i = 0; i < flat.length; i++) {
+			next = (next + step + flat.length) % flat.length;
+			if (!flat[next].disabled) break;
+		}
+		active = next;
+		listEl?.querySelector(`[data-index="${next}"]`)?.scrollIntoView({ block: 'nearest' });
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				if (!open) openList();
+				else move(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				if (open) move(-1);
+				break;
+			case 'Enter':
+				if (open && flat[active]) {
+					event.preventDefault();
+					choose(flat[active]);
+				}
+				break;
+			case 'Escape':
+				if (open) {
+					event.preventDefault();
+					event.stopPropagation();
+					open = false;
+					query = '';
+				}
+				break;
+			case 'Tab':
+				open = false;
+				break;
+		}
+	}
+</script>
+
+<div
+	bind:this={wrapper}
+	class="relative inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-4 transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+>
+	<input
+		bind:this={inputEl}
+		{id}
+		{disabled}
+		type="text"
+		role="combobox"
+		autocomplete="off"
+		aria-expanded={open}
+		aria-controls="{id ?? 'combobox'}-listbox"
+		aria-activedescendant={open && flat[active] ? `${id ?? 'combobox'}-opt-${active}` : undefined}
+		aria-invalid={invalid ? 'true' : undefined}
+		placeholder={selected ? selected.label : (placeholder ?? t.current.comboboxPlaceholder)}
+		value={open ? query : (selected?.label ?? '')}
+		oninput={(event) => {
+			query = event.currentTarget.value;
+			open = true;
+			active = 0;
+		}}
+		onfocus={openList}
+		onkeydown={onKeydown}
+		class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+	/>
+
+	{#if name}<input type="hidden" {name} {value} />{/if}
+
+	{#if clearable && value && !disabled}
+		<button
+			type="button"
+			onclick={clear}
+			aria-label={t.current.clear}
+			class="shrink-0 p-1.5 text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+		>
+			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+				<path d="m2 2 10 10M12 2 2 12" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+		</button>
+	{/if}
+
+	<svg
+		class="pointer-events-none mr-2 size-4 shrink-0 text-text-muted transition-transform duration-150 {open
+			? 'rotate-180'
+			: ''}"
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+	>
+		<path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
+	</svg>
+</div>
+
+{#if open}
+	<div
+		bind:this={listEl}
+		use:portal
+		use:anchored={{ anchor: wrapper, placement: 'bottom-start', offset: 4, matchWidth: true }}
+		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
+		id="{id ?? 'combobox'}-listbox"
+		role="listbox"
+		class="z-50 max-h-64 overflow-y-auto border border-hairline bg-bg py-1 font-sans"
+	>
+		{#if flat.length === 0}
+			<p class="px-3 py-6 text-center text-sm text-text-muted">
+				{emptyText ?? t.current.noMatches}
+			</p>
+		{:else}
+			{#each groups as [group, items] (group)}
+				{#if group}
+					<p class="px-3 pt-2 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase">
+						{group}
+					</p>
+				{/if}
+				{#each items as option (option.value)}
+					{@const index = flat.indexOf(option)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						id="{id ?? 'combobox'}-opt-{index}"
+						data-index={index}
+						role="option"
+						tabindex="-1"
+						aria-selected={option.value === value}
+						aria-disabled={option.disabled}
+						onclick={() => choose(option)}
+						onpointermove={() => (active = index)}
+						class="flex cursor-pointer flex-col gap-0.5 px-3 py-2 text-[14px] transition-colors duration-100
+							{option.disabled ? 'pointer-events-none opacity-40' : ''}
+							{index === active ? toneSoft[tone] : 'text-text-secondary'}"
+					>
+						<span class="flex items-center gap-2">
+							<span class="min-w-0 flex-1 truncate">{option.label}</span>
+							{#if option.value === value}
+								<svg
+									class="size-3.5 shrink-0 {toneText[tone]}"
+									viewBox="0 0 14 14"
+									fill="none"
+									aria-hidden="true"
+								>
+									<path d="m2 7 3.2 3.2L12 3.6" stroke="currentColor" stroke-width="1.6" />
+								</svg>
+							{/if}
+						</span>
+						{#if option.description}
+							<span class="truncate text-xs text-text-muted">{option.description}</span>
+						{/if}
+					</div>
+				{/each}
+			{/each}
+		{/if}
+	</div>
+{/if}

package/dist/components/Combobox.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type Tone } from '../tones.js';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Second line under the label. */
+    description?: string;
+    disabled?: boolean;
+    /** Options sharing a group are rendered under one heading. */
+    group?: string;
+}
+interface Props {
+    /** Bindable — the selected option's `value`, or `''`. */
+    value?: string;
+    options: ComboboxOption[];
+    placeholder?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Shows a clear button once something is selected. */
+    clearable?: boolean;
+    emptyText?: string;
+    id?: string;
+    name?: string;
+    onchange?: (value: string) => void;
+    class?: string;
+}
+declare const Combobox: import("svelte").Component<Props, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/components/CommandPalette.svelte

@@ -0,0 +1,226 @@
+<script module lang="ts">
+	export interface CommandItem {
+		id: string;
+		label: string;
+		/** Second line under the label. */
+		description?: string;
+		/** Items sharing a group are rendered under one heading. */
+		group?: string;
+		/** Right-aligned hint, e.g. `'⌘K'`. */
+		shortcut?: string;
+		/** Extra words to match on that aren't in the label. */
+		keywords?: string;
+		disabled?: boolean;
+		onselect?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import { focusTrap } from '../actions/dismissable.js';
+	import { useLocale } from '../locale.svelte.js';
+	import { toneSoft, type Tone } from '../tones.js';
+	import Kbd from './Kbd.svelte';
+
+	interface Props {
+		open?: boolean;
+		items: CommandItem[];
+		placeholder?: string;
+		emptyText?: string;
+		tone?: Tone;
+		/**
+		 * Key that opens the palette with Cmd/Ctrl held. Default `'k'`.
+		 * Pass `null` to wire your own trigger only.
+		 */
+		hotkey?: string | null;
+		onselect?: (item: CommandItem) => void;
+		class?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		items,
+		placeholder,
+		emptyText,
+		tone = 'brand',
+		hotkey = 'k',
+		onselect,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let dialog: HTMLDialogElement | null = $state(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+	let listEl: HTMLElement | null = $state(null);
+	let query = $state('');
+	let active = $state(0);
+
+	const matches = $derived.by(() => {
+		const needle = query.trim().toLowerCase();
+		if (!needle) return items;
+		return items.filter((item) =>
+			`${item.label} ${item.description ?? ''} ${item.keywords ?? ''} ${item.group ?? ''}`
+				.toLowerCase()
+				.includes(needle)
+		);
+	});
+
+	const groups = $derived.by(() => {
+		const out: [string, CommandItem[]][] = [];
+		for (const item of matches) {
+			const key = item.group ?? '';
+			const bucket = out.find(([name]) => name === key);
+			if (bucket) bucket[1].push(item);
+			else out.push([key, [item]]);
+		}
+		return out;
+	});
+
+	const flat = $derived(groups.flatMap(([, group]) => group));
+
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) {
+			dialog.showModal();
+			query = '';
+			active = 0;
+			queueMicrotask(() => inputEl?.focus());
+		} else if (!open && dialog.open) {
+			dialog.close();
+		}
+	});
+
+	$effect(() => {
+		if (!hotkey) return;
+		const onKeydown = (event: KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === hotkey.toLowerCase()) {
+				event.preventDefault();
+				open = !open;
+			}
+		};
+		window.addEventListener('keydown', onKeydown);
+		return () => window.removeEventListener('keydown', onKeydown);
+	});
+
+	function run(item: CommandItem) {
+		if (item.disabled) return;
+		open = false;
+		item.onselect?.();
+		onselect?.(item);
+	}
+
+	function move(step: number) {
+		if (flat.length === 0) return;
+		let next = active;
+		for (let i = 0; i < flat.length; i++) {
+			next = (next + step + flat.length) % flat.length;
+			if (!flat[next].disabled) break;
+		}
+		active = next;
+		listEl?.querySelector(`[data-index="${next}"]`)?.scrollIntoView({ block: 'nearest' });
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				move(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				move(-1);
+				break;
+			case 'Enter':
+				if (flat[active]) {
+					event.preventDefault();
+					run(flat[active]);
+				}
+				break;
+			case 'Escape':
+				event.preventDefault();
+				open = false;
+				break;
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onclose={() => (open = false)}
+	onclick={(event) => {
+		if (event.target === dialog) open = false;
+	}}
+	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none border border-hairline bg-bg p-0 text-text backdrop:bg-text/40 {className}"
+>
+	<div use:focusTrap={{ autofocus: false }} onkeydown={onKeydown} role="none" class="flex flex-col">
+		<div class="flex items-center gap-3 border-b border-hairline px-4">
+			<svg
+				class="size-4 shrink-0 text-text-muted"
+				viewBox="0 0 16 16"
+				fill="none"
+				aria-hidden="true"
+			>
+				<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5" />
+				<path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+			<input
+				bind:this={inputEl}
+				bind:value={query}
+				oninput={() => (active = 0)}
+				type="text"
+				autocomplete="off"
+				aria-label={placeholder ?? t.current.commandPlaceholder}
+				placeholder={placeholder ?? t.current.commandPlaceholder}
+				class="h-12 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+			/>
+			<Kbd>esc</Kbd>
+		</div>
+
+		<div
+			bind:this={listEl}
+			role="listbox"
+			aria-label="Commands"
+			class="max-h-80 overflow-y-auto py-1"
+		>
+			{#if flat.length === 0}
+				<p class="px-4 py-10 text-center font-sans text-sm text-text-muted">
+					{emptyText ?? t.current.noResults}
+				</p>
+			{:else}
+				{#each groups as [group, groupItems] (group)}
+					{#if group}
+						<p class="px-4 pt-3 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase">
+							{group}
+						</p>
+					{/if}
+					{#each groupItems as item (item.id)}
+						{@const index = flat.indexOf(item)}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							data-index={index}
+							role="option"
+							tabindex="-1"
+							aria-selected={index === active}
+							aria-disabled={item.disabled}
+							onclick={() => run(item)}
+							onpointermove={() => (active = index)}
+							class="flex cursor-pointer items-center gap-3 px-4 py-2.5 font-sans text-[14px] transition-colors duration-100
+								{item.disabled ? 'pointer-events-none opacity-40' : ''}
+								{index === active ? toneSoft[tone] : 'text-text-secondary'}"
+						>
+							<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+								<span class="truncate">{item.label}</span>
+								{#if item.description}
+									<span class="truncate text-xs text-text-muted">{item.description}</span>
+								{/if}
+							</span>
+							{#if item.shortcut}
+								<span class="shrink-0 font-mono text-[11px] text-text-muted">{item.shortcut}</span>
+							{/if}
+						</div>
+					{/each}
+				{/each}
+			{/if}
+		</div>
+	</div>
+</dialog>

package/dist/components/CommandPalette.svelte.d.ts

@@ -0,0 +1,32 @@
+export interface CommandItem {
+    id: string;
+    label: string;
+    /** Second line under the label. */
+    description?: string;
+    /** Items sharing a group are rendered under one heading. */
+    group?: string;
+    /** Right-aligned hint, e.g. `'⌘K'`. */
+    shortcut?: string;
+    /** Extra words to match on that aren't in the label. */
+    keywords?: string;
+    disabled?: boolean;
+    onselect?: () => void;
+}
+import { type Tone } from '../tones.js';
+interface Props {
+    open?: boolean;
+    items: CommandItem[];
+    placeholder?: string;
+    emptyText?: string;
+    tone?: Tone;
+    /**
+     * Key that opens the palette with Cmd/Ctrl held. Default `'k'`.
+     * Pass `null` to wire your own trigger only.
+     */
+    hotkey?: string | null;
+    onselect?: (item: CommandItem) => void;
+    class?: string;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/ConfirmDialog.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import Modal from './Modal.svelte';
+	import { useLocale } from '../locale.svelte.js';
+	import { toneSoft, type Tone } from '../tones.js';
+
+	interface Props {
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** Drives the confirm button and the glyph. `danger` for destructive acts. */
+		tone?: Tone;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		/** Spins the confirm button and blocks dismissal while the action runs. */
+		loading?: boolean;
+		/** Awaited — the dialog stays open and busy until it settles. */
+		onconfirm?: () => void | Promise<void>;
+		oncancel?: () => void;
+		icon?: Snippet;
+		/** Extra content between the description and the buttons. */
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		tone = 'danger',
+		confirmLabel,
+		cancelLabel,
+		loading = $bindable(false),
+		onconfirm,
+		oncancel,
+		icon,
+		children
+	}: Props = $props();
+
+	const t = useLocale();
+
+	async function confirm() {
+		try {
+			loading = true;
+			await onconfirm?.();
+			open = false;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function cancel() {
+		if (loading) return;
+		open = false;
+		oncancel?.();
+	}
+</script>
+
+<Modal
+	bind:open
+	size="sm"
+	dismissible={!loading}
+	showClose={false}
+	onclose={() => (loading = false)}
+>
+	<div class="flex items-start gap-4">
+		<span class="flex size-10 shrink-0 items-center justify-center rounded-full {toneSoft[tone]}">
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<svg class="size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<path d="M10 5.5v5" stroke="currentColor" stroke-width="1.6" />
+					<circle cx="10" cy="14" r="1" fill="currentColor" />
+					<circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.4" />
+				</svg>
+			{/if}
+		</span>
+		<div class="flex min-w-0 flex-1 flex-col gap-2">
+			<h2 class="font-heading text-lg font-medium tracking-tight text-text">{title}</h2>
+			{#if description}
+				<p class="text-sm leading-relaxed text-text-secondary">{description}</p>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+
+	{#snippet footer()}
+		<Button variant="ghost" tone="neutral" onclick={cancel} disabled={loading}>
+			{cancelLabel ?? t.current.cancel}
+		</Button>
+		<Button {tone} onclick={confirm} {loading}>
+			{confirmLabel ?? t.current.confirm}
+		</Button>
+	{/snippet}
+</Modal>

package/dist/components/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import { type Tone } from '../tones.js';
+interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Drives the confirm button and the glyph. `danger` for destructive acts. */
+    tone?: Tone;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Spins the confirm button and blocks dismissal while the action runs. */
+    loading?: boolean;
+    /** Awaited — the dialog stays open and busy until it settles. */
+    onconfirm?: () => void | Promise<void>;
+    oncancel?: () => void;
+    icon?: Snippet;
+    /** Extra content between the description and the buttons. */
+    children?: Snippet;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "loading" | "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;