@dorsk/tsumikit 0.1.0 → 0.2.0

package/README.md

@@ -69,7 +69,7 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 ## Components
 
 **Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
-Slider, Progress, Card, Badge, Chip, Link, Icon (open registry — pass a
+Slider, Progress, Card, Badge, Dot, Link, Icon (open registry — pass a
 `children` snippet for any custom SVG).
 
 **Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
@@ -95,6 +95,8 @@ Use the `.cq-*` utilities (`.cq-hide`, `.cq-stack`, `.cq-truncate`,
 you drag the sidebar down to that icon rail (width persisted).
 
 **Stores:** `theme`, `toasts`, `fontScale` (opt-in). **Actions:** `autoresize`.
+**Helpers:** `copyToClipboard(text)` — async Clipboard API with an
+insecure-context fallback; returns whether it succeeded.
 
 ## Sizing & zoom
 
@@ -121,7 +123,7 @@ them in JS — less code, better a11y, fewer edge cases:
 - **`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`
+- **Intrinsic responsive layout**: `<AutoGrid>` (auto-fit + `minmax`) and `.cq`
   (container queries) adapt to available space, not just viewport breakpoints.
 
 ## Syntax highlighting (CodeBlock)

package/dist/clipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyToClipboard(value: string): Promise<boolean>;

package/dist/clipboard.js

@@ -0,0 +1,30 @@
+// Copy `value` to the clipboard. Prefers the async Clipboard API and falls back
+// to a hidden-textarea + execCommand for insecure contexts / older browsers.
+// Returns whether the copy succeeded; never throws. UI concerns (toasts, a
+// transient "copied" state) belong to the caller.
+export async function copyToClipboard(value) {
+    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;
+    }
+}

package/dist/components/atoms/Badge.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-	// Base badge/pill primitive. Owns the shape + tone palette from theme tokens.
+	// Inline label primitive — the project's single pill. Covers three jobs via
+	// props rather than separate components:
+	//   • state  → `tone` (neutral/ok/warn/danger/info) semantic palette
+	//   • info   → `mono` for paths/ids/code-ish metadata
+	//   • tag    → `removable` renders a dismiss button + fires `onremove`
 	// 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).
+	// <button>. `size="sm"` is the compact form for counts/dense rows.
 	import type { Snippet } from 'svelte';
 
 	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
@@ -10,12 +13,20 @@
 	let {
 		tone = 'neutral',
 		as = 'span',
+		size = 'md',
+		mono = false,
+		removable = false,
+		onremove,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		tone?: Tone;
 		as?: 'span' | 'button';
+		size?: 'sm' | 'md';
+		mono?: boolean;
+		removable?: boolean;
+		onremove?: (e: MouseEvent) => void;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -29,9 +40,22 @@
 	class:badge-warn={tone === 'warn'}
 	class:badge-danger={tone === 'danger'}
 	class:badge-info={tone === 'info'}
+	class:badge-sm={size === 'sm'}
+	class:mono
+	class:interactive={as === 'button'}
 	{...rest}
 >
 	{@render children?.()}
+	{#if removable}
+		<button
+			type="button"
+			class="remove"
+			aria-label="Remove"
+			onclick={(e) => onremove?.(e)}
+		>
+			×
+		</button>
+	{/if}
 </svelte:element>
 
 <style>
@@ -48,6 +72,12 @@
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 		white-space: nowrap;
+		max-width: 100%;
+	}
+	.badge-sm {
+		padding: 0 0.4rem;
+		font-size: 0.6875rem;
+		gap: 0.15rem;
 	}
 	.badge-ok {
 		color: var(--ok);
@@ -69,4 +99,36 @@
 		border-color: color-mix(in srgb, var(--info) 40%, transparent);
 		background: color-mix(in srgb, var(--info) 12%, transparent);
 	}
+	.mono {
+		font-family: var(--font-mono);
+		font-weight: var(--fw-normal);
+	}
+	.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);
+	}
+	.remove {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 -0.15rem 0 0;
+		padding: 0 0.1rem;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		line-height: 1;
+		cursor: pointer;
+		opacity: 0.6;
+		transition: opacity 0.12s var(--ease);
+	}
+	.remove:hover {
+		opacity: 1;
+	}
 </style>

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

@@ -3,6 +3,10 @@ type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
     tone?: Tone;
     as?: 'span' | 'button';
+    size?: 'sm' | 'md';
+    mono?: boolean;
+    removable?: boolean;
+    onremove?: (e: MouseEvent) => void;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/atoms/Button.svelte

@@ -7,6 +7,15 @@
 		size?: 'sm' | 'md';
 		control?: boolean;
 		block?: boolean;
