@nqmcreative/ui 0.1.1 → 0.2.1

package/dist/{components → styles/matte}/CommandPalette.svelte

@@ -16,9 +16,11 @@
 </script>
 
 <script lang="ts">
-	import { focusTrap } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { toneSoft, type Tone } from '../tones.js';
+	import { focusTrap } from '../../core/actions/dismissable.js';
+	import { syncDialog } from '../../core/dialog.svelte.js';
+	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 	import Kbd from './Kbd.svelte';
 
 	interface Props {
@@ -53,40 +55,29 @@
 	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 matches = $derived(
+		matchQuery(
+			items,
+			query,
+			(item) => `${item.label} ${item.description ?? ''} ${item.keywords ?? ''} ${item.group ?? ''}`
+		)
+	);
 
+	const groups = $derived(groupItems(matches));
 	const flat = $derived(groups.flatMap(([, group]) => group));
 
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
 	$effect(() => {
 		if (!dialog) return;
-		if (open && !dialog.open) {
-			dialog.showModal();
+		const wasOpen = dialog.open;
+		syncDialog(dialog, open);
+		if (open && !wasOpen) {
 			query = '';
-			active = 0;
+			cursor.reset();
 			queueMicrotask(() => inputEl?.focus());
-		} else if (!open && dialog.open) {
-			dialog.close();
 		}
 	});
 
@@ -110,14 +101,8 @@
 	}
 
 	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' });
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
 	}
 
 	function onKeydown(event: KeyboardEvent) {
@@ -131,9 +116,9 @@
 				move(-1);
 				break;
 			case 'Enter':
-				if (flat[active]) {
+				if (cursor.current) {
 					event.preventDefault();
-					run(flat[active]);
+					run(cursor.current);
 				}
 				break;
 			case 'Escape':
@@ -166,7 +151,7 @@
 			<input
 				bind:this={inputEl}
 				bind:value={query}
-				oninput={() => (active = 0)}
+				oninput={() => cursor.reset()}
 				type="text"
 				autocomplete="off"
 				aria-label={placeholder ?? t.current.commandPlaceholder}
@@ -203,7 +188,7 @@
 							aria-selected={index === active}
 							aria-disabled={item.disabled}
 							onclick={() => run(item)}
-							onpointermove={() => (active = index)}
+							onpointermove={() => (cursor.index = 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'}"

package/dist/{components → styles/matte}/CommandPalette.svelte.d.ts

@@ -12,7 +12,7 @@ export interface CommandItem {
     disabled?: boolean;
     onselect?: () => void;
 }
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     open?: boolean;
     items: CommandItem[];

package/dist/{components → styles/matte}/ConfirmDialog.svelte

@@ -2,8 +2,8 @@
 	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';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		open?: boolean;

package/dist/{components → styles/matte}/ConfirmDialog.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     open?: boolean;
     title: string;
@@ -17,6 +17,6 @@ interface Props {
     /** Extra content between the description and the buttons. */
     children?: Snippet;
 }
-declare const ConfirmDialog: import("svelte").Component<Props, {}, "loading" | "open">;
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "open" | "loading">;
 type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
 export default ConfirmDialog;

package/dist/{components → styles/matte}/ContextMenu.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, focusTrap, navigateList, portal } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
+	import { menuItems } from '../../core/trigger.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props {
 		/** The region that responds to a right-click. */
@@ -57,10 +58,7 @@
 			open = false;
 			return;
 		}
-		if (!menuEl) return;
-		navigateList(event, [
-			...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
-		]);
+		navigateList(event, menuItems(menuEl));
 	}
 </script>
 

package/dist/{components → styles/matte}/DatePicker.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, portal } from '../actions/dismissable.js';
-	import { formatISO, parseFormatted } from '../date.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, portal } from '../../core/actions/dismissable.js';
+	import { dateHint } from '../../core/calendar.js';
+	import { formatISO, parseFormatted } from '../../core/date.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
 	import Calendar from './Calendar.svelte';
 
 	interface Props {
@@ -53,12 +54,7 @@
 
 	/** While typing the field shows the raw text; otherwise the formatted value. */
 	const display = $derived(editing ? text : formatISO(value, t.current.dateFormat));
-	const hint = $derived(placeholder ?? formatHint());
-
-	function formatHint() {
-		const parts = { dmy: 'DD/MM/YYYY', mdy: 'MM/DD/YYYY', ymd: 'YYYY/MM/DD' };
-		return parts[t.current.dateFormat];
-	}
+	const hint = $derived(placeholder ?? dateHint(t.current.dateFormat));
 
 	function commit() {
 		editing = false;

package/dist/{components → styles/matte}/DatePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     /** Bindable `YYYY-MM-DD` — the same shape as `<input type="date">`. */
     value?: string;

package/dist/{components → styles/matte}/Drawer.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { useLocale } from '../locale.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
 
 	export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 	export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
@@ -67,11 +68,7 @@
 		bottom: 'animate-[drawer-bottom_220ms_cubic-bezier(0.16,1,0.3,1)]'
 	};
 
-	$effect(() => {
-		if (!dialog) return;
-		if (open && !dialog.open) dialog.showModal();
-		else if (!open && dialog.open) dialog.close();
-	});
+	$effect(() => syncDialog(dialog, open));
 
 	function close() {
 		open = false;
@@ -83,7 +80,7 @@
 	bind:this={dialog}
 	onclose={close}
 	onclick={(event) => {
-		if (dismissible && event.target === dialog) close();
+		if (dismissible && isBackdropClick(event, dialog)) close();
 	}}
 	oncancel={(event) => {
 		if (!dismissible) event.preventDefault();

package/dist/{components → styles/matte}/Dropdown.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { anchored, type Placement } from '../actions/anchor.js';
-	import { clickOutside, focusTrap, navigateList, portal } from '../actions/dismissable.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { anchored, type Placement } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
+	import { describeTrigger, menuItems, popupTrigger } from '../../core/trigger.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props {
 		/** The control that opens the menu — put a `Button` in here. */
@@ -41,34 +42,8 @@
 	let anchorEl: HTMLElement | null = $state(null);
 	let menuEl: HTMLElement | null = $state(null);
 
-	/**
-	 * Wires the consumer's own trigger element rather than wrapping it in another
-	 * button: the ARIA state belongs on the real control, not on our span.
-	 */
-	function triggerBehaviour(node: HTMLElement) {
-		const toggle = () => (open = !open);
-		const onKeydown = (event: KeyboardEvent) => {
-			if (event.key === 'ArrowDown' && !open) {
-				event.preventDefault();
-				open = true;
-			}
-		};
-		node.addEventListener('click', toggle);
-		node.addEventListener('keydown', onKeydown);
-		return {
-			destroy() {
-				node.removeEventListener('click', toggle);
-				node.removeEventListener('keydown', onKeydown);
-			}
-		};
-	}
-
-	$effect(() => {
-		const control = anchorEl?.querySelector('button, a, [role="button"]');
-		if (!control) return;
-		control.setAttribute('aria-haspopup', 'menu');
-		control.setAttribute('aria-expanded', String(open));
-	});
+	// The ARIA state goes on the consumer's own control, not on our wrapper.
+	$effect(() => describeTrigger(anchorEl, 'menu', open));
 
 	function onMenuKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' || event.key === 'Tab') {
@@ -77,10 +52,7 @@
 			open = false;
 			return;
 		}
-		if (!menuEl) return;
-		navigateList(event, [
-			...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
-		]);
+		navigateList(event, menuItems(menuEl));
 	}
 
 	function onMenuClick(event: MouseEvent) {
@@ -89,7 +61,17 @@
 	}
 </script>
 
-<span bind:this={anchorEl} use:triggerBehaviour class="inline-flex {triggerClass}">
+<span
+	bind:this={anchorEl}
+	use:popupTrigger={{
+		toggle: () => (open = !open),
+		open: () => (open = true),
+		close: () => (open = false),
+		arrowOpens: true,
+		isOpen: () => open
+	}}
+	class="inline-flex {triggerClass}"
+>
 	{@render trigger()}
 </span>
 

package/dist/{components → styles/matte}/Dropdown.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type Placement } from '../actions/anchor.js';
+import { type Placement } from '../../core/actions/anchor.js';
 interface Props {
     /** The control that opens the menu — put a `Button` in here. */
     trigger: Snippet;

package/dist/{components → styles/matte}/Dropzone.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { toneBorder, toneSoft, toneSurface, toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
-
-	export interface RejectedFile {
-		file: File;
-		reason: 'type' | 'size' | 'count';
-	}
+	import { toneBorder, toneSoft, toneSurface, toneText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { formatSize as toReadableSize, sortFiles, type RejectedFile } from '../../core/files.js';
 
 	interface Props {
 		/** Bindable list of accepted files. */
@@ -67,46 +63,18 @@
 		return parts.join(' · ');
 	});
 
-	function formatSize(bytes: number) {
-		const units = t.current.byteUnits;
-		if (bytes < 1024) return `${bytes} ${units[0]}`;
-		let value = bytes / 1024;
-		let i = 1;
-		while (value >= 1024 && i < units.length - 1) {
-			value /= 1024;
-			i++;
-		}
-		return `${value.toFixed(Number.isInteger(value) || value >= 10 ? 0 : 1)} ${units[i]}`;
-	}
-
-	function matchesAccept(file: File) {
-		if (!accept) return true;
-		return accept.split(',').some((raw) => {
-			const rule = raw.trim().toLowerCase();
-			if (!rule) return true;
-			if (rule.startsWith('.')) return file.name.toLowerCase().endsWith(rule);
-			if (rule.endsWith('/*')) return file.type.startsWith(rule.slice(0, -1));
-			return file.type.toLowerCase() === rule;
-		});
-	}
+	const formatSize = (bytes: number) => toReadableSize(bytes, t.current.byteUnits);
 
 	function add(incoming: FileList | File[] | null) {
 		if (!incoming || disabled) return;
 
-		const accepted: File[] = [];
-		const bad: RejectedFile[] = [];
-		let room = maxFiles ? maxFiles - (multiple ? files.length : 0) : Infinity;
-
-		for (const file of Array.from(incoming)) {
-			if (!matchesAccept(file)) bad.push({ file, reason: 'type' });
-			else if (maxSize && file.size > maxSize) bad.push({ file, reason: 'size' });
-			else if (room <= 0) bad.push({ file, reason: 'count' });
-			else {
-				accepted.push(file);
-				room--;
-			}
-			if (!multiple && accepted.length === 1) break;
-		}
+		const { accepted, rejected: bad } = sortFiles(incoming, {
+			accept,
+			maxSize,
+			maxFiles,
+			multiple,
+			held: files.length
+		});
 
 		rejected = bad;
 		if (bad.length) onreject?.(bad);

package/dist/{components → styles/matte}/Dropzone.svelte.d.ts

@@ -1,9 +1,6 @@
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
-export interface RejectedFile {
-    file: File;
-    reason: 'type' | 'size' | 'count';
-}
+import { type Tone } from '../../core/tones.js';
+import { type RejectedFile } from '../../core/files.js';
 interface Props {
     /** Bindable list of accepted files. */
     files?: File[];

package/dist/{components → styles/matte}/EmptyState.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneSoft, type Tone } from '../tones.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		title: string;

package/dist/{components → styles/matte}/EmptyState.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     description?: string;

package/dist/styles/matte/FeatureCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneHoverText, toneRing, toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		title: string;
+		description?: string;
+		tone?: Tone;
+		/** Turns the whole card into a link. */
+		href?: string;
+		/** Glyph inside the tinted square. */
+		icon?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		tone = 'brand',
+		href,
+		icon,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{href}
+	class="group flex flex-col gap-3 bg-bg p-6 {href
+		? `transition-colors duration-150 ease-brand-out ${focusRing} ${toneRing[tone]}`
+		: ''} {className}"
+	{...rest}
+>
+	{#if icon}
+		<span class="flex size-10 items-center justify-center {toneSoft[tone]}">
+			{@render icon()}
+		</span>
+	{/if}
+
+	<h3
+		class="font-heading text-base font-medium text-text {href
+			? `transition-colors duration-150 ${toneHoverText[tone]}`
+			: ''}"
+	>
+		{title}
+	</h3>
+
+	{#if description}
+		<p class="font-sans text-sm leading-relaxed text-text-secondary">{description}</p>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

package/dist/styles/matte/FeatureCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    tone?: Tone;
+    /** Turns the whole card into a link. */
+    href?: string;
+    /** Glyph inside the tinted square. */
+    icon?: Snippet;
+    children?: Snippet;
+}
+declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/styles/matte/FeatureGrid.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type FeatureColumns = 2 | 3 | 4;
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		columns?: FeatureColumns;
+		/** Hairline grid rather than free-standing cards. */
+		bordered?: boolean;
+		/** `FeatureCard`s, or anything else. */
+		children: Snippet;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		columns = 3,
+		bordered = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const cols: Record<FeatureColumns, string> = {
+		2: 'sm:grid-cols-2',
+		3: 'sm:grid-cols-2 lg:grid-cols-3',
+		4: 'sm:grid-cols-2 lg:grid-cols-4'
+	};
+</script>
+
+<section class="w-full px-6 py-20 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col gap-12">
+		{#if eyebrow || title || description}
+			<div class="flex max-w-xl flex-col gap-3">
+				{#if eyebrow}
+					<span class="font-mono text-xs tracking-wide text-text-muted uppercase">{eyebrow}</span>
+				{/if}
+				{#if title}
+					<h2 class="font-heading text-3xl font-medium tracking-tight text-balance text-text">
+						{title}
+					</h2>
+				{/if}
+				{#if description}
+					<p class="font-sans leading-relaxed text-pretty text-text-secondary">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div
+			class="grid {cols[columns]} {bordered
+				? 'gap-px border border-hairline bg-hairline'
+				: 'gap-10'}"
+		>
+			{@render children()}
+		</div>
+	</div>
+</section>

package/dist/styles/matte/FeatureGrid.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type FeatureColumns = 2 | 3 | 4;
+interface Props extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    columns?: FeatureColumns;
+    /** Hairline grid rather than free-standing cards. */
+    bordered?: boolean;
+    /** `FeatureCard`s, or anything else. */
+    children: Snippet;
+}
+declare const FeatureGrid: import("svelte").Component<Props, {}, "">;
+type FeatureGrid = ReturnType<typeof FeatureGrid>;
+export default FeatureGrid;

package/dist/{components → styles/matte}/Footer.svelte

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { toneHoverText, type Tone } from '../tones.js';
+	import { toneHoverText, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		columns?: FooterColumn[];

package/dist/{components → styles/matte}/Footer.svelte.d.ts

@@ -8,7 +8,7 @@ export interface FooterColumn {
     links: FooterLink[];
 }
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     columns?: FooterColumn[];
     /** Logo, wordmark and a line of copy on the left. */