@dorsk/tsumikit 0.22.0 → 0.24.0

package/dist/components/layouts/resizable-panel-frame.js

@@ -61,3 +61,164 @@ export function createFrameBatcher(requestFrame, cancelFrame, apply) {
 		},
 	};
 }
+
+/**
+ * Resolve a width prop that is either a pixel number or a CSS length.
+ * Plain `px` strings parse directly; anything else is handed to `measure`,
+ * which lays the length out and returns its pixel size (or `undefined` when
+ * there is no DOM to measure in).
+ *
+ * @param {number | string} value
+ * @param {(css: string) => number | undefined} measure
+ * @returns {number | undefined}
+ */
+export function resolveLength(value, measure) {
+	if (typeof value === 'number') return Number.isFinite(value) ? value : undefined;
+	const px = /^\s*(-?\d*\.?\d+)px\s*$/.exec(value);
+	if (px) return Number(px[1]);
+	const measured = measure(value);
+	return measured !== undefined && Number.isFinite(measured) ? measured : undefined;
+}
+
+/**
+ * @typedef {object} ResizeHandleParams
+ * @property {'left' | 'right'} side Edge the resized box sits on; dragging away from it grows the box.
+ * @property {(width: number) => void} onwidth Called once per animation frame while dragging and on every keyboard step.
+ * @property {(width: number) => void} [oncommit] Called with the settled width on pointer release and after each keyboard step.
+ * @property {() => void} [onreset] Double-click on the handle.
+ * @property {(active: boolean) => void} [onactive] Drag start/end, for a `resizing` class.
+ * @property {() => number} [measure] Current width in px; defaults to the handle's parent box.
+ * @property {number} [min]
+ * @property {number} [max]
+ * @property {number} [step] Pixels per arrow key press (default 16).
+ */
+
+/**
+ * Svelte action turning any element into a pointer + keyboard width grip.
+ * One pointer-capture / rAF-coalesced implementation shared by
+ * ResizablePanel and consumer-built grips.
+ *
+ * Usage: <div role="separator" tabindex="0" use:resizeHandle={{ side, min, max, onwidth }}></div>
+ *
+ * @param {HTMLElement} node
+ * @param {ResizeHandleParams} params
+ */
+export function resizeHandle(node, params) {
+	let current = params;
+	let active = false;
+	let startX = 0;
+	let startWidth = 0;
+
+	const frames = createFrameBatcher(
+		(callback) => requestAnimationFrame(callback),
+		(handle) => cancelAnimationFrame(handle),
+		/** @param {number} width */
+		(width) => current.onwidth(width),
+	);
+
+	/** @param {number} width */
+	function clamp(width) {
+		const min = current.min ?? 1;
+		const max = current.max ?? Number.POSITIVE_INFINITY;
+		return Math.round(Math.max(min, Math.min(width, Math.max(min, max))));
+	}
+
+	function direction() {
+		return current.side === 'right' ? -1 : 1;
+	}
+
+	function measure() {
+		if (current.measure) return current.measure();
+		return node.parentElement?.getBoundingClientRect().width ?? 0;
+	}
+
+	/** @param {number} clientX */
+	function widthAt(clientX) {
+		return clamp(startWidth + (clientX - startX) * direction());
+	}
+
+	/** @param {PointerEvent} event */
+	function down(event) {
+		if (event.button !== 0) return;
+		active = true;
+		startX = event.clientX;
+		startWidth = measure();
+		node.setPointerCapture(event.pointerId);
+		event.preventDefault();
+		current.onactive?.(true);
+	}
+
+	/** @param {PointerEvent} event */
+	function move(event) {
+		if (!active) return;
+		frames.schedule(widthAt(event.clientX));
+	}
+
+	/** @param {PointerEvent} event */
+	function up(event) {
+		if (!active) return;
+		active = false;
+		const width = widthAt(event.clientX);
+		frames.flush(width);
+		try {
+			node.releasePointerCapture(event.pointerId);
+		} catch {
+			// Pointer capture may already have been released by the browser.
+		}
+		current.onactive?.(false);
+		current.oncommit?.(width);
+	}
+
+	/** @param {KeyboardEvent} event */
+	function keydown(event) {
+		const step = current.step ?? 16;
+		/** @type {number | undefined} */
+		let next;
+		switch (event.key) {
+			case 'ArrowLeft':
+				next = measure() - step * direction();
+				break;
+			case 'ArrowRight':
+				next = measure() + step * direction();
+				break;
+			case 'Home':
+				next = current.min;
+				break;
+			case 'End':
+				next = current.max;
+				break;
+		}
+		if (next === undefined) return;
+		event.preventDefault();
+		const width = clamp(next);
+		current.onwidth(width);
+		current.oncommit?.(width);
+	}
+
+	function reset() {
+		current.onreset?.();
+	}
+
+	node.addEventListener('pointerdown', down);
+	node.addEventListener('pointermove', move);
+	node.addEventListener('pointerup', up);
+	node.addEventListener('pointercancel', up);
+	node.addEventListener('keydown', keydown);
+	node.addEventListener('dblclick', reset);
+
+	return {
+		/** @param {ResizeHandleParams} next */
+		update(next) {
+			current = next;
+		},
+		destroy() {
+			node.removeEventListener('pointerdown', down);
+			node.removeEventListener('pointermove', move);
+			node.removeEventListener('pointerup', up);
+			node.removeEventListener('pointercancel', up);
+			node.removeEventListener('keydown', keydown);
+			node.removeEventListener('dblclick', reset);
+			frames.discard();
+		},
+	};
+}

