@dorsk/tsumikit 0.35.1 → 0.37.0

package/dist/components/molecules/Drawer.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+	// Side panel on the native <dialog>: top layer, focus trap, inert background,
+	// focus restoration and Escape come from the platform. Adds click-outside,
+	// body scroll lock, an optional page-nav column and a sticky footer.
+	import type { Snippet } from 'svelte';
+	import { browser } from '../../env';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import IconButton from './IconButton.svelte';
+
+	let {
+		open = $bindable(),
+		side = 'right',
+		width = '620px',
+		navWidth = '150px',
+		title,
+		page,
+		icon,
+		onclose,
+		closeLabel = 'Close panel',
+		header,
+		nav,
+		navMobile,
+		children,
+		footer,
+		class: className,
+		style
+	}: {
+		/** Controlled visibility. When provided the `<dialog>` stays mounted and
+		 *  `showModal()`/`close()` follow the value; closing sets it back to false.
+		 *  Omit to open on mount (mount/unmount the component to show/hide). */
+		open?: boolean;
+		side?: 'left' | 'right';
+		/** Panel width on wide viewports (any CSS length); clamps to 100vw. Below
+		 *  48rem the panel is always full-screen. */
+		width?: string;
+		/** Width of the `nav` column on wide viewports. */
+		navWidth?: string;
+		title: string;
+		/** Name of the current page, shown after the title in the header. */
+		page?: string;
+		/** Leading header glyph. */
+		icon?: IconName;
+		onclose?: () => void;
+		closeLabel?: string;
+		/** Replaces the whole header row (title, page, close button). */
+		header?: Snippet;
+		/** Vertical page list beside the content on wide viewports; on narrow
+		 *  viewports it becomes a horizontal strip above the content unless
+		 *  `navMobile` is provided. */
+		nav?: Snippet;
+		navMobile?: Snippet;
+		children: Snippet;
+		footer?: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const titleId = `drawer-title-${Math.random().toString(36).slice(2, 8)}`;
+
+	let dialogEl = $state<HTMLDialogElement | null>(null);
+	const controlled = $derived(open !== undefined);
+	const shown = $derived(!controlled || open === true);
+
+	$effect(() => {
+		if (!dialogEl) return;
+		if (!controlled) {
+			dialogEl.showModal();
+			return;
+		}
+		if (open && !dialogEl.open) dialogEl.showModal();
+		else if (!open && dialogEl.open) dialogEl.close();
+	});
+
+	$effect(() => {
+		if (!browser || !shown) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	});
+
+	function requestClose() {
+		if (controlled) open = false;
+		onclose?.();
+	}
+
+	function onDialogClick(e: MouseEvent) {
+		if (e.target === dialogEl) requestClose();
+	}
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	data-tsu="Drawer"
+	class="drawer"
+	data-side={side}
+	aria-labelledby={header ? undefined : titleId}
+	aria-label={header ? title : undefined}
+	oncancel={(e) => {
+		e.preventDefault();
+		requestClose();
+	}}
+	onclose={() => {
+		if (controlled) open = false;
+	}}
+	onclick={onDialogClick}
+>
+	<div
+		class={['panel', className]}
+		class:has-nav={Boolean(nav)}
+		style:--drawer-w={width}
+		style:--drawer-nav-w={navWidth}
+		{style}
+	>
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="panel-head">
+				{#if icon}<span class="panel-icon"><Icon name={icon} size={18} /></span>{/if}
+				<span id={titleId} class="panel-title truncate">{title}</span>
+				{#if page}<span class="panel-page truncate">{page}</span>{/if}
+				<div class="spacer"></div>
+				<IconButton icon="x" label={closeLabel} onclick={requestClose} />
+			</div>
+		{/if}
+		{#if nav}
+			<nav class="panel-nav" class:has-mobile={Boolean(navMobile)}>{@render nav()}</nav>
+		{/if}
+		{#if navMobile}
+			<nav class="panel-nav-mobile">{@render navMobile()}</nav>
+		{/if}
+		<div class="panel-body">
+			{@render children()}
+		</div>
+		{#if footer}
+			<div class="panel-foot">{@render footer()}</div>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+	.drawer {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		max-width: 100vw;
+		max-height: 100dvh;
+		width: 100%;
+		height: 100%;
+		color: var(--text);
+		display: flex;
+		justify-content: flex-end;
+	}
+	.drawer[data-side='left'] {
+		justify-content: flex-start;
+	}
+	.drawer::backdrop {
+		background: rgba(0, 0, 0, 0.55);
+		animation: drawer-backdrop-in 0.18s var(--ease);
+	}
+	@keyframes drawer-backdrop-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.panel {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: auto auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			'head'
+			'nav'
+			'body'
+			'foot';
+		width: 100vw;
+		height: 100dvh;
+		background: var(--bg-elevated);
+		padding-top: var(--safe-top);
+		padding-bottom: var(--safe-bottom);
+		animation: drawer-slide-right 0.2s var(--ease);
+	}
+	.drawer[data-side='left'] .panel {
+		animation-name: drawer-slide-left;
+	}
+	@keyframes drawer-slide-right {
+		from {
+			transform: translateX(100%);
+		}
+	}
+	@keyframes drawer-slide-left {
+		from {
+			transform: translateX(-100%);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.drawer::backdrop,
+		.panel {
+			animation: none;
+		}
+	}
+
+	.panel-head {
+		grid-area: head;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border-bottom: 1px solid var(--border);
+	}
+	.panel-icon {
+		display: inline-flex;
+		flex: none;
+		color: var(--text-muted);
+	}
+	.panel-title {
+		font-size: var(--fs-lg);
+		font-weight: var(--fw-semibold);
+	}
+	.panel-page {
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+	}
+	.panel-page::before {
+		content: '·';
+		margin-right: var(--sp-2);
+	}
+
+	.panel-nav,
+	.panel-nav-mobile {
+		grid-area: nav;
+		display: flex;
+		gap: var(--sp-1);
+		padding: var(--sp-2);
+		border-bottom: 1px solid var(--border);
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+	.panel-nav.has-mobile {
+		display: none;
+	}
+
+	.panel-body {
+		grid-area: body;
+		padding: var(--sp-4);
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+	.panel-foot {
+		grid-area: foot;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border-top: 1px solid var(--border);
+	}
+
+	@media (min-width: 48rem) {
+		.panel {
+			width: min(var(--drawer-w), 100vw);
+			padding-top: 0;
+			padding-bottom: 0;
+			border-left: 1px solid var(--border-strong);
+			box-shadow: var(--shadow-lg);
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: auto minmax(0, 1fr) auto;
+			grid-template-areas:
+				'head'
+				'body'
+				'foot';
+		}
+		.drawer[data-side='left'] .panel {
+			border-left: 0;
+			border-right: 1px solid var(--border-strong);
+		}
+		.panel.has-nav {
+			grid-template-columns: var(--drawer-nav-w) minmax(0, 1fr);
+			grid-template-areas:
+				'head head'
+				'nav body'
+				'foot foot';
+		}
+		.panel-nav,
+		.panel-nav.has-mobile {
+			display: flex;
+			flex-direction: column;
+			overflow-x: hidden;
+			overflow-y: auto;
+			border-bottom: 0;
+			border-right: 1px solid var(--border);
+		}
+		.panel-nav-mobile {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from '../atoms/Icon.svelte';
+type $$ComponentProps = {
+    /** Controlled visibility. When provided the `<dialog>` stays mounted and
+     *  `showModal()`/`close()` follow the value; closing sets it back to false.
+     *  Omit to open on mount (mount/unmount the component to show/hide). */
+    open?: boolean;
+    side?: 'left' | 'right';
+    /** Panel width on wide viewports (any CSS length); clamps to 100vw. Below
+     *  48rem the panel is always full-screen. */
+    width?: string;
+    /** Width of the `nav` column on wide viewports. */
+    navWidth?: string;
+    title: string;
+    /** Name of the current page, shown after the title in the header. */
+    page?: string;
+    /** Leading header glyph. */
+    icon?: IconName;
+    onclose?: () => void;
+    closeLabel?: string;
+    /** Replaces the whole header row (title, page, close button). */
+    header?: Snippet;
+    /** Vertical page list beside the content on wide viewports; on narrow
+     *  viewports it becomes a horizontal strip above the content unless
+     *  `navMobile` is provided. */
+    nav?: Snippet;
+    navMobile?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

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>