@dorsk/tsumikit 0.38.1 → 0.40.0

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

@@ -1,3 +1,7 @@
-declare const Toaster: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    style?: string;
+};
+declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
 type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;

package/dist/components/molecules/Toggle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Toggle chip — a muted pill/chip that lights up (tinted) when `pressed`.
 	// The "on" tint is driven by the `--toggle-accent` CSS var (default accent),
 	// so callers recolor it per-use (e.g. warm for behavior, role color for
@@ -26,7 +27,7 @@
 		pressed?: boolean;
 		pill?: boolean;
 		struck?: boolean;
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		// Share a flex row with siblings (flex: 1 1 0).
 		grow?: boolean;
 		// `shrink={false}` keeps the chip at its intrinsic width (flex: none).

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

@@ -1,10 +1,11 @@
+import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLButtonAttributes & {
     pressed?: boolean;
     pill?: boolean;
     struck?: boolean;
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     grow?: boolean;
     shrink?: boolean;
     children?: Snippet;

package/dist/components/molecules/Tooltip.svelte

@@ -24,7 +24,13 @@
 		placement = 'top',
 		delay = 200,
 		closeDelay = 250,
-		trigger
+		trigger,
+		cursor = true,
+		inline = false,
+		width,
+		maxWidth,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		/** Plain-text bubble. Ignored when `content` is provided. */
 		text?: string;
@@ -36,6 +42,15 @@
 		/** Grace period (ms) before closing — lets the pointer travel into the panel. */
 		closeDelay?: number;
 		trigger: Snippet;
+		/** `cursor: help` on the trigger wrapper (default). */
+		cursor?: boolean;
+		/** `flex: none` on the wrapper so a flex row cannot squeeze the trigger. */
+		inline?: boolean;
+		/** Panel width / max-width (default max 16rem). */
+		width?: string;
+		maxWidth?: string;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	const id = `tip-${Math.random().toString(36).slice(2, 8)}`;
@@ -82,10 +97,14 @@
 	// hover/focus listeners (attached via the DOM, so the wrapper stays a plain,
 	// role-less container — the interactive element is the trigger inside).
 	function tooltip(node: HTMLElement) {
-		const target = (node.matches(FOCUSABLE) ? node : node.querySelector(FOCUSABLE)) as
+		let target = (node.matches(FOCUSABLE) ? node : node.querySelector(FOCUSABLE)) as
 			| HTMLElement
 			| null;
-		target?.setAttribute('aria-describedby', id);
+		if (!target) {
+			node.tabIndex = 0;
+			target = node;
+		}
+		target.setAttribute('aria-describedby', id);
 		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
 		node.addEventListener('mouseenter', show);
 		node.addEventListener('mouseleave', scheduleHide);
@@ -94,7 +113,7 @@
 		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
-				target?.removeAttribute('aria-describedby');
+				target.removeAttribute('aria-describedby');
 				node.removeEventListener('mouseenter', show);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', show);
@@ -125,7 +144,7 @@
 	}
 </script>
 
-<span class="tip-wrap" data-tsu="Tooltip" bind:this={wrapEl} use:tooltip>
+<span class="tip-wrap {klass}" class:help={cursor} class:inline style={styleProp} data-tsu="Tooltip" bind:this={wrapEl} use:tooltip>
 	{@render trigger()}
 </span>
 
@@ -136,6 +155,8 @@
 	popover="manual"
 	class="tip"
 	class:rich={!!content}
+	style:width
+	style:max-width={maxWidth}
 	use:panel
 >
 	{#if content}{@render content()}{:else}{text}{/if}
@@ -145,6 +166,12 @@
 	.tip-wrap {
 		display: inline-flex;
 	}
+	.tip-wrap.inline {
+		flex: none;
+	}
+	.tip-wrap.help:not(:has(a, button, input, select, textarea)) {
+		cursor: help;
+	}
 	.tip {
 		position: fixed;
 		margin: 0;

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

@@ -10,6 +10,15 @@ type $$ComponentProps = {
     /** Grace period (ms) before closing — lets the pointer travel into the panel. */
     closeDelay?: number;
     trigger: Snippet;
+    /** `cursor: help` on the trigger wrapper (default). */
+    cursor?: boolean;
+    /** `flex: none` on the wrapper so a flex row cannot squeeze the trigger. */
+    inline?: boolean;
+    /** Panel width / max-width (default max 16rem). */
+    width?: string;
+    maxWidth?: string;
+    class?: string;
+    style?: string;
 };
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;

package/dist/components/molecules/Truncate.svelte

@@ -5,10 +5,11 @@
 	// fits, it renders as a bare inline span with no tooltip wiring at all — so
 	// you only pay for the Tooltip when something is actually hidden.
 	//
-	// For responsive, width-driven end-clipping prefer <Text truncate> (pure
-	// CSS); reach for this when you need middle/start truncation or a guaranteed
-	// max character count — e.g. addresses, hashes, long ids.
-	import { truncate, type TruncateMode } from '../../truncate';
+	// `fit` swaps the character budget for a measured one: the host width is
+	// observed and the longest candidate that fits is shown (mode `path`
+	// abbreviates fish-style). `copyable` copies the full text on click.
+	import { copyToClipboard } from '../../clipboard';
+	import { pathCandidates, truncate, type TruncateMode } from '../../truncate';
 	import Tooltip from './Tooltip.svelte';
 
 	let {
@@ -16,34 +17,135 @@
 		max,
 		mode = 'end',
 		ellipsis = '…',
+		separator = '/',
+		minLeaf = 3,
+		keepFirst = 0,
+		fit = false,
+		mono = false,
+		copyable = false,
+		copiedLabel = 'Copied',
+		oncopy,
+		grow = false,
 		tooltip = true,
-		placement = 'top'
+		placement = 'top',
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		text: string;
-		max: number;
+		/** Character budget. Ignored when `fit` is set. */
+		max?: number;
 		mode?: TruncateMode;
 		ellipsis?: string;
+		/** `path` mode options. */
+		separator?: string;
+		minLeaf?: number;
+		keepFirst?: number;
+		/** Measure the host width and show the longest candidate that fits. */
+		fit?: boolean;
+		mono?: boolean;
+		/** Click copies the full text; announces via a live region. */
+		copyable?: boolean;
+		copiedLabel?: string;
+		oncopy?: (ok: boolean) => void;
+		/** `flex: 1 1 0; min-width: 0` so the host claims a flex row's free space. */
+		grow?: boolean;
 		/** Reveal the full text on hover/focus when truncated. Default true. */
 		tooltip?: boolean;
 		placement?: 'top' | 'bottom' | 'left' | 'right';
+		class?: string;
+		style?: string;
 	} = $props();
 
-	const shown = $derived(truncate(text, { max, mode, ellipsis }));
+	const pathOpts = $derived({ ellipsis, separator, minLeaf, keepFirst });
+
+	const candidates = $derived.by(() => {
+		if (mode === 'path') return pathCandidates(text, pathOpts);
+		const out: string[] = [];
+		for (let m = [...text].length; m >= 2; m--) {
+			const c = truncate(text, { max: m, mode, ellipsis });
+			if (out[out.length - 1] !== c) out.push(c);
+		}
+		return out;
+	});
+
+	let rail = $state<HTMLSpanElement | null>(null);
+	let probe = $state<HTMLSpanElement | null>(null);
+	let avail = $state(Number.POSITIVE_INFINITY);
+	let chPx = $state(8);
+
+	$effect(() => {
+		if (!fit || !rail) return;
+		const el = rail;
+		const measure = () => {
+			avail = el.clientWidth;
+			if (probe) chPx = probe.getBoundingClientRect().width / 10 || chPx;
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
+	const shown = $derived.by(() => {
+		if (fit) {
+			const budget = Math.max(0, avail - 1);
+			return candidates.find((c) => [...c].length * chPx <= budget) ?? candidates[candidates.length - 1];
+		}
+		if (max === undefined) return text;
+		return truncate(text, { max, mode, ...pathOpts });
+	});
 	const isTruncated = $derived(shown !== text);
+
+	let status = $state('');
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	async function copy(e: MouseEvent) {
+		e.stopPropagation();
+		const ok = await copyToClipboard(text);
+		oncopy?.(ok);
+		status = ok ? copiedLabel : 'Copy failed';
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			status = '';
+		}, 1500);
+	}
 </script>
 
-{#if isTruncated && tooltip}
-	<Tooltip text={text} {placement}>
-		{#snippet trigger()}
-			<!-- tabindex makes the shortened text reachable by keyboard so the
-			     full-text tooltip (wired by Tooltip onto the first focusable child)
-			     isn't mouse-only; the span is otherwise non-interactive. -->
-			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-			<span class="trunc" data-tsu="Truncate" tabindex="0">{shown}</span>
-		{/snippet}
-	</Tooltip>
+{#snippet inner(focusable: boolean)}
+	{#if copyable}
+		<button type="button" class="trunc copy {klass}" class:mono style={styleProp} data-tsu="Truncate" title={text} onclick={copy}>
+			{shown}
+		</button>
+		<span class="sr-only" role="status" aria-live="polite">{status}</span>
+	{:else if focusable}
+		<!-- tabindex makes the shortened text reachable by keyboard so the
+		     full-text tooltip (wired by Tooltip onto the first focusable child)
+		     isn't mouse-only; the span is otherwise non-interactive. -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<span class="trunc {klass}" class:mono style={styleProp} data-tsu="Truncate" tabindex="0">{shown}</span>
+	{:else}
+		<span class="trunc {klass}" class:mono style={styleProp} data-tsu="Truncate">{shown}</span>
+	{/if}
+{/snippet}
+
+{#snippet body()}
+	{#if isTruncated && tooltip}
+		<Tooltip {text} {placement}>
+			{#snippet trigger()}{@render inner(true)}{/snippet}
+		</Tooltip>
+	{:else}
+		{@render inner(false)}
+	{/if}
+{/snippet}
+
+{#if fit}
+	<span class="rail" class:grow bind:this={rail}>
+		{@render body()}
+		<span class="probe" bind:this={probe} aria-hidden="true">{'0'.repeat(10)}</span>
+	</span>
+{:else if grow}
+	<span class="rail grow">{@render body()}</span>
 {:else}
-	<span class="trunc" data-tsu="Truncate">{shown}</span>
+	{@render body()}
 {/if}
 
 <style>
@@ -51,5 +153,41 @@
 		/* No layout of its own — it shortens the string, not the box. The cursor
 		   hint signals there's more to reveal. */
 		cursor: default;
+		white-space: nowrap;
+	}
+	.mono {
+		font-family: var(--font-mono);
+	}
+	.copy {
+		border: 0;
+		padding: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		cursor: copy;
+	}
+	.rail {
+		display: inline-flex;
+		align-items: center;
+		min-width: 0;
+		max-width: 100%;
+		overflow: hidden;
+	}
+	.grow {
+		flex: 1 1 0;
+	}
+	.probe {
+		position: absolute;
+		visibility: hidden;
+		white-space: pre;
+		pointer-events: none;
+	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
 	}
 </style>

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

@@ -1,12 +1,28 @@
 import { type TruncateMode } from '../../truncate';
 type $$ComponentProps = {
     text: string;
-    max: number;
+    /** Character budget. Ignored when `fit` is set. */
+    max?: number;
     mode?: TruncateMode;
     ellipsis?: string;
+    /** `path` mode options. */
+    separator?: string;
+    minLeaf?: number;
+    keepFirst?: number;
+    /** Measure the host width and show the longest candidate that fits. */
+    fit?: boolean;
+    mono?: boolean;
+    /** Click copies the full text; announces via a live region. */
+    copyable?: boolean;
+    copiedLabel?: string;
+    oncopy?: (ok: boolean) => void;
+    /** `flex: 1 1 0; min-width: 0` so the host claims a flex row's free space. */
+    grow?: boolean;
     /** Reveal the full text on hover/focus when truncated. Default true. */
     tooltip?: boolean;
     placement?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+    style?: string;
 };
 declare const Truncate: import("svelte").Component<$$ComponentProps, {}, "">;
 type Truncate = ReturnType<typeof Truncate>;

package/dist/components/molecules/WorkingDir.svelte

@@ -13,6 +13,7 @@
 		minLeaf = 18,
 		mono = true,
 		full = false,
+		shrink = false,
 		icon = 'folder',
 		title,
 		copy = false,
@@ -27,6 +28,8 @@
 		mono?: boolean;
 		/** Skip the fit algorithm: render the whole path and size to content. */
 		full?: boolean;
+		/** Size to the path when it fits; keep truncating when it does not. */
+		shrink?: boolean;
 		icon?: IconName;
 		/** Defaults to the full path. */
 		title?: string;
@@ -64,6 +67,8 @@
 		return () => ro.disconnect();
 	});
 
+	const fullWidth = $derived(shrink && !full ? Math.ceil(candidates[0].length * chPx + chrome + 2) : undefined);
+
 	const shown = $derived.by(() => {
 		if (full) return normalized;
 		const budget = Math.max(0, avail - chrome - 1);
@@ -87,6 +92,7 @@
 	class="rail {klass}"
 	class:full
 	bind:this={rail}
+	style:max-width={fullWidth ? `${fullWidth}px` : undefined}
 	{style}
 >
 	<Badge

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     mono?: boolean;
     /** Skip the fit algorithm: render the whole path and size to content. */
     full?: boolean;
+    /** Size to the path when it fits; keep truncating when it does not. */
+    shrink?: boolean;
     icon?: IconName;
     /** Defaults to the full path. */
     title?: string;

package/dist/components/organisms/DataTable.svelte

@@ -28,8 +28,8 @@
 	// Generic, accessible data table. Columns are typed against the row type; a
 	// column renders row[key] by default, a `get` accessor, or a custom
 	// `cellSnippets[key]` snippet for full control (badges, actions…). Sticky
-	// header, empty state, optional row click (rows become buttons with the
-	// right keyboard semantics). Horizontal scroll is contained so it never
+	// header, empty state, optional row click (the table becomes a grid whose
+	// rows are focusable and Enter/Space-activatable; rows stay rows for AT). Horizontal scroll is contained so it never
 	// breaks the page layout on mobile.
 	import type { Snippet } from 'svelte';
 
@@ -55,7 +55,10 @@
 		onloadmore,
 		loadMoreLabel = 'Load more',
 		responsive = 'scroll',
-		stackBelow = '48rem'
+		stackBelow = '48rem',
+		class: klass = '',
+		style: styleProp = '',
+		tableClass = '',
 	}: {
 		columns: Column<T>[];
 		rows: T[];
@@ -92,10 +95,25 @@
 		responsive?: 'scroll' | 'stack';
 		/** Width (px/em/rem) under which `stack` mode kicks in. */
 		stackBelow?: string;
+		class?: string;
+		style?: string;
+		/** Class on the inner <table>. */
+		tableClass?: string;
 	} = $props();
 
 	let wrapEl = $state<HTMLDivElement | null>(null);
 	let stacked = $state(false);
+	let actionsW = $state(0);
+
+	function measureActions(node: HTMLElement) {
+		const update = () => {
+			actionsW = Math.max(actionsW, Math.ceil(node.getBoundingClientRect().width));
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(node);
+		return { destroy: () => observer.disconnect() };
+	}
 
 	function toPx(length: string, el: HTMLElement): number {
 		const n = Number.parseFloat(length);
@@ -158,7 +176,8 @@
 
 <div
 	bind:this={wrapEl}
-	class="dt-scroll"
+	class="dt-scroll {klass}"
+	style={styleProp}
 	class:dt-stack={responsive === 'stack'}
 	data-tsu="DataTable"
 	data-size={size}
@@ -166,12 +185,14 @@
 	aria-busy={loading || undefined}
 >
 	<table
-		class="dt"
+		class="dt {tableClass}"
 		class:sticky={stickyHeader}
 		class:fixed={layout === 'fixed'}
 		class:head-hidden={hideHeader}
 		class:sm={size === 'sm'}
 		style:--dt-sticky-offset={stickyOffset}
+		style:--dt-actions-w={actionsW ? `calc(${actionsW}px + 2 * var(--sp-3))` : undefined}
+		role={onrowclick ? 'grid' : undefined}
 	>
 		<thead data-part="head">
 			<tr>
@@ -227,7 +248,6 @@
 						class:clickable={!!onrowclick}
 						class:toned={!!tone && tone !== 'neutral'}
 						tabindex={onrowclick ? 0 : undefined}
-						role={onrowclick ? 'button' : undefined}
 						onclick={onrowclick ? () => onrowclick(row) : undefined}
 						onkeydown={onrowclick
 							? (e) => {
@@ -257,7 +277,7 @@
 						{/each}
 						{#if rowActions}
 							<td data-part="actions" class="dt-actions">
-								{@render rowActions(row)}
+								<span class="dt-actions-inner" use:measureActions>{@render rowActions(row)}</span>
 							</td>
 						{/if}
 					</tr>
@@ -414,6 +434,12 @@
 		opacity: 0;
 		transition: opacity 0.12s var(--ease);
 	}
+	.dt-actions-inner {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		white-space: nowrap;
+	}
 	tr:hover .dt-actions,
 	tr:focus-within .dt-actions {
 		opacity: 1;
@@ -444,7 +470,7 @@
 	[data-stacked] {
 		overflow-x: visible;
 	}
-	[data-stacked] thead th {
+	[data-stacked] thead {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -460,7 +486,8 @@
 	[data-stacked] td {
 		display: block;
 	}
-	[data-stacked] tr {
+	[data-stacked] tbody tr,
+	[data-stacked] tfoot tr {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: baseline;
@@ -487,7 +514,8 @@
 		box-shadow: inset 3px 0 0 var(--dt-tone);
 	}
 	[data-stacked] td[data-role='title'] {
-		flex: 1 1 0;
+		flex: 1 1 auto;
+		min-width: min(100%, 12rem);
 		order: -2;
 		font-weight: var(--fw-semibold);
 		font-size: var(--fs-md);

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

@@ -58,6 +58,10 @@ declare function $$render<T>(): {
         responsive?: "scroll" | "stack";
         /** Width (px/em/rem) under which `stack` mode kicks in. */
         stackBelow?: string;
+        class?: string;
+        style?: string;
+        /** Class on the inner <table>. */
+        tableClass?: string;
     };
     exports: {};
     bindings: "";

package/dist/components/organisms/FilterSearchBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// ───────────────────────────────────────────────────────────────────────
 	// FilterSearchBar organism — a YouTrack-style structured search bar.
 	//
@@ -31,7 +32,9 @@
 		showHotkey = false,
 		grow = false,
 		onchange,
-		onsubmit
+		onsubmit,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		schema: Schema;
 		/** The raw textual query (two-way bindable). */
@@ -46,7 +49,7 @@
 		 */
 		autoQuote?: boolean;
 		/** Forwarded to FilterInput. */
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		shape?: 'square' | 'pill';
 		surface?: 'base' | 'raised' | 'sunken';
 		hotkey?: string;
@@ -56,6 +59,8 @@
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
 		onsubmit?: (value: string) => void;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	function labelFor(fieldName: string): string {
@@ -76,6 +81,8 @@
 	{grow}
 	{onchange}
 	{onsubmit}
+	class={klass}
+	style={styleProp}
 >
 	{#snippet below({ filters: chips, text, remove })}
 		{#if showChips && (chips.length || text)}

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

@@ -1,3 +1,4 @@
+import type { ControlSize } from '../../size';
 import type { Query } from '../../query/ast';
 import { type Schema } from '../../query/schema';
 type $$ComponentProps = {
@@ -14,7 +15,7 @@ type $$ComponentProps = {
      */
     autoQuote?: boolean;
     /** Forwarded to FilterInput. */
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     shape?: 'square' | 'pill';
     surface?: 'base' | 'raised' | 'sunken';
     hotkey?: string;
@@ -24,6 +25,8 @@ type $$ComponentProps = {
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */
     onsubmit?: (value: string) => void;
+    class?: string;
+    style?: string;
 };
 declare const FilterSearchBar: import("svelte").Component<$$ComponentProps, {}, "value">;
 type FilterSearchBar = ReturnType<typeof FilterSearchBar>;