@dorsk/tsumikit 0.23.0 → 0.24.0

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

@@ -1,20 +1,22 @@
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Content shown while the panel is expanded. */
     panel: Snippet;
-    /** Main content beside the panel. */
-    children: Snippet;
+    /** Main content beside the panel (optional in overlay mode). */
+    children?: Snippet;
     /** Physical edge occupied by the panel. */
     side?: 'left' | 'right';
-    /** Accessible name for the panel landmark. */
+    /** Accessible name for the panel landmark / dialog. */
     label?: string;
     /** Initial expanded width in pixels. */
     width?: number;
-    minWidth?: number;
-    maxWidth?: number;
+    /** Pixel number or CSS length (`'12rem'`, `'30vw'`). */
+    minWidth?: number | string;
+    /** Pixel number or CSS length (`'40rem'`, `'90vw'`). */
+    maxWidth?: number | string;
     /** localStorage key used to restore the expanded width. */
     widthKey?: string;
-    /** Bindable collapsed state. */
+    /** Bindable collapsed state (inline mode). */
     collapsed?: boolean;
     /** Persist collapsed state as `${widthKey}:collapsed`. */
     persistCollapsed?: boolean;
@@ -25,7 +27,21 @@ type $$ComponentProps = {
     /** Keep the collapse handle in view when the panel scrolls past the
      *  viewport, repositioning on scroll/resize via requestAnimationFrame. */
     stickyHandle?: boolean;
+    /** `inline` shares the row with `children`; `overlay` fixes the panel to
+     *  its viewport edge as a non-modal drawer above the page. */
+    mode?: 'inline' | 'overlay';
+    /** Bindable drawer visibility (overlay mode). */
+    open?: boolean;
+    /** Overlay mode: Escape, scrim click or the edge control closed the drawer. */
+    onclose?: () => void;
+    /** Overlay mode: dim the page behind the drawer; clicking it closes (default true). */
+    scrim?: boolean;
+    /** Overlay mode: viewport width (CSS length) under which the drawer spans
+     *  the full viewport and hides its resize handle and scrim. */
+    fullWidthBelow?: string;
+    /** Overlay mode: cap the width at the viewport and re-clamp on window resize. */
+    clampToViewport?: boolean;
 };
-declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "collapsed">;
+declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "collapsed" | "open">;
 type ResizablePanel = ReturnType<typeof ResizablePanel>;
 export default ResizablePanel;

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

@@ -14,3 +14,73 @@ export function createFrameBatcher<T>(requestFrame: (callback: FrameRequestCallb
     flush(value: T): void;
     discard(): void;
 };
+/**
+ * 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: number | string, measure: (css: string) => number | undefined): number | 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: HTMLElement, params: ResizeHandleParams): {
+    /** @param {ResizeHandleParams} next */
+    update(next: ResizeHandleParams): void;
+    destroy(): void;
+};
+export type ResizeHandleParams = {
+    /**
+     * Edge the resized box sits on; dragging away from it grows the box.
+     */
+    side: "left" | "right";
+    /**
+     * Called once per animation frame while dragging and on every keyboard step.
+     */
+    onwidth: (width: number) => void;
+    /**
+     * Called with the settled width on pointer release and after each keyboard step.
+     */
+    oncommit?: ((width: number) => void) | undefined;
+    /**
+     * Double-click on the handle.
+     */
+    onreset?: (() => void) | undefined;
+    /**
+     * Drag start/end, for a `resizing` class.
+     */
+    onactive?: ((active: boolean) => void) | undefined;
+    /**
+     * Current width in px; defaults to the handle's parent box.
+     */
+    measure?: (() => number) | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    /**
+     * Pixels per arrow key press (default 16).
+     */
+    step?: number | undefined;
+};

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/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)}
 />

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
 export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
+export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, type ProgressSegment, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
@@ -25,6 +26,7 @@ export { default as Container } from './components/layouts/Container.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
+export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
 export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
