@dorsk/tsumikit 0.1.0

package/dist/components/molecules/IconButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+
+	type IconButtonProps = HTMLButtonAttributes & {
+		icon: IconName;
+		label: string;
+		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		size?: number;
+		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
+		// no square `.btn-icon` box; just a muted glyph that brightens on hover.
+		inline?: boolean;
+		class?: string;
+	};
+
+	let {
+		icon,
+		label,
+		title = label,
+		variant = 'ghost',
+		size = 18,
+		inline = false,
+		disabled = false,
+		onclick,
+		class: klass = '',
+		...rest
+	}: IconButtonProps = $props();
+</script>
+
+<!-- Composition: the icon-only button is a Button (canonical control styling)
+     carrying the square `.btn-icon` modifier, wrapping an Icon. -->
+<Button {...rest} {variant} {disabled} {title} {onclick} class="{inline ? 'btn-icon-inline' : 'btn-icon'} {klass}" aria-label={label}>
+	<Icon name={icon} {size} />
+</Button>

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

@@ -0,0 +1,13 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { IconName } from '../atoms/Icon.svelte';
+type IconButtonProps = HTMLButtonAttributes & {
+    icon: IconName;
+    label: string;
+    variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    size?: number;
+    inline?: boolean;
+    class?: string;
+};
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/molecules/Menu.svelte

