@dorsk/tsumikit 0.68.1 → 0.70.0

package/README.md

@@ -334,7 +334,8 @@ bindable, `onselect`/`onclose(reason)` report picks; `findTrigger`/`applyTrigger
 are exported for trigger-char detection and token replacement).
 
 **Organisms:** ConversationPanel / ConversationFeed (chat column + sticky
-feed, see below), DataTable (generic `<T>`, typed columns + cell snippets;
+feed, see below), DataTable (generic `<T>`, typed columns + cell snippets; `headerSnippets[key]`
+replaces a header cell (a select-all checkbox);
 `layout="fixed"` makes column widths authoritative, `Column.truncate` /
 `nowrap` / `hideBelow="sm|md|lg"` (container-query on the table's own box),
 `hideHeader` clips the header but keeps it for assistive tech, `rowTone(row)`
@@ -346,8 +347,12 @@ for a hover/focus-revealed trailing cell (always visible on touch; under
 hooks on head/row/cell; `responsive="stack"` turns rows into cards below
 `stackBelow` (48rem, measured on the table's own box) using `Column.role`
 `title | detail | meta | actions | hidden` — detail cells get a `data-label`
-prefix, the `<table>` stays a table for assistive tech), FilterSearchBar /
-FilterInput (`size="sm"` compact bar on `--control-height-compact`,
+prefix, `Column.stackLabel: false` drops it so metas join on one `·` line
+and details share lines, `--dt-meta-font` restyles meta values (e.g. `var(--font-sans)`; a
+literal `inherit` falls back to mono), the `<table>`
+stays a table for assistive tech), FilterSearchBar /
+FilterInput (`size="sm"` compact bar on `--control-height-compact`, text
+floored at 16px under `pointer: coarse` so iOS does not zoom on focus,
 `shape="pill"`, `surface`, `hotkey="/"` focuses the input from anywhere
 outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`;
 `key="cwd"` puts FilterInput in single-key mode — `value` is the bare value
