@dorsk/tsumikit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dorsk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# @dorsk/tsumikit
+
+A minimal, **dependency-free** UI kit for Svelte 5 + pure CSS. Token-driven
+atoms and molecules with theming, font-scaling, a color-blind-safe theme and
+mobile/a11y baked in. No CDNs, no runtime UI dependencies — just Svelte 5 as a
+peer.
+
+## Design
+
+Each layer reaches only one layer down:
+
+```
+variables.css  →  every color/space/radius/font/size is a var(--…). No
+                  component hard-codes a hex or a pixel.
+      ↓
+atoms          →  the only place raw <button>/<input>/<select>/<h*>/text lives.
+      ↓
+molecules      →  compose or specialize atoms (never reimplement a primitive).
+      ↓
+your app       →  assemble molecules + layout.
+```
+
+**Rules:** primitives live in atoms only · specialize, don't reimplement · no
+hard-coded values · override by specificity, never by forking · props (incl.
+`aria-*`) spread down onto the underlying element.
+
+**Live demo:** https://dorskfr.github.io/tsumikit
+
+## Develop
+
+```bash
+npm install
+npm run dev      # showcase at the printed URL (+ /shell for the AppShell demo)
+npm run lint     # biome (ts/js)
+npm run check    # svelte-check
+npm run build    # prerendered static site in /build
+npm run package  # build the publishable library into /dist (+ publint)
+```
+
+Git hooks (Biome on commit, `svelte-check` on push) are installed by lefthook
+via the `prepare` script. The library is published to npm from a release tag
+via GitHub Actions using npm **trusted publishing** (OIDC — no token secret).
+
+## Use in your own project
+
+```ts
+import '@dorsk/tsumikit/styles/app.css';            // once, at the app root
+import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
+```
+
+```svelte
+<Field label="Name" for="name">
+  <Input id="name" bind:value={name} />
+</Field>
+<Button variant="primary" onclick={save}>Save</Button>
+```
+
+## Theming
+
+- 17 themes ship (dark, light, sepia, **colorblind** — Okabe-Ito —, plus mocha,
+  dracula, nord, tokyonight, gruvbox, solarized, rosepine, onedark, everforest,
+  monokai, amoled, highcontrast).
+- A new theme = one entry in `THEMES` (`stores/theme.svelte.ts`) + one
+  `[data-theme="id"]` block in `variables.css`. Nothing else changes.
+- `<ThemePicker />` and `<FontScalePicker />` wire the stores to the UI. Theme
+  is persisted to `localStorage` and applied with no flash (head snippet in
+  `app.html`) and updates the mobile `<meta name="theme-color">`.
+
+## Components
+
+**Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
+Slider, Progress, Card, Badge, Chip, Link, Icon (open registry — pass a
+`children` snippet for any custom SVG).
+
+**Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
+Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
+Dropzone, CodeBlock, Toaster, ThemePicker, FontScalePicker.
+
+**Organisms:** DataTable (generic `<T>`, typed columns + cell snippets).
+
+**Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
+sidebar on desktop, overlay drawer on mobile, optionally resizable), NavItem
+(collapses to an icon rail when the sidebar is narrow), Container, Stack
+(vertical), Cluster (wrapping row), AutoGrid (intrinsically responsive columns —
+no media/container query needed).
+
+## Container queries
+
+AppShell's `main` and `sidebar` are query containers (`container-name: main` /
+`sidebar`), so components respond to **their box's** width, not the viewport.
+Use the `.cq-*` utilities (`.cq-hide`, `.cq-stack`, `.cq-truncate`,
+`.cq-hide-xs`) on children of any `.cq` container — e.g. wrap a button's label in
+`.cq-hide` and it becomes icon-only when its column is tight. `NavItem` uses the
+`sidebar` container to drop labels below ~8rem; `AppShell resizableSidebar` lets
+you drag the sidebar down to that icon rail (width persisted).
+
+**Stores:** `theme`, `toasts`, `fontScale` (opt-in). **Actions:** `autoresize`.
+
+## Sizing & zoom
+
+The kit is **`rem`-based and never resets the root font-size**, so the user's
+browser/OS font-size preference and browser zoom scale everything
+proportionally with no code. That's the recommended path for magnification.
+
+`fontScale` / `<FontScalePicker>` is an **opt-in** extra (drives `--fs-scale`,
+text tokens only) for reading-dense apps that want larger body text while
+keeping chrome compact. It isn't wired into AppShell or any default.
+
+## Built on the platform
+
+Interactive components lean on modern web features rather than reimplementing
+them in JS — less code, better a11y, fewer edge cases:
+
+- **`<dialog>`** for Modal — top-layer rendering, real focus trap, inert
+  background, focus restore and `::backdrop`, all from the browser.
+- **Popover API** (`popover` / `popovertarget`) for Popover & Menu — top layer
+  (no z-index races), light-dismiss and Escape handled natively; we add only
+  smart placement (anchors to the trigger, flips into the viewport).
+- **Native form controls** under Checkbox / RadioGroup / Select / Switch — real
+  keyboard, form participation and a11y; only the visuals are tokenised.
+- **`color-scheme`** per theme so native widgets/scrollbars match; **`@media
+  (forced-colors)`** (Windows High Contrast) and **`prefers-contrast`** support;
+  **`prefers-reduced-motion`** disables animation globally.
+- **Intrinsic responsive layout**: `.auto-grid` (auto-fit + `minmax`) and `.cq`
+  (container queries) adapt to available space, not just viewport breakpoints.
+
+## Syntax highlighting (CodeBlock)
+
+The kit ships **no** highlighter — that keeps it zero-dep and avoids shipping a
+big grammar bundle to every consumer. `CodeBlock` renders the chrome (language
+label, copy, line numbers, wrap, scroll) and takes code three ways: plain
+`code`, a `highlight={(code, lang) => htmlString}` callback, or pre-rendered
+`html`. Pick a highlighter per app:
+
+- **highlight.js** — class-based output (`hljs-*`). Recommended for this kit:
+  those classes are already mapped to the `--syn-*` theme tokens (in `app.css`),
+  so highlighted code re-themes with every theme for free. Import only the
+  languages you need to keep it lean.
+- **Prism** — also class-based (`token.*`), mapped the same way. Similar fit.
+- **Shiki** — VS Code-grade accuracy, but it emits *inline colors* from a fixed
+  theme, so it won't follow your themes out of the box. Use its
+  `css-variables` theme and map `--shiki-*` to your `--syn-*` tokens if you want
+  it themed. Best when you want exact editor fidelity over theme-following.
+
+```svelte
+<script>
+  import hljs from 'highlight.js/lib/core';
+  import ts from 'highlight.js/lib/languages/typescript';
+  hljs.registerLanguage('typescript', ts);
+  const hl = (code, lang) => hljs.highlight(code, { language: lang ?? 'typescript' }).value;
+</script>
+<CodeBlock {code} lang="typescript" highlight={hl} showLineNumbers />
+```
+
+## Accessibility baseline
+
+- Every interactive atom spreads `...rest`, so `id`, `aria-*`, `title`,
+  `disabled` and native events pass through.
+- Visible `:focus-visible` rings; ARIA patterns implemented for switch, menu
+  (`role=menu` + roving focus), tabs (`tablist` + arrow keys), radiogroup,
+  dialog; polite live region for toasts; `.sr-only`.
+- Mobile-first: one `min-width: 640px` breakpoint, bottom-sheet→centered-modal,
+  safe-area insets, 16px-min inputs (no iOS zoom).
+- A verified color-blind-safe theme (Okabe-Ito); meaning never relies on hue
+  alone (icons + text accompany every status color).

