@dorsk/tsumikit 0.13.1 → 0.14.0

package/README.md

@@ -108,6 +108,27 @@ proportionally with no code. That's the recommended path for magnification.
 text tokens only) for reading-dense apps that want larger body text while
 keeping chrome compact. It isn't wired into AppShell or any default.
 
+### Toolbar control heights
+
+`size="sm"` is the shared compact-toolbar contract for `Button`, `Popover`
+triggers, and `SegmentedControl`. Each renders an exact
+`--control-height-compact` outer box, so mixed controls share a vertical center:
+
+```svelte
+<SegmentedControl size="sm" {options} bind:value />
+<Popover size="sm" variant="default" label="More actions">
+  {#snippet trigger()}More{/snippet}
+  <!-- panel content -->
+</Popover>
+<Button size="sm">Apply</Button>
+```
+
+`Popover` owns that single semantic trigger button; pass `variant`, `tone`,
+`size`, `control`, `block`, and `disabled` directly instead of rendering a
+`Button` inside its `trigger` snippet. Omitting these props preserves the
+original ghost icon-button default. Use `control` on `Button` or `Popover` when
+the roomier shared `--control-height` composer contract is required.
+
 ## Built on the platform
 
 Interactive components lean on modern web features rather than reimplementing

package/dist/components/atoms/Button.svelte

@@ -89,7 +89,7 @@
 		justify-content: center;
 		gap: var(--sp-2);
 		padding: var(--sp-2) var(--sp-4);
-		min-height: 2.5rem;
+		min-height: var(--control-height-default);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 		background: var(--surface);
@@ -137,12 +137,13 @@
 		border-color: transparent;
 	}
 	.btn-sm {
-		min-height: 2rem;
+		height: var(--control-height-compact);
+		min-height: var(--control-height-compact);
 		padding: var(--sp-1) var(--sp-3);
 		font-size: var(--fs-xs);
 	}
 	.btn-lg {
-		min-height: 3rem;
+		min-height: var(--control-height-large);
 		padding: var(--sp-3) var(--sp-5);
 		font-size: var(--fs-base);
 	}

package/dist/components/layouts/ResizablePanel.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { onDestroy, type Snippet } from 'svelte';
 	import { browser } from '../../env';
 	import Icon from '../atoms/Icon.svelte';
+	import { createFrameBatcher } from './resizable-panel-frame.js';
 	import { parseStoredCollapsed, parseStoredWidth } from './resizable-panel-persistence';
 
 	let {
@@ -89,6 +90,14 @@
 		if (persist) persistWidth();
 	}
 
