@dorsk/tsumikit 0.35.0 → 0.36.0

package/README.md

@@ -148,7 +148,8 @@ for a light theme (`:root` defaults to dark, so dark themes may omit it).
 `clearable` + `onclear`, `shape="pill"`, `width` fixed + `flex: none`,
 `onenter(value)`; the bare `<input>` DOM is unchanged unless `icon`/`clearable`
 is used), Textarea, Select, Switch, Checkbox,
-Slider, Progress, Artwork (lazy cover image with seeded gradient + initials
+Slider, Progress, Gauge (vertical consumption cell, `variant` continuous/segments,
+threshold tones via `warnAt`/`dangerAt`, `corner` snippet), Artwork (lazy cover image with seeded gradient + initials
 fallback, `aspect`, `status` overlay), Card (`tone` tints the surface for inline banners), Badge
 (`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
 `icon`, `numeric`, `truncate`, `variant="text"`; all tints derive from
@@ -159,7 +160,15 @@ any custom SVG).
 **Molecules:** Field (`grow`), IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
-ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore.
+ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore,
+GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
+auto/never/glyph degrades to icons inside a narrow `.cq` container),
+CapBar (consumption track with a draggable, keyboard-steppable cap handle; `oninput` live, `onchange` on commit), WorkingDir
+(fish-style path chip: ancestors abbreviate left to right as the slot narrows,
+then the leaf ellipsises down to `minLeaf`; `full` skips the fit, `copy` makes it
+a copy-on-click button; candidates via the `workingDirCandidates` helper).
+Fieldset (bordered zone, legend rides the border; `droppable` makes it an HTML5
+drop target with `accepts`/`ondrop`/`dropHint` — keyboard alternative is the consumer's job).
 
 **Organisms:** DataTable (generic `<T>`, typed columns + cell snippets;
 `layout="fixed"` makes column widths authoritative, `Column.truncate` /
@@ -186,7 +195,9 @@ children are `min-width: 0` so a wide title/actions row can't widen the grid on
 mobile), NavItem
 (collapses to an icon rail when the sidebar is narrow; `icon` from the
 registry, `iconPath` / `iconChildren` for custom glyphs, `activeStyle="bar"`
-for the inset-bar active look), Container, Stack
+for the inset-bar active look), MasterDetail (list + detail columns that
+become two pages — one pane at a time with a sticky 44px back header — below
+their own `breakpoint`, so `selected` can be driven from the URL), Container, Stack
 (vertical), Cluster (wrapping row; `stackAt="xs|sm|md|lg"` makes it its own
 query container and stacks children full-width below 18/30/40/48rem — phone
 action rows without a viewport query), AutoGrid (intrinsically responsive

package/dist/cap-bar.d.ts

@@ -0,0 +1,8 @@
+export declare function clampCap(value: number, min?: number, max?: number): number;
+export declare function snapCap(value: number, step?: number, min?: number, max?: number): number;
+export declare function capFromPointer(clientX: number, rect: {
+    left: number;
+    width: number;
+}, step?: number, min?: number, max?: number): number;
+export declare function capKeyStep(key: string, shift: boolean, current: number, step?: number, min?: number, max?: number): number | null;
+export declare function capTone(value: number, cap: number, warnAt?: number): 'ok' | 'warn' | 'danger';

package/dist/cap-bar.js

@@ -0,0 +1,43 @@
+export function clampCap(value, min = 0, max = 100) {
+    if (Number.isNaN(value))
+        return min;
+    return Math.min(max, Math.max(min, value));
+}
+export function snapCap(value, step = 5, min = 0, max = 100) {
+    const s = step > 0 ? step : 1;
+    return clampCap(min + Math.round((value - min) / s) * s, min, max);
+}
+export function capFromPointer(clientX, rect, step = 5, min = 0, max = 100) {
+    if (rect.width <= 0)
+        return min;
+    const ratio = (clientX - rect.left) / rect.width;
+    return snapCap(min + ratio * (max - min), step, min, max);
+}
+export function capKeyStep(key, shift, current, step = 5, min = 0, max = 100) {
+    const delta = shift ? step * 5 : step;
+    switch (key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            return snapCap(current + delta, step, min, max);
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            return snapCap(current - delta, step, min, max);
+        case 'Home':
+            return min;
+        case 'End':
+            return max;
+        case 'PageUp':
+            return snapCap(current + step * 5, step, min, max);
+        case 'PageDown':
+            return snapCap(current - step * 5, step, min, max);
+        default:
+            return null;
+    }
+}
+export function capTone(value, cap, warnAt = 75) {
+    if (value >= cap)
+        return 'danger';
+    if (value >= warnAt)
+        return 'warn';
+    return 'ok';
+}

package/dist/components/atoms/Gauge.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+	export type GaugeTone = 'ok' | 'warn' | 'danger';
+
+	export function clampPct(value: number): number {
+		return Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+	}
+
+	export function gaugeTone(value: number, warnAt = 70, dangerAt = 90): GaugeTone {
+		const v = clampPct(value);
+		if (v >= dangerAt) return 'danger';
+		if (v >= warnAt) return 'warn';
+		return 'ok';
+	}
+
+	export function litSegments(value: number, segments = 3): number {
+		const v = clampPct(value);
+		if (segments <= 0) return 0;
+		return Math.min(segments, Math.floor((v / 100) * segments));
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		value,
+		variant = 'continuous',
+		segments = 3,
+		tone,
+		warnAt = 70,
+		dangerAt = 90,
+		label,
+		as = 'div',
+		width,
+		height,
+		corner,
+		class: klass = '',
+		style = '',
+		...rest
+	}: {
+		value: number;
+		variant?: 'continuous' | 'segments';
+		// `segments` variant only: number of stacked bars, lit bottom-up.
+		segments?: number;
+		// Forces the fill colour; otherwise derived from `warnAt` / `dangerAt`.
+		tone?: GaugeTone;
+		warnAt?: number;
+		dangerAt?: number;
+		label?: string;
+		as?: 'div' | 'a' | 'button';
+		width?: string;
+		height?: string;
+		corner?: Snippet;
+		class?: string;
+		style?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const pct = $derived(clampPct(value));
+	const resolvedTone = $derived(tone ?? gaugeTone(pct, warnAt, dangerAt));
+	const lit = $derived(litSegments(pct, segments));
+	const segmentCount = $derived(Math.max(0, Math.floor(segments)));
+</script>
+
+<svelte:element
+	this={as}
+	data-tsu="Gauge"
+	class="gauge tone-{resolvedTone} {klass}"
+	class:interactive={as !== 'div'}
+	type={as === 'button' ? 'button' : undefined}
+	role="meter"
+	aria-label={label}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	aria-valuenow={pct}
+	style:--gauge-w={width}
+	style:--gauge-h={height}
+	{style}
+	{...rest}
+>
+	{#if variant === 'segments'}
+		<span class="segments" style:--gauge-segments={segmentCount}>
+			{#each { length: segmentCount } as _, i (i)}
+				<span class="segment" class:lit={i < lit}></span>
+			{/each}
+		</span>
+	{:else}
+		<span class="fill" style:height="{pct}%"></span>
+	{/if}
+	{#if corner}
+		<span class="corner">{@render corner()}</span>
+	{/if}
+</svelte:element>
+
+<style>
+	.gauge {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		box-sizing: border-box;
+		width: var(--gauge-w, 0.875rem);
+		height: var(--gauge-h, 1.25rem);
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--r-sm);
+		background: var(--bg-elevated-2);
+		overflow: visible;
+		color: inherit;
+		font: inherit;
+		text-decoration: none;
+		vertical-align: middle;
+	}
+	.interactive {
+		cursor: pointer;
+	}
+	.interactive:hover {
+		border-color: var(--gauge-fill);
+	}
+	.interactive:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.tone-ok {
+		--gauge-fill: var(--ok);
+	}
+	.tone-warn {
+		--gauge-fill: var(--warn);
+	}
+	.tone-danger {
+		--gauge-fill: var(--danger);
+	}
+	.fill {
+		position: absolute;
+		inset: auto 0 0 0;
+		border-radius: calc(var(--r-sm) - 1px);
+		background: var(--gauge-fill);
+		transition: height 0.2s var(--ease), background 0.2s var(--ease);
+	}
+	.segments {
+		position: absolute;
+		inset: 2px;
+		display: flex;
+		flex-direction: column-reverse;
+		gap: 2px;
+	}
+	.segment {
+		flex: 1 1 0%;
+		border-radius: 2px;
+		background: var(--bg-elevated);
+		transition: background 0.2s var(--ease);
+	}
+	.segment.lit {
+		background: var(--gauge-fill);
+	}
+	.corner {
+		position: absolute;
+		right: -0.35em;
+		bottom: -0.35em;
+		display: inline-flex;
+		font-size: 0.625rem;
+		line-height: 1;
+		pointer-events: none;
+	}
+</style>

package/dist/components/atoms/Gauge.svelte.d.ts

@@ -0,0 +1,24 @@
+export type GaugeTone = 'ok' | 'warn' | 'danger';
+export declare function clampPct(value: number): number;
+export declare function gaugeTone(value: number, warnAt?: number, dangerAt?: number): GaugeTone;
+export declare function litSegments(value: number, segments?: number): number;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value: number;
+    variant?: 'continuous' | 'segments';
+    segments?: number;
+    tone?: GaugeTone;
+    warnAt?: number;
+    dangerAt?: number;
+    label?: string;
+    as?: 'div' | 'a' | 'button';
+    width?: string;
+    height?: string;
+    corner?: Snippet;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const Gauge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Gauge = ReturnType<typeof Gauge>;
+export default Gauge;

package/dist/components/layouts/MasterDetail.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	// List + detail columns. Above `breakpoint` (measured on this component's own
+	// box, not the viewport) both columns render and scroll independently. Below
+	// it exactly one pane renders: the list while nothing is `selected`, the
+	// detail (with a sticky back header) once it is. The consumer drives
+	// `selected` — typically from the URL — so each pane can be its own route.
+	import type { Snippet } from 'svelte';
+	import { browser } from '../../env';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		list,
+		detail,
+		detailHeader,
+		empty,
+		listWidth = '17rem',
+		breakpoint = '48rem',
+		selected = false,
+		onback,
+		backLabel = 'Back',
+		listLabel = 'List',
+		class: klass = '',
+		style,
+		...rest
+	}: {
+		list: Snippet;
+		detail: Snippet;
+		/** Rendered above the detail; on mobile it shares the sticky header with the back button. */
+		detailHeader?: Snippet;
+		/** Desktop placeholder in the detail column while nothing is selected. */
+		empty?: Snippet;
+		listWidth?: string;
+		/** Own-width threshold (px/em/rem) below which the panes become two pages. */
+		breakpoint?: string;
+		selected?: boolean;
+		onback?: () => void;
+		backLabel?: string;
+		listLabel?: string;
+		class?: string;
+		style?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let root = $state<HTMLElement | null>(null);
+	let mobile = $state(false);
+
+	function toPx(length: string, el: HTMLElement): number {
+		const n = Number.parseFloat(length);
+		const fontSize = (node: Element) => Number.parseFloat(getComputedStyle(node).fontSize);
+		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
+		if (length.endsWith('em')) return n * fontSize(el);
+		return n;
+	}
+
+	$effect(() => {
+		if (!browser || !root) return;
+		const el = root;
+		const limit = toPx(breakpoint, el);
+		const observer = new ResizeObserver(([entry]) => {
+			mobile = entry.contentRect.width < limit;
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
+	const showList = $derived(!mobile || !selected);
+	const showDetail = $derived(!mobile || selected);
+</script>
+
+<div
+	bind:this={root}
+	class="md {klass}"
+	class:mobile
+	class:selected
+	style="--md-list-w: {listWidth};{style ? ` ${style}` : ''}"
+	data-tsu="MasterDetail"
+	{...rest}
+>
+	{#if showList}
+		<aside class="md-list" aria-label={listLabel}>
+			{@render list()}
+		</aside>
+	{/if}
+	{#if showDetail}
+		<section class="md-detail">
+			{#if mobile}
+				<header class="md-detail-header">
+					<button type="button" class="md-back" onclick={() => onback?.()}>
+						<Icon name="chevron-left" />
+						<span>{backLabel}</span>
+					</button>
+					{#if detailHeader}
+						<div class="md-detail-header-content">{@render detailHeader()}</div>
+					{/if}
+				</header>
+			{:else if detailHeader}
+				<header class="md-detail-header">
+					<div class="md-detail-header-content">{@render detailHeader()}</div>
+				</header>
+			{/if}
+			<div class="md-detail-body">
+				{#if selected}
+					{@render detail()}
+				{:else}
+					{@render empty?.()}
+				{/if}
+			</div>
+		</section>
+	{/if}
+</div>
+
+<style>
+	.md {
+		display: grid;
+		grid-template-columns: var(--md-list-w) minmax(0, 1fr);
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
+		overflow: hidden;
+	}
+	.md-list,
+	.md-detail {
+		min-width: 0;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+		-webkit-overflow-scrolling: touch;
+	}
+	.md-list {
+		border-right: 1px solid var(--border);
+	}
+	.md-detail {
+		display: flex;
+		flex-direction: column;
+	}
+	.md-detail-header {
+		position: sticky;
+		top: 0;
+		z-index: var(--z-header);
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		min-height: var(--touch-target);
+		padding-inline: var(--sp-3);
+		background: color-mix(in srgb, var(--bg) 88%, transparent);
+		backdrop-filter: blur(8px);
+		border-bottom: 1px solid var(--border);
+	}
+	.md-detail-header-content {
+		flex: 1;
+		min-width: 0;
+	}
+	.md-detail-body {
+		flex: 1;
+		min-height: 0;
+	}
+	.md-back {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		min-height: var(--touch-target);
+		min-width: var(--touch-target);
+		padding-inline: var(--sp-2);
+		margin-inline-start: calc(-1 * var(--sp-2));
+		border: 0;
+		border-radius: var(--r-sm);
+		background: transparent;
+		color: var(--accent);
+		font: inherit;
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-medium);
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	.md-back:hover {
+		background: color-mix(in srgb, var(--accent) 12%, transparent);
+	}
+	.md-back:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.md.mobile {
+		grid-template-columns: minmax(0, 1fr);
+	}
+	.md.mobile .md-list {
+		border-right: 0;
+		width: 100%;
+		padding-inline: var(--safe-left) var(--safe-right);
+		padding-bottom: var(--safe-bottom);
+	}
+	.md.mobile .md-detail {
+		width: 100%;
+		animation: md-slide-in 0.2s var(--ease);
+	}
+	.md.mobile .md-detail-header {
+		padding-inline: max(var(--sp-3), var(--safe-left)) max(var(--sp-3), var(--safe-right));
+	}
+	.md.mobile .md-detail-body {
+		padding-inline: var(--safe-left) var(--safe-right);
+		padding-bottom: var(--safe-bottom);
+	}
+
+	@keyframes md-slide-in {
+		from {
+			transform: translateX(8%);
+			opacity: 0;
+		}
+		to {
+			transform: none;
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.md.mobile .md-detail {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    list: Snippet;
+    detail: Snippet;
+    /** Rendered above the detail; on mobile it shares the sticky header with the back button. */
+    detailHeader?: Snippet;
+    /** Desktop placeholder in the detail column while nothing is selected. */
+    empty?: Snippet;
+    listWidth?: string;
+    /** Own-width threshold (px/em/rem) below which the panes become two pages. */
+    breakpoint?: string;
+    selected?: boolean;
+    onback?: () => void;
+    backLabel?: string;
+    listLabel?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const MasterDetail: import("svelte").Component<$$ComponentProps, {}, "">;
+type MasterDetail = ReturnType<typeof MasterDetail>;
+export default MasterDetail;

package/dist/components/layouts/ResizablePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { untrack } from 'svelte';
 	import { browser } from '../../env';
 	import Icon from '../atoms/Icon.svelte';
 	import Scrim from '../atoms/Scrim.svelte';
@@ -87,7 +88,6 @@
 
 	function measureLength(css: string) {
 		if (!browser || !root) return undefined;
-		console.count('measure ' + css);
 		const probe = document.createElement('div');
 		probe.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;width:${css}`;
 		root.appendChild(probe);
@@ -128,7 +128,7 @@
 	$effect(() => {
 		if (!browser || restored) return;
 		restored = true;
-		lengthTick += 1;
+		lengthTick = untrack(() => lengthTick) + 1;
 		if (!widthKey) return;
 
 		const savedWidth = parseStoredWidth(
@@ -149,9 +149,8 @@
 	$effect(() => {
 		if (!browser) return;
 		const sync = () => {
-			console.count('sync');
 			viewportWidth = window.innerWidth;
-			lengthTick += 1;
+			lengthTick = untrack(() => lengthTick) + 1;
 		};
 		sync();
 		addEventListener('resize', sync);
@@ -163,7 +162,6 @@
 			fullBleed = false;
 			return;
 		}
-		console.count('bleed');
 		const query = matchMedia(`(max-width: ${fullWidthBelow})`);
 		const sync = () => {
 			fullBleed = query.matches;
@@ -175,7 +173,6 @@
 
 	$effect(() => {
 		if (!browser || !overlay || !open) return;
-		console.count('escape');
 		const onKeydown = (event: KeyboardEvent) => {
 			if (event.key !== 'Escape' || event.defaultPrevented) return;
 			event.preventDefault();
@@ -187,7 +184,6 @@
 
 	$effect(() => {
 		if (!browser || !overlay || !open || !panelEl) return;
-		console.count('focus');
 		const previous = document.activeElement as HTMLElement | null;
 		if (!panelEl.contains(previous)) panelEl.focus({ preventScroll: true });
 		return () => {