@dorsk/tsumikit 0.1.0

package/dist/components/atoms/Chip.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	// Small inline label primitive — a flat, rounded tag for secondary metadata
+	// (status, model/effort, cwd). Lighter than a Badge: no tone palette, just the
+	// muted pill. Polymorphic via `as`; an `as="button"` chip is interactive
+	// (hover affordance). `mono` switches to the monospace family (paths, ids).
+	import type { Snippet } from 'svelte';
+
+	let {
+		as = 'span',
+		mono = false,
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		as?: 'span' | 'button';
+		mono?: boolean;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element this={as} class="chip {klass}" class:mono class:interactive={as === 'button'} {...rest}>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+		background: var(--bg-elevated-2);
+		border: 1px solid var(--border);
+		border-radius: var(--r-pill);
+		padding: 0.1rem var(--sp-2);
+		max-width: 100%;
+	}
+	.mono {
+		font-family: var(--font-mono);
+	}
+	.interactive {
+		cursor: pointer;
+		transition:
+			border-color 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.interactive:hover {
+		border-color: var(--border-strong);
+		color: var(--text);
+	}
+</style>

package/dist/components/atoms/Chip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    as?: 'span' | 'button';
+    mono?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/atoms/Heading.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	// Heading primitive: the ONLY place an <h1>–<h6> is emitted. `level` picks both
+	// the semantic tag and the default display size; `size` overrides the visual
+	// size independently of the level (e.g. toolbar chrome pinned smaller than its
+	// heading rank). All sizes/weights/colours come from theme tokens.
+	import type { Snippet } from 'svelte';
+
+	type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	let {
+		level = 2,
+		size,
+		tone = 'default',
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		size?: Size;
+		tone?: 'default' | 'muted' | 'faint';
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	// Default display size per rank (h1 biggest). `size` overrides it.
+	const DEFAULT_SIZE: Record<number, Size> = { 1: '2xl', 2: 'xl', 3: 'lg', 4: 'md', 5: 'sm', 6: 'xs' };
+	const fs = $derived(size ?? DEFAULT_SIZE[level]);
+</script>
+
+<svelte:element this={`h${level}`} class="heading fs-{fs} tone-{tone} {klass}" {...rest}>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.heading {
+		margin: 0;
+		font-weight: var(--fw-semibold);
+		line-height: var(--lh-tight);
+		color: var(--text);
+	}
+	.tone-muted {
+		color: var(--text-muted);
+	}
+	.tone-faint {
+		color: var(--text-faint);
+	}
+	.fs-xs {
+		font-size: var(--fs-xs);
+	}
+	.fs-sm {
+		font-size: var(--fs-sm);
+	}
+	.fs-md {
+		font-size: var(--fs-md);
+	}
+	.fs-lg {
+		font-size: var(--fs-lg);
+	}
+	.fs-xl {
+		font-size: var(--fs-xl);
+	}
+	.fs-2xl {
+		font-size: var(--fs-2xl);
+	}
+</style>

package/dist/components/atoms/Heading.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type $$ComponentProps = {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: Size;
+    tone?: 'default' | 'muted' | 'faint';
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Heading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/components/atoms/Icon.svelte

@@ -0,0 +1,151 @@
+<script lang="ts" module>
+	// Open icon system. A curated, dependency-free set ships as named glyphs, but
+	// the atom is NOT closed: pass a `children` snippet of raw <path>/<circle>/…
+	// (24×24 viewBox) to render any icon without adding it to the registry, or
+	// register project icons by extending PATHS in your own wrapper. Sized at 1em
+	// so it tracks the surrounding text (and the --fs-scale font control).
+	export type IconName =
+		| 'archive'
+		| 'back'
+		| 'check'
+		| 'chevron-down'
+		| 'copy'
+		| 'download'
+		| 'edit'
+		| 'external'
+		| 'filter'
+		| 'folder'
+		| 'fork'
+		| 'image'
+		| 'info'
+		| 'link'
+		| 'live'
+		| 'markdown'
+		| 'menu'
+		| 'more'
+		| 'plus'
+		| 'retry'
+		| 'search'
+		| 'send'
+		| 'settings'
+		| 'star'
+		| 'stop'
+		| 'trash'
+		| 'upload'
+		| 'warning'
+		| 'x';
+
+	// Glyphs that read better filled than stroked.
+	const FILLED = new Set<IconName>(['stop', 'star', 'live']);
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		name,
+		size,
+		label,
+		children,
+		...rest
+	}: {
+		/** Named glyph from the registry. Omit when supplying `children`. */
+		name?: IconName;
+		/** Explicit pixel size. Omit to track the surrounding text (1em) — best
+		 *  for icons sitting inline with a label. */
+		size?: number;
+		/** When set, the icon is exposed to AT with this label; otherwise it is
+		 *  decorative (aria-hidden) and the parent control carries the label. */
+		label?: string;
+		/** Raw SVG markup (24×24 viewBox) — overrides `name`. */
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const filled = $derived(name ? FILLED.has(name) : false);
+</script>
+
+<svg
+	class="icon"
+	style={size ? `font-size: ${size}px` : undefined}
+	viewBox="0 0 24 24"
+	fill={filled ? 'currentColor' : 'none'}
+	stroke={filled ? 'none' : 'currentColor'}
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	role={label ? 'img' : undefined}
+	aria-label={label}
+	aria-hidden={label ? undefined : 'true'}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else if name === 'search'}
+		<circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
+	{:else if name === 'back'}
+		<path d="m15 18-6-6 6-6" />
+	{:else if name === 'check'}
+		<path d="M20 6 9 17l-5-5" />
+	{:else if name === 'x'}
+		<path d="M18 6 6 18" /><path d="m6 6 12 12" />
+	{:else if name === 'plus'}
+		<path d="M12 5v14" /><path d="M5 12h14" />
+	{:else if name === 'chevron-down'}
+		<path d="m6 9 6 6 6-6" />
+	{:else if name === 'menu'}
+		<path d="M4 6h16" /><path d="M4 12h16" /><path d="M4 18h16" />
+	{:else if name === 'archive'}
+		<rect x="3" y="4" width="18" height="4" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8" /><path d="M9 12h6" />
+	{:else if name === 'trash'}
+		<path d="M3 6h18" /><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" /><path d="M6 6v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6" /><path d="M10 11v6" /><path d="M14 11v6" />
+	{:else if name === 'download'}
+		<path d="M12 3v12" /><path d="m7 10 5 5 5-5" /><path d="M4 19h16" />
+	{:else if name === 'upload'}
+		<path d="M12 15V3" /><path d="m7 8 5-5 5 5" /><path d="M4 19h16" />
+	{:else if name === 'copy'}
+		<rect x="9" y="9" width="12" height="12" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+	{:else if name === 'edit'}
+		<path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
+	{:else if name === 'folder'}
+		<path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+	{:else if name === 'link'}
+		<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+	{:else if name === 'external'}
+		<path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
+	{:else if name === 'markdown'}
+		<rect x="3" y="5" width="18" height="14" rx="2" /><path d="M7 15V9l3 3 3-3v6" /><path d="m15 11 2 2 2-2" />
+	{:else if name === 'image'}
+		<rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.8" /><path d="m21 15-4.5-4.5L7 21" />
+	{:else if name === 'fork'}
+		<circle cx="6" cy="6" r="2.5" /><circle cx="18" cy="6" r="2.5" /><circle cx="12" cy="19" r="2.5" /><path d="M6 8.5v2a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-2" /><path d="M12 13.5v3" />
+	{:else if name === 'more'}
+		<circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" />
+	{:else if name === 'settings'}
+		<circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
+	{:else if name === 'retry'}
+		<path d="M21 12a9 9 0 1 1-2.64-6.36" /><path d="M21 3v6h-6" />
+	{:else if name === 'stop'}
+		<rect x="6" y="6" width="12" height="12" rx="1.5" />
+	{:else if name === 'star'}
+		<path d="M12 2.5l2.9 5.9 6.5.95-4.7 4.58 1.1 6.47L12 17.9l-5.8 3.05 1.1-6.47-4.7-4.58 6.5-.95z" />
+	{:else if name === 'live'}
+		<circle cx="12" cy="12" r="5" />
+	{:else if name === 'send'}
+		<path d="M22 2 11 13" /><path d="M22 2 15 22l-4-9-9-4z" />
+	{:else if name === 'filter'}
+		<path d="M3 4h18l-7 8v6l-4 2v-10z" />
+	{:else if name === 'info'}
+		<circle cx="12" cy="12" r="9" /><path d="M12 11v5" /><path d="M12 8h.01" />
+	{:else if name === 'warning'}
+		<path d="M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4" /><path d="M12 17h.01" />
+	{/if}
+</svg>
+
+<style>
+	.icon {
+		flex: none;
+		width: 1em;
+		height: 1em;
+	}
+</style>

package/dist/components/atoms/Icon.svelte.d.ts

@@ -0,0 +1,18 @@
+export type IconName = 'archive' | 'back' | 'check' | 'chevron-down' | 'copy' | 'download' | 'edit' | 'external' | 'filter' | 'folder' | 'fork' | 'image' | 'info' | 'link' | 'live' | 'markdown' | 'menu' | 'more' | 'plus' | 'retry' | 'search' | 'send' | 'settings' | 'star' | 'stop' | 'trash' | 'upload' | 'warning' | 'x';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Named glyph from the registry. Omit when supplying `children`. */
+    name?: IconName;
+    /** Explicit pixel size. Omit to track the surrounding text (1em) — best
+     *  for icons sitting inline with a label. */
+    size?: number;
+    /** When set, the icon is exposed to AT with this label; otherwise it is
+     *  decorative (aria-hidden) and the parent control carries the label. */
+    label?: string;
+    /** Raw SVG markup (24×24 viewBox) — overrides `name`. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/atoms/Input.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	// Text input primitive. Owns its styling from theme tokens; supports
+	// `bind:value` and passes through every native <input> attribute. `mono`
+	// switches to the monospace family (paths, tokens, env values).
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = HTMLInputAttributes & {
+		mono?: boolean;
+		class?: string;
+		value?: HTMLInputAttributes['value'];
+		el?: HTMLInputElement | null;
+	};
+
+	let {
+		mono = false,
+		class: klass = '',
+		value = $bindable(),
+		el = $bindable(null),
+		...rest
+	}: Props = $props();
+</script>
+
+<input bind:this={el} class="input {klass}" class:mono bind:value {...rest} />
+
+<style>
+	.input {
+		width: 100%;
+		padding: var(--sp-3);
+		background: var(--bg);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		color: var(--text);
+		transition: border-color 0.12s var(--ease);
+	}
+	.input:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+	.mono {
+		font-family: var(--font-mono);
+	}
+</style>

package/dist/components/atoms/Input.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = HTMLInputAttributes & {
+    mono?: boolean;
+    class?: string;
+    value?: HTMLInputAttributes['value'];
+    el?: HTMLInputElement | null;
+};
+declare const Input: import("svelte").Component<Props, {}, "value" | "el">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/atoms/Link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	// Inline text link — underlined accent text with no button chrome. Renders an
+	// <a> when `href` is given, otherwise a <button> (for in-page actions that
+	// read as links, e.g. "Open ChatGPT again").
+	import type { Snippet } from 'svelte';
+
+	let {
+		href,
+		class: klass = '',
+		children,
+		...rest
+	}: { href?: string; class?: string; children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+{#if href}
+	<a {href} class="link {klass}" {...rest}>{@render children?.()}</a>
+{:else}
+	<button type="button" class="link {klass}" {...rest}>{@render children?.()}</button>
+{/if}
+
+<style>
+	.link {
+		background: none;
+		border: none;
+		padding: 0;
+		color: var(--accent, var(--text));
+		cursor: pointer;
+		text-decoration: underline;
+		font: inherit;
+	}
+</style>

package/dist/components/atoms/Link.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    href?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/atoms/Progress.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	// Progress bar. Determinate when `value` is a number (0..max); omit `value`
+	// for an indeterminate animation. Uses role="progressbar" with the right
+	// aria-value* attributes. Token-styled.
+	let {
+		value,
+		max = 100,
+		label,
+		class: klass = ''
+	}: {
+		value?: number;
+		max?: number;
+		label?: string;
+		class?: string;
+	} = $props();
+
+	const pct = $derived(value == null ? 0 : Math.max(0, Math.min(100, (value / max) * 100)));
+	const indeterminate = $derived(value == null);
+</script>
+
+<div
+	class="progress {klass}"
+	class:indeterminate
+	role="progressbar"
+	aria-label={label}
+	aria-valuemin={indeterminate ? undefined : 0}
+	aria-valuemax={indeterminate ? undefined : max}
+	aria-valuenow={indeterminate ? undefined : value}
+>
+	<div class="bar" style={indeterminate ? undefined : `width: ${pct}%`}></div>
+</div>
+
+<style>
+	.progress {
+		width: 100%;
+		height: 0.5rem;
+		background: var(--bg-elevated-2);
+		border-radius: var(--r-pill);
+		overflow: hidden;
+	}
+	.bar {
+		height: 100%;
+		background: var(--accent);
+		border-radius: inherit;
+		transition: width 0.2s var(--ease);
+	}
+	.progress.indeterminate .bar {
+		width: 40%;
+		animation: progress-slide 1.1s ease-in-out infinite;
+	}
+	@keyframes progress-slide {
+		0% {
+			transform: translateX(-110%);
+		}
+		100% {
+			transform: translateX(310%);
+		}
+	}
+</style>

package/dist/components/atoms/Progress.svelte.d.ts

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

package/dist/components/atoms/Select.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	// Native <select> primitive. Owns its styling from theme tokens; supports
+	// `bind:value` and passes through every native attribute. Options are slotted
+	// children so call-sites keep full control over <option> rendering.
+	//
+	// The default variant hides the OS chevron (appearance: none) and draws its
+	// own, so the control looks identical across platforms and the chevron sits
+	// at a consistent, token-defined offset that adapts to the theme.
+	//
+	// `variant="ghost"` makes the control fill its (positioned) parent fully
+	// transparently — for the "native select overlaid on a custom trigger" pattern
+	// (SelectButton): the platform popup with no custom outside-click logic, while
+	// a styled trigger shows through underneath.
+	import type { Snippet } from 'svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	type Props = HTMLSelectAttributes & {
+		variant?: 'default' | 'ghost';
+		class?: string;
+		value?: HTMLSelectAttributes['value'];
+		children?: Snippet;
+	};
+
+	let {
+		variant = 'default',
+		class: klass = '',
+		value = $bindable(),
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+{#if variant === 'ghost'}
+	<select class="select ghost {klass}" bind:value {...rest}>
+		{@render children?.()}
+	</select>
+{:else}
+	<div class="select-wrap {klass}">
+		<select class="select" bind:value {...rest}>
+			{@render children?.()}
+		</select>
+		<span class="select-chevron" aria-hidden="true">
+			<Icon name="chevron-down" size={16} />
+		</span>
+	</div>
+{/if}
+
+<style>
+	.select-wrap {
+		position: relative;
+		display: block;
+		width: 100%;
+	}
+	.select {
+		width: 100%;
+		padding: var(--sp-3);
+		background: var(--bg);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		color: var(--text);
+		transition: border-color 0.12s var(--ease);
+	}
+	/* Default variant: drop the OS chevron, reserve room for our own. */
+	.select-wrap .select {
+		appearance: none;
+		-webkit-appearance: none;
+		padding-right: calc(var(--sp-3) + 1.25rem);
+	}
+	.select:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+	.select-chevron {
+		position: absolute;
+		top: 50%;
+		right: var(--sp-3);
+		transform: translateY(-50%);
+		display: inline-flex;
+		color: var(--text-muted);
+		pointer-events: none; /* clicks fall through to the select */
+	}
+	/* Transparent overlay: fills the positioned parent, the trigger shows through. */
+	.select.ghost {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		opacity: 0;
+		border: none;
+		background: none;
+		cursor: pointer;
+	}
+</style>

package/dist/components/atoms/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+type Props = HTMLSelectAttributes & {
+    variant?: 'default' | 'ghost';
+    class?: string;
+    value?: HTMLSelectAttributes['value'];
+    children?: Snippet;
+};
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;