+	const pointerWidths = createFrameBatcher<number>(
+		(callback) => requestAnimationFrame(callback),
+		(handle) => cancelAnimationFrame(handle),
+		(nextWidth) => setWidth(nextWidth, false)
+	);
+
+	onDestroy(() => pointerWidths.discard());
+
 	function toggle() {
 		collapsed = !collapsed;
 		if (browser && widthKey && persistCollapsed) {
@@ -109,18 +118,22 @@
 
 	function resize(event: PointerEvent) {
 		if (!resizing) return;
-		setWidth(widthFromPointer(event.clientX), false);
+		pointerWidths.schedule(widthFromPointer(event.clientX));
 	}
 
 	function finishResize(event: PointerEvent) {
 		if (!resizing) return;
+		const finalWidth = Math.round(
+			Math.max(boundedMin, Math.min(widthFromPointer(event.clientX), boundedMax))
+		);
+		pointerWidths.flush(finalWidth);
 		resizing = false;
 		try {
 			(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);
 		} catch {
 			// Pointer capture may already have been released by the browser.
 		}
-		persistWidth();
+		if (browser && widthKey) localStorage.setItem(widthKey, String(finalWidth));
 	}
 
 	function resizeWithKeyboard(event: KeyboardEvent) {
@@ -191,7 +204,6 @@
 			onclick={toggle}
 		>
 			<Icon name={toggleIcon} size={20} />
-			{#if !collapsed}<span>{toggleLabel}</span>{/if}
 		</button>
 	</aside>
 
@@ -200,7 +212,6 @@
 
 <style>
 	.panel-layout {
-		--panel-collapsed-width: var(--control-height);
 		position: relative;
 		display: grid;
 		grid-template-columns: var(--panel-current-width) minmax(0, 1fr);
@@ -216,7 +227,7 @@
 		--panel-current-width: var(--panel-width);
 	}
 	.panel-layout.collapsed {
-		--panel-current-width: var(--panel-collapsed-width);
+		--panel-current-width: 0px;
 	}
 	.panel {
 		position: relative;
@@ -250,23 +261,28 @@
 		overflow: auto;
 	}
 	.collapse-control {
+		position: absolute;
+		right: calc(-1 * var(--control-height));
+		bottom: var(--sp-3);
+		z-index: 3;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--sp-2);
-		width: 100%;
-		min-height: var(--control-height);
-		margin-top: auto;
-		padding: var(--sp-2) var(--sp-3);
+		width: var(--control-height);
+		height: var(--control-height);
+		padding: 0;
 		color: var(--text-muted);
 		font: inherit;
-		font-size: var(--fs-sm);
-		font-weight: var(--fw-medium);
 		background: var(--bg-elevated-2);
-		border: 0;
-		border-top: 1px solid var(--border);
+		border: 1px solid var(--border);
+		border-radius: var(--r-sm);
+		box-shadow: var(--shadow-sm);
 		cursor: pointer;
 	}
+	.right .collapse-control {
+		right: auto;
+		left: calc(-1 * var(--control-height));
+	}
 	.collapse-control:hover {
 		color: var(--text);
 		background: var(--surface);
@@ -280,7 +296,7 @@
 		position: absolute;
 		top: 0;
 		right: -6px;
-		bottom: var(--control-height);
+		bottom: 0;
 		z-index: 2;
 		width: 12px;
 		padding: 0;
@@ -317,7 +333,7 @@
 	}
 
 	/* In a narrow host, the expanded panel overlays the main area instead of
-	   squeezing it. The bottom control remains visible as a persistent rail. */
+	   squeezing it. */
 	@container resizable-panel (max-width: 40rem) {
 		.panel-layout {
 			display: block;
@@ -339,11 +355,6 @@
 		}
 		.main {
 			height: 100%;
-			padding-left: var(--panel-collapsed-width);
-		}
-		.right .main {
-			padding-right: var(--panel-collapsed-width);
-			padding-left: 0;
 		}
 	}
 

package/dist/components/layouts/ResizablePanel.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Content shown while the panel is expanded. */
     panel: Snippet;

package/dist/components/layouts/resizable-panel-frame.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Coalesce high-frequency values into one update per animation frame while
+ * still allowing pointer release to synchronously apply the final value.
+ *
+ * @template T
+ * @param {(callback: FrameRequestCallback) => number} requestFrame
+ * @param {(handle: number) => void} cancelFrame
+ * @param {(value: T) => void} apply
+ */
+export function createFrameBatcher<T>(requestFrame: (callback: FrameRequestCallback) => number, cancelFrame: (handle: number) => void, apply: (value: T) => void): {
+    /** @param {T} value */
+    schedule(value: T): void;
+    /** @param {T} value */
+    flush(value: T): void;
+    discard(): void;
+};

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

@@ -0,0 +1,63 @@
+/**
+ * Coalesce high-frequency values into one update per animation frame while
+ * still allowing pointer release to synchronously apply the final value.
+ *
+ * @template T
+ * @param {(callback: FrameRequestCallback) => number} requestFrame
+ * @param {(handle: number) => void} cancelFrame
+ * @param {(value: T) => void} apply
+ */
+export function createFrameBatcher(requestFrame, cancelFrame, apply) {
+	/** @type {number | undefined} */
+	let frame;
+	/** @type {T | undefined} */
+	let pending;
+	let scheduled = false;
+	let generation = 0;
+
+	/** Apply the latest queued value, invalidating any stale frame callback. */
+	function applyPending() {
+		if (pending === undefined) return;
+		const value = pending;
+		pending = undefined;
+		apply(value);
+	}
+
+	return {
+		/** @param {T} value */
+		schedule(value) {
+			pending = value;
+			if (scheduled) return;
+
+			scheduled = true;
+			const token = ++generation;
+			frame = requestFrame(() => {
+				if (!scheduled || token !== generation) return;
+				scheduled = false;
+				frame = undefined;
+				applyPending();
+			});
+		},
+
+		/** @param {T} value */
+		flush(value) {
+			pending = value;
+			if (scheduled) {
+				scheduled = false;
+				generation += 1;
+				if (frame !== undefined) cancelFrame(frame);
+				frame = undefined;
+			}
+			applyPending();
+		},
+
+		discard() {
+			pending = undefined;
+			if (!scheduled) return;
+			scheduled = false;
+			generation += 1;
+			if (frame !== undefined) cancelFrame(frame);
+			frame = undefined;
+		},
+	};
+}

package/dist/components/molecules/Popover.svelte

@@ -12,6 +12,9 @@
 	import { place } from '../../floating';
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
+	type TriggerTone = 'none' | 'accent' | 'info' | 'warn' | 'danger';
+	type TriggerSize = 'sm' | 'md' | 'lg';
 
 	let {
 		placement = 'bottom-start',
@@ -21,6 +24,12 @@
 		children,
 		triggerClass = '',
 		bare = false,
+		variant,
+		tone = 'none',
+		size,
+		control = false,
+		block = false,
+		disabled = false,
 		onopen,
 		onclose
 	}: {
@@ -38,10 +47,23 @@
 		/** Drop the default ghost-icon chrome so the trigger is an unstyled button
 		 *  you fully own (pair with `triggerClass`). */
 		bare?: boolean;
+		/** Button-compatible trigger chrome. Omitting every chrome prop preserves
+		 *  the original ghost icon-button trigger. */
+		variant?: TriggerVariant;
+		tone?: TriggerTone;
+		size?: TriggerSize;
+		/** Use the shared `--control-height` toolbar/composer contract. */
+		control?: boolean;
+		block?: boolean;
+		disabled?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
 	} = $props();
 
+	const canonicalChrome = $derived(
+		variant !== undefined || tone !== 'none' || size !== undefined || control || block
+	);
+
 	const id = `pop-${Math.random().toString(36).slice(2, 8)}`;
 	let triggerEl = $state<HTMLButtonElement | null>(null);
 	let panelEl = $state<HTMLDivElement | null>(null);
@@ -70,8 +92,21 @@
 	type="button"
 	class="pop-trigger {triggerClass}"
 	class:bare
+	class:canonical={canonicalChrome}
+	class:trigger-primary={variant === 'primary'}
+	class:trigger-ghost={variant === 'ghost'}
+	class:trigger-danger={variant === 'danger'}
+	class:trigger-sm={size === 'sm'}
+	class:trigger-lg={size === 'lg'}
+	class:trigger-control={control}
+	class:trigger-block={block}
+	class:trigger-tone-accent={tone === 'accent'}
+	class:trigger-tone-info={tone === 'info'}
+	class:trigger-tone-warn={tone === 'warn'}
+	class:trigger-tone-danger={tone === 'danger'}
 	popovertarget={id}
 	aria-label={label}
+	{disabled}
 >
 	{@render trigger()}
 </button>
@@ -107,18 +142,114 @@
 			background 0.12s var(--ease),
 			border-color 0.12s var(--ease);
 	}
-	.pop-trigger:hover {
+	.pop-trigger:hover:not(:disabled) {
+		background: var(--bg-elevated-2);
+	}
+	/* Supplying canonical chrome props opts into the same dimensions, variants
+	   and state tones as Button while keeping this one native trigger element. */
+	.pop-trigger.canonical {
+		min-width: 0;
+		min-height: var(--control-height-default);
+		padding: var(--sp-2) var(--sp-4);
+		border-color: var(--border-strong);
+		background: var(--surface);
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+		line-height: 1;
+		user-select: none;
+		white-space: nowrap;
+	}
+	.pop-trigger.canonical:hover:not(:disabled) {
+		border-color: var(--accent);
+		background: var(--surface);
+	}
+	.pop-trigger.trigger-primary {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: var(--text-on-accent);
+		font-weight: var(--fw-semibold);
+	}
+	.pop-trigger.trigger-primary:hover:not(:disabled) {
+		background: var(--accent);
+		border-color: var(--accent);
+		filter: brightness(1.08);
+	}
+	.pop-trigger.trigger-ghost {
+		background: transparent;
+		border-color: transparent;
+	}
+	.pop-trigger.trigger-ghost:hover:not(:disabled) {
 		background: var(--bg-elevated-2);
+		border-color: transparent;
+	}
+	.pop-trigger.trigger-danger {
+		color: var(--danger);
+		border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+	}
+	.pop-trigger.trigger-danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--danger) 14%, transparent);
+		border-color: var(--danger);
+	}
+	.pop-trigger.trigger-sm {
+		height: var(--control-height-compact);
+		min-height: var(--control-height-compact);
+		padding: var(--sp-1) var(--sp-3);
+		font-size: var(--fs-xs);
+	}
+	.pop-trigger.trigger-lg {
+		min-height: var(--control-height-large);
+		padding: var(--sp-3) var(--sp-5);
+		font-size: var(--fs-base);
+	}
+	.pop-trigger.trigger-control {
+		height: var(--control-height);
+		min-height: var(--control-height);
+		padding: 0 var(--sp-3);
+	}
+	.pop-trigger.trigger-block {
+		width: 100%;
+	}
+	.pop-trigger.trigger-tone-accent {
+		--pop-trigger-tone: var(--accent);
+	}
+	.pop-trigger.trigger-tone-info {
+		--pop-trigger-tone: var(--info);
+	}
+	.pop-trigger.trigger-tone-warn {
+		--pop-trigger-tone: var(--warn);
+	}
+	.pop-trigger.trigger-tone-danger {
+		--pop-trigger-tone: var(--danger);
+	}
+	.pop-trigger.trigger-tone-accent,
+	.pop-trigger.trigger-tone-info,
+	.pop-trigger.trigger-tone-warn,
+	.pop-trigger.trigger-tone-danger {
+		color: var(--pop-trigger-tone);
+		border-color: color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border));
+	}
+	.pop-trigger.trigger-tone-accent:hover:not(:disabled),
+	.pop-trigger.trigger-tone-info:hover:not(:disabled),
+	.pop-trigger.trigger-tone-warn:hover:not(:disabled),
+	.pop-trigger.trigger-tone-danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--pop-trigger-tone) 14%, transparent);
+		border-color: var(--pop-trigger-tone);
+	}
+	.pop-trigger:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
 	}
 	/* `bare`: strip the chrome down to a plain button the consumer styles. */
 	.pop-trigger.bare {
+		height: auto;
 		min-height: 0;
 		min-width: 0;
+		width: auto;
 		padding: 0;
 		border: 0;
 		background: none;
 	}