package/dist/autoresize.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Svelte action: grow a <textarea> with its content up to a max height, then
+ * scroll. Pass the bound value so it re-measures on programmatic changes
+ * (drafts loading, clearing, etc.).
+ *
+ * Usage: <textarea use:autoresize={value} ...></textarea>
+ */
+export declare function autoresize(node: HTMLTextAreaElement, _value?: string): {
+    update(): void;
+    destroy(): void;
+};

package/dist/autoresize.js

@@ -0,0 +1,24 @@
+/**
+ * Svelte action: grow a <textarea> with its content up to a max height, then
+ * scroll. Pass the bound value so it re-measures on programmatic changes
+ * (drafts loading, clearing, etc.).
+ *
+ * Usage: <textarea use:autoresize={value} ...></textarea>
+ */
+export function autoresize(node, _value) {
+    const resize = () => {
+        node.style.height = 'auto';
+        node.style.height = `${node.scrollHeight}px`;
+    };
+    resize();
+    node.addEventListener('input', resize);
+    return {
+        update() {
+            // re-measure when the bound value changes from outside (e.g. cleared)
+            resize();
+        },
+        destroy() {
+            node.removeEventListener('input', resize);
+        },
+    };
+}

package/dist/components/atoms/Badge.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	// Base badge/pill primitive. Owns the shape + tone palette from theme tokens.
+	// Polymorphic via `as` so it can be a static <span> or an interactive
+	// <button> (e.g. SubagentBadge). Specialized badges compose this and add only
+	// their specifics (per-machine hue, toggle state).
+	import type { Snippet } from 'svelte';
+
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
+	let {
+		tone = 'neutral',
+		as = 'span',
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		tone?: Tone;
+		as?: 'span' | 'button';
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	class="badge {klass}"
+	class:badge-ok={tone === 'ok'}
+	class:badge-warn={tone === 'warn'}
+	class:badge-danger={tone === 'danger'}
+	class:badge-info={tone === 'info'}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		padding: 0.15rem var(--sp-2);
+		border-radius: var(--r-pill);
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-medium);
+		line-height: 1.4;
+		background: var(--bg-elevated-2);
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+		white-space: nowrap;
+	}
+	.badge-ok {
+		color: var(--ok);
+		border-color: color-mix(in srgb, var(--ok) 40%, transparent);
+		background: color-mix(in srgb, var(--ok) 12%, transparent);
+	}
+	.badge-warn {
+		color: var(--warn);
+		border-color: color-mix(in srgb, var(--warn) 40%, transparent);
+		background: color-mix(in srgb, var(--warn) 12%, transparent);
+	}
+	.badge-danger {
+		color: var(--danger);
+		border-color: color-mix(in srgb, var(--danger) 40%, transparent);
+		background: color-mix(in srgb, var(--danger) 12%, transparent);
+	}
+	.badge-info {
+		color: var(--info);
+		border-color: color-mix(in srgb, var(--info) 40%, transparent);
+		background: color-mix(in srgb, var(--info) 12%, transparent);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+type $$ComponentProps = {
+    tone?: Tone;
+    as?: 'span' | 'button';
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/atoms/Button.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type ButtonProps = HTMLButtonAttributes & {
+		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		size?: 'sm' | 'md';
+		control?: boolean;
+		block?: boolean;
+		class?: string;
+		children?: Snippet;
+	};
+
+	let {
+		variant = 'default',
+		size = 'md',
+		control = false,
+		block = false,
+		type = 'button',
+		disabled = false,
+		title,
+		onclick,
+		class: klass = '',
+		children,
+		...rest
+	}: ButtonProps = $props();
+</script>
+
+<button
+	{...rest}
+	{type}
+	{disabled}
+	{title}
+	class="btn {klass}"
+	class:btn-primary={variant === 'primary'}
+	class:btn-ghost={variant === 'ghost'}
+	class:btn-danger={variant === 'danger'}
+	class:btn-sm={size === 'sm'}
+	class:btn-control={control}
+	class:btn-block={block}
+	onclick={onclick}
+>
+	{@render children?.()}
+</button>
+
+<style>
+	/* The canonical control: owns its variants/sizes from theme tokens. Svelte 5
+	   scopes via :where() (zero added specificity), so these match the same way
+	   the global .btn rules did — feature-component overrides (e.g. .dhead
+	   .tapbtn) keep winning by specificity. Icons size themselves (Icon.svelte),
+	   so no svg sizing rule lives here. */
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2) var(--sp-4);
+		min-height: 2.5rem;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		background: var(--surface);
+		color: var(--text);
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+		line-height: 1;
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease),
+			opacity 0.12s var(--ease);
+		user-select: none;
+		white-space: nowrap;
+	}
+	.btn:hover:not(:disabled) {
+		border-color: var(--accent);
+	}
+	.btn:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.btn-primary {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: var(--text-on-accent);
+		font-weight: var(--fw-semibold);
+	}
+	.btn-primary:hover:not(:disabled) {
+		filter: brightness(1.08);
+	}
+	.btn-danger {
+		color: var(--danger);
+		border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+	}
+	.btn-danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--danger) 14%, transparent);
+		border-color: var(--danger);
+	}
+	.btn-ghost {
+		background: transparent;
+		border-color: transparent;
+	}
+	.btn-ghost:hover:not(:disabled) {
+		background: var(--bg-elevated-2);
+		border-color: transparent;
+	}
+	.btn-sm {
+		min-height: 2rem;
+		padding: var(--sp-1) var(--sp-3);
+		font-size: var(--fs-xs);
+	}
+	.btn-block {
+		width: 100%;
+	}
+	/* Uniform-height control (CCT-250 item 1): icon buttons, inputs and action
+	   buttons that share a toolbar/composer row line up exactly. */
+	.btn-control {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		height: var(--control-height);
+		min-height: var(--control-height);
+		padding: 0 var(--sp-3);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		background: var(--surface);
+		color: var(--text);
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+		line-height: 1;
+		white-space: nowrap;
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease),
+			opacity 0.12s var(--ease);
+		user-select: none;
+	}
+	.btn-control:hover:not(:disabled) {
+		border-color: var(--accent);
+	}
+	.btn-control:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	/* .btn-control follows .btn-primary in source order and would otherwise paint
+	   the primary action with the neutral --surface; restore the accent fill when
+	   both are present (CCT-345). */
+	.btn-control.btn-primary {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: var(--text-on-accent);
+	}
+	.btn-control.btn-primary:hover:not(:disabled) {
+		border-color: var(--accent);
+		filter: brightness(1.08);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type ButtonProps = HTMLButtonAttributes & {
+    variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md';
+    control?: boolean;
+    block?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/atoms/Card.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	// Elevated surface primitive — the canonical card/panel container. Owns its
+	// background/border/radius/padding from theme tokens. `tap` adds the
+	// interactive hover/active affordance for tappable list items (e.g. session
+	// rows); `as` lets it be a button/anchor when the whole surface is clickable.
+	import type { Snippet } from 'svelte';
+
+	let {
+		tap = false,
+		as = 'div',
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		tap?: boolean;
+		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element this={as} class="card {klass}" class:card-tap={tap} {...rest}>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.card {
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--r-lg);
+		padding: var(--sp-4);
+	}
+	.card-tap {
+		cursor: pointer;
+		transition:
+			border-color 0.12s var(--ease),
+			background 0.12s var(--ease);
+	}
+	.card-tap:active {
+		background: var(--bg-elevated-2);
+	}
+	.card-tap:hover {
+		border-color: var(--border-strong);
+	}
+</style>

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

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

package/dist/components/atoms/Checkbox.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	// Checkbox primitive. A real <input type="checkbox"> (keeps native keyboard,
+	// form participation and a11y) with a token-styled box and an associated
+	// label. Supports `bind:checked`, `indeterminate`, and passes through every
+	// native attribute via `...rest`.
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	let {
+		checked = $bindable(false),
+		indeterminate = false,
+		label,
+		class: klass = '',
+		el = $bindable(null),
+		...rest
+	}: HTMLInputAttributes & {
+		checked?: boolean;
+		indeterminate?: boolean;
+		label: string;
+		el?: HTMLInputElement | null;
+	} = $props();
+
+	// `indeterminate` is a property, not an attribute — sync it imperatively.
+	$effect(() => {
+		if (el) el.indeterminate = indeterminate;
+	});
+</script>
+
+<label class="checkbox {klass}">
+	<input bind:this={el} type="checkbox" bind:checked {...rest} />
+	<span class="box" aria-hidden="true"></span>
+	<span class="label-text">{label}</span>
+</label>
+
+<style>
+	.checkbox {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		cursor: pointer;
+		font-size: var(--fs-sm);
+		color: var(--text);
+	}
+	/* Visually hide the native control but keep it in the a11y tree + hit area. */
+	input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+		margin: 0;
+	}
+	.box {
+		position: relative;
+		flex: none;
+		width: 1.15rem;
+		height: 1.15rem;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-sm);
+		background: var(--bg);
+		transition:
+			background 0.12s var(--ease),
+			border-color 0.12s var(--ease);
+	}
+	/* check mark */
+	.box::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: var(--text-on-accent);
+		clip-path: polygon(41% 67%, 79% 26%, 87% 35%, 41% 84%, 15% 56%, 24% 47%);
+		opacity: 0;
+		transition: opacity 0.1s var(--ease);
+	}
+	input:checked + .box {
+		background: var(--accent);
+		border-color: var(--accent);
+	}
+	input:checked + .box::after {
+		opacity: 1;
+	}
+	/* indeterminate dash */
+	input:indeterminate + .box {
+		background: var(--accent);
+		border-color: var(--accent);
+	}
+	input:indeterminate + .box::after {
+		opacity: 1;
+		clip-path: polygon(22% 42%, 78% 42%, 78% 58%, 22% 58%);
+	}
+	input:focus-visible + .box {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	input:disabled ~ * {
+		opacity: 0.45;
+	}
+	.checkbox:has(input:disabled) {
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLInputAttributes & {
+    checked?: boolean;
+    indeterminate?: boolean;
+    label: string;
+    el?: HTMLInputElement | null;
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked" | "el">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;