@dorsk/tsumikit 0.35.0 → 0.36.0

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;

package/dist/components/molecules/Fieldset.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	// Bordered zone whose legend rides the top border. Real <fieldset>/<legend>
+	// for semantics. `droppable` turns it into an HTML5 drop target: a hovering
+	// drag that passes `accepts` highlights the zone and shows `dropHint`;
+	// `ondrop` receives the payload read from `dataTransfer` under `mime`.
+	// Keyboard users cannot drag — the consumer must offer a non-drag path
+	// (a move menu, a select) to the same action. Pointer-based DnD can drive
+	// the highlight through the bindable `over` prop.
+	import type { Snippet } from 'svelte';
+
+	type Tone = 'accent' | 'neutral' | 'strong';
+
+	let {
+		legend,
+		tone = 'accent',
+		dashed = true,
+		padding = 'md',
+		droppable = false,
+		mime = 'text/plain',
+		accepts,
+		ondrop,
+		dropHint,
+		over = $bindable(false),
+		disabled = false,
+		class: klass = '',
+		style = '',
+		children,
+		...rest
+	}: {
+		legend?: string | Snippet;
+		tone?: Tone;
+		dashed?: boolean;
+		padding?: 'sm' | 'md' | 'lg';
+		droppable?: boolean;
+		mime?: string;
+		accepts?: (data: string, e: DragEvent) => boolean;
+		ondrop?: (data: string, e: DragEvent) => void;
+		dropHint?: string | Snippet;
+		over?: boolean;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	let depth = 0;
+
+	function payload(e: DragEvent): string {
+		return e.dataTransfer?.getData(mime) ?? '';
+	}
+	function valid(e: DragEvent): boolean {
+		if (!droppable || disabled) return false;
+		if (!Array.from(e.dataTransfer?.types ?? []).includes(mime)) return false;
+		return accepts ? accepts(payload(e), e) : true;
+	}
+
+	function onDragEnter(e: DragEvent) {
+		if (!valid(e)) return;
+		e.preventDefault();
+		depth++;
+		if (depth === 1) over = true;
+	}
+	function onDragLeave(e: DragEvent) {
+		if (!droppable || disabled) return;
+		depth = Math.max(0, depth - 1);
+		if (depth === 0) over = false;
+	}
+	function onDragOver(e: DragEvent) {
+		if (!valid(e)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+	}
+	function onDrop(e: DragEvent) {
+		depth = 0;
+		over = false;
+		if (!valid(e)) return;
+		e.preventDefault();
+		ondrop?.(payload(e), e);
+	}
+</script>
+
+<fieldset
+	class="fieldset fieldset-{tone} pad-{padding} {klass}"
+	class:dashed
+	class:droppable
+	class:over
+	class:disabled
+	data-tsu="Fieldset"
+	{style}
+	ondragenter={onDragEnter}
+	ondragleave={onDragLeave}
+	ondragover={onDragOver}
+	ondrop={onDrop}
+	{...rest}
+>
+	{#if legend}
+		<legend class="fieldset-legend">
+			{#if typeof legend === 'string'}{legend}{:else}{@render legend()}{/if}
+		</legend>
+	{/if}
+	{@render children?.()}
+	{#if droppable && over && dropHint}
+		<div class="fieldset-hint" aria-live="polite">
+			{#if typeof dropHint === 'string'}{dropHint}{:else}{@render dropHint()}{/if}
+		</div>
+	{/if}
+</fieldset>
+
+<style>
+	.fieldset {
+		--fieldset-border: var(--accent-dim);
+		--fieldset-pad: var(--sp-4);
+		position: relative;
+		min-width: 0;
+		margin: 0;
+		padding: calc(var(--fieldset-pad) + var(--sp-1)) var(--fieldset-pad) var(--fieldset-pad);
+		border: 2px solid var(--fieldset-border);
+		border-radius: var(--r-lg);
+		background: var(--bg);
+		transition:
+			border-color 0.12s var(--ease),
+			background 0.12s var(--ease);
+	}
+	.fieldset.dashed {
+		border-style: dashed;
+	}
+	.fieldset-neutral {
+		--fieldset-border: var(--border);
+	}
+	.fieldset-strong {
+		--fieldset-border: var(--border-strong);
+	}
+	.pad-sm {
+		--fieldset-pad: var(--sp-3);
+	}
+	.pad-lg {
+		--fieldset-pad: var(--sp-6);
+	}
+
+	.fieldset-legend {
+		position: absolute;
+		top: -13px;
+		left: 16px;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		max-width: calc(100% - 32px);
+		padding: 0 8px;
+		background: var(--bg);
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-semibold);
+		line-height: 1.5;
+		color: var(--text);
+	}
+
+	.fieldset.over {
+		--fieldset-border: var(--accent);
+		background: color-mix(in srgb, var(--accent) 6%, var(--bg));
+	}
+	.fieldset.over .fieldset-legend {
+		background: color-mix(in srgb, var(--accent) 6%, var(--bg));
+	}
+	.fieldset-hint {
+		margin-top: var(--sp-3);
+		padding: var(--sp-2) var(--sp-3);
+		border: 1px dashed var(--accent);
+		border-radius: var(--r-md);
+		font-size: var(--fs-sm);
+		color: var(--accent);
+		text-align: center;
+		pointer-events: none;
+	}
+	.fieldset.disabled {
+		opacity: 0.6;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fieldset {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type Tone = 'accent' | 'neutral' | 'strong';
+type $$ComponentProps = {
+    legend?: string | Snippet;
+    tone?: Tone;
+    dashed?: boolean;
+    padding?: 'sm' | 'md' | 'lg';
+    droppable?: boolean;
+    mime?: string;
+    accepts?: (data: string, e: DragEvent) => boolean;
+    ondrop?: (data: string, e: DragEvent) => void;
+    dropHint?: string | Snippet;
+    over?: boolean;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Fieldset: import("svelte").Component<$$ComponentProps, {}, "over">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/components/molecules/GitRef.svelte

@@ -0,0 +1,174 @@
+<script lang="ts" module>
+	import type { Tone } from '../../tone';
+
+	export type PrState = 'open' | 'merged' | 'closed' | 'draft';
+
+	export type PullRequest = {
+		url: string;
+		owner?: string;
+		repo?: string;
+		number: number;
+		state?: PrState;
+	};
+
+	export type DiffStats = { additions: number; deletions: number };
+
+	export const PR_TONE: Record<PrState, Tone> = {
+		open: 'ok',
+		merged: 'accent',
+		closed: 'danger',
+		draft: 'neutral',
+	};
+
+	const TONE_COLOR: Record<Tone, string> = {
+		neutral: 'var(--text-muted)',
+		ok: 'var(--ok)',
+		success: 'var(--ok)',
+		warn: 'var(--warn)',
+		danger: 'var(--danger)',
+		info: 'var(--info)',
+		accent: 'var(--accent)',
+	};
+
+	export function prLabel(pr: PullRequest): string {
+		return pr.owner && pr.repo ? `${pr.owner}/${pr.repo}#${pr.number}` : `#${pr.number}`;
+	}
+</script>
+
+<script lang="ts">
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		branch,
+		pr,
+		diff,
+		maxWidth = '14rem',
+		collapse = 'auto',
+		class: klass = '',
+		...rest
+	}: {
+		branch?: string;
+		pr?: PullRequest;
+		diff?: DiffStats;
+		/** Cap on the branch chip; the name truncates with an ellipsis past it. */
+		maxWidth?: string;
+		/** `auto` drops chip text below 18rem of the nearest `.cq` container,
+		 *  `glyph` always shows icon-only; the full text stays in the tooltip. */
+		collapse?: 'auto' | 'never' | 'glyph';
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const prTone = $derived(pr ? TONE_COLOR[PR_TONE[pr.state ?? 'open']] : undefined);
+	const label = $derived(pr ? prLabel(pr) : '');
+	const prTitle = $derived(pr ? (pr.state ? `${label} · ${pr.state}` : label) : '');
+</script>
+
+{#snippet pullRequestGlyph()}
+	<circle cx="5" cy="6" r="3" />
+	<path d="M5 9v12" />
+	<circle cx="19" cy="18" r="3" />
+	<path d="m15 9-3-3 3-3" />
+	<path d="M12 6h5a2 2 0 0 1 2 2v7" />
+{/snippet}
+
+{#if branch || pr || diff}
+	<span
+		data-tsu="GitRef"
+		class="git-ref collapse-{collapse} {klass}"
+		style:--git-ref-max-width={maxWidth}
+		{...rest}
+	>
+		{#if branch}
+			<span class="chip branch" title={branch}>
+				<Icon name="fork" label="Branch" />
+				<span class="text">{branch}</span>
+			</span>
+		{/if}
+		{#if pr}
+			<a
+				class="chip pr"
+				href={pr.url}
+				target="_blank"
+				rel="noopener noreferrer"
+				title={prTitle}
+				style:--git-ref-tone={prTone}
+			>
+				<Icon label="Pull request">{@render pullRequestGlyph()}</Icon>
+				<span class="text">{label}</span>
+			</a>
+		{/if}
+		{#if diff}
+			<span class="diff" title="+{diff.additions} −{diff.deletions}">
+				<span class="add">+{diff.additions}</span>
+				<span class="del">−{diff.deletions}</span>
+			</span>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	.git-ref {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		min-width: 0;
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		line-height: 1.4;
+		white-space: nowrap;
+	}
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25em;
+		min-width: 0;
+		padding: 0.15rem var(--sp-2);
+		border-radius: var(--r-pill);
+		background: var(--bg-elevated-2);
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+		text-decoration: none;
+	}
+	.branch {
+		max-width: var(--git-ref-max-width, 14rem);
+	}
+	.pr {
+		color: var(--git-ref-tone);
+		border-color: color-mix(in srgb, var(--git-ref-tone) 40%, transparent);
+		background: color-mix(in srgb, var(--git-ref-tone) 12%, transparent);
+		transition: border-color 0.12s var(--ease);
+	}
+	.pr:hover {
+		border-color: var(--git-ref-tone);
+	}
+	.pr:focus-visible {
+		outline: 2px solid var(--git-ref-tone);
+		outline-offset: 2px;
+	}
+	.text {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.diff {
+		display: inline-flex;
+		gap: 0.35em;
+		font-variant-numeric: tabular-nums;
+	}
+	.add {
+		color: var(--ok);
+	}
+	.del {
+		color: var(--danger);
+	}
+	.collapse-glyph .text {
+		display: none;
+	}
+	@container (max-width: 18rem) {
+		.collapse-auto .text {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,30 @@
+import type { Tone } from '../../tone';
+export type PrState = 'open' | 'merged' | 'closed' | 'draft';
+export type PullRequest = {
+    url: string;
+    owner?: string;
+    repo?: string;
+    number: number;
+    state?: PrState;
+};
+export type DiffStats = {
+    additions: number;
+    deletions: number;
+};
+export declare const PR_TONE: Record<PrState, Tone>;
+export declare function prLabel(pr: PullRequest): string;
+type $$ComponentProps = {
+    branch?: string;
+    pr?: PullRequest;
+    diff?: DiffStats;
+    /** Cap on the branch chip; the name truncates with an ellipsis past it. */
+    maxWidth?: string;
+    /** `auto` drops chip text below 18rem of the nearest `.cq` container,
+     *  `glyph` always shows icon-only; the full text stays in the tooltip. */
+    collapse?: 'auto' | 'never' | 'glyph';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const GitRef: import("svelte").Component<$$ComponentProps, {}, "">;
+type GitRef = ReturnType<typeof GitRef>;
+export default GitRef;