-	.pop-trigger.bare:hover {
+	.pop-trigger.bare:hover:not(:disabled) {
 		background: none;
 	}
 	.pop-panel {

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

@@ -1,5 +1,8 @@
 import type { Snippet } from 'svelte';
 type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
+type TriggerTone = 'none' | 'accent' | 'info' | 'warn' | 'danger';
+type TriggerSize = 'sm' | 'md' | 'lg';
 type $$ComponentProps = {
     placement?: Placement;
     gap?: number;
@@ -15,6 +18,15 @@ type $$ComponentProps = {
     /** Drop the default ghost-icon chrome so the trigger is an unstyled button
      *  you fully own (pair with `triggerClass`). */
     bare?: boolean;
+    /** Button-compatible trigger chrome. Omitting every chrome prop preserves
+     *  the original ghost icon-button trigger. */
+    variant?: TriggerVariant;
+    tone?: TriggerTone;
+    size?: TriggerSize;
+    /** Use the shared `--control-height` toolbar/composer contract. */
+    control?: boolean;
+    block?: boolean;
+    disabled?: boolean;
     onopen?: () => void;
     onclose?: () => void;
 };

package/dist/components/molecules/SegmentedControl.svelte

@@ -22,6 +22,7 @@
 	// Space/Enter (or click) activate. `value` is bindable.
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
+	import { nextEnabledSegment } from './segmented-control-keyboard.js';
 
 	let {
 		options,
@@ -68,25 +69,10 @@
 			);
 		}
 	}
-	// Step to the next non-disabled option in a direction, wrapping around.
-	function step(from: number, dir: 1 | -1): number {
-		const n = options.length;
-		for (let k = 1; k <= n; k++) {
-			const j = (((from + dir * k) % n) + n) % n;
-			if (!options[j].disabled) return j;
-		}
-		return from;
-	}
 	function onkeydown(e: KeyboardEvent) {
 		const i = options.findIndex((o) => o.value === value);
-		if (i < 0) return;
-		let next = i;
-		if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = step(i, 1);
-		else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = step(i, -1);
-		else if (e.key === 'Home') next = options.findIndex((o) => !o.disabled);
-		else if (e.key === 'End')
-			next = options.length - 1 - [...options].reverse().findIndex((o) => !o.disabled);
-		else return;
+		const next = nextEnabledSegment(options, i, e.key);
+		if (next === undefined) return;
 		e.preventDefault();
 		select(options[next].value, true);
 	}
@@ -165,6 +151,15 @@
 		padding: 0.2rem var(--sp-2);
 		font-size: var(--fs-xs);
 	}
