@dorsk/tsumikit 0.1.0

package/dist/components/molecules/Accordion.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	export interface AccordionItem {
+		id: string;
+		title: string;
+		/** Panel content for this item. */
+		content: Snippet;
+		open?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	// Disclosure accordion built on native <details>/<summary> — zero JS for the
+	// open/close, full keyboard + a11y for free. When `multiple` is false the
+	// items share a `name`, using the platform's exclusive-accordion behavior
+	// (only one open at a time). The summary marker is replaced with a rotating
+	// chevron.
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		items,
+		multiple = true,
+		class: klass = ''
+	}: {
+		items: AccordionItem[];
+		multiple?: boolean;
+		class?: string;
+	} = $props();
+
+	// One shared name → native single-open accordion (stable id, derived toggle).
+	const gid = `acc-${Math.random().toString(36).slice(2, 8)}`;
+	const groupName = $derived(multiple ? undefined : gid);
+</script>
+
+<div class="accordion {klass}">
+	{#each items as item (item.id)}
+		<details name={groupName} open={item.open}>
+			<summary>
+				<span class="acc-title">{item.title}</span>
+				<Icon name="chevron-down" />
+			</summary>
+			<div class="acc-panel">{@render item.content()}</div>
+		</details>
+	{/each}
+</div>
+
+<style>
+	.accordion {
+		border: 1px solid var(--border);
+		border-radius: var(--r-lg);
+		overflow: hidden;
+	}
+	details + details {
+		border-top: 1px solid var(--border);
+	}
+	summary {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--sp-2);
+		padding: var(--sp-3) var(--sp-4);
+		cursor: pointer;
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+		list-style: none;
+		user-select: none;
+	}
+	/* Hide the default disclosure triangle across engines. */
+	summary::-webkit-details-marker {
+		display: none;
+	}
+	summary::marker {
+		content: '';
+	}
+	summary:hover {
+		background: var(--bg-elevated-2);
+	}
+	summary:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: -2px;
+	}
+	summary :global(.icon) {
+		color: var(--text-muted);
+		transition: transform 0.15s var(--ease);
+	}
+	details[open] summary :global(.icon) {
+		transform: rotate(180deg);
+	}
+	.acc-panel {
+		padding: 0 var(--sp-4) var(--sp-4);
+		font-size: var(--fs-sm);
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    /** Panel content for this item. */
+    content: Snippet;
+    open?: boolean;
+}
+type $$ComponentProps = {
+    items: AccordionItem[];
+    multiple?: boolean;
+    class?: string;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/molecules/CodeBlock.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	// Code block — dependency-free chrome around your code. It does NOT bundle a
+	// highlighter (that would break the zero-dep promise and bloat the bundle).
+	// Three ways to feed it, cheapest first:
+	//   • plain `code` (no highlighting, fully escaped);
+	//   • a `highlight` callback (code, lang) => HTML string you provide;
+	//   • pre-rendered `html` (e.g. from a server/build step).
+	// Class-based highlighters (highlight.js, Prism) are auto-themed: their token
+	// classes are mapped to the --syn-* theme tokens globally (see app.css), so
+	// the colors track every theme. Provides a language label, copy button,
+	// optional line numbers and soft-wrap toggle.
+	import CopyButton from './CopyButton.svelte';
+
+	let {
+		code,
+		lang,
+		html,
+		highlight,
+		filename,
+		showLineNumbers = false,
+		wrap = false,
+		copy = true,
+		class: klass = ''
+	}: {
+		code: string;
+		/** Language label (and hint passed to `highlight`). */
+		lang?: string;
+		/** Pre-highlighted HTML (overrides `highlight`). */
+		html?: string;
+		/** Highlighter callback returning HTML for `code`. */
+		highlight?: (code: string, lang?: string) => string;
+		filename?: string;
+		showLineNumbers?: boolean;
+		wrap?: boolean;
+		copy?: boolean;
+		class?: string;
+	} = $props();
+
+	const rendered = $derived(html ?? (highlight ? highlight(code, lang) : null));
+	const lines = $derived(showLineNumbers ? code.replace(/\n$/, '').split('\n').length : 0);
+	const hasHeader = $derived(!!(filename || lang || copy));
+</script>
+
+<figure class="codeblock {klass}">
+	{#if hasHeader}
+		<figcaption class="cb-head">
+			<span class="cb-name">{filename ?? lang ?? ''}</span>
+			<div class="spacer"></div>
+			{#if copy}<CopyButton text={code} showLabel={false} />{/if}
+		</figcaption>
+	{/if}
+	<div class="cb-body" class:wrap class:numbered={showLineNumbers}>
+		{#if showLineNumbers}
+			<span class="cb-gutter" aria-hidden="true">
+				{#each { length: lines } as _, i (i)}<span>{i + 1}</span>{/each}
+			</span>
+		{/if}
+		<pre class="cb-pre"><code class="cb-code" class:hljs={!!rendered}
+				>{#if rendered}{@html rendered}{:else}{code}{/if}</code
+			></pre>
+	</div>
+</figure>
+
+<style>
+	.codeblock {
+		margin: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--r-lg);
+		background: var(--bg);
+		overflow: hidden;
+	}
+	.cb-head {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
+		background: var(--bg-elevated-2);
+		border-bottom: 1px solid var(--border);
+		font-size: var(--fs-xs);
+		font-family: var(--font-mono);
+		color: var(--text-muted);
+	}
+	.cb-body {
+		display: flex;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+	.cb-gutter {
+		flex: none;
+		display: flex;
+		flex-direction: column;
+		padding: var(--sp-3) var(--sp-2);
+		text-align: right;
+		color: var(--text-faint);
+		background: var(--bg-elevated);
+		border-right: 1px solid var(--border);
+		user-select: none;
+		font-family: var(--font-mono);
+		font-size: var(--fs-sm);
+		line-height: 1.5;
+	}
+	.cb-pre {
+		margin: 0;
+		padding: var(--sp-3);
+		flex: 1;
+		font-family: var(--font-mono);
+		font-size: var(--fs-sm);
+		line-height: 1.5;
+		color: var(--md-text, var(--text));
+		tab-size: 2;
+	}
+	.cb-body.wrap .cb-pre {
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+	.cb-body.numbered .cb-pre {
+		white-space: pre; /* keep lines aligned with the gutter */
+	}
+</style>

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

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    code: string;
+    /** Language label (and hint passed to `highlight`). */
+    lang?: string;
+    /** Pre-highlighted HTML (overrides `highlight`). */
+    html?: string;
+    /** Highlighter callback returning HTML for `code`. */
+    highlight?: (code: string, lang?: string) => string;
+    filename?: string;
+    showLineNumbers?: boolean;
+    wrap?: boolean;
+    copy?: boolean;
+    class?: string;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/molecules/CopyButton.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	// Copy-to-clipboard button. Composes the Button atom; copies `text` via the
+	// async Clipboard API (with a hidden-textarea fallback for non-secure
+	// contexts), then flips to a transient "copied" state (check icon + label)
+	// that resets after `resetMs`. A visually-hidden aria-live region announces
+	// the result for screen readers. Dependency-free.
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		text,
+		label = 'Copy',
+		copiedLabel = 'Copied',
+		variant = 'ghost',
+		showLabel = true,
+		resetMs = 1500,
+		class: klass = ''
+	}: {
+		/** The string to copy. */
+		text: string;
+		label?: string;
+		copiedLabel?: string;
+		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		showLabel?: boolean;
+		resetMs?: number;
+		class?: string;
+	} = $props();
+
+	let copied = $state(false);
+	let status = $state('');
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	async function copy() {
+		const ok = await writeClipboard(text);
+		copied = ok;
+		status = ok ? copiedLabel : 'Copy failed';
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			copied = false;
+			status = '';
+		}, resetMs);
+	}
+
+	async function writeClipboard(value: string): Promise<boolean> {
+		try {
+			if (navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(value);
+				return true;
+			}
+		} catch {
+			/* fall through to legacy path */
+		}
+		// Fallback for insecure contexts / older browsers.
+		try {
+			const ta = document.createElement('textarea');
+			ta.value = value;
+			ta.style.position = 'fixed';
+			ta.style.opacity = '0';
+			document.body.appendChild(ta);
+			ta.select();
+			const ok = document.execCommand('copy');
+			document.body.removeChild(ta);
+			return ok;
+		} catch {
+			return false;
+		}
+	}
+</script>
+
+<Button
+	{variant}
+	class={klass}
+	onclick={copy}
+	aria-label={copied ? copiedLabel : label}
+	title={label}
+>
+	<Icon name={copied ? 'check' : 'copy'} />
+	{#if showLabel}<span>{copied ? copiedLabel : label}</span>{/if}
+</Button>
+<span class="sr-only" role="status" aria-live="polite">{status}</span>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    /** The string to copy. */
+    text: string;
+    label?: string;
+    copiedLabel?: string;
+    variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    showLabel?: boolean;
+    resetMs?: number;
+    class?: string;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/components/molecules/Dropzone.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	// Drag-and-drop file area with a click/keyboard fallback to the file dialog.
+	// Emits chosen/dropped files via `onfiles`. Filters by `accept` (extensions
+	// or mime patterns). Dependency-free; the whole zone is a labelled button so
+	// it's keyboard-operable, and a visually-hidden <input type=file> backs it.
+	import type { Snippet } from 'svelte';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		onfiles,
+		accept,
+		multiple = true,
+		disabled = false,
+		label = 'Drop files here',
+		hint = 'or click to browse',
+		children
+	}: {
+		onfiles: (files: File[]) => void;
+		accept?: string;
+		multiple?: boolean;
+		disabled?: boolean;
+		label?: string;
+		hint?: string;
+		children?: Snippet;
+	} = $props();
+
+	let over = $state(false);
+	let input = $state<HTMLInputElement | null>(null);
+
+	function accepted(files: File[]): File[] {
+		if (!accept) return files;
+		const pats = accept.split(',').map((s) => s.trim().toLowerCase());
+		return files.filter((f) =>
+			pats.some((p) =>
+				p.startsWith('.')
+					? f.name.toLowerCase().endsWith(p)
+					: p.endsWith('/*')
+						? f.type.toLowerCase().startsWith(p.slice(0, -1))
+						: f.type.toLowerCase() === p
+			)
+		);
+	}
+	function emit(list: FileList | null | undefined) {
+		let files = Array.from(list ?? []);
+		files = accepted(files);
+		if (!multiple) files = files.slice(0, 1);
+		if (files.length) onfiles(files);
+	}
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		over = false;
+		if (disabled) return;
+		emit(e.dataTransfer?.files);
+	}
+</script>
+
+<div
+	class="dz"
+	class:over
+	class:disabled
+	role="button"
+	tabindex={disabled ? -1 : 0}
+	aria-label="{label}. {hint}"
+	aria-disabled={disabled || undefined}
+	ondragover={(e) => {
+		e.preventDefault();
+		if (!disabled) over = true;
+	}}
+	ondragleave={() => (over = false)}
+	ondrop={onDrop}
+	onclick={() => !disabled && input?.click()}
+	onkeydown={(e) => {
+		if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+			e.preventDefault();
+			input?.click();
+		}
+	}}
+>
+	<input
+		bind:this={input}
+		class="sr-only"
+		type="file"
+		{accept}
+		{multiple}
+		{disabled}
+		tabindex="-1"
+		onchange={(e) => emit((e.currentTarget as HTMLInputElement).files)}
+	/>
+	{#if children}
+		{@render children()}
+	{:else}
+		<Icon name="upload" size={28} />
+		<span class="dz-label">{label}</span>
+		<span class="dz-hint">{hint}</span>
+	{/if}
+</div>
+
+<style>
+	.dz {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-8) var(--sp-4);
+		text-align: center;
+		color: var(--text-muted);
+		background: var(--bg);
+		border: 2px dashed var(--border-strong);
+		border-radius: var(--r-lg);
+		cursor: pointer;
+		transition:
+			border-color 0.12s var(--ease),
+			background 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.dz:hover:not(.disabled),
+	.dz:focus-visible {
+		border-color: var(--accent);
+		color: var(--text);
+		outline: none;
+	}
+	.dz.over {
+		border-color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 10%, var(--bg));
+		color: var(--text);
+	}
+	.dz.disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.dz-label {
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+	}
+	.dz-hint {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    onfiles: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    label?: string;
+    hint?: string;
+    children?: Snippet;
+};
+declare const Dropzone: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

package/dist/components/molecules/Field.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	// Form field wrapper: a label above a slotted control, with optional hint and
+	// error text. Replaces the ad-hoc `<div class="field"><label class="label">`
+	// markup. Renders a real <label for> when `for` is given (associates with the
+	// control), else a plain <span> for control groups (radio/segment rows).
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		for: forId,
+		hint,
+		error,
+		class: klass = '',
+		children
+	}: {
+		label?: string;
+		for?: string;
+		hint?: string;
+		error?: string;
+		class?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="field {klass}">
+	{#if label}
+		{#if forId}
+			<label class="label" for={forId}>{label}</label>
+		{:else}
+			<span class="label">{label}</span>
+		{/if}
+	{/if}
+	{@render children?.()}
+	{#if hint}<span class="hint">{hint}</span>{/if}
+	{#if error}<span class="error">{error}</span>{/if}
+</div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+	}
+	.label {
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-medium);
+		color: var(--text-muted);
+	}
+	.hint {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+	.error {
+		font-size: var(--fs-xs);
+		color: var(--danger);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label?: string;
+    for?: string;
+    hint?: string;
+    error?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/molecules/FileButton.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// File-picker button. A real <input type="file"> visually hidden inside a
+	// <label> styled as a button — so it's keyboard-focusable and works with zero
+	// JS to open the dialog. Emits the chosen files via `onfiles`. Dependency-free.
+	import Icon from '../atoms/Icon.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+
+	let {
+		onfiles,
+		label = 'Choose file',
+		icon = 'upload',
+		accept,
+		multiple = false,
+		disabled = false,
+		variant = 'default',
+		class: klass = ''
+	}: {
+		onfiles: (files: File[]) => void;
+		label?: string;
+		icon?: IconName;
+		accept?: string;
+		multiple?: boolean;
+		disabled?: boolean;
+		variant?: 'default' | 'primary' | 'ghost';
+		class?: string;
+	} = $props();
+
+	function onchange(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const files = Array.from(input.files ?? []);
+		if (files.length) onfiles(files);
+		input.value = ''; // allow re-picking the same file
+	}
+</script>
+
+<label
+	class="btn file-btn {klass}"
+	class:btn-primary={variant === 'primary'}
+	class:btn-ghost={variant === 'ghost'}
+	class:disabled
+>
+	<input
+		class="sr-only"
+		type="file"
+		{accept}
+		{multiple}
+		{disabled}
+		onchange={onchange}
+	/>
+	<Icon name={icon} />
+	<span>{label}</span>
+</label>
+
+<style>
+	.file-btn {
+		cursor: pointer;
+	}
+	/* The hidden input keeps focusability (sr-only, not display:none), so mirror
+	   its focus onto the label for a visible ring. */
+	.file-btn:focus-within {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.file-btn.disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { IconName } from '../atoms/Icon.svelte';
+type $$ComponentProps = {
+    onfiles: (files: File[]) => void;
+    label?: string;
+    icon?: IconName;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'primary' | 'ghost';
+    class?: string;
+};
+declare const FileButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileButton = ReturnType<typeof FileButton>;
+export default FileButton;

package/dist/components/molecules/FontScalePicker.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	// UI text-size switcher. Same compact native-select-over-button pattern as
+	// ThemePicker, wired to the font-scale store. Drives --fs-scale (text only) —
+	// chrome dimensions stay fixed. Glyph is the conventional "A".
+	import SelectButton from './SelectButton.svelte';
+	import { fontScale, SCALE_LEVELS } from '../../stores/fontscale.svelte';
+
+	let { class: klass = '' }: { class?: string } = $props();
+
+	const options = SCALE_LEVELS.map((l) => ({ value: l.id, label: l.label }));
+</script>
+
+<SelectButton
+	class={klass}
+	glyph="A"
+	label="Text size"
+	title="Text size"
+	value={fontScale.levelId}
+	{options}
+	onchange={(v) => fontScale.set(v)}
+/>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const FontScalePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type FontScalePicker = ReturnType<typeof FontScalePicker>;
+export default FontScalePicker;