package/dist/components/molecules/CopyButton.svelte

@@ -13,7 +13,9 @@
 		label = 'Copy',
 		copiedLabel = 'Copied',
 		variant = 'ghost',
-		showLabel = true,
+		showLabel,
+		box,
+		hitArea = 'auto',
 		resetMs = 1500,
 		class: klass = ''
 	}: {
@@ -22,11 +24,16 @@
 		label?: string;
 		copiedLabel?: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		/** Defaults to true, or false when `box` makes it icon-only. */
 		showLabel?: boolean;
+		/** Shared square box scale (`--box-xs/sm/md/lg`): a square icon-only copy control. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		hitArea?: 'auto' | 'compact';
 		resetMs?: number;
 		class?: string;
 	} = $props();
 
+	const labelShown = $derived(showLabel ?? box === undefined);
 	let copied = $state(false);
 	let status = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
@@ -46,12 +53,14 @@
 <Button
 	data-tsu="CopyButton"
 	{variant}
+	{box}
+	{hitArea}
 	class={klass}
 	onclick={copy}
 	aria-label={copied ? copiedLabel : label}
 	title={label}
 >
 	<Icon name={copied ? 'check' : 'copy'} />
-	{#if showLabel}<span>{copied ? copiedLabel : label}</span>{/if}
+	{#if labelShown}<span>{copied ? copiedLabel : label}</span>{/if}
 </Button>
 <span class="sr-only" role="status" aria-live="polite">{status}</span>

package/dist/components/molecules/CopyButton.svelte.d.ts

@@ -4,7 +4,11 @@ type $$ComponentProps = {
     label?: string;
     copiedLabel?: string;
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    /** Defaults to true, or false when `box` makes it icon-only. */
     showLabel?: boolean;
+    /** Shared square box scale (`--box-xs/sm/md/lg`): a square icon-only copy control. */
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    hitArea?: 'auto' | 'compact';
     resetMs?: number;
     class?: string;
 };

package/dist/components/molecules/FileButton.svelte

@@ -16,6 +16,8 @@
 		disabled = false,
 		variant = 'default',
 		size = 'md',
+		box,
+		hitArea = 'auto',
 		class: klass = ''
 	}: {
 		onfiles: (files: File[]) => void;
@@ -36,9 +38,15 @@
 		/** Match the Button atom's sizes so a FileButton lines up with buttons in
 		 *  the same row. */
 		size?: 'sm' | 'md' | 'lg';
+		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		hitArea?: 'auto' | 'compact';
 		class?: string;
 	} = $props();
 