+	/* Compact toolbar contract: the outer interactive box exactly matches
+	   Button size="sm" and Popover size="sm". */
+	.seg-sm {
+		height: var(--control-height-compact);
+		min-height: var(--control-height-compact);
+	}
+	.seg-sm .seg-item {
+		height: 100%;
+	}
 	.seg-icon .seg-item {
 		gap: 0;
 		padding: 0.35rem;

package/dist/components/molecules/segmented-control-keyboard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Resolve a SegmentedControl navigation key to the next selectable option.
+ * Arrow navigation wraps and skips disabled options; Home/End jump to the
+ * first/last selectable option. Unhandled keys do not change selection.
+ *
+ * @param {{ disabled?: boolean }[]} options
+ * @param {number} current
+ * @param {string} key
+ * @returns {number | undefined}
+ */
+export function nextEnabledSegment(options: {
+    disabled?: boolean;
+}[], current: number, key: string): number | undefined;

package/dist/components/molecules/segmented-control-keyboard.js

@@ -0,0 +1,33 @@
+/**
+ * Resolve a SegmentedControl navigation key to the next selectable option.
+ * Arrow navigation wraps and skips disabled options; Home/End jump to the
+ * first/last selectable option. Unhandled keys do not change selection.
+ *
+ * @param {{ disabled?: boolean }[]} options
+ * @param {number} current
+ * @param {string} key
+ * @returns {number | undefined}
+ */
+export function nextEnabledSegment(options, current, key) {
+	if (current < 0 || current >= options.length) return undefined;
+	if (key === 'Home') {
+		const first = options.findIndex((option) => !option.disabled);
+		return first >= 0 ? first : current;
+	}
+	if (key === 'End') {
+		const fromEnd = [...options].reverse().findIndex((option) => !option.disabled);
+		return fromEnd >= 0 ? options.length - 1 - fromEnd : current;
+	}
+
+	let direction;
+	if (key === 'ArrowRight' || key === 'ArrowDown') direction = 1;
+	else if (key === 'ArrowLeft' || key === 'ArrowUp') direction = -1;
+	else return undefined;
+
+	for (let offset = 1; offset <= options.length; offset += 1) {
+		const next =
+			(((current + direction * offset) % options.length) + options.length) % options.length;
+		if (!options[next].disabled) return next;
+	}
+	return current;
+}

package/dist/styles/variables.css

@@ -161,8 +161,13 @@
   --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
   --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
 
-  /* ---- Controls (CCT-250 item 1) — shared height for icon buttons + inputs
-	   so toolbars/composers line up. Button's `control` variant consumes it. */
+  /* ---- Controls ----
+	   `size="sm"` is the compact toolbar contract shared by Button, Popover and
+	   SegmentedControl. `control` is the roomier uniform-height contract used by
+	   Button and other composer controls. Both remain rem-based for zoom. */
+  --control-height-compact: 2rem;
+  --control-height-default: 2.5rem;
+  --control-height-large: 3rem;
   --control-height: 2.75rem;
 
   /* ---- Layout ---- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "node --test tests/resizable-panel-persistence.test.js",
+    "test": "node --test tests/*.test.js",
     "prepare": "svelte-kit sync && (lefthook install || true)",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "lint": "biome check .",