@@ -360,7 +365,11 @@ sidebar on desktop, overlay drawer on mobile, optionally resizable;
 the content column only, `stickySidebar` pins it to the viewport, and
 `sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
 children are `min-width: 0` so a wide title/actions row can't widen the grid on
-mobile), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
+mobile; the mobile drawer's state is `bind:open` with `onOpenChange(open)`, and
+`closeOnNavigate` (default `true`) closes it when a plain same-origin link inside
+it is clicked — a router can also close it, e.g. SvelteKit
+`afterNavigate(() => (navOpen = false))` with `<AppShell bind:open={navOpen}>`
+to cover `goto` and back/forward), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
 icon/emoji + label + count badge; `placement="bar"` pins it to the bottom edge
 over `--z-nav` with `--safe-bottom` padding, `orientation` stacks or inlines the
 glyph, `maxWidth` centres the row; items without `href` are buttons that set a

package/dist/components/layouts/AppShell.svelte

@@ -7,10 +7,11 @@
 	//     nav content collapse to icons.
 	//   • mobile: the sidebar becomes an off-canvas drawer that slides in over a
 	//     scrim; AppShell renders the hamburger toggle for you (shown only on
-	//     mobile), locks body scroll while open, closes on Escape / scrim click,
-	//     and marks the rest of the page `inert` so focus stays in the drawer.
+	//     mobile), locks body scroll while open, closes on Escape / scrim click /
+	//     a same-origin link click inside it, and marks the rest of the page
+	//     `inert` so focus stays in the drawer. `bind:open` to drive it yourself.
 	// Switching to desktop auto-closes the drawer. Safe-area insets are honored.
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
 	import { browser } from '../../env';
 	import IconButton from '../molecules/IconButton.svelte';
 
@@ -28,6 +29,9 @@
 		layout = 'header-top',
 		stickySidebar = false,
 		sidebarPadding = 'md',
+		open = $bindable(false),
+		onOpenChange,
+		closeOnNavigate = true,
 		class: klass = '',
 		style: styleProp = '',
 	}: {
@@ -54,12 +58,42 @@
 		stickySidebar?: boolean;
 		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
 		sidebarPadding?: 'none' | 'sm' | 'md';
+		/** Mobile drawer state; reset to `false` when the viewport reaches 48rem. */
+		open?: boolean;
+		/** Fires when AppShell itself opens or closes the drawer. */
+		onOpenChange?: (open: boolean) => void;
+		/** Close the mobile drawer when a same-origin link inside it is clicked
+		 *  (plain left click, no modifier keys, no `target` / `download`). */
+		closeOnNavigate?: boolean;
 		class?: string;
 		style?: string;
 	} = $props();
 
-	let open = $state(false);
 	let isMobile = $state(false);
+	let aside = $state<HTMLElement>();
+
+	function setOpen(next: boolean) {
+		if (open === next) return;
+		open = next;
+		onOpenChange?.(next);
+	}
+
+	function onSidebarClick(e: MouseEvent) {
+		if (!closeOnNavigate || !open) return;
+		if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		const link = (e.target as Element | null)?.closest?.('a[href]');
+		if (!link) return;
+		const target = link.getAttribute('target');
+		if ((target && target !== '_self') || link.hasAttribute('download')) return;
+		let url: URL;
+		try {
+			url = new URL(link.getAttribute('href') ?? '', document.baseURI);
+		} catch {
+			return;
+		}
+		if (url.origin !== location.origin) return;
+		setOpen(false);
+	}
 
 	// --- resizable sidebar (desktop) ---
 	function loadW(): number | null {
@@ -108,13 +142,20 @@
 		const mq = window.matchMedia('(max-width: 47.999rem)');
 		const sync = () => {
 			isMobile = mq.matches;
-			if (!isMobile) open = false; // desktop: drawer concept doesn't apply
+			if (!isMobile) setOpen(false);
 		};
-		sync();
+		untrack(sync);
 		mq.addEventListener('change', sync);
 		return () => mq.removeEventListener('change', sync);
 	});
 
+	$effect(() => {
+		const el = aside;
+		if (!el) return;
+		el.addEventListener('click', onSidebarClick);
+		return () => el.removeEventListener('click', onSidebarClick);
+	});
+
 	// Lock body scroll while the mobile drawer is open.
 	$effect(() => {
 		if (!browser) return;
@@ -128,7 +169,7 @@
 	const bgInert = $derived(open && isMobile);
 </script>
 
-<svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
+<svelte:window onkeydown={(e) => e.key === 'Escape' && setOpen(false)} />
 
 <div
 	class="shell {klass}"
@@ -147,7 +188,7 @@
 					icon="menu"
 					label="Toggle navigation"
 					aria-expanded={open}
-					onclick={() => (open = !open)}
+					onclick={() => setOpen(!open)}
 				/>
 			</div>
 		{/if}
@@ -160,7 +201,7 @@
 			class:show={open && isMobile}
 			tabindex="-1"
 			aria-hidden="true"
-			onclick={() => (open = false)}
+			onclick={() => setOpen(false)}
 		></button>
 		<aside
 			class="shell-sidebar"
@@ -168,6 +209,7 @@
 			data-padding={sidebarPadding}
 			aria-label={navLabel}
 			inert={isMobile && !open ? true : undefined}
+			bind:this={aside}
 		>
 			{@render sidebar()}
 			{#if resizableSidebar}

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     header?: Snippet;
     sidebar?: Snippet;
@@ -23,9 +23,16 @@ type $$ComponentProps = {
     stickySidebar?: boolean;
     /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
     sidebarPadding?: 'none' | 'sm' | 'md';
+    /** Mobile drawer state; reset to `false` when the viewport reaches 48rem. */
+    open?: boolean;
+    /** Fires when AppShell itself opens or closes the drawer. */
+    onOpenChange?: (open: boolean) => void;
+    /** Close the mobile drawer when a same-origin link inside it is clicked
+     *  (plain left click, no modifier keys, no `target` / `download`). */
+    closeOnNavigate?: boolean;
     class?: string;
     style?: string;
 };
-declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "open">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/molecules/FilterInput.svelte

@@ -524,6 +524,14 @@
 		outline: none;
 		min-width: 0;
 	}
+	@media (pointer: coarse) {
+		.fi__input {
+			font-size: max(16px, var(--fs-md));
+		}
+		.fi--sm .fi__input {
+			font-size: max(16px, var(--fs-sm));
+		}
+	}
 	.fi__input::placeholder {
 		color: var(--text-faint);
 	}

package/dist/components/organisms/DataTable.svelte

@@ -21,6 +21,9 @@
 		/** Placement inside the stacked card (`responsive="stack"` only). Columns
 		 *  without a role render as `label: value` detail lines. */
 		role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
+		/** `false` drops the stacked label: meta cells join on one `·` line and
+		 *  detail cells share lines (`responsive="stack"` only, default true). */
+		stackLabel?: boolean;
 	}
 </script>
 
@@ -40,6 +43,7 @@
 		onrowclick,
 		onsort,
 		cellSnippets = {},
+		headerSnippets = {},
 		empty = 'No data.',
 		stickyHeader = false,
 		stickyOffset,
@@ -69,6 +73,8 @@
 		 *  table only reflects the indicator and emits; it does not reorder rows. */
 		onsort?: (key: string, dir: 'asc' | 'desc') => void;
 		cellSnippets?: Record<string, Snippet<[T]>>;
+		/** Replaces a column's header content (e.g. a select-all checkbox). */
+		headerSnippets?: Record<string, Snippet<[Column<T>]>>;
 		empty?: string | Snippet;
 		stickyHeader?: boolean;
 		/** Distance from the scroll container's top for the sticky header, e.g.
@@ -210,7 +216,9 @@
 								: 'none'
 							: undefined}
 					>
-						{#if col.sortable}
+						{#if headerSnippets[col.key]}
+							{@render headerSnippets[col.key](col)}
+						{:else if col.sortable}
 							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
 								<span>{col.label}</span>
 								<span class="dt-arrow" class:active={sortKey === col.key}>
@@ -264,6 +272,7 @@
 								data-hide-below={col.hideBelow}
 								data-role={responsive === 'stack' ? (col.role ?? 'detail') : undefined}
 								data-label={responsive === 'stack' ? col.label : undefined}
+								data-stack-label={responsive === 'stack' && col.stackLabel === false ? 'false' : undefined}
 								class:truncate={col.truncate}
 								class:nowrap={col.nowrap}
 								style:text-align={stacked ? undefined : (col.align ?? 'left')}
@@ -528,12 +537,27 @@
 	[data-stacked] td[data-role='meta'] {
 		flex: none;
 		order: 1;
-		font-family: var(--font-mono);
+		font-family: var(--dt-meta-font, var(--font-mono));
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 	}
 	[data-stacked] td[data-role='meta']::before {
 		content: attr(data-label) ' ';
+		font-family: var(--font-sans);
+		color: var(--text-faint);
+	}
+	[data-stacked] td[data-role='detail'][data-stack-label='false'] {
+		flex: 0 1 auto;
+	}
+	[data-stacked] td[data-stack-label='false']::before {
+		content: none;
+	}
+	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false'] {
+		margin-inline-start: calc(var(--sp-1) - var(--sp-3));
+	}
+	[data-stacked] td[data-role='meta'] ~ td[data-role='meta'][data-stack-label='false']::before {
+		content: '·';
+		margin-inline-end: var(--sp-1);
 		color: var(--text-faint);
 	}
 	[data-stacked] td[data-role='actions'],

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -19,6 +19,9 @@ export interface Column<T> {
     /** Placement inside the stacked card (`responsive="stack"` only). Columns
      *  without a role render as `label: value` detail lines. */
     role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
+    /** `false` drops the stacked label: meta cells join on one `·` line and
+     *  detail cells share lines (`responsive="stack"` only, default true). */
+    stackLabel?: boolean;
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -32,6 +35,8 @@ declare function $$render<T>(): {
          *  table only reflects the indicator and emits; it does not reorder rows. */
         onsort?: (key: string, dir: "asc" | "desc") => void;
         cellSnippets?: Record<string, Snippet<[T]>>;
+        /** Replaces a column's header content (e.g. a select-all checkbox). */
+        headerSnippets?: Record<string, Snippet<[Column<T>]>>;
         empty?: string | Snippet;
         stickyHeader?: boolean;
         /** Distance from the scroll container's top for the sticky header, e.g.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.68.1",
+  "version": "0.70.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",