+		// Square 2.25rem icon-only tap target (IconButton). `iconInline` is the
+		// borderless, compact variant (chip-remove ✕, inline edit ✎); pair with
+		// `hoverDanger` to tint it red on hover (delete affordances).
+		icon?: boolean;
+		iconInline?: boolean;
+		hoverDanger?: boolean;
+		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
+		// disabled-equivalent while true (so a double-submit can't fire).
+		loading?: boolean;
 		class?: string;
 		children?: Snippet;
 	};
@@ -16,6 +25,10 @@
 		size = 'md',
 		control = false,
 		block = false,
+		icon = false,
+		iconInline = false,
+		hoverDanger = false,
+		loading = false,
 		type = 'button',
 		disabled = false,
 		title,
@@ -29,7 +42,8 @@
 <button
 	{...rest}
 	{type}
-	{disabled}
+	disabled={disabled || loading}
+	aria-busy={loading || undefined}
 	{title}
 	class="btn {klass}"
 	class:btn-primary={variant === 'primary'}
@@ -38,16 +52,20 @@
 	class:btn-sm={size === 'sm'}
 	class:btn-control={control}
 	class:btn-block={block}
+	class:btn-icon={icon}
+	class:btn-icon-inline={iconInline}
+	class:hover-danger={hoverDanger}
+	class:loading
 	onclick={onclick}
 >