+export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
@@ -32,6 +33,7 @@ export { default as Container } from './components/layouts/Container.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
+export { resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';

package/dist/stores/theme.svelte.d.ts

@@ -145,17 +145,33 @@ export declare const THEMES: readonly [{
 }];
 export type Mode = (typeof THEMES)[number]['id'];
 export type ThemeMode = (typeof THEMES)[number]['mode'];
-type ThemeOption = (typeof THEMES)[number];
+export type ThemeId = Mode | (string & {});
+export interface ThemeDef {
+    id: ThemeId;
+    label: string;
+    mode: ThemeMode;
+    icon?: string;
+    themeColor?: string;
+}
 declare class Theme {
-    current: "light" | "highcontrast" | "gruvboxlight" | "solarizedlight" | "everforestlight" | "rosepinedawn" | "latte" | "nordlight" | "tokyoday" | "kanagawalotus" | "sepia" | "dark" | "colorblind" | "mocha" | "dracula" | "nord" | "tokyonight" | "gruvbox" | "solarized" | "rosepine" | "onedark" | "everforest" | "monokai" | "amoled";
+    current: ThemeId;
+    readonly fallbackIcon = "\u25C8";
+    private registered;
+    private fallback;
+    private saved;
     constructor();
+    get all(): readonly ThemeDef[];
+    has(id: string | null | undefined): id is ThemeId;
+    register(defs: ThemeDef | ThemeDef[]): void;
+    setDefault(id: ThemeId): void;
+    private resolve;
     private apply;
-    get option(): ThemeOption;
+    get option(): ThemeDef;
     get label(): string;
     get icon(): string;
-    get next(): ThemeOption;
+    get next(): ThemeDef;
     toggle(): void;
-    set(mode: Mode): void;
+    set(mode: ThemeId): void;
 }
 export declare const theme: Theme;
 export {};

package/dist/stores/theme.svelte.js

@@ -1,8 +1,9 @@
 import { browser } from '../env';
-// Theme registry — the single list the picker and the store both read. Adding a
-// theme = one entry here + one [data-theme="id"] block in variables.css. Nothing
-// else changes. `themeColor` drives the mobile browser-chrome <meta theme-color>;
-// `mode` groups the theme into the picker's light/dark sections (TSU-1).
+// Theme registry. Built-ins live in THEMES (+ one [data-theme="id"] block in
+// styles/themes.css); consumers append their own with theme.register() and ship
+// the matching block in their own stylesheet. `themeColor` drives the mobile
+// browser-chrome <meta theme-color>; `mode` groups the theme into the picker's
+// light/dark sections.
 const KEY = 'tsumikit-theme';
 export const THEMES = [
     // ── Light ── bright, paper-white surfaces
@@ -51,50 +52,75 @@ export const THEMES = [
     { id: 'monokai', label: 'Monokai', icon: '✸', themeColor: '#272822', mode: 'dark' },
     { id: 'amoled', label: 'AMOLED (high contrast)', icon: '◼', themeColor: '#000000', mode: 'dark' },
 ];
-const ORDER = THEMES.map((t) => t.id);
-function isMode(value) {
-    return THEMES.some((t) => t.id === value);
-}
-function optionFor(mode) {
-    return THEMES.find((t) => t.id === mode) ?? THEMES[0];
-}
+const FALLBACK_ICON = '◈';
 class Theme {
     current = $state('dark');
+    fallbackIcon = FALLBACK_ICON;
+    registered = $state([]);
+    fallback = 'dark';
+    saved = null;
     constructor() {
         if (browser) {
-            const saved = localStorage.getItem(KEY);
-            this.current = isMode(saved) ? saved : 'dark';
-            this.apply();
+            this.saved = localStorage.getItem(KEY);
+            this.resolve();
         }
     }
+    get all() {
+        const byId = new Map();
+        for (const t of THEMES)
+            byId.set(t.id, t);
+        for (const t of this.registered)
+            byId.set(t.id, t);
+        return [...byId.values()];
+    }
+    has(id) {
+        return id != null && this.all.some((t) => t.id === id);
+    }
+    register(defs) {
+        const list = Array.isArray(defs) ? defs : [defs];
+        this.registered = [...this.registered.filter((r) => !list.some((d) => d.id === r.id)), ...list];
+        this.resolve();
+    }
+    setDefault(id) {
+        this.fallback = id;
+        this.resolve();
+    }
+    resolve() {
+        this.current = this.has(this.saved) ? this.saved : this.fallback;
+        this.apply();
+    }
     apply() {
         if (!browser)
             return;
         document.documentElement.setAttribute('data-theme', this.current);
-        document
-            .querySelector('meta[name="theme-color"]')
-            ?.setAttribute('content', this.option.themeColor);
+        const color = this.option.themeColor;
+        if (color)
+            document
+                .querySelector('meta[name="theme-color"]')
+                ?.setAttribute('content', color);
     }
     get option() {
-        return optionFor(this.current);
+        return this.all.find((t) => t.id === this.current) ?? this.all[0];
     }
     get label() {
         return this.option.label;
     }
     get icon() {
-        return this.option.icon;
+        return this.option.icon ?? FALLBACK_ICON;
     }
     get next() {
-        const i = ORDER.indexOf(this.current);
-        return optionFor(ORDER[(i + 1) % ORDER.length]);
+        const all = this.all;
+        const i = all.findIndex((t) => t.id === this.current);
+        return all[(i + 1) % all.length];
     }
     toggle() {
         this.set(this.next.id);
     }
     set(mode) {
+        this.saved = mode;
         this.current = mode;
         if (browser)
-            localStorage.setItem(KEY, this.current);
+            localStorage.setItem(KEY, mode);
         this.apply();
     }
 }