@dorsk/tsumikit 0.1.0

package/dist/components/layouts/AppShell.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+	// Application frame: sticky header, optional sidebar, main content, optional
+	// footer — all supplied as snippets. Responsive by default:
+	//   • desktop (≥ 48rem): the sidebar is a persistent grid column.
+	//   • mobile: the sidebar becomes an off-canvas drawer that slides in over a
+	//     scrim; AppShell renders the hamburger toggle for you (shown only on
+	//     mobile), locks body scroll while open, closes on Escape / scrim click,
+	//     and marks the rest of the page `inert` so focus stays in the drawer.
+	// Switching to desktop auto-closes the drawer. Safe-area insets are honored.
+	import type { Snippet } from 'svelte';
+	import { browser } from '../../env';
+	import IconButton from '../molecules/IconButton.svelte';
+
+	let {
+		header,
+		sidebar,
+		footer,
+		children,
+		sidebarWidth = '16rem',
+		navLabel = 'Main navigation',
+		resizableSidebar = false,
+		minSidebar = 64,
+		maxSidebar = 360,
+		sidebarWidthKey
+	}: {
+		header?: Snippet;
+		sidebar?: Snippet;
+		footer?: Snippet;
+		children: Snippet;
+		/** Initial / non-resizable desktop sidebar width (any CSS length). */
+		sidebarWidth?: string;
+		navLabel?: string;
+		/** Drag the sidebar's right edge on desktop to resize it. Below ~8rem the
+		 *  nav collapses to an icon rail automatically (see NavItem, driven by the
+		 *  `sidebar` container query — no JS state needed). */
+		resizableSidebar?: boolean;
+		minSidebar?: number;
+		maxSidebar?: number;
+		/** localStorage key to persist the resized width. */
+		sidebarWidthKey?: string;
+	} = $props();
+
+	let open = $state(false);
+	let isMobile = $state(false);
+
+	// --- resizable sidebar (desktop) ---
+	function loadW(): number | null {
+		if (!browser || !sidebarWidthKey) return null;
+		const n = Number(localStorage.getItem(sidebarWidthKey));
+		return Number.isFinite(n) && n >= minSidebar ? Math.min(n, maxSidebar) : null;
+	}
+	let sideW = $state<number | null>(loadW());
+	let dragging = $state(false);
+	let rafId = 0;
+	let lastX = 0;
+	function startDrag(e: PointerEvent) {
+		dragging = true;
+		lastX = e.clientX;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		e.preventDefault();
+	}
+	function onDrag(e: PointerEvent) {
+		if (!dragging) return;
+		lastX = e.clientX;
+		if (rafId) return;
+		rafId = requestAnimationFrame(() => {
+			rafId = 0;
+			sideW = Math.round(Math.max(minSidebar, Math.min(lastX, maxSidebar)));
+		});
+	}
+	function endDrag(e: PointerEvent) {
+		if (!dragging) return;
+		dragging = false;
+		if (rafId) {
+			cancelAnimationFrame(rafId);
+			rafId = 0;
+		}
+		try {
+			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		} catch {
+			/* already released */
+		}
+		if (browser && sidebarWidthKey && sideW != null) localStorage.setItem(sidebarWidthKey, String(sideW));
+	}
+	// The effective desktop width: a resized px value wins over the prop default.
+	const widthCss = $derived(resizableSidebar && sideW != null ? `${sideW}px` : sidebarWidth);
+
+	$effect(() => {
+		if (!browser) return;
+		const mq = window.matchMedia('(max-width: 47.999rem)');
+		const sync = () => {
+			isMobile = mq.matches;
+			if (!isMobile) open = false; // desktop: drawer concept doesn't apply
+		};
+		sync();
+		mq.addEventListener('change', sync);
+		return () => mq.removeEventListener('change', sync);
+	});
+
+	// Lock body scroll while the mobile drawer is open.
+	$effect(() => {
+		if (!browser) return;
+		document.body.style.overflow = open && isMobile ? 'hidden' : '';
+		return () => {
+			document.body.style.overflow = '';
+		};
+	});
+
+	// Background is inert (untabbable, hidden from AT) when the drawer is open.
+	const bgInert = $derived(open && isMobile);
+</script>
+
+<svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
+
+<div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}">
+	<header class="shell-header">
+		{#if sidebar}
+			<IconButton
+				class="shell-menu-btn"
+				icon="menu"
+				label="Toggle navigation"
+				aria-expanded={open}
+				onclick={() => (open = !open)}
+			/>
+		{/if}
+		{@render header?.()}
+	</header>
+
+	{#if sidebar}
+		<button
+			class="shell-scrim"
+			class:show={open && isMobile}
+			tabindex="-1"
+			aria-hidden="true"
+			onclick={() => (open = false)}
+		></button>
+		<aside
+			class="shell-sidebar"
+			class:open
+			aria-label={navLabel}
+			inert={isMobile && !open ? true : undefined}
+		>
+			{@render sidebar()}
+			{#if resizableSidebar}
+				<div
+					class="shell-sidebar-resize"
+					role="separator"
+					aria-label="Resize sidebar"
+					aria-orientation="vertical"
+					onpointerdown={startDrag}
+					onpointermove={onDrag}
+					onpointerup={endDrag}
+					onpointercancel={endDrag}
+				></div>
+			{/if}
+		</aside>
+	{/if}
+
+	<main class="shell-main" inert={bgInert || undefined}>
+		{@render children()}
+	</main>
+
+	{#if footer}
+		<footer class="shell-footer" inert={bgInert || undefined}>{@render footer()}</footer>
+	{/if}
+</div>
+
+<style>
+	.shell {
+		min-height: 100dvh;
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr auto;
+		grid-template-areas:
+			'header'
+			'main'
+			'footer';
+	}
+	.shell-header {
+		grid-area: header;
+		position: sticky;
+		top: 0;
+		z-index: var(--z-header);
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		height: var(--header-h);
+		padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
+		padding-top: var(--safe-top);
+		background: color-mix(in srgb, var(--bg) 88%, transparent);
+		backdrop-filter: blur(8px);
+		border-bottom: 1px solid var(--border);
+	}
+	.shell-main {
+		grid-area: main;
+		min-width: 0; /* let content shrink instead of overflowing the grid */
+		/* A query container named `main` so content components can respond to the
+		   content width (which changes when the sidebar is resized), not the
+		   viewport. */
+		container: main / inline-size;
+	}
+	.shell-footer {
+		grid-area: footer;
+		border-top: 1px solid var(--border);
+		padding: var(--sp-4) max(var(--sp-4), var(--safe-right)) calc(var(--sp-4) + var(--safe-bottom))
+			max(var(--sp-4), var(--safe-left));
+	}
+
+	/* Mobile: sidebar is an off-canvas drawer. */
+	.shell-sidebar {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: min(var(--shell-sidebar-w), 82vw);
+		z-index: var(--z-drawer);
+		overflow-y: auto;
+		overflow-x: hidden; /* overflow-y:auto would otherwise make x auto too */
+		-webkit-overflow-scrolling: touch;
+		background: var(--bg-elevated);
+		border-right: 1px solid var(--border);
+		padding: var(--sp-3);
+		padding-top: max(var(--sp-3), var(--safe-top));
+		padding-bottom: max(var(--sp-3), var(--safe-bottom));
+		/* A query container named `sidebar` so nav items collapse to an icon rail
+		   based on the sidebar's own width (see NavItem). */
+		container: sidebar / inline-size;
+		transform: translateX(-100%);
+		transition: transform 0.2s var(--ease);
+	}
+	.shell-sidebar.open {
+		transform: translateX(0);
+		box-shadow: var(--shadow-lg);
+	}
+	.shell-scrim {
+		display: none;
+		position: fixed;
+		inset: 0;
+		z-index: calc(var(--z-drawer) - 1);
+		background: rgba(0, 0, 0, 0.5);
+		border: 0;
+		cursor: pointer;
+	}
+	.shell-scrim.show {
+		display: block;
+	}
+
+	/* Resize handle lives only on the desktop persistent column. */
+	.shell-sidebar-resize {
+		display: none;
+	}
+	.shell.dragging {
+		user-select: none;
+		cursor: ew-resize;
+	}
+
+	/* Desktop: persistent sidebar column; hide drawer chrome. */
+	@media (min-width: 48rem) {
+		.shell {
+			grid-template-columns: var(--shell-sidebar-w) 1fr;
+			grid-template-areas:
+				'header header'
+				'sidebar main'
+				'footer footer';
+		}
+		.shell-sidebar {
+			position: relative; /* anchor the absolute resize handle */
+			grid-area: sidebar;
+			transform: none;
+			z-index: auto;
+			box-shadow: none;
+			border-right: 1px solid var(--border);
+		}
+		.shell-scrim,
+		:global(.shell-menu-btn) {
+			display: none !important;
+		}
+		.shell-sidebar-resize {
+			display: block;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			width: 10px;
+			cursor: ew-resize;
+			touch-action: none;
+			z-index: 1;
+		}
+		.shell-sidebar-resize::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			width: 1px;
+			background: transparent;
+			transition: background 0.12s var(--ease);
+		}
+		.shell-sidebar-resize:hover::after,
+		.shell.dragging .shell-sidebar-resize::after {
+			background: var(--accent);
+		}
+	}
+</style>

package/dist/components/layouts/AppShell.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    header?: Snippet;
+    sidebar?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    /** Initial / non-resizable desktop sidebar width (any CSS length). */
+    sidebarWidth?: string;
+    navLabel?: string;
+    /** Drag the sidebar's right edge on desktop to resize it. Below ~8rem the
+     *  nav collapses to an icon rail automatically (see NavItem, driven by the
+     *  `sidebar` container query — no JS state needed). */
+    resizableSidebar?: boolean;
+    minSidebar?: number;
+    maxSidebar?: number;
+    /** localStorage key to persist the resized width. */
+    sidebarWidthKey?: string;
+};
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/layouts/AutoGrid.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	// Intrinsically responsive grid: columns are at least `min` wide and fill the
+	// row, wrapping when they can't — no media or container queries needed, so it
+	// adapts to whatever space it's given (including inside a narrow column). This
+	// is the "columns just adapt to available space" layout from the AppShell
+	// demo, as a named component. `min` is the minimum column width, `gap` the
+	// gutter.
+	import type { Snippet } from 'svelte';
+
+	let {
+		as = 'div',
+		min = '14rem',
+		gap = 'var(--sp-4)',
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		as?: 'div' | 'section' | 'ul' | 'ol';
+		min?: string;
+		gap?: string;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element this={as} class="autogrid-c {klass}" style="--ag-min: {min}; gap: {gap}" {...rest}>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.autogrid-c {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ag-min)), 1fr));
+	}
+</style>

package/dist/components/layouts/AutoGrid.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    as?: 'div' | 'section' | 'ul' | 'ol';
+    min?: string;
+    gap?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const AutoGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type AutoGrid = ReturnType<typeof AutoGrid>;
+export default AutoGrid;

package/dist/components/layouts/Cluster.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	// Horizontal layout: children in a row with a consistent gap, wrapping onto
+	// new lines by default (so it never overflows). Ideal for toolbars, tag
+	// rows, button groups. `gap`/`align`/`justify` are any CSS value; set
+	// `wrap={false}` to keep one line. Polymorphic via `as`.
+	import type { Snippet } from 'svelte';
+
+	let {
+		as = 'div',
+		gap = 'var(--sp-2)',
+		align = 'center',
+		justify,
+		wrap = true,
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		as?: 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'header' | 'footer';
+		gap?: string;
+		align?: string;
+		justify?: string;
+		wrap?: boolean;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	class="cluster-c {klass}"
+	style:gap
+	style:align-items={align}
+	style:justify-content={justify}
+	style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.cluster-c {
+		display: flex;
+	}
+</style>

package/dist/components/layouts/Cluster.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    as?: 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'header' | 'footer';
+    gap?: string;
+    align?: string;
+    justify?: string;
+    wrap?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Cluster: import("svelte").Component<$$ComponentProps, {}, "">;
+type Cluster = ReturnType<typeof Cluster>;
+export default Cluster;

package/dist/components/layouts/Container.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	// Centered, max-width content column with token gutters that respect safe-area
+	// insets. `size` overrides the default --content-max; `pad` toggles vertical
+	// padding. Polymorphic via `as` so it can be a <main>, <section>, etc.
+	import type { Snippet } from 'svelte';
+
+	let {
+		as = 'div',
+		size,
+		pad = false,
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		as?: 'div' | 'main' | 'section' | 'article';
+		/** Max width (any CSS length). Defaults to --content-max. */
+		size?: string;
+		pad?: boolean;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	class="container ct {klass}"
+	class:pad
+	style={size ? `max-width: ${size}` : undefined}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.ct.pad {
+		padding-top: var(--sp-6);
+		padding-bottom: var(--sp-12);
+	}
+</style>

package/dist/components/layouts/Container.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    as?: 'div' | 'main' | 'section' | 'article';
+    /** Max width (any CSS length). Defaults to --content-max. */
+    size?: string;
+    pad?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/layouts/NavItem.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	// Sidebar navigation item: icon + label. When the surrounding `sidebar`
+	// query container gets narrow (≤ 8rem — e.g. the user drags AppShell's
+	// resizable sidebar down to a rail) the label hides and the icon centers,
+	// purely in CSS. `title`/`aria-label` carry the name so the icon-only state
+	// stays accessible and shows a tooltip. Renders an <a> when `href` is set,
+	// else a <button>.
+	import type { Snippet } from 'svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+
+	let {
+		icon,
+		label,
+		href,
+		active = false,
+		onclick,
+		children,
+		...rest
+	}: {
+		icon: IconName;
+		label: string;
+		href?: string;
+		active?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : 'button'}
+	class="nav-item"
+	class:active
+	title={label}
+	aria-label={label}
+	aria-current={active ? 'page' : undefined}
+	{onclick}
+	{...rest}
+>
+	<Icon name={icon} size={18} />
+	<span class="nav-label">{label}</span>
+	{#if children}<span class="nav-trail">{@render children()}</span>{/if}
+</svelte:element>
+
+<style>
+	.nav-item {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		width: 100%;
+		text-align: left;
+		padding: var(--sp-2) var(--sp-3);
+		border: none;
+		background: none;
+		color: var(--text-muted);
+		border-radius: var(--r-md);
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-medium);
+		text-decoration: none;
+		white-space: nowrap;
+		transition:
+			background 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.nav-item:hover {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+		text-decoration: none;
+	}
+	.nav-item.active {
+		background: color-mix(in srgb, var(--accent) 14%, transparent);
+		color: var(--accent);
+	}
+	.nav-label {
+		flex: 1;
+		min-width: 0; /* allow the label to shrink/ellipsis instead of overflowing */
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	/* Icon-rail: when the sidebar container is narrow, drop the label + trailing
+	   slot and center the icon. Driven by the sidebar's width, not the viewport. */
+	@container sidebar (max-width: 8rem) {
+		.nav-item {
+			justify-content: center;
+			padding-inline: 0;
+		}
+		.nav-label,
+		.nav-trail {
+			display: none;
+		}
+	}
+</style>

package/dist/components/layouts/NavItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../atoms/Icon.svelte';
+type $$ComponentProps = {
+    icon: IconName;
+    label: string;
+    href?: string;
+    active?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const NavItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;

package/dist/components/layouts/Stack.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	// Vertical layout: children stacked in a column with a consistent gap.
+	// `gap`/`align`/`justify` accept any CSS length/value; `gap` defaults to a
+	// spacing token. Polymorphic via `as`. The one-dimensional layout every app
+	// rebuilds, in one intention-revealing component.
+	import type { Snippet } from 'svelte';
+
+	let {
+		as = 'div',
+		gap = 'var(--sp-3)',
+		align,
+		justify,
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		as?: 'div' | 'section' | 'ul' | 'ol' | 'li' | 'form' | 'nav';
+		gap?: string;
+		align?: string;
+		justify?: string;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	class="stack-c {klass}"
+	style:gap
+	style:align-items={align}
+	style:justify-content={justify}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.stack-c {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+</style>

package/dist/components/layouts/Stack.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    as?: 'div' | 'section' | 'ul' | 'ol' | 'li' | 'form' | 'nav';
+    gap?: string;
+    align?: string;
+    justify?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;