@dorsk/tsumikit 0.35.1 → 0.37.0

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/molecules/CapBar.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { capFromPointer, capKeyStep, capTone, clampCap, snapCap } from '../../cap-bar';
+
+	let {
+		value = 0,
+		cap = $bindable(100),
+		min = 0,
+		max = 100,
+		step = 5,
+		warnAt = 75,
+		size = 'md',
+		label,
+		labelWidth = '96px',
+		readout,
+		readoutWidth = '76px',
+		hint,
+		caption,
+		tooltip,
+		readonly = false,
+		oninput,
+		onchange,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		/** Consumption, in percent of `max`. */
+		value?: number;
+		/** Cap position; bindable, moved by drag/keyboard. */
+		cap?: number;
+		min?: number;
+		max?: number;
+		/** Snap increment for drag and keyboard. */
+		step?: number;
+		/** Consumption at which the fill turns `--warn`. */
+		warnAt?: number;
+		size?: 'md' | 'lg';
+		label?: string | Snippet;
+		labelWidth?: string;
+		/** Overrides the default `{value}% · {hint}` readout. */
+		readout?: string | Snippet;
+		readoutWidth?: string;
+		hint?: string;
+		caption?: Snippet;
+		/** Track tooltip; defaults to "cap N% — drag the bar". */
+		tooltip?: string;
+		readonly?: boolean;
+		/** Fires live while dragging or stepping. */
+		oninput?: (cap: number) => void;
+		/** Fires once the cap is committed (pointer release / key-up). */
+		onchange?: (cap: number) => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const range = $derived(max - min || 1);
+	const pct = $derived(clampCap(((value - min) / range) * 100, 0, 100));
+	const capPct = $derived(clampCap(((cap - min) / range) * 100, 0, 100));
+	const tone = $derived(capTone(value, cap, warnAt));
+	const readoutText = $derived(hint ? `${value}% · ${hint}` : `${value}%`);
+	const tip = $derived(tooltip ?? `cap ${cap}% — drag the bar`);
+	const ariaLabel = $derived(typeof label === 'string' ? `${label} cap` : 'cap');
+
+	let trackEl = $state<HTMLDivElement | null>(null);
+	let dragging = $state(false);
+	let committed = cap;
+
+	function setCap(next: number) {
+		if (next === cap) return;
+		cap = next;
+		oninput?.(cap);
+	}
+	function commit() {
+		if (cap === committed) return;
+		committed = cap;
+		onchange?.(cap);
+	}
+
+	function pointerDown(e: PointerEvent) {
+		if (readonly || !trackEl || e.button !== 0) return;
+		e.preventDefault();
+		dragging = true;
+		trackEl.setPointerCapture(e.pointerId);
+		setCap(capFromPointer(e.clientX, trackEl.getBoundingClientRect(), step, min, max));
+		trackEl.querySelector<HTMLElement>('.handle')?.focus();
+	}
+	function pointerMove(e: PointerEvent) {
+		if (!dragging || !trackEl) return;
+		setCap(capFromPointer(e.clientX, trackEl.getBoundingClientRect(), step, min, max));
+	}
+	function pointerUp() {
+		if (!dragging) return;
+		dragging = false;
+		commit();
+	}
+	function keyDown(e: KeyboardEvent) {
+		if (readonly) return;
+		const next = capKeyStep(e.key, e.shiftKey, snapCap(cap, step, min, max), step, min, max);
+		if (next === null) return;
+		e.preventDefault();
+		setCap(next);
+	}
+	function keyUp(e: KeyboardEvent) {
+		if (readonly || capKeyStep(e.key, e.shiftKey, cap, step, min, max) === null) return;
+		commit();
+	}
+</script>
+
+<div
+	data-tsu="CapBar"
+	class="cap-bar size-{size} tone-{tone} {klass}"
+	class:readonly
+	class:dragging
+	style="--label-w: {labelWidth}; --readout-w: {readoutWidth}; --pct: {pct}%; --cap: {capPct}%; {styleProp}"
+>
+	{#if label}
+		<div class="label">
+			{#if typeof label === 'string'}{label}{:else}{@render label()}{/if}
+		</div>
+	{/if}
+	<div
+		class="track"
+		role="presentation"
+		bind:this={trackEl}
+		title={tip}
+		onpointerdown={pointerDown}
+		onpointermove={pointerMove}
+		onpointerup={pointerUp}
+		onpointercancel={pointerUp}
+	>
+		<div class="fill"></div>
+		<div
+			class="handle"
+			role="slider"
+			tabindex={readonly ? -1 : 0}
+			aria-label={ariaLabel}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={cap}
+			aria-valuetext="cap {cap}%"
+			aria-disabled={readonly ? 'true' : undefined}
+			onkeydown={keyDown}
+			onkeyup={keyUp}
+		></div>
+	</div>
+	<div class="readout">
+		{#if readout === undefined}{readoutText}{:else if typeof readout === 'string'}{readout}{:else}{@render readout()}{/if}
+	</div>
+	{#if caption}
+		<div class="caption">{@render caption()}</div>
+	{/if}
+</div>
+
+<style>
+	.cap-bar {
+		display: grid;
+		grid-template-columns: var(--label-w) 1fr var(--readout-w);
+		align-items: center;
+		column-gap: var(--sp-3);
+		row-gap: var(--sp-1);
+		width: 100%;
+		font-size: var(--fs-sm);
+		--track-h: 6px;
+		--fill: var(--ok);
+	}
+	.cap-bar.size-lg {
+		--track-h: 10px;
+	}
+	.tone-warn {
+		--fill: var(--warn);
+	}
+	.tone-danger {
+		--fill: var(--danger);
+	}
+	.label {
+		color: var(--text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.cap-bar:not(:has(.label)) .track {
+		grid-column: 1 / 3;
+	}
+	.track {
+		position: relative;
+		height: var(--track-h);
+		border-radius: var(--r-pill);
+		background: color-mix(in oklab, var(--accent) 26%, var(--bg));
+		cursor: ew-resize;
+		touch-action: none;
+		user-select: none;
+	}
+	.track::after {
+		content: '';
+		position: absolute;
+		inset: 0 0 0 var(--cap);
+		border-radius: 0 var(--r-pill) var(--r-pill) 0;
+		background: var(--bg);
+		box-shadow: inset 0 0 0 1px var(--border);
+		pointer-events: none;
+	}
+	.fill {
+		position: absolute;
+		inset: 0 auto 0 0;
+		width: var(--pct);
+		border-radius: var(--r-pill);
+		background: var(--fill);
+		transition: width 0.2s var(--ease);
+		z-index: 1;
+	}
+	.handle {
+		position: absolute;
+		top: 50%;
+		left: var(--cap);
+		width: 3px;
+		height: 16px;
+		transform: translate(-50%, -50%);
+		border-radius: 2px;
+		background: var(--text);
+		box-shadow: 0 0 0 2px var(--surface);
+		cursor: ew-resize;
+		z-index: 2;
+	}
+	.handle:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.readonly .track,
+	.readonly .handle {
+		cursor: default;
+		pointer-events: none;
+	}
+	.readonly .handle {
+		opacity: 0.6;
+	}
+	.readout {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-muted);
+		white-space: nowrap;
+	}
+	.caption {
+		grid-column: 2 / 3;
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+	.cap-bar:not(:has(.label)) .caption {
+		grid-column: 1 / 3;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.fill {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Consumption, in percent of `max`. */
+    value?: number;
+    /** Cap position; bindable, moved by drag/keyboard. */
+    cap?: number;
+    min?: number;
+    max?: number;
+    /** Snap increment for drag and keyboard. */
+    step?: number;
+    /** Consumption at which the fill turns `--warn`. */
+    warnAt?: number;
+    size?: 'md' | 'lg';
+    label?: string | Snippet;
+    labelWidth?: string;
+    /** Overrides the default `{value}% · {hint}` readout. */
+    readout?: string | Snippet;
+    readoutWidth?: string;
+    hint?: string;
+    caption?: Snippet;
+    /** Track tooltip; defaults to "cap N% — drag the bar". */
+    tooltip?: string;
+    readonly?: boolean;
+    /** Fires live while dragging or stepping. */
+    oninput?: (cap: number) => void;
+    /** Fires once the cap is committed (pointer release / key-up). */
+    onchange?: (cap: number) => void;
+    class?: string;
+    style?: string;
+};
+declare const CapBar: import("svelte").Component<$$ComponentProps, {}, "cap">;
+type CapBar = ReturnType<typeof CapBar>;
+export default CapBar;