+	const onlyIcon = $derived(iconOnly || box !== undefined);
+
 	function onchange(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
 		const files = Array.from(input.files ?? []);
@@ -54,9 +62,12 @@
 	class:ghost={variant === 'ghost'}
 	class:sm={size === 'sm'}
 	class:lg={size === 'lg'}
-	class:icon-only={iconOnly}
+	class:icon-only={onlyIcon}
+	class:box={box !== undefined}
+	class:hit-compact={hitArea === 'compact'}
+	style:--file-box={box ? `var(--box-${box})` : undefined}
 	class:disabled
-	aria-label={iconOnly ? label : undefined}
+	aria-label={onlyIcon ? label : undefined}
 >
 	<input
 		class="sr-only"
@@ -71,7 +82,7 @@
 	{:else if emoji}
 		<span class="emoji" aria-hidden="true">{emoji}</span>
 	{/if}
-	<span class:sr-only={iconOnly}>{label}</span>
+	<span class:sr-only={onlyIcon}>{label}</span>
 </label>
 
 <style>
@@ -120,6 +131,24 @@
 		padding: var(--sp-2);
 		aspect-ratio: 1;
 	}
+	.file-btn.box {
+		width: var(--file-box);
+		min-width: var(--file-box);
+		height: var(--file-box);
+		min-height: var(--file-box);
+		padding: 0;
+		flex: none;
+	}
+	@media (pointer: coarse) {
+		.file-btn.icon-only:not(.hit-compact) {
+			position: relative;
+		}
+		.file-btn.icon-only:not(.hit-compact)::after {
+			content: '';
+			position: absolute;
+			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
 	/* Emoji glyph is bumped above the text size — at 1em a paperclip is hard to
 	   read, so render it a touch larger for legibility. */
 	.emoji {

package/dist/components/molecules/FileButton.svelte.d.ts

@@ -18,6 +18,10 @@ type $$ComponentProps = {
     /** Match the Button atom's sizes so a FileButton lines up with buttons in
      *  the same row. */
     size?: 'sm' | 'md' | 'lg';
+    /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    hitArea?: 'auto' | 'compact';
     class?: string;
 };
 declare const FileButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/IconButton.svelte

@@ -18,9 +18,18 @@
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
 		// Semantic state tint (forwarded to Button). Pairs well with `chip`.
 		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
-		// Larger 2.5rem outlined square icon-chip (header/toolbar actions).
+		// Outlined `--box-lg` square icon-chip (header/toolbar actions).
 		chip?: boolean;
+		// Shared square box scale (`--box-xs/sm/md/lg`); default `md` is the classic
+		// 2.25rem box. Forwarded to Button.
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		// SVG glyph px. Emoji text glyphs render at ×1.35 of it.
 		size?: number;
+		// Exact glyph size for SVG *and* text glyphs (px number or any CSS length),
+		// no emoji multiplier. Wins over `size`.
+		glyphSize?: number | string;
+		// Opt out of the 44px coarse-pointer hit slab in dense rows.
+		hitArea?: 'auto' | 'compact';
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
 		// no square box; just a muted glyph that brightens on hover. Pair with
 		// `hoverDanger` to tint it red on hover (delete affordances).
@@ -46,7 +55,10 @@
 		variant = 'ghost',
 		tone = 'none',
 		chip = false,
+		box,
 		size = 18,
+		glyphSize,
+		hitArea = 'auto',
 		inline = false,
 		hoverDanger = false,
 		pressed,
@@ -55,6 +67,11 @@
 		class: klass = '',
 		...rest
 	}: IconButtonProps = $props();
+
+	const glyphCss = $derived(
+		glyphSize === undefined ? undefined : typeof glyphSize === 'number' ? `${glyphSize}px` : glyphSize
+	);
+	const emojiCss = $derived(glyphCss ?? `${size * 1.35}px`);
 </script>
 
 <!-- Composition: the icon-only button is a Button (canonical control styling)
@@ -65,6 +82,8 @@
 	{variant}
 	{tone}
 	{chip}
+	{box}
+	{hitArea}
 	{disabled}
 	{title}
 	{onclick}
@@ -76,19 +95,28 @@
 	aria-label={label}
 >
 	{#if children}
-		<Icon {size}>{@render children()}</Icon>
+		{#if glyphCss}
+			<span class="glyph" style="font-size: {glyphCss}"><Icon>{@render children()}</Icon></span>
+		{:else}
+			<Icon {size}>{@render children()}</Icon>
+		{/if}
 	{:else if emoji}
-		<span class="emoji" style="font-size: {size * 1.35}px" aria-hidden="true">{emoji}</span>
+		<span class="emoji" style="font-size: {emojiCss}" aria-hidden="true">{emoji}</span>
 	{:else if icon}
-		<Icon name={icon} {size} />
+		{#if glyphCss}
+			<span class="glyph" style="font-size: {glyphCss}"><Icon name={icon} /></span>
+		{:else}
+			<Icon name={icon} {size} />
+		{/if}
 	{/if}
 </Button>
 
 <style>
 	/* Off-registry glyph (emoji) rendered as text rather than an SVG. Sized off the
 	   `size` prop (×1.35, since an emoji reads small next to an SVG glyph of the
-	   same px) and centered so it shares the button's tap target. */
-	.emoji {
+	   same px) unless `glyphSize` is exact; centered so it shares the tap target. */
+	.emoji,
+	.glyph {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;

package/dist/components/molecules/IconButton.svelte.d.ts

@@ -14,7 +14,10 @@ type IconButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
     tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
     chip?: boolean;
+    box?: 'xs' | 'sm' | 'md' | 'lg';
     size?: number;
+    glyphSize?: number | string;
+    hitArea?: 'auto' | 'compact';
     inline?: boolean;
     hoverDanger?: boolean;
     pressed?: boolean;

package/dist/components/molecules/Popover.svelte

@@ -27,8 +27,10 @@
 		variant,
 		tone = 'none',
 		size,
+		box,
 		control = false,
 		block = false,
+		hitArea = 'auto',
 		disabled = false,
 		onopen,
 		onclose
@@ -52,9 +54,14 @@
 		variant?: TriggerVariant;
 		tone?: TriggerTone;
 		size?: TriggerSize;
+		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
+		 *  the default trigger is the `md` 2.25rem box. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
+		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		hitArea?: 'auto' | 'compact';
 		disabled?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
@@ -109,6 +116,9 @@
 	class:trigger-lg={size === 'lg'}
 	class:trigger-control={control}
 	class:trigger-block={block}
+	class:trigger-box={box !== undefined}
+	class:hit-compact={hitArea === 'compact'}
+	style:--pop-box={box ? `var(--box-${box})` : undefined}
 	class:trigger-tone-accent={tone === 'accent'}
 	class:trigger-tone-success={tone === 'success'}
 	class:trigger-tone-info={tone === 'info'}
@@ -143,8 +153,8 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-height: 2.25rem;
-		min-width: 2.25rem;
+		min-height: var(--box-md);
+		min-width: var(--box-md);
 		padding: var(--sp-2);
 		border: 1px solid transparent;
 		border-radius: var(--r-md);
@@ -221,6 +231,26 @@
 	.pop-trigger.trigger-block {
 		width: 100%;
 	}
+	.pop-trigger.trigger-box {
+		width: var(--pop-box);
+		min-width: var(--pop-box);
+		height: var(--pop-box);
+		min-height: var(--pop-box);
+		padding: 0;
+		flex: none;
+	}
+	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
+	   via an invisible slab; layout does not move. */
+	@media (pointer: coarse) {
+		.pop-trigger:not(.canonical, .bare, .hit-compact) {
+			position: relative;
+		}
+		.pop-trigger:not(.canonical, .bare, .hit-compact)::after {
+			content: '';
+			position: absolute;
+			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
 	.pop-trigger.trigger-tone-accent {
 		--pop-trigger-tone: var(--accent);
 	}

package/dist/components/molecules/Popover.svelte.d.ts

@@ -23,9 +23,14 @@ type $$ComponentProps = {
     variant?: TriggerVariant;
     tone?: TriggerTone;
     size?: TriggerSize;
+    /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
+     *  the default trigger is the `md` 2.25rem box. */
+    box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;
+    /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    hitArea?: 'auto' | 'compact';
     disabled?: boolean;
     onopen?: () => void;
     onclose?: () => void;

package/dist/components/molecules/SelectButton.svelte

@@ -17,6 +17,8 @@
 		options,
 		groups,
 		onchange,
+		box,
+		hitArea = 'auto',
 		class: klass = '',
 		...rest
 	}: {
@@ -31,6 +33,9 @@
 		// the theme picker to split light/dark; falls back to `options` otherwise.
 		groups?: { label: string; options: Option[] }[];
 		onchange: (value: string) => void;
+		// Shared square box scale (`--box-xs/sm/md/lg`); default is the 2.25rem icon box.
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		hitArea?: 'auto' | 'compact';
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -39,7 +44,7 @@
 <!-- The wrapper (owned here, so styled scoped) is the positioning context that
      clips the transparent overlaid <select>; the icon Button shows through. -->
 <span class="select-button {klass}" data-tsu="SelectButton" {...rest}>
-	<Button variant="ghost" icon {title} aria-label={label}>
+	<Button variant="ghost" icon {box} {hitArea} {title} aria-label={label}>
 		<span aria-hidden="true">{glyph}</span>
 		<Select
 			variant="ghost"

package/dist/components/molecules/SelectButton.svelte.d.ts

@@ -13,6 +13,8 @@ type $$ComponentProps = {
         options: Option[];
     }[];
     onchange: (value: string) => void;
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    hitArea?: 'auto' | 'compact';
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/molecules/ThemePicker.svelte

@@ -1,23 +1,21 @@
 <script lang="ts">
 	// Theme switcher: a compact icon-button hosting a native <select> over the
-	// full theme registry, wired to the global theme store. The native control
-	// gives correct mobile/keyboard behaviour and outside-click handling for free.
-	// The button glyph reflects the active theme's icon.
+	// full theme registry (built-ins + theme.register()), wired to the global
+	// theme store. The native control gives correct mobile/keyboard behaviour and
+	// outside-click handling for free. The button glyph reflects the active theme.
 	import SelectButton from './SelectButton.svelte';
-	import { theme, THEMES } from '../../stores/theme.svelte';
+	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 
 	let { class: klass = '' }: { class?: string } = $props();
 
-	// Split the registry into light/dark sections (TSU-1) so the long list is
-	// scannable. `<optgroup>` keeps native popup/keyboard behaviour for free.
-	const toOption = (t: (typeof THEMES)[number]) => ({
+	const toOption = (t: ThemeDef) => ({
 		value: t.id,
-		label: `${t.icon}  ${t.label}`
+		label: `${t.icon ?? theme.fallbackIcon}  ${t.label}`
 	});
-	const groups = [
-		{ label: '— light', options: THEMES.filter((t) => t.mode === 'light').map(toOption) },
-		{ label: '— dark', options: THEMES.filter((t) => t.mode === 'dark').map(toOption) }
-	];
+	const groups = $derived([
+		{ label: '— light', options: theme.all.filter((t) => t.mode === 'light').map(toOption) },
+		{ label: '— dark', options: theme.all.filter((t) => t.mode === 'dark').map(toOption) }
+	]);
 </script>
 
 <SelectButton
@@ -28,5 +26,5 @@
 	title={`Theme: ${theme.label}`}
 	value={theme.current}
 	{groups}
-	onchange={(v) => theme.set(v as (typeof THEMES)[number]['id'])}
+	onchange={(v) => theme.set(v)}
 />