+	{#if loading}<span class="btn-spinner" aria-hidden="true"></span>{/if}
 	{@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),
+	/* The canonical control: owns its variants/sizes/modifiers from theme tokens.
+	   Svelte 5 scopes via :where() (zero added specificity), so feature-component
+	   overrides keep winning by specificity. Icons size themselves (Icon.svelte),
 	   so no svg sizing rule lives here. */
 	.btn {
 		display: inline-flex;
@@ -110,8 +128,9 @@
 	.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. */
+
+	/* Uniform-height control: icon buttons, inputs and action buttons that share a
+	   toolbar/composer row line up exactly. */
 	.btn-control {
 		display: inline-flex;
 		align-items: center;
@@ -143,7 +162,7 @@
 	}
 	/* .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). */
+	   both are present. */
 	.btn-control.btn-primary {
 		background: var(--accent);
 		border-color: var(--accent);
@@ -153,4 +172,57 @@
 		border-color: var(--accent);
 		filter: brightness(1.08);
 	}
+
+	/* Icon-only buttons (IconButton). Square box = consistent 2.25rem tap target. */
+	.btn-icon {
+		min-height: 2.25rem;
+		min-width: 2.25rem;
+		padding: var(--sp-2);
+	}
+	.btn-icon-inline {
+		min-height: 0;
+		min-width: 0;
+		padding: 0 var(--sp-1);
+		border: none;
+		background: none;
+		color: var(--text-muted);
+	}
+	.btn-icon-inline:hover:not(:disabled) {
+		border: none;
+		background: none;
+		color: var(--text);
+	}
+	.btn-icon-inline.hover-danger:hover:not(:disabled) {
+		color: var(--danger);
+	}
+
+	/* Two-state (toggle) buttons — e.g. an IconButton with `pressed`. Reacts to
+	   the native aria-pressed that flows through, so no extra class. Tint defaults
+	   to the accent; override per-instance with `style="--btn-on: var(--warn)"`. */
+	.btn[aria-pressed='true'] {
+		color: var(--btn-on, var(--accent));
+	}
+
+	/* Loading: keep full opacity (it's busy, not disabled-looking) + a wait cursor,
+	   and show a spinner in the current text color. */
+	.btn.loading {
+		cursor: wait;
+	}
+	.btn.loading:disabled {
+		opacity: 1;
+	}
+	.btn-spinner {
+		width: 0.9em;
+		height: 0.9em;
+		flex: none;
+		border: 2px solid currentColor;
+		border-top-color: transparent;
+		border-radius: 50%;
+		animation: btn-spin 0.6s linear infinite;
+	}
+	@keyframes btn-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 </style>

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

@@ -5,6 +5,10 @@ type ButtonProps = HTMLButtonAttributes & {
     size?: 'sm' | 'md';
     control?: boolean;
     block?: boolean;
+    icon?: boolean;
+    iconInline?: boolean;
+    hoverDanger?: boolean;
+    loading?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/atoms/Checkbox.svelte

@@ -8,6 +8,7 @@
 	let {
 		checked = $bindable(false),
 		indeterminate = false,
+		invalid = false,
 		label,
 		class: klass = '',
 		el = $bindable(null),
@@ -15,6 +16,8 @@
 	}: HTMLInputAttributes & {
 		checked?: boolean;
 		indeterminate?: boolean;
+		/** Error state: danger box border + aria-invalid. */
+		invalid?: boolean;
 		label: string;
 		el?: HTMLInputElement | null;
 	} = $props();
@@ -26,7 +29,7 @@
 </script>
 
 <label class="checkbox {klass}">
-	<input bind:this={el} type="checkbox" bind:checked {...rest} />
+	<input bind:this={el} type="checkbox" bind:checked {...rest} aria-invalid={invalid || undefined} />
 	<span class="box" aria-hidden="true"></span>
 	<span class="label-text">{label}</span>
 </label>
@@ -90,6 +93,9 @@
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;
 	}
+	input[aria-invalid='true']:not(:checked):not(:indeterminate) + .box {
+		border-color: var(--danger);
+	}
 	input:disabled ~ * {
 		opacity: 0.45;
 	}

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

@@ -2,6 +2,8 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLInputAttributes & {
     checked?: boolean;
     indeterminate?: boolean;
+    /** Error state: danger box border + aria-invalid. */
+    invalid?: boolean;
     label: string;
     el?: HTMLInputElement | null;
 };

package/dist/components/atoms/Dot.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	// Status dot — a small coloured disc, optionally followed by a label. Owns its
+	// own styling (it does not rely on any global `.dot` rules). Colour comes from
+	// either:
+	//   • status → one of the semantic presets (active/stale/dead/hibernated),
+	//     each mapped to a token.
+	//   • color  → any CSS colour (or var()) for a one-off; overrides `status`.
+	// `glow` adds a soft halo in the dot's own colour. With a `label` the whole
+	// thing renders as an inline-flex row (dot + caption); without one it's a bare
+	// inline dot, so it can sit inline next to other text.
+	import Text from './Text.svelte';
+
+	type Status = 'active' | 'stale' | 'dead' | 'hibernated';
+
+	const STATUS_COLOR: Record<Status, string> = {
+		active: 'var(--dot-active)',
+		stale: 'var(--dot-stale)',
+		dead: 'var(--dot-dead)',
+		hibernated: 'var(--dot-hibernated)',
+	};
+
+	let {
+		status = 'active',
+		color,
+		label,
+		glow = false,
+		class: klass = '',
+		...rest
+	}: {
+		status?: Status;
+		color?: string;
+		label?: string;
+		glow?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const resolved = $derived(color ?? STATUS_COLOR[status]);
+</script>
+
+{#if label}
+	<span class="dot-row {klass}" {...rest}>
+		<span class="dot" class:glow style="--dot-color:{resolved}"></span>
+		<Text variant="caption">{label}</Text>
+	</span>
+{:else}
+	<span class="dot {klass}" class:glow style="--dot-color:{resolved}" {...rest}></span>
+{/if}
+
+<style>
+	.dot-row {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+	}
+	.dot {
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: var(--r-pill);
+		flex: none;
+		display: inline-block;
+		background: var(--dot-color);
+	}
+	.glow {
+		box-shadow: 0 0 6px var(--dot-color);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+type Status = 'active' | 'stale' | 'dead' | 'hibernated';
+type $$ComponentProps = {
+    status?: Status;
+    color?: string;
+    label?: string;
+    glow?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Dot: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dot = ReturnType<typeof Dot>;
+export default Dot;

package/dist/components/atoms/Input.svelte

@@ -4,8 +4,14 @@
 	// switches to the monospace family (paths, tokens, env values).
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	type Props = HTMLInputAttributes & {
+	// `size` shadows the native char-width attribute (unused in token-sized
+	// layouts) to expose a height preset instead.
+	type Props = Omit<HTMLInputAttributes, 'size'> & {
 		mono?: boolean;
+		size?: 'sm' | 'md';
+		/** Error state: danger border + aria-invalid (also styles if a consumer
+		 *  sets aria-invalid directly). */
+		invalid?: boolean;
 		class?: string;
 		value?: HTMLInputAttributes['value'];
 		el?: HTMLInputElement | null;
@@ -13,6 +19,8 @@
 
 	let {
 		mono = false,
+		size = 'md',
+		invalid = false,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
@@ -20,7 +28,15 @@
 	}: Props = $props();
 </script>
 
-<input bind:this={el} class="input {klass}" class:mono bind:value {...rest} />
+<input
+	bind:this={el}
+	class="input {klass}"
+	class:mono
+	class:input-sm={size === 'sm'}
+	bind:value
+	{...rest}
+	aria-invalid={invalid || undefined}
+/>
 
 <style>
 	.input {
@@ -36,6 +52,16 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.input-sm {
+		padding: var(--sp-2);
+		font-size: var(--fs-sm);
+	}
+	.input[aria-invalid='true'] {
+		border-color: var(--danger);
+	}
+	.input[aria-invalid='true']:focus {
+		border-color: var(--danger);
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}

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

@@ -1,6 +1,10 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = HTMLInputAttributes & {
+type Props = Omit<HTMLInputAttributes, 'size'> & {
     mono?: boolean;
+    size?: 'sm' | 'md';
+    /** Error state: danger border + aria-invalid (also styles if a consumer
+     *  sets aria-invalid directly). */
+    invalid?: boolean;
     class?: string;
     value?: HTMLInputAttributes['value'];
     el?: HTMLInputElement | null;

package/dist/components/atoms/Select.svelte

@@ -17,6 +17,8 @@
 
 	type Props = HTMLSelectAttributes & {
 		variant?: 'default' | 'ghost';
+		/** Error state: danger border + aria-invalid. */
+		invalid?: boolean;
 		class?: string;
 		value?: HTMLSelectAttributes['value'];
 		children?: Snippet;
@@ -24,6 +26,7 @@
 
 	let {
 		variant = 'default',
+		invalid = false,
 		class: klass = '',
 		value = $bindable(),
 		children,
@@ -32,12 +35,12 @@
 </script>
 
 {#if variant === 'ghost'}
-	<select class="select ghost {klass}" bind:value {...rest}>
+	<select class="select ghost {klass}" bind:value {...rest} aria-invalid={invalid || undefined}>
 		{@render children?.()}
 	</select>
 {:else}
 	<div class="select-wrap {klass}">
-		<select class="select" bind:value {...rest}>
+		<select class="select" bind:value {...rest} aria-invalid={invalid || undefined}>
 			{@render children?.()}
 		</select>
 		<span class="select-chevron" aria-hidden="true">
@@ -71,6 +74,10 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.select[aria-invalid='true'],
+	.select[aria-invalid='true']:focus {
+		border-color: var(--danger);
+	}
 	.select-chevron {
 		position: absolute;
 		top: 50%;

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

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
 type Props = HTMLSelectAttributes & {
     variant?: 'default' | 'ghost';
+    /** Error state: danger border + aria-invalid. */
+    invalid?: boolean;
     class?: string;
     value?: HTMLSelectAttributes['value'];
     children?: Snippet;

package/dist/components/atoms/Slider.svelte

@@ -4,6 +4,7 @@
 	// engines from tokens. The track shows a filled portion up to the current
 	// value, and an optional `output` displays the value with a correct
 	// for-association. `bind:value` and all native attrs/events pass through.
+	// Recolor per-instance via `--slider-accent` (defaults to the theme accent).
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	let {
@@ -73,7 +74,7 @@
 		border-radius: var(--r-pill);
 		background: linear-gradient(
 			to right,
-			var(--accent) var(--pct),
+			var(--slider-accent, var(--accent)) var(--pct),
 			var(--bg-elevated-2) var(--pct)
 		);
 	}
@@ -85,7 +86,7 @@
 	input[type='range']::-moz-range-progress {
 		height: 0.35rem;
 		border-radius: var(--r-pill);
-		background: var(--accent);
+		background: var(--slider-accent, var(--accent));
 	}
 	/* Thumb */
 	input[type='range']::-webkit-slider-thumb {
@@ -95,7 +96,7 @@
 		width: 1.2rem;
 		height: 1.2rem;
 		border-radius: 50%;
-		background: var(--accent);
+		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
 		transition: transform 0.1s var(--ease);
@@ -104,7 +105,7 @@
 		width: 1.2rem;
 		height: 1.2rem;
 		border-radius: 50%;
-		background: var(--accent);
+		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
 	}

package/dist/components/atoms/Switch.svelte

@@ -6,10 +6,11 @@
 
 	let {
 		checked = false,
+		invalid = false,
 		label,
 		class: klass = '',
 		...rest
-	}: HTMLButtonAttributes & { checked?: boolean; label: string } = $props();
+	}: HTMLButtonAttributes & { checked?: boolean; invalid?: boolean; label: string } = $props();
 </script>
 
 <button
@@ -19,6 +20,7 @@
 	class:on={checked}
 	role="switch"
 	aria-checked={checked}
+	aria-invalid={invalid || undefined}
 	aria-label={label}
 >
 	<span class="knob"></span>
@@ -61,4 +63,7 @@
 		opacity: 0.45;
 		cursor: not-allowed;
 	}
+	.switch[aria-invalid='true']:not(.on) {
+		border-color: var(--danger);
+	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLButtonAttributes & {
     checked?: boolean;
+    invalid?: boolean;
     label: string;
 };
 declare const Switch: import("svelte").Component<$$ComponentProps, {}, "">;