@dorsk/tsumikit 0.1.0

package/dist/components/organisms/DataTable.svelte

@@ -0,0 +1,145 @@
+<script lang="ts" module>
+	export interface Column<T> {
+		/** Key into the row, or an arbitrary id when paired with a cell snippet. */
+		key: string;
+		label: string;
+		width?: string;
+		align?: 'left' | 'center' | 'right';
+		/** Pull a display value from the row (defaults to row[key]). */
+		get?: (row: T) => unknown;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	// Generic, accessible data table. Columns are typed against the row type; a
+	// column renders row[key] by default, a `get` accessor, or a custom
+	// `cellSnippets[key]` snippet for full control (badges, actions…). Sticky
+	// header, empty state, optional row click (rows become buttons with the
+	// right keyboard semantics). Horizontal scroll is contained so it never
+	// breaks the page layout on mobile.
+	import type { Snippet } from 'svelte';
+
+	let {
+		columns,
+		rows,
+		rowKey,
+		onrowclick,
+		cellSnippets = {},
+		empty = 'No data.',
+		stickyHeader = false
+	}: {
+		columns: Column<T>[];
+		rows: T[];
+		/** Stable key for each row (for keyed iteration). */
+		rowKey: (row: T) => string | number;
+		onrowclick?: (row: T) => void;
+		cellSnippets?: Record<string, Snippet<[T]>>;
+		empty?: string;
+		stickyHeader?: boolean;
+	} = $props();
+
+	function display(col: Column<T>, row: T): unknown {
+		if (col.get) return col.get(row);
+		return (row as Record<string, unknown>)[col.key];
+	}
+</script>
+
+<div class="dt-scroll">
+	<table class="dt" class:sticky={stickyHeader}>
+		<thead>
+			<tr>
+				{#each columns as col (col.key)}
+					<th scope="col" style:width={col.width} style:text-align={col.align ?? 'left'}>
+						{col.label}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#if rows.length === 0}
+				<tr>
+					<td class="dt-empty" colspan={columns.length}>{empty}</td>
+				</tr>
+			{:else}
+				{#each rows as row (rowKey(row))}
+					<tr
+						class:clickable={!!onrowclick}
+						tabindex={onrowclick ? 0 : undefined}
+						role={onrowclick ? 'button' : undefined}
+						onclick={onrowclick ? () => onrowclick(row) : undefined}
+						onkeydown={onrowclick
+							? (e) => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault();
+										onrowclick(row);
+									}
+								}
+							: undefined}
+					>
+						{#each columns as col (col.key)}
+							<td style:text-align={col.align ?? 'left'}>
+								{#if cellSnippets[col.key]}
+									{@render cellSnippets[col.key](row)}
+								{:else}
+									{display(col, row)}
+								{/if}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.dt-scroll {
+		width: 100%;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		border: 1px solid var(--border);
+		border-radius: var(--r-lg);
+	}
+	.dt {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: var(--fs-sm);
+		background: var(--surface);
+	}
+	th,
+	td {
+		padding: var(--sp-2) var(--sp-3);
+		border-bottom: 1px solid var(--border);
+	}
+	th {
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-semibold);
+		color: var(--text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		background: var(--bg-elevated-2);
+		white-space: nowrap;
+	}
+	.dt.sticky th {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	tbody tr:last-child td {
+		border-bottom: none;
+	}
+	tr.clickable {
+		cursor: pointer;
+		transition: background 0.12s var(--ease);
+	}
+	tr.clickable:hover,
+	tr.clickable:focus-visible {
+		background: var(--bg-elevated-2);
+		outline: none;
+	}
+	.dt-empty {
+		text-align: center;
+		color: var(--text-faint);
+		padding: var(--sp-8);
+	}
+</style>

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -0,0 +1,43 @@
+export interface Column<T> {
+    /** Key into the row, or an arbitrary id when paired with a cell snippet. */
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    /** Pull a display value from the row (defaults to row[key]). */
+    get?: (row: T) => unknown;
+}
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        columns: Column<T>[];
+        rows: T[];
+        /** Stable key for each row (for keyed iteration). */
+        rowKey: (row: T) => string | number;
+        onrowclick?: (row: T) => void;
+        cellSnippets?: Record<string, Snippet<[T]>>;
+        empty?: string;
+        stickyHeader?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/env.d.ts

@@ -0,0 +1 @@
+export declare const browser: boolean;

package/dist/env.js

@@ -0,0 +1,4 @@
+// True in the browser, false during SSR / prerender / build. A dependency-free
+// stand-in for SvelteKit's `$app/environment` so the kit also works in plain
+// Svelte (Vite) projects, not only SvelteKit.
+export const browser = typeof document !== 'undefined';

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+export { autoresize } from './autoresize';
+export { default as Badge } from './components/atoms/Badge.svelte';
+export { default as Button } from './components/atoms/Button.svelte';
+export { default as Card } from './components/atoms/Card.svelte';
+export { default as Checkbox } from './components/atoms/Checkbox.svelte';
+export { default as Chip } from './components/atoms/Chip.svelte';
+export { default as Heading } from './components/atoms/Heading.svelte';
+export type { IconName } from './components/atoms/Icon.svelte';
+export { default as Icon } from './components/atoms/Icon.svelte';
+export { default as Input } from './components/atoms/Input.svelte';
+export { default as Link } from './components/atoms/Link.svelte';
+export { default as Progress } from './components/atoms/Progress.svelte';
+export { default as Select } from './components/atoms/Select.svelte';
+export { default as Slider } from './components/atoms/Slider.svelte';
+export { default as Switch } from './components/atoms/Switch.svelte';
+export { default as Text } from './components/atoms/Text.svelte';
+export { default as Textarea } from './components/atoms/Textarea.svelte';
+export { default as AppShell } from './components/layouts/AppShell.svelte';
+export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
+export { default as Cluster } from './components/layouts/Cluster.svelte';
+export { default as Container } from './components/layouts/Container.svelte';
+export { default as NavItem } from './components/layouts/NavItem.svelte';
+export { default as Stack } from './components/layouts/Stack.svelte';
+export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
+export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { default as Dropzone } from './components/molecules/Dropzone.svelte';
+export { default as Field } from './components/molecules/Field.svelte';
+export { default as FileButton } from './components/molecules/FileButton.svelte';
+export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
+export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as Menu, type MenuItem } from './components/molecules/Menu.svelte';
+export { default as Modal } from './components/molecules/Modal.svelte';
+export { default as OptionButton } from './components/molecules/OptionButton.svelte';
+export { default as Popover } from './components/molecules/Popover.svelte';
+export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
+export { default as SelectButton } from './components/molecules/SelectButton.svelte';
+export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
+export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
+export { default as Toaster } from './components/molecules/Toaster.svelte';
+export { default as Toggle } from './components/molecules/Toggle.svelte';
+export { default as Tooltip } from './components/molecules/Tooltip.svelte';
+export { type Column, default as DataTable } from './components/organisms/DataTable.svelte';
+export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
+export { type Mode, THEMES, theme } from './stores/theme.svelte';
+export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';

package/dist/index.js

@@ -0,0 +1,56 @@
+// @dorsk/tsumikit — public API.
+//
+// Styles are NOT auto-imported (so consumers control bundling). Import once at
+// your app root:
+//   import '@dorsk/tsumikit/styles/app.css';
+// then use the components below.
+export { autoresize } from './autoresize';
+export { default as Badge } from './components/atoms/Badge.svelte';
+export { default as Button } from './components/atoms/Button.svelte';
+export { default as Card } from './components/atoms/Card.svelte';
+export { default as Checkbox } from './components/atoms/Checkbox.svelte';
+export { default as Chip } from './components/atoms/Chip.svelte';
+export { default as Heading } from './components/atoms/Heading.svelte';
+export { default as Icon } from './components/atoms/Icon.svelte';
+export { default as Input } from './components/atoms/Input.svelte';
+export { default as Link } from './components/atoms/Link.svelte';
+export { default as Progress } from './components/atoms/Progress.svelte';
+export { default as Select } from './components/atoms/Select.svelte';
+export { default as Slider } from './components/atoms/Slider.svelte';
+export { default as Switch } from './components/atoms/Switch.svelte';
+// ---- atoms ----
+export { default as Text } from './components/atoms/Text.svelte';
+export { default as Textarea } from './components/atoms/Textarea.svelte';
+// ---- layouts ----
+export { default as AppShell } from './components/layouts/AppShell.svelte';
+export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
+export { default as Cluster } from './components/layouts/Cluster.svelte';
+export { default as Container } from './components/layouts/Container.svelte';
+export { default as NavItem } from './components/layouts/NavItem.svelte';
+export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as Accordion, } from './components/molecules/Accordion.svelte';
+export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { default as Dropzone } from './components/molecules/Dropzone.svelte';
+// ---- molecules ----
+export { default as Field } from './components/molecules/Field.svelte';
+export { default as FileButton } from './components/molecules/FileButton.svelte';
+export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
+export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as Menu } from './components/molecules/Menu.svelte';
+export { default as Modal } from './components/molecules/Modal.svelte';
+export { default as OptionButton } from './components/molecules/OptionButton.svelte';
+export { default as Popover } from './components/molecules/Popover.svelte';
+export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
+export { default as SelectButton } from './components/molecules/SelectButton.svelte';
+export { default as Tabs } from './components/molecules/Tabs.svelte';
+export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
+export { default as Toaster } from './components/molecules/Toaster.svelte';
+export { default as Toggle } from './components/molecules/Toggle.svelte';
+export { default as Tooltip } from './components/molecules/Tooltip.svelte';
+// ---- organisms ----
+export { default as DataTable } from './components/organisms/DataTable.svelte';
+export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
+// ---- stores / actions ----
+export { THEMES, theme } from './stores/theme.svelte';
+export { toasts } from './stores/toast.svelte';

package/dist/stores/fontscale.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface ScaleLevel {
+    id: string;
+    label: string;
+    value: number;
+}
+export declare const SCALE_LEVELS: ScaleLevel[];
+declare class FontScale {
+    levelId: string;
+    current: number;
+    constructor();
+    private apply;
+    set(id: string): void;
+}
+export declare const fontScale: FontScale;
+export {};

package/dist/stores/fontscale.svelte.js

@@ -0,0 +1,49 @@
+import { browser } from '../env';
+// OPT-IN. Most apps don't need this: the kit is rem-based and never resets the
+// root font-size, so the user's browser/OS font-size preference and browser
+// zoom already scale the UI correctly. Reach for this control only in
+// reading-dense apps (chat, docs, readers) that want to enlarge BODY TEXT while
+// keeping chrome compact — not wired into AppShell or any default.
+//
+// Global UI font scale. The control multiplies ONLY the font-size tokens
+// (--fs-scale, consumed by every --fs-* in variables.css) — NOT the document
+// root font-size. Scaling the root would grow every rem-based chrome dimension
+// (control heights, padding) in lockstep, so text would barely grow relative to
+// a ballooning UI. Driving --fs-scale leaves spacing/control sizes fixed and
+// enlarges only text. Discrete levels avoid per-pixel reflow churn.
+const KEY = 'tsumikit-font-scale';
+export const SCALE_LEVELS = [
+    { id: 'smallest', label: 'Smallest', value: 0.8 },
+    { id: 'small', label: 'Small', value: 0.9 },
+    { id: 'normal', label: 'Normal', value: 1 },
+    { id: 'large', label: 'Large', value: 1.2 },
+    { id: 'largest', label: 'Largest', value: 1.5 },
+];
+const DEFAULT_LEVEL = 'normal';
+function levelById(id) {
+    return SCALE_LEVELS.find((l) => l.id === id) ?? SCALE_LEVELS[2];
+}
+class FontScale {
+    levelId = $state(DEFAULT_LEVEL);
+    current = $derived(levelById(this.levelId).value);
+    constructor() {
+        if (browser) {
+            const raw = localStorage.getItem(KEY);
+            if (raw && SCALE_LEVELS.some((l) => l.id === raw))
+                this.levelId = raw;
+            this.apply();
+        }
+    }
+    apply() {
+        if (!browser)
+            return;
+        document.documentElement.style.setProperty('--fs-scale', String(levelById(this.levelId).value));
+    }
+    set(id) {
+        this.levelId = SCALE_LEVELS.some((l) => l.id === id) ? id : DEFAULT_LEVEL;
+        if (browser)
+            localStorage.setItem(KEY, this.levelId);
+        this.apply();
+    }
+}
+export const fontScale = new FontScale();

package/dist/stores/theme.svelte.d.ts

@@ -0,0 +1,96 @@
+export declare const THEMES: readonly [{
+    readonly id: "dark";
+    readonly label: "Dark";
+    readonly icon: "☾";
+    readonly themeColor: "#0f1115";
+}, {
+    readonly id: "light";
+    readonly label: "Light";
+    readonly icon: "☀";
+    readonly themeColor: "#f6f7f9";
+}, {
+    readonly id: "sepia";
+    readonly label: "Sepia";
+    readonly icon: "✶";
+    readonly themeColor: "#f4ecd8";
+}, {
+    readonly id: "colorblind";
+    readonly label: "Color-blind safe";
+    readonly icon: "◑";
+    readonly themeColor: "#16181d";
+}, {
+    readonly id: "mocha";
+    readonly label: "Catppuccin Mocha";
+    readonly icon: "M";
+    readonly themeColor: "#1e1e2e";
+}, {
+    readonly id: "dracula";
+    readonly label: "Dracula";
+    readonly icon: "D";
+    readonly themeColor: "#282a36";
+}, {
+    readonly id: "nord";
+    readonly label: "Nord";
+    readonly icon: "N";
+    readonly themeColor: "#2e3440";
+}, {
+    readonly id: "tokyonight";
+    readonly label: "Tokyo Night";
+    readonly icon: "✦";
+    readonly themeColor: "#1a1b26";
+}, {
+    readonly id: "gruvbox";
+    readonly label: "Gruvbox";
+    readonly icon: "◆";
+    readonly themeColor: "#282828";
+}, {
+    readonly id: "solarized";
+    readonly label: "Solarized Dark";
+    readonly icon: "◐";
+    readonly themeColor: "#002b36";
+}, {
+    readonly id: "rosepine";
+    readonly label: "Rosé Pine";
+    readonly icon: "❀";
+    readonly themeColor: "#191724";
+}, {
+    readonly id: "onedark";
+    readonly label: "One Dark";
+    readonly icon: "①";
+    readonly themeColor: "#282c34";
+}, {
+    readonly id: "everforest";
+    readonly label: "Everforest";
+    readonly icon: "☘";
+    readonly themeColor: "#2d353b";
+}, {
+    readonly id: "monokai";
+    readonly label: "Monokai";
+    readonly icon: "✸";
+    readonly themeColor: "#272822";
+}, {
+    readonly id: "amoled";
+    readonly label: "AMOLED (high contrast)";
+    readonly icon: "◼";
+    readonly themeColor: "#000000";
+}, {
+    readonly id: "highcontrast";
+    readonly label: "High Contrast Light";
+    readonly icon: "◻";
+    readonly themeColor: "#ffffff";
+}];
+export type Mode = (typeof THEMES)[number]['id'];
+type ThemeOption = (typeof THEMES)[number];
+declare class Theme {
+    current: "dark" | "light" | "sepia" | "colorblind" | "mocha" | "dracula" | "nord" | "tokyonight" | "gruvbox" | "solarized" | "rosepine" | "onedark" | "everforest" | "monokai" | "amoled" | "highcontrast";
+    constructor();
+    private apply;
+    get option(): ThemeOption;
+    get label(): string;
+    get icon(): string;
+    get next(): ThemeOption;
+    toggle(): void;
+    set(mode: Mode): void;
+}
+export declare const theme: Theme;
+export {};

package/dist/stores/theme.svelte.js

@@ -0,0 +1,71 @@
+import { browser } from '../env';
+// Theme registry — the single list the picker and the store both read. Adding a
+// theme = one entry here + one [data-theme="id"] block in variables.css. Nothing
+// else changes. `themeColor` drives the mobile browser-chrome <meta theme-color>.
+const KEY = 'tsumikit-theme';
+export const THEMES = [
+    { id: 'dark', label: 'Dark', icon: '☾', themeColor: '#0f1115' },
+    { id: 'light', label: 'Light', icon: '☀', themeColor: '#f6f7f9' },
+    { id: 'sepia', label: 'Sepia', icon: '✶', themeColor: '#f4ecd8' },
+    { id: 'colorblind', label: 'Color-blind safe', icon: '◑', themeColor: '#16181d' },
+    { id: 'mocha', label: 'Catppuccin Mocha', icon: 'M', themeColor: '#1e1e2e' },
+    { id: 'dracula', label: 'Dracula', icon: 'D', themeColor: '#282a36' },
+    { id: 'nord', label: 'Nord', icon: 'N', themeColor: '#2e3440' },
+    { id: 'tokyonight', label: 'Tokyo Night', icon: '✦', themeColor: '#1a1b26' },
+    { id: 'gruvbox', label: 'Gruvbox', icon: '◆', themeColor: '#282828' },
+    { id: 'solarized', label: 'Solarized Dark', icon: '◐', themeColor: '#002b36' },
+    { id: 'rosepine', label: 'Rosé Pine', icon: '❀', themeColor: '#191724' },
+    { id: 'onedark', label: 'One Dark', icon: '①', themeColor: '#282c34' },
+    { id: 'everforest', label: 'Everforest', icon: '☘', themeColor: '#2d353b' },
+    { id: 'monokai', label: 'Monokai', icon: '✸', themeColor: '#272822' },
+    { id: 'amoled', label: 'AMOLED (high contrast)', icon: '◼', themeColor: '#000000' },
+    { id: 'highcontrast', label: 'High Contrast Light', icon: '◻', themeColor: '#ffffff' },
+];
+const ORDER = THEMES.map((t) => t.id);
+function isMode(value) {
+    return THEMES.some((t) => t.id === value);
+}
+function optionFor(mode) {
+    return THEMES.find((t) => t.id === mode) ?? THEMES[0];
+}
+class Theme {
+    current = $state('dark');
+    constructor() {
+        if (browser) {
+            const saved = localStorage.getItem(KEY);
+            this.current = isMode(saved) ? saved : 'dark';
+            this.apply();
+        }
+    }
+    apply() {
+        if (!browser)
+            return;
+        document.documentElement.setAttribute('data-theme', this.current);
+        document
+            .querySelector('meta[name="theme-color"]')
+            ?.setAttribute('content', this.option.themeColor);
+    }
+    get option() {
+        return optionFor(this.current);
+    }
+    get label() {
+        return this.option.label;
+    }
+    get icon() {
+        return this.option.icon;
+    }
+    get next() {
+        const i = ORDER.indexOf(this.current);
+        return optionFor(ORDER[(i + 1) % ORDER.length]);
+    }
+    toggle() {
+        this.set(this.next.id);
+    }
+    set(mode) {
+        this.current = mode;
+        if (browser)
+            localStorage.setItem(KEY, this.current);
+        this.apply();
+    }
+}
+export const theme = new Theme();

package/dist/stores/toast.svelte.d.ts

@@ -0,0 +1,19 @@
+export type ToastTone = 'neutral' | 'ok' | 'error';
+export interface Toast {
+    id: number;
+    message: string;
+    tone: ToastTone;
+    duration: number;
+}
+declare class Toasts {
+    items: Toast[];
+    show(message: string, opts?: {
+        tone?: ToastTone;
+        duration?: number;
+    }): number;
+    ok(message: string, duration?: number): number;
+    error(message: string, duration?: number): number;
+    dismiss(id: number): void;
+}
+export declare const toasts: Toasts;
+export {};

package/dist/stores/toast.svelte.js

@@ -0,0 +1,26 @@
+// Toast manager. A tiny reactive queue; mount one <Toaster /> at the app root
+// and call toasts.show()/ok()/error() from anywhere. Auto-dismisses after
+// `duration` ms (0 = sticky). The Toaster renders an aria-live region so screen
+// readers announce messages.
+let seq = 0;
+class Toasts {
+    items = $state([]);
+    show(message, opts = {}) {
+        const id = ++seq;
+        const duration = opts.duration ?? 4000;
+        this.items = [...this.items, { id, message, tone: opts.tone ?? 'neutral', duration }];
+        if (duration > 0)
+            setTimeout(() => this.dismiss(id), duration);
+        return id;
+    }
+    ok(message, duration) {
+        return this.show(message, { tone: 'ok', duration });
+    }
+    error(message, duration) {
+        return this.show(message, { tone: 'error', duration });
+    }
+    dismiss(id) {
+        this.items = this.items.filter((t) => t.id !== id);
+    }
+}
+export const toasts = new Toasts();