@@ -0,0 +1,120 @@
+<script lang="ts" module>
+	export interface MenuItem {
+		label: string;
+		onselect: () => void;
+		icon?: import('../atoms/Icon.svelte').IconName;
+		danger?: boolean;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	// Dropdown menu: a Popover whose panel is a WAI-ARIA `menu`. Items are
+	// `menuitem`s navigable with ↑/↓/Home/End, activated with Enter/Space (and
+	// click). Selecting an item runs its action and closes the menu. Focus moves
+	// to the first item when the menu opens. Escape / click-outside close it
+	// (inherited from the native popover).
+	import type { Snippet } from 'svelte';
+	import Popover from './Popover.svelte';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		label,
+		items,
+		trigger,
+		placement = 'bottom-start'
+	}: {
+		label: string;
+		items: MenuItem[];
+		trigger: Snippet;
+		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+	} = $props();
+
+	let listEl = $state<HTMLDivElement | null>(null);
+
+	function buttons(): HTMLButtonElement[] {
+		return listEl
+			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)'))
+			: [];
+	}
+	function focusAt(i: number) {
+		const b = buttons();
+		if (b.length) b[(i + b.length) % b.length].focus();
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const b = buttons();
+		const i = b.indexOf(document.activeElement as HTMLButtonElement);
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			focusAt(i + 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			focusAt(i - 1);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			focusAt(0);
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			focusAt(b.length - 1);
+		}
+	}
+	function select(item: MenuItem) {
+		if (item.disabled) return;
+		// Close the popover, then run the action.
+		listEl?.closest<HTMLElement>('[popover]')?.hidePopover();
+		item.onselect();
+	}
+</script>
+
+<Popover {label} {placement} {trigger} onopen={() => queueMicrotask(() => focusAt(0))}>
+	<div bind:this={listEl} role="menu" aria-label={label} class="menu" tabindex="-1" {onkeydown}>
+		{#each items as item (item.label)}
+			<button
+				type="button"
+				role="menuitem"
+				class="menu-item"
+				class:danger={item.danger}
+				disabled={item.disabled}
+				tabindex="-1"
+				onclick={() => select(item)}
+			>
+				{#if item.icon}<Icon name={item.icon} />{/if}
+				<span>{item.label}</span>
+			</button>
+		{/each}
+	</div>
+</Popover>
+
+<style>
+	.menu {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+	.menu-item {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		width: 100%;
+		text-align: left;
+		padding: var(--sp-2) var(--sp-3);
+		border: none;
+		background: none;
+		color: var(--text);
+		border-radius: var(--r-sm);
+		font-size: var(--fs-sm);
+		white-space: nowrap;
+	}
+	.menu-item:hover:not(:disabled),
+	.menu-item:focus-visible {
+		background: var(--bg-elevated-2);
+		outline: none;
+	}
+	.menu-item.danger {
+		color: var(--danger);
+	}
+	.menu-item:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+export interface MenuItem {
+    label: string;
+    onselect: () => void;
+    icon?: import('../atoms/Icon.svelte').IconName;
+    danger?: boolean;
+    disabled?: boolean;
+}
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    items: MenuItem[];
+    trigger: Snippet;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+};
+declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/molecules/Modal.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+	// Accessible dialog / bottom-sheet built on the native <dialog> element, so
+	// the platform gives us the hard parts for free: top-layer rendering above
+	// everything (no z-index races), a real focus trap, inert background, initial
+	// focus, focus restoration to the trigger, Escape-to-close and a styleable
+	// ::backdrop. We only add: open-on-mount, click-outside, and optional
+	// desktop resize (width persisted under `resizeKey`).
+	import type { Snippet } from 'svelte';
+	import { browser } from '../../env';
+	import IconButton from './IconButton.svelte';
+
+	let {
+		title,
+		onclose,
+		body,
+		footer,
+		resizeKey
+	}: {
+		title: string;
+		onclose: () => void;
+		body: Snippet;
+		footer?: Snippet;
+		/** When set, the sheet is horizontally resizable on desktop and the chosen
+		 *  width persists under this localStorage key. */
+		resizeKey?: string;
+	} = $props();
+
+	const titleId = `modal-title-${Math.random().toString(36).slice(2, 8)}`;
+
+	const MIN_W = 544; // 34rem at 16px base
+	const MAX_W = 1100;
+
+	function loadWidth(): number | null {
+		if (!browser || !resizeKey) return null;
+		const n = Number(localStorage.getItem(resizeKey));
+		return Number.isFinite(n) && n >= MIN_W ? Math.min(n, MAX_W) : null;
+	}
+	let width = $state<number | null>(loadWidth());
+	let dialogEl = $state<HTMLDialogElement | null>(null);
+
+	$effect(() => {
+		// Open as a modal (top layer + trap + inert background + focus mgmt). The
+		// native element restores focus to the trigger automatically on close.
+		dialogEl?.showModal();
+	});
+
+	// Click outside: <dialog fills the viewport; clicks on its padding-free self
+	// (not the inner .sheet) are backdrop clicks.
+	function onDialogClick(e: MouseEvent) {
+		if (e.target === dialogEl) onclose();
+	}
+
+	// --- resize ---
+	let resizing = $state(false);
+	let startX = 0;
+	let startW = 0;
+	function startResize(e: PointerEvent) {
+		resizing = true;
+		startX = e.clientX;
+		startW = (e.currentTarget as HTMLElement).closest('.sheet')!.getBoundingClientRect().width;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		e.preventDefault();
+	}
+	// Coalesce pointermoves to one width update per frame. Pointer events fire
+	// faster than the display refresh, and each width change reflows the sheet +
+	// repaints its shadow — writing once per rAF caps that to the frame rate.
+	let rafId = 0;
+	let lastX = 0;
+	function onResize(e: PointerEvent) {
+		if (!resizing) return;
+		lastX = e.clientX;
+		if (rafId) return;
+		rafId = requestAnimationFrame(() => {
+			rafId = 0;
+			const next = startW + (lastX - startX) * 2; // centered: edge tracks cursor
+			width = Math.round(Math.max(MIN_W, Math.min(next, MAX_W, window.innerWidth - 32)));
+		});
+	}
+	function endResize(e: PointerEvent) {
+		if (!resizing) return;
+		resizing = false;
+		if (rafId) {
+			cancelAnimationFrame(rafId);
+			rafId = 0;
+		}
+		try {
+			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		} catch {
+			/* already released */
+		}
+		if (browser && resizeKey && width != null) localStorage.setItem(resizeKey, String(width));
+	}
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	class="modal"
+	class:resizing
+	aria-labelledby={titleId}
+	style={width != null ? `--sheet-w: ${width}px` : undefined}
+	oncancel={(e) => {
+		e.preventDefault(); /* keep parent the source of truth for open state */
+		onclose();
+	}}
+	onclick={onDialogClick}
+>
+	<div class="sheet">
+		<div class="sheet-head">
+			<span id={titleId} class="sheet-title truncate">{title}</span>
+			<div class="spacer"></div>
+			<IconButton icon="x" label="Close dialog" onclick={onclose} />
+		</div>
+		<div class="sheet-body">
+			{@render body()}
+		</div>
+		{#if footer}
+			<div class="sheet-foot">{@render footer()}</div>
+		{/if}
+		{#if resizeKey}
+			<div
+				class="sheet-resize"
+				role="separator"
+				aria-label="Resize dialog width"
+				aria-orientation="vertical"
+				onpointerdown={startResize}
+				onpointermove={onResize}
+				onpointerup={endResize}
+				onpointercancel={endResize}
+			></div>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+	/* Reset the UA dialog box: we own the surface via the inner .sheet. The
+	   dialog itself is just the centering/backdrop layer. */
+	.modal {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		max-width: 100vw;
+		max-height: 100dvh;
+		width: 100%;
+		height: 100%;
+		color: var(--text);
+		/* center on desktop; the sheet anchors to the bottom on mobile */
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+	}
+	.modal::backdrop {
+		background: rgba(0, 0, 0, 0.55);
+		/* animate the backdrop in (progressive enhancement) */
+		animation: backdrop-in 0.18s var(--ease);
+	}
+	@keyframes backdrop-in {
+		from {
+			opacity: 0;
+		}
+	}
+	@media (min-width: 640px) {
+		.modal {
+			align-items: center;
+			padding: var(--sp-6);
+		}
+	}
+
+	.sheet {
+		position: relative;
+		width: 100%;
+		max-width: 34rem;
+		max-height: calc(100dvh - var(--safe-top) - var(--sp-6));
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--r-lg) var(--r-lg) 0 0;
+		box-shadow: var(--shadow-lg);
+		animation: sheet-up 0.18s var(--ease);
+		padding-bottom: var(--safe-bottom);
+	}
+	@media (min-width: 640px) {
+		.sheet {
+			border-radius: var(--r-lg);
+			padding-bottom: 0;
+			width: var(--sheet-w, 34rem);
+			max-width: min(var(--sheet-w, 34rem), calc(100vw - 2rem));
+		}
+	}
+	@keyframes sheet-up {
+		from {
+			transform: translateY(8%);
+			opacity: 0.4;
+		}
+	}
+	.modal.resizing .sheet {
+		user-select: none;
+		/* Make per-frame width changes cheap to paint: hint the animated property,
+		   isolate layout/paint to the sheet, and drop the heavy blurred shadow
+		   (40px blur) for a light one while dragging. */
+		will-change: width;
+		contain: layout paint;
+		box-shadow: var(--shadow-sm);
+	}
+
+	.sheet-head {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border-bottom: 1px solid var(--border);
+	}
+	.sheet-title {
+		font-size: var(--fs-lg);
+		font-weight: var(--fw-semibold);
+	}
+	.sheet-body {
+		padding: var(--sp-4);
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+	.sheet-foot {
+		display: flex;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border-top: 1px solid var(--border);
+	}
+
+	.sheet-resize {
+		display: none;
+	}
+	@media (min-width: 640px) {
+		.sheet-resize {
+			display: block;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			width: 12px;
+			margin-right: -6px;
+			cursor: ew-resize;
+			touch-action: none;
+			z-index: 2;
+		}
+		.sheet-resize::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			right: 6px;
+			transform: translateY(-50%);
+			width: 3px;
+			height: 28px;
+			border-radius: 999px;
+			background: var(--border-strong);
+			transition: background 0.12s var(--ease);
+		}
+		.sheet-resize:hover::after,
+		.modal.resizing .sheet-resize::after {
+			background: var(--accent);
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    onclose: () => void;
+    body: Snippet;
+    footer?: Snippet;
+    /** When set, the sheet is horizontally resizable on desktop and the chosen
+     *  width persists under this localStorage key. */
+    resizeKey?: string;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/molecules/OptionButton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	// Selection-card option — a bordered card that gains a colored ring + tint
+	// when `selected`. The accent is driven by `--opt-accent` (default accent),
+	// so each picker recolors per use (blue for run-target, brand color for the
+	// adapter, green/blue/red for permission mode). `row` lays the content out
+	// horizontally (icon + label) instead of the default label-over-hint column.
+	//
+	// Specializes the Button atom (ghost variant) so it inherits the canonical
+	// disabled/focus/transition behaviour; the card surface + selection ring are
+	// overrides. Button's variant classes are scoped via :where() (0 specificity),
+	// so `.btn.opt-btn` (0,2,0) wins cleanly over `.btn-ghost`.
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../atoms/Button.svelte';
+
+	let {
+		selected = false,
+		row = false,
+		class: klass = '',
+		children,
+		...rest
+	}: HTMLButtonAttributes & {
+		selected?: boolean;
+		row?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<Button
+	{...rest}
+	variant="ghost"
+	class="opt-btn {row ? 'row' : ''} {selected ? 'sel' : ''} {klass}"
+	aria-pressed={selected}
+>
+	{@render children?.()}
+</Button>
+
+<style>
+	/* Rendered inside Button, so target via :global; `.btn.opt-btn` outranks the
+	   atom's :where()-scoped variant classes. */
+	:global(.btn.opt-btn) {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: var(--sp-2);
+		min-height: 0;
+		background: var(--bg);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		color: var(--text);
+		text-align: left;
+		white-space: normal;
+	}
+	:global(.btn.opt-btn:hover:not(:disabled)) {
+		border-color: var(--border-strong);
+		background: var(--bg);
+	}
+	:global(.btn.opt-btn.row) {
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		color: var(--text-muted);
+		font-weight: var(--fw-medium);
+	}
+	:global(.btn.opt-btn.sel) {
+		--oc: var(--opt-accent, var(--accent));
+		border-color: var(--oc);
+		background: color-mix(in srgb, var(--oc) 14%, var(--bg));
+		color: var(--oc);
+	}
+	/* The slotted hint text (a global `.faint`) tints toward the accent too. */
+	:global(.btn.opt-btn.sel .faint) {
+		color: color-mix(in srgb, var(--oc) 70%, var(--text-muted));
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLButtonAttributes & {
+    selected?: boolean;
+    row?: boolean;
+    children?: Snippet;
+};
+declare const OptionButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type OptionButton = ReturnType<typeof OptionButton>;
+export default OptionButton;

package/dist/components/molecules/Popover.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	// Floating panel built on the native Popover API. The platform gives us the
+	// top layer (no z-index races, renders above dialogs/sticky headers), light
+	// dismiss (click-outside), Escape-to-close and correct focus/`aria-expanded`
+	// wiring between the invoker and the panel — all declaratively via the
+	// `popovertarget` / `popover` attributes. We add only smart placement:
+	// position the panel against its trigger and flip into the viewport when it
+	// would overflow. (CSS anchor positioning would replace the JS here once it
+	// ships beyond Chromium; the popover semantics above are the hard part and
+	// are broadly supported today.)
+	import type { Snippet } from 'svelte';
+
+	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+	let {
+		placement = 'bottom-start',
+		gap = 6,
+		label,
+		trigger,
+		children,
+		onopen,
+		onclose
+	}: {
+		placement?: Placement;
+		gap?: number;
+		/** Accessible name for the trigger. */
+		label: string;
+		/** Trigger content (rendered inside a ghost button that owns the popover
+		 *  wiring). */
+		trigger: Snippet;
+		/** Panel content. */
+		children: Snippet;
+		onopen?: () => void;
+		onclose?: () => void;
+	} = $props();
+
+	const id = `pop-${Math.random().toString(36).slice(2, 8)}`;
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let panelEl = $state<HTMLDivElement | null>(null);
+
+	function place() {
+		if (!triggerEl || !panelEl) return;
+		const t = triggerEl.getBoundingClientRect();
+		const p = panelEl.getBoundingClientRect();
+		const vw = document.documentElement.clientWidth;
+		const vh = document.documentElement.clientHeight;
+
+		let top = placement.startsWith('bottom') ? t.bottom + gap : t.top - p.height - gap;
+		let left = placement.endsWith('end') ? t.right - p.width : t.left;
+
+		// Flip vertically / clamp horizontally to stay on screen.
+		if (top + p.height > vh && t.top - p.height - gap > 0) top = t.top - p.height - gap;
+		if (top < 0) top = gap;
+		left = Math.max(gap, Math.min(left, vw - p.width - gap));
+
+		panelEl.style.top = `${Math.round(top)}px`;
+		panelEl.style.left = `${Math.round(left)}px`;
+	}
+
+	function onToggle(e: ToggleEvent) {
+		if (e.newState === 'open') {
+			place();
+			addEventListener('scroll', place, true);
+			addEventListener('resize', place);
+			onopen?.();
+		} else {
+			removeEventListener('scroll', place, true);
+			removeEventListener('resize', place);
+			onclose?.();
+		}
+	}
+</script>
+
+<button
+	bind:this={triggerEl}
+	type="button"
+	class="btn btn-ghost btn-icon pop-trigger"
+	popovertarget={id}
+	aria-label={label}
+>
+	{@render trigger()}
+</button>
+
+<div
+	bind:this={panelEl}
+	{id}
+	popover="auto"
+	class="pop-panel"
+	role="group"
+	aria-label={label}
+	ontoggle={onToggle}
+>
+	{@render children()}
+</div>
+
+<style>
+	.pop-trigger {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.pop-panel {
+		position: fixed;
+		margin: 0;
+		inset: auto; /* JS sets top/left; the popover lives in the top layer */
+		min-width: 10rem;
+		max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
+		padding: var(--sp-1);
+		background: var(--bg-elevated);
+		color: var(--text);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		box-shadow: var(--shadow-md);
+	}
+	/* Enter animation (skipped under reduced-motion via the global rule). */
+	.pop-panel:popover-open {
+		animation: pop-in 0.12s var(--ease);
+	}
+	@keyframes pop-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+type $$ComponentProps = {
+    placement?: Placement;
+    gap?: number;
+    /** Accessible name for the trigger. */
+    label: string;
+    /** Trigger content (rendered inside a ghost button that owns the popover
+     *  wiring). */
+    trigger: Snippet;
+    /** Panel content. */
+    children: Snippet;
+    onopen?: () => void;
+    onclose?: () => void;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;