@dorsk/tsumikit 0.22.0 → 0.24.0

package/dist/components/organisms/DataTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+	export type RowTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
 	export interface Column<T> {
 		/** Key into the row, or an arbitrary id when paired with a cell snippet. */
 		key: string;
@@ -10,6 +12,12 @@
 		/** Header becomes a sort toggle. Sorts by the displayed value unless an
 		 *  `onsort` handler is supplied (then the caller controls ordering). */
 		sortable?: boolean;
+		/** One-line cells clipped with an ellipsis (pair with `layout="fixed"`). */
+		truncate?: boolean;
+		nowrap?: boolean;
+		/** Drop the column when the table's own box is narrower than the breakpoint
+		 *  (sm 30rem, md 48rem, lg 64rem). */
+		hideBelow?: 'sm' | 'md' | 'lg';
 	}
 </script>
 
@@ -30,7 +38,19 @@
 		onsort,
 		cellSnippets = {},
 		empty = 'No data.',
-		stickyHeader = false
+		stickyHeader = false,
+		stickyOffset,
+		layout = 'auto',
+		hideHeader = false,
+		size = 'md',
+		rowTone,
+		rowClass,
+		rowActions,
+		rowActionsLabel = 'Actions',
+		loading = false,
+		loadingLabel = 'Loading…',
+		onloadmore,
+		loadMoreLabel = 'Load more'
 	}: {
 		columns: Column<T>[];
 		rows: T[];
@@ -41,13 +61,34 @@
 		 *  table only reflects the indicator and emits; it does not reorder rows. */
 		onsort?: (key: string, dir: 'asc' | 'desc') => void;
 		cellSnippets?: Record<string, Snippet<[T]>>;
-		empty?: string;
+		empty?: string | Snippet;
 		stickyHeader?: boolean;
+		/** Distance from the scroll container's top for the sticky header, e.g.
+		 *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+		stickyOffset?: string;
+		/** `fixed` makes declared column widths authoritative (needed for truncate). */
+		layout?: 'auto' | 'fixed';
+		/** Visually hides the header; it stays in the DOM for assistive tech. */
+		hideHeader?: boolean;
+		size?: 'sm' | 'md';
+		/** Per-row semantic tone, rendered as a left accent bar + `data-tone`. */
+		rowTone?: (row: T) => RowTone | undefined;
+		rowClass?: (row: T) => string | undefined;
+		/** Trailing actions cell revealed on hover/focus (always visible on touch). */
+		rowActions?: Snippet<[T]>;
+		rowActionsLabel?: string;
+		loading?: boolean;
+		loadingLabel?: string;
+		/** Renders a footer "load more" button that calls this. */
+		onloadmore?: () => void;
+		loadMoreLabel?: string;
 	} = $props();
 
 	let sortKey = $state<string | null>(null);
 	let sortDir = $state<'asc' | 'desc'>('asc');
 
+	const colCount = $derived(columns.length + (rowActions ? 1 : 0));
+
 	function display(col: Column<T>, row: T): unknown {
 		if (col.get) return col.get(row);
 		return (row as Record<string, unknown>)[col.key];
@@ -80,13 +121,21 @@
 	});
 </script>
 
-<div class="dt-scroll" data-tsu="DataTable">
-	<table class="dt" class:sticky={stickyHeader}>
-		<thead>
+<div class="dt-scroll" data-tsu="DataTable" data-size={size} aria-busy={loading || undefined}>
+	<table
+		class="dt"
+		class:sticky={stickyHeader}
+		class:fixed={layout === 'fixed'}
+		class:head-hidden={hideHeader}
+		class:sm={size === 'sm'}
+		style:--dt-sticky-offset={stickyOffset}
+	>
+		<thead data-part="head">
 			<tr>
 				{#each columns as col (col.key)}
 					<th
 						scope="col"
+						data-hide-below={col.hideBelow}
 						style:width={col.width}
 						style:text-align={col.align ?? 'left'}
 						aria-sort={col.sortable
@@ -109,17 +158,31 @@
 						{/if}
 					</th>
 				{/each}
+				{#if rowActions}
+					<th scope="col" class="dt-actions-head"><span class="sr-only">{rowActionsLabel}</span></th>
+				{/if}
 			</tr>
 		</thead>
 		<tbody>
-			{#if sortedRows.length === 0}
-				<tr>
-					<td class="dt-empty" colspan={columns.length}>{empty}</td>
+			{#if sortedRows.length === 0 && !loading}
+				<tr data-part="empty">
+					<td class="dt-empty" colspan={colCount}>
+						{#if typeof empty === 'string'}
+							{empty}
+						{:else}
+							{@render empty()}
+						{/if}
+					</td>
 				</tr>
 			{:else}
 				{#each sortedRows as row (rowKey(row))}
+					{@const tone = rowTone?.(row)}
 					<tr
+						data-part="row"
+						data-tone={tone}
+						class={rowClass?.(row)}
 						class:clickable={!!onrowclick}
+						class:toned={!!tone && tone !== 'neutral'}
 						tabindex={onrowclick ? 0 : undefined}
 						role={onrowclick ? 'button' : undefined}
 						onclick={onrowclick ? () => onrowclick(row) : undefined}
@@ -133,7 +196,13 @@
 							: undefined}
 					>
 						{#each columns as col (col.key)}
-							<td style:text-align={col.align ?? 'left'}>
+							<td
+								data-part="cell"
+								data-hide-below={col.hideBelow}
+								class:truncate={col.truncate}
+								class:nowrap={col.nowrap}
+								style:text-align={col.align ?? 'left'}
+							>
 								{#if cellSnippets[col.key]}
 									{@render cellSnippets[col.key](row)}
 								{:else}
@@ -141,10 +210,29 @@
 								{/if}
 							</td>
 						{/each}
+						{#if rowActions}
+							<td data-part="actions" class="dt-actions">
+								{@render rowActions(row)}
+							</td>
+						{/if}
 					</tr>
 				{/each}
 			{/if}
+			{#if loading}
+				<tr data-part="loading">
+					<td class="dt-empty" colspan={colCount}>{loadingLabel}</td>
+				</tr>
+			{/if}
 		</tbody>
+		{#if onloadmore && !loading}
+			<tfoot>
+				<tr>
+					<td class="dt-more" colspan={colCount}>
+						<button type="button" class="dt-more-btn" onclick={onloadmore}>{loadMoreLabel}</button>
+					</td>
+				</tr>
+			</tfoot>
+		{/if}
 	</table>
 </div>
 
@@ -155,6 +243,7 @@
 		-webkit-overflow-scrolling: touch;
 		border: 1px solid var(--border);
 		border-radius: var(--r-lg);
+		container-type: inline-size;
 	}
 	.dt {
 		width: 100%;
@@ -162,11 +251,21 @@
 		font-size: var(--fs-sm);
 		background: var(--surface);
 	}
+	.dt.fixed {
+		table-layout: fixed;
+	}
+	.dt.sm {
+		font-size: var(--fs-xs);
+	}
 	th,
 	td {
 		padding: var(--sp-2) var(--sp-3);
 		border-bottom: 1px solid var(--border);
 	}
+	.dt.sm th,
+	.dt.sm td {
+		padding: var(--sp-1) var(--sp-2);
+	}
 	th {
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
@@ -178,9 +277,23 @@
 	}
 	.dt.sticky th {
 		position: sticky;
-		top: 0;
+		top: var(--dt-sticky-offset, 0);
 		z-index: 1;
 	}
+	/* Header stays in flow (so widths still apply) but paints nothing. */
+	.dt.head-hidden th {
+		height: 0;
+		padding: 0;
+		border: 0;
+		line-height: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+	}
+	.dt.head-hidden th > * {
+		display: block;
+		height: 0;
+		overflow: hidden;
+	}
 	/* Sort toggle: a bare button that inherits the th's type styling. */
 	.dt-sort {
 		display: inline-flex;
@@ -218,9 +331,96 @@
 		background: var(--bg-elevated-2);
 		outline: none;
 	}
+	td.truncate {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 0;
+	}
+	td.nowrap {
+		white-space: nowrap;
+	}
+	tr[data-tone='ok'] {
+		--dt-tone: var(--ok);
+	}
+	tr[data-tone='warn'] {
+		--dt-tone: var(--warn);
+	}
+	tr[data-tone='danger'] {
+		--dt-tone: var(--danger);
+	}
+	tr[data-tone='info'] {
+		--dt-tone: var(--info);
+	}
+	tr.toned td:first-child {
+		box-shadow: inset 3px 0 0 var(--dt-tone);
+	}
+	.dt-actions-head,
+	.dt-actions {
+		width: 1%;
+		white-space: nowrap;
+		text-align: right;
+	}
+	.dt-actions {
+		opacity: 0;
+		transition: opacity 0.12s var(--ease);
+	}
+	tr:hover .dt-actions,
+	tr:focus-within .dt-actions {
+		opacity: 1;
+	}
+	@media (pointer: coarse) {
+		.dt-actions {
+			opacity: 1;
+		}
+	}
+	@container (max-width: 30rem) {
+		[data-hide-below='sm'] {
+			display: none;
+		}
+	}
+	@container (max-width: 48rem) {
+		[data-hide-below='md'] {
+			display: none;
+		}
+	}
+	@container (max-width: 64rem) {
+		[data-hide-below='lg'] {
+			display: none;
+		}
+	}
 	.dt-empty {
 		text-align: center;
 		color: var(--text-faint);
 		padding: var(--sp-8);
 	}
+	.dt-more {
+		text-align: center;
+		padding: var(--sp-2);
+		border-top: 1px solid var(--border);
+	}
+	.dt-more-btn {
+		border: 0;
+		background: none;
+		padding: var(--sp-1) var(--sp-3);
+		font: inherit;
+		color: var(--accent);
+		cursor: pointer;
+		border-radius: var(--r-md, 6px);
+	}
+	.dt-more-btn:hover,
+	.dt-more-btn:focus-visible {
+		background: var(--bg-elevated-2);
+	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>

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

@@ -1,3 +1,4 @@
+export type RowTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 export interface Column<T> {
     /** Key into the row, or an arbitrary id when paired with a cell snippet. */
     key: string;
@@ -9,6 +10,12 @@ export interface Column<T> {
     /** Header becomes a sort toggle. Sorts by the displayed value unless an
      *  `onsort` handler is supplied (then the caller controls ordering). */
     sortable?: boolean;
+    /** One-line cells clipped with an ellipsis (pair with `layout="fixed"`). */
+    truncate?: boolean;
+    nowrap?: boolean;
+    /** Drop the column when the table's own box is narrower than the breakpoint
+     *  (sm 30rem, md 48rem, lg 64rem). */
+    hideBelow?: 'sm' | 'md' | 'lg';
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -22,8 +29,27 @@ 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]>>;
-        empty?: string;
+        empty?: string | Snippet;
         stickyHeader?: boolean;
+        /** Distance from the scroll container's top for the sticky header, e.g.
+         *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+        stickyOffset?: string;
+        /** `fixed` makes declared column widths authoritative (needed for truncate). */
+        layout?: "auto" | "fixed";
+        /** Visually hides the header; it stays in the DOM for assistive tech. */
+        hideHeader?: boolean;
+        size?: "sm" | "md";
+        /** Per-row semantic tone, rendered as a left accent bar + `data-tone`. */
+        rowTone?: (row: T) => RowTone | undefined;
+        rowClass?: (row: T) => string | undefined;
+        /** Trailing actions cell revealed on hover/focus (always visible on touch). */
+        rowActions?: Snippet<[T]>;
+        rowActionsLabel?: string;
+        loading?: boolean;
+        loadingLabel?: string;
+        /** Renders a footer "load more" button that calls this. */
+        onloadmore?: () => void;
+        loadMoreLabel?: string;
     };
     exports: {};
     bindings: "";

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';
@@ -53,7 +55,7 @@ export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
-export { type Column, default as DataTable } from './components/organisms/DataTable.svelte';
+export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.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';
@@ -64,7 +66,7 @@ export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
 // ---- organisms ----
-export { default as DataTable } from './components/organisms/DataTable.svelte';
+export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';

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();
     }
 }