@dorsk/tsumikit 0.35.0 → 0.36.0

package/dist/components/molecules/WorkingDir.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	// Working-directory chip that abbreviates fish-style as its slot narrows:
+	// ancestors shrink to their first letter left → right, then the leaf alone,
+	// then the leaf ellipsised down to `minLeaf` chars. Candidate generation
+	// lives in `$lib/working-dir`; this component only measures and picks.
+	import Badge from '../atoms/Badge.svelte';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import { copyToClipboard } from '../../clipboard';
+	import { normalizeWorkingDir, workingDirCandidates } from '../../working-dir';
+
+	let {
+		path,
+		minLeaf = 18,
+		mono = true,
+		full = false,
+		icon = 'folder',
+		title,
+		copy = false,
+		copiedLabel = 'Copied',
+		oncopy,
+		class: klass = '',
+		style = ''
+	}: {
+		path: string;
+		/** Char floor the chip reserves so the (truncated) leaf is always legible. */
+		minLeaf?: number;
+		mono?: boolean;
+		/** Skip the fit algorithm: render the whole path and size to content. */
+		full?: boolean;
+		icon?: IconName;
+		/** Defaults to the full path. */
+		title?: string;
+		/** Render as a button that copies the full path on click. */
+		copy?: boolean;
+		copiedLabel?: string;
+		oncopy?: (ok: boolean) => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const normalized = $derived(normalizeWorkingDir(path));
+	const candidates = $derived(workingDirCandidates(path, { minLeaf }));
+
+	let avail = $state(Infinity);
+	let chPx = $state(8);
+	let chrome = $state(0);
+	let rail: HTMLSpanElement | undefined = $state();
+	let txt: HTMLSpanElement | undefined = $state();
+	let probe: HTMLSpanElement | undefined = $state();
+	let status = $state('');
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => {
+		if (!rail || full) return;
+		const measure = () => {
+			avail = rail!.clientWidth;
+			if (probe) chPx = probe.getBoundingClientRect().width / 10 || chPx;
+			const badgeEl = txt?.parentElement;
+			if (badgeEl && txt) chrome = Math.max(0, badgeEl.offsetWidth - txt.offsetWidth);
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(rail);
+		return () => ro.disconnect();
+	});
+
+	const shown = $derived.by(() => {
+		if (full) return normalized;
+		const budget = Math.max(0, avail - chrome - 1);
+		return candidates.find((c) => c.length * chPx <= budget) ?? candidates[candidates.length - 1];
+	});
+
+	async function onclick(e: MouseEvent) {
+		e.stopPropagation();
+		const ok = await copyToClipboard(normalized);
+		oncopy?.(ok);
+		status = ok ? copiedLabel : 'Copy failed';
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			status = '';
+		}, 1500);
+	}
+</script>
+
+<span
+	data-tsu="WorkingDir"
+	class="rail {klass}"
+	class:full
+	bind:this={rail}
+	{style}
+>
+	<Badge
+		as={copy ? 'button' : 'span'}
+		{mono}
+		style="min-width:0;max-width:100%;overflow:hidden;text-align:left"
+		title={title ?? normalized}
+		onpointerdown={copy ? (e: PointerEvent) => e.stopPropagation() : undefined}
+		onclick={copy ? onclick : undefined}
+	>
+		<Icon name={icon} />
+		<span class="text" bind:this={txt}>{shown}</span>
+		{#if !full}
+			<span class="probe" bind:this={probe} aria-hidden="true">{'0'.repeat(10)}</span>
+		{/if}
+	</Badge>
+	{#if copy}
+		<span class="sr-only" role="status" aria-live="polite">{status}</span>
+	{/if}
+</span>
+
+<style>
+	.rail {
+		display: flex;
+		align-items: center;
+		flex: 1 1 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+	.rail.full {
+		flex: none;
+		max-width: 100%;
+	}
+	.text {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+	.probe {
+		position: absolute;
+		visibility: hidden;
+		white-space: pre;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import { type IconName } from '../atoms/Icon.svelte';
+type $$ComponentProps = {
+    path: string;
+    /** Char floor the chip reserves so the (truncated) leaf is always legible. */
+    minLeaf?: number;
+    mono?: boolean;
+    /** Skip the fit algorithm: render the whole path and size to content. */
+    full?: boolean;
+    icon?: IconName;
+    /** Defaults to the full path. */
+    title?: string;
+    /** Render as a button that copies the full path on click. */
+    copy?: boolean;
+    copiedLabel?: string;
+    oncopy?: (ok: boolean) => void;
+    class?: string;
+    style?: string;
+};
+declare const WorkingDir: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkingDir = ReturnType<typeof WorkingDir>;
+export default WorkingDir;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
 export { default as Dot } from './components/atoms/Dot.svelte';
+export { default as Gauge, type GaugeTone } from './components/atoms/Gauge.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
 export type { IconName } from './components/atoms/Icon.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';
@@ -27,6 +28,7 @@ export { default as AppShell } from './components/layouts/AppShell.svelte';
 export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
+export { default as MasterDetail } from './components/layouts/MasterDetail.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';
@@ -35,15 +37,18 @@ 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';
 export { default as Callout } from './components/molecules/Callout.svelte';
+export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 export { default as Field } from './components/molecules/Field.svelte';
+export { default as Fieldset } from './components/molecules/Fieldset.svelte';
 export { default as FileButton } from './components/molecules/FileButton.svelte';
 export { default as FilterInput, type FilterInputContext, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
+export { type DiffStats, default as GitRef, type PrState, type PullRequest, } from './components/molecules/GitRef.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
 export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
@@ -64,6 +69,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 { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
@@ -74,3 +80,4 @@ export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type T
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { canonicalTone, type Tone } from './tone';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';
+export { normalizeWorkingDir, type WorkingDirOptions, workingDirCandidates } from './working-dir';

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
 export { default as Dot } from './components/atoms/Dot.svelte';
+export { default as Gauge } from './components/atoms/Gauge.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
@@ -34,6 +35,7 @@ export { default as AppShell } from './components/layouts/AppShell.svelte';
 export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
+export { default as MasterDetail } from './components/layouts/MasterDetail.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';
@@ -42,6 +44,7 @@ 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';
 export { default as Callout } from './components/molecules/Callout.svelte';
+export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
@@ -49,9 +52,11 @@ export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 // ---- molecules ----
 export { default as Field } from './components/molecules/Field.svelte';
+export { default as Fieldset } from './components/molecules/Fieldset.svelte';
 export { default as FileButton } from './components/molecules/FileButton.svelte';
 export { default as FilterInput, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
+export { default as GitRef, } from './components/molecules/GitRef.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
 export { default as KeyValue, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
@@ -74,6 +79,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 { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 // ---- organisms ----
 export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
@@ -87,3 +93,4 @@ export { toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { canonicalTone } from './tone';
 export { truncate } from './truncate';
+export { normalizeWorkingDir, workingDirCandidates } from './working-dir';

package/dist/working-dir.d.ts

@@ -0,0 +1,12 @@
+export interface WorkingDirOptions {
+    /** Visible chars the truncated leaf keeps before the ellipsis, at minimum. Default 18. */
+    minLeaf?: number;
+}
+/** Trailing slashes dropped; an empty or root-only path becomes `/`. */
+export declare function normalizeWorkingDir(path: string): string;
+/**
+ * Candidate renderings of `path`:
+ *   full path → ancestors abbreviated to their first letter one at a time,
+ *   left to right → leaf only → leaf end-truncated down to `minLeaf` chars.
+ */
+export declare function workingDirCandidates(path: string, options?: WorkingDirOptions): string[];

package/dist/working-dir.js

@@ -0,0 +1,38 @@
+// Fish-style path abbreviation candidates, richest → poorest. The WorkingDir
+// molecule picks the first entry that fits its measured width; the last entry
+// (the leaf clipped to `minLeaf` chars) is the hard floor.
+import { truncate } from './truncate';
+/** Trailing slashes dropped; an empty or root-only path becomes `/`. */
+export function normalizeWorkingDir(path) {
+    return path.replace(/\/+$/, '') || '/';
+}
+/**
+ * Candidate renderings of `path`:
+ *   full path → ancestors abbreviated to their first letter one at a time,
+ *   left to right → leaf only → leaf end-truncated down to `minLeaf` chars.
+ */
+export function workingDirCandidates(path, options = {}) {
+    const { minLeaf = 18 } = options;
+    const trimmed = path.replace(/\/+$/, '');
+    const absolute = trimmed.startsWith('/');
+    const segs = trimmed.split('/').filter(Boolean);
+    if (segs.length === 0)
+        return [trimmed || '/'];
+    const leaf = segs[segs.length - 1];
+    const parents = segs.slice(0, -1);
+    const out = [];
+    const push = (c) => {
+        if (out[out.length - 1] !== c)
+            out.push(c);
+    };
+    for (let n = 0; n <= parents.length; n++) {
+        const shown = parents.map((p, i) => (i < n ? [...p][0] : p));
+        const joined = [...shown, leaf].join('/');
+        push(absolute ? `/${joined}` : joined);
+    }
+    push(leaf);
+    for (let keep = [...leaf].length - 1; keep >= minLeaf; keep--) {
+        push(truncate(leaf, { max: keep + 1, mode: 'end' }));
+    }
+    return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.35.0",
+  "version": "0.36.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",
@@ -57,20 +57,28 @@
     "format": "biome check --write .",
     "package": "svelte-kit sync && svelte-package && publint",
     "package:watch": "svelte-kit sync && svelte-package --watch",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run package",
+    "design:bundle": "node .design-sync/build-bundle.mjs",
+    "design:verify": "node .design-sync/verify-bundle.mjs"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.0",
+    "@dorsk/kakehashi": "^0.1.1",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@types/node": "^25.9.3",
+    "esbuild": "^0.28.2",
+    "esbuild-svelte": "^0.9.5",
+    "jsdom": "^30.0.1",
     "lefthook": "^1.7.0",
     "publint": "^0.2.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "typescript": "^5.0.0",