@poodle64/ui 2026.8.7

package/dist/components/ui/sparkline/sparkline.svelte

@@ -0,0 +1,90 @@
+<script lang="ts" module>
+	export interface Series {
+		vals: number[];
+		color: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import { cn } from '../../../utils.js';
+
+	// An inline area + line trend: a compact multi-series sparkline for a
+	// row or card that has room for a trend but not a full Tier-1 chart
+	// (see the household charting rule). Each series carries its own colour,
+	// so the component owns no palette of its own.
+	let {
+		series,
+		width,
+		height,
+		pad = 8,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: Omit<SVGAttributes<SVGSVGElement>, 'class' | 'width' | 'height'> & {
+		series: Series[];
+		width: number;
+		height: number;
+		pad?: number;
+		ref?: SVGSVGElement | null;
+		class?: string;
+	} = $props();
+
+	function buildPaths(vals: number[], w: number, h: number, p: number) {
+		// A series with 0 or 1 points has no interval to spread across the
+		// width, and an all-zero series has no range to spread across the
+		// height — both zero denominators a real caller can legitimately hand
+		// in (a freshly-created lane, a metric that hasn't moved yet), so they
+		// degrade to a flat/empty render rather than emitting NaN coordinates
+		// into the path data.
+		const n = vals.length;
+		if (n === 0) {
+			return { line: '', area: '', lastX: p, lastY: h - p };
+		}
+		const max = Math.max(...vals) * 1.12 || 1;
+		const min = 0;
+		const xFn = (i: number) => (n === 1 ? p : p + (i / (n - 1)) * (w - 2 * p));
+		const yFn = (v: number) => h - p - ((v - min) / (max - min)) * (h - 2 * p);
+
+		let line = '';
+		vals.forEach((v, i) => {
+			const coord = `${xFn(i).toFixed(1)},${yFn(v).toFixed(1)}`;
+			line += (i ? 'L' : 'M') + coord + ' ';
+		});
+		const area =
+			line +
+			`L ${xFn(n - 1).toFixed(1)},${(h - p).toFixed(1)} L ${xFn(0).toFixed(1)},${(h - p).toFixed(1)} Z`;
+		const lastX = xFn(n - 1);
+		const lastY = yFn(vals[n - 1]);
+		return { line, area, lastX, lastY };
+	}
+
+	const gridLines = $derived.by(() => {
+		const lines: string[] = [];
+		for (let g = 1; g <= 3; g++) {
+			const yy = height - pad - (g / 4) * (height - 2 * pad);
+			lines.push(`M${pad},${yy.toFixed(1)} L${(width - pad).toFixed(1)},${yy.toFixed(1)}`);
+		}
+		return lines;
+	});
+
+	const paths = $derived(series.map((s) => ({ ...buildPaths(s.vals, width, height, pad), color: s.color })));
+</script>
+
+<svg
+	bind:this={ref}
+	viewBox="0 0 {width} {height}"
+	preserveAspectRatio="none"
+	style="display:block;width:100%;height:{height}px"
+	class={cn(className)}
+	{...restProps}
+>
+	{#each gridLines as d}
+		<path {d} stroke="var(--ds-color-border)" stroke-width="0.5" opacity="0.5" fill="none" />
+	{/each}
+	{#each paths as p}
+		<path d={p.area} fill={p.color} opacity="0.13" />
+		<path d={p.line} fill="none" stroke={p.color} stroke-width="1.8" stroke-linejoin="round" />
+		<circle cx={p.lastX.toFixed(1)} cy={p.lastY.toFixed(1)} r="2.4" fill={p.color} />
+	{/each}
+</svg>

package/dist/components/ui/sparkline/sparkline.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface Series {
+    vals: number[];
+    color: string;
+}
+import type { SVGAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<SVGAttributes<SVGSVGElement>, 'class' | 'width' | 'height'> & {
+    series: Series[];
+    width: number;
+    height: number;
+    pad?: number;
+    ref?: SVGSVGElement | null;
+    class?: string;
+};
+declare const Sparkline: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/components/ui/stat-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StatCard } from './stat-card.svelte';
+export { default } from './stat-card.svelte';

package/dist/components/ui/stat-card/index.js

@@ -0,0 +1,2 @@
+export { default as StatCard } from './stat-card.svelte';
+export { default } from './stat-card.svelte';

package/dist/components/ui/stat-card/stat-card.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Status } from '../status/index.js';
+	import type { Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	// A single metric, reserved for a figure that earns the space with real
+	// context. A bare integer belongs in a StatList.
+	let {
+		label,
+		value,
+		unit,
+		sub,
+		status,
+		valueTone,
+		icon: Icon,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		label: string;
+		value: string | number;
+		unit?: string;
+		sub?: string;
+		/** Lights the dot beside the LABEL: the state of the thing being measured. */
+		status?: Status;
+		/**
+		 * Colours the FIGURE itself: the sign of the number, not the health of its
+		 * source. They are different claims and a card often makes both — a feed
+		 * that is connected (`status="success"`) reporting a loss (`valueTone
+		 * "error"`).
+		 *
+		 * Without it, a negative P&L rendered in the default foreground with a
+		 * coloured dot beside the label, which is the wrong element carrying the
+		 * meaning: the eye goes to the figure, and the figure said nothing. Apps
+		 * were reaching for a local StatCard for exactly this.
+		 *
+		 * Colour is a refinement, never the message — the figure still carries its
+		 * own sign, so a reader who cannot tell the tones apart loses nothing
+		 * (WCAG 1.4.1).
+		 */
+		valueTone?: Status;
+		icon?: Component<{ class?: string }>;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('bg-card border-border ds-edge flex flex-col gap-1.5 rounded-lg border p-4', className)}
+	{...restProps}
+>
+	<div class="flex items-center gap-2">
+		{#if Icon}
+			<Icon class="text-muted-foreground size-4" />
+		{/if}
+		<span class="text-muted-foreground text-2xs tracking-eyebrow font-medium uppercase">
+			{label}
+		</span>
+		{#if status}
+			<span class="ds-dot ds-dot-{status} ml-auto"></span>
+		{/if}
+	</div>
+	<div class="flex items-baseline gap-1.5">
+		<span
+			class="ds-tabular text-display font-mono leading-none font-semibold {valueTone
+				? `ds-ink-${valueTone}`
+				: ''}"
+			data-tone={valueTone}>{value}</span
+		>
+		{#if unit}
+			<span class="text-muted-foreground text-sm">{unit}</span>
+		{/if}
+	</div>
+	{#if sub}
+		<p class="text-muted-foreground text-xs">{sub}</p>
+	{/if}
+</div>

package/dist/components/ui/stat-card/stat-card.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Status } from '../status/index.js';
+import type { Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    label: string;
+    value: string | number;
+    unit?: string;
+    sub?: string;
+    /** Lights the dot beside the LABEL: the state of the thing being measured. */
+    status?: Status;
+    /**
+     * Colours the FIGURE itself: the sign of the number, not the health of its
+     * source. They are different claims and a card often makes both — a feed
+     * that is connected (`status="success"`) reporting a loss (`valueTone
+     * "error"`).
+     *
+     * Without it, a negative P&L rendered in the default foreground with a
+     * coloured dot beside the label, which is the wrong element carrying the
+     * meaning: the eye goes to the figure, and the figure said nothing. Apps
+     * were reaching for a local StatCard for exactly this.
+     *
+     * Colour is a refinement, never the message — the figure still carries its
+     * own sign, so a reader who cannot tell the tones apart loses nothing
+     * (WCAG 1.4.1).
+     */
+    valueTone?: Status;
+    icon?: Component<{
+        class?: string;
+    }>;
+};
+declare const StatCard: Component<$$ComponentProps, {}, "ref">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/components/ui/stat-list/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StatList } from './stat-list.svelte';
+export { default } from './stat-list.svelte';
+export type { StatItem } from './stat-list.svelte';

package/dist/components/ui/stat-list/index.js

@@ -0,0 +1,2 @@
+export { default as StatList } from './stat-list.svelte';
+export { default } from './stat-list.svelte';

package/dist/components/ui/stat-list/stat-list.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import type { Status } from '../status/index.js';
+
+	export interface StatItem {
+		/** Uppercase eyebrow label. */
+		label: string;
+		/** The figure. Numbers render mono + tabular. */
+		value: string | number;
+		/** Optional status; shows a dot beside the value, unless muted. */
+		status?: Status;
+		/** Render quiet (e.g. a healthy zero): dims the value and suppresses the dot. */
+		muted?: boolean;
+		/** Optional small trailing unit/sub next to the value (e.g. "/ 1"). */
+		sub?: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../../utils.js';
+	import InfoTip from '../info-tip/info-tip.svelte';
+
+	// The standing metric card for the right-hand context column: a route's
+	// low-context integers stacked as a vertical label→value list inside one card,
+	// in place of a full-width metric band. One per route, titled identically, so
+	// the context column reads the same everywhere. Zero-aware: pass muted for a
+	// healthy zero so it stays quiet and a real non-zero stands out.
+	let {
+		items,
+		title = 'At a glance',
+		info,
+		class: klass = '',
+		ref = $bindable(null),
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		items: StatItem[];
+		title?: string;
+		info?: string;
+	} = $props();
+</script>
+
+<section
+	bind:this={ref}
+	class="bg-card border-border ds-edge flex shrink-0 flex-col overflow-hidden rounded-lg border {klass}"
+	{...restProps}
+>
+	<header class="border-border flex items-center gap-2 border-b px-4 py-3">
+		<h2 class="text-body leading-tight font-semibold tracking-tight">{title}</h2>
+		{#if info}
+			<InfoTip
+				text={info}
+				class="text-muted-foreground/50 hover:text-muted-foreground size-3.5 transition-colors"
+			/>
+		{/if}
+	</header>
+	<dl class="flex flex-col">
+		{#each items as item (item.label)}
+			<div
+				class="border-border/60 flex items-center justify-between gap-3 border-b px-4 py-2.5 last:border-0"
+			>
+				<dt class="text-muted-foreground text-2xs tracking-eyebrow font-medium uppercase">
+					{item.label}
+				</dt>
+				<dd class="flex items-center gap-1.5">
+					{#if item.status && !item.muted}
+						<span class="ds-dot ds-dot-{item.status}"></span>
+					{/if}
+					<span
+						class="ds-tabular text-stat font-mono leading-none font-semibold {item.muted
+							? 'text-muted-foreground/60'
+							: ''}">{item.value}</span
+					>
+					{#if item.sub}
+						<span class="text-muted-foreground text-xs">{item.sub}</span>
+					{/if}
+				</dd>
+			</div>
+		{/each}
+	</dl>
+</section>

package/dist/components/ui/stat-list/stat-list.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Status } from '../status/index.js';
+export interface StatItem {
+    /** Uppercase eyebrow label. */
+    label: string;
+    /** The figure. Numbers render mono + tabular. */
+    value: string | number;
+    /** Optional status; shows a dot beside the value, unless muted. */
+    status?: Status;
+    /** Render quiet (e.g. a healthy zero): dims the value and suppresses the dot. */
+    muted?: boolean;
+    /** Optional small trailing unit/sub next to the value (e.g. "/ 1"). */
+    sub?: string;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    items: StatItem[];
+    title?: string;
+    info?: string;
+};
+declare const StatList: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type StatList = ReturnType<typeof StatList>;
+export default StatList;

package/dist/components/ui/status/index.d.ts

@@ -0,0 +1 @@
+export type Status = 'success' | 'warning' | 'error' | 'info' | 'neutral';

package/dist/components/ui/status/index.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/status-badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StatusBadge } from './status-badge.svelte';
+export { default } from './status-badge.svelte';
+export type { Status } from '../status/index.js';

package/dist/components/ui/status-badge/index.js

@@ -0,0 +1,2 @@
+export { default as StatusBadge } from './status-badge.svelte';
+export { default } from './status-badge.svelte';

package/dist/components/ui/status-badge/status-badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Status } from '../status/index.js';
+	import { cn } from '../../../utils.js';
+
+	// The one state chip: a coloured dot plus a label on a tinted pill. Styling
+	// comes from .ds-chip / .ds-dot in @poodle64/ui/styles.css, so the whole app's
+	// status vocabulary changes in one place.
+	let {
+		status,
+		label,
+		pulse = false,
+		class: className
+	}: {
+		/**
+		 * The shared five-state Status vocabulary, plus `'primary'` — a
+		 * StatusBadge-only extension for brand-emphasis chips (not a health
+		 * state), backed by `.ds-chip-primary`/`.ds-dot-primary`. The shared
+		 * `Status` type itself stays closed at five states; StatCard, StatList
+		 * and DataTableToolbar never see `'primary'`.
+		 */
+		status: Status | 'primary';
+		label: string;
+		/**
+		 * Animate the dot, for a state that is still moving.
+		 *
+		 * The vocabulary is five settled states, and an app kept a local badge
+		 * purely because none of them says "in progress": a sync that is running
+		 * and a sync that has finished are both `info`, and the chip reads
+		 * identically. Motion is the axis that separates them, and it is the right
+		 * axis — it carries no colour meaning, so it composes with all five without
+		 * adding a sixth state to a vocabulary that is deliberately closed.
+		 *
+		 * Motion is honoured only where it is welcome: under
+		 * `prefers-reduced-motion: reduce` the dot goes still (`.ds-dot-pulse` in
+		 * styles.css). It is therefore never the only carrier of meaning — the
+		 * label still says what is happening (WCAG 1.4.1).
+		 */
+		pulse?: boolean;
+		/**
+		 * Extra classes on the chip. The same chip lands in a table cell, a card
+		 * header and a toolbar, and only the call site knows the alignment or
+		 * measure its row needs; without this an app wraps the chip in a
+		 * positioning div or keeps a local copy. Placement is the call site's;
+		 * colour and shape stay this package's.
+		 */
+		class?: string;
+	} = $props();
+</script>
+
+<span class={cn('ds-chip', `ds-chip-${status}`, className)}>
+	<span class={cn('ds-dot', `ds-dot-${status}`, pulse && 'ds-dot-pulse')}></span>
+	{label}
+</span>

package/dist/components/ui/status-badge/status-badge.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Status } from '../status/index.js';
+type $$ComponentProps = {
+    /**
+     * The shared five-state Status vocabulary, plus `'primary'` — a
+     * StatusBadge-only extension for brand-emphasis chips (not a health
+     * state), backed by `.ds-chip-primary`/`.ds-dot-primary`. The shared
+     * `Status` type itself stays closed at five states; StatCard, StatList
+     * and DataTableToolbar never see `'primary'`.
+     */
+    status: Status | 'primary';
+    label: string;
+    /**
+     * Animate the dot, for a state that is still moving.
+     *
+     * The vocabulary is five settled states, and an app kept a local badge
+     * purely because none of them says "in progress": a sync that is running
+     * and a sync that has finished are both `info`, and the chip reads
+     * identically. Motion is the axis that separates them, and it is the right
+     * axis — it carries no colour meaning, so it composes with all five without
+     * adding a sixth state to a vocabulary that is deliberately closed.
+     *
+     * Motion is honoured only where it is welcome: under
+     * `prefers-reduced-motion: reduce` the dot goes still (`.ds-dot-pulse` in
+     * styles.css). It is therefore never the only carrier of meaning — the
+     * label still says what is happening (WCAG 1.4.1).
+     */
+    pulse?: boolean;
+    /**
+     * Extra classes on the chip. The same chip lands in a table cell, a card
+     * header and a toolbar, and only the call site knows the alignment or
+     * measure its row needs; without this an app wraps the chip in a
+     * positioning div or keeps a local copy. Placement is the call site's;
+     * colour and shape stay this package's.
+     */
+    class?: string;
+};
+declare const StatusBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;

package/dist/components/ui/switch/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch };

package/dist/components/ui/switch/index.js

@@ -0,0 +1,4 @@
+import Root from './switch.svelte';
+export { Root, 
+//
+Root as Switch };

package/dist/components/ui/switch/switch.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<!--
+  Standard shadcn-svelte Switch, rem-based (h-5/w-9/border-2, thumb h-4/w-4/
+  translate-x-4) so it scales with the consuming app's root font-size instead
+  of a fixed pixel size. The thumb is darkened to dark:bg-foreground so the
+  ball stays light on the dark-first theme. The track colour comes from the
+  project tokens. An app with a non-standard root font-size (a dense console
+  running an 18px root, say) compensates in its own override layer, not here.
+-->
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	class={cn(
+		'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+		'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+		'disabled:cursor-not-allowed disabled:opacity-50',
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			'bg-background dark:bg-foreground pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform',
+			'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+		)}
+	/>
+</SwitchPrimitive.Root>

package/dist/components/ui/switch/switch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/ui/table/index.d.ts

@@ -0,0 +1,10 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow };
+export { TH_CLASS, TD_CLASS, TH_HIDDEN_UNTIL_XL } from './table-classes.js';

package/dist/components/ui/table/index.js

@@ -0,0 +1,12 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, 
+//
+Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow };
+export { TH_CLASS, TD_CLASS, TH_HIDDEN_UNTIL_XL } from './table-classes.js';

package/dist/components/ui/table/table-body.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn('[&_tr:last-child]:border-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>

package/dist/components/ui/table/table-body.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableBody: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/ui/table/table-caption.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn('text-muted-foreground mt-4 text-sm', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>

package/dist/components/ui/table/table-caption.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableCaption: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type TableCaption = ReturnType<typeof TableCaption>;
+export default TableCaption;

package/dist/components/ui/table/table-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLTdAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>

package/dist/components/ui/table/table-cell.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLTdAttributes } from 'svelte/elements';
+declare const TableCell: import("svelte").Component<WithElementRef<HTMLTdAttributes>, {}, "ref">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/components/ui/table/table-classes.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared class constants for the hand-rolled raw <table> idiom — the escape
+ * hatch for a small, static table that does not earn a full TanStack instance.
+ * Centralised here so routes don't re-type the strings and so a change to the
+ * header treatment reaches every app at once.
+ *
+ * For anything sortable, filterable or selectable, use DataTableTanstack
+ * (`@poodle64/ui/data-table-tanstack`) instead.
+ */
+/** Header cell. */
+export declare const TH_CLASS = "text-muted-foreground border-border border-b px-3 py-2 text-left text-2xs font-medium tracking-eyebrow uppercase";
+/** Body cell. */
+export declare const TD_CLASS = "px-3 py-2.5";
+/** Append to TH_CLASS for columns hidden below xl. */
+export declare const TH_HIDDEN_UNTIL_XL = "hidden xl:table-cell";

package/dist/components/ui/table/table-classes.js

@@ -0,0 +1,15 @@
+/**
+ * Shared class constants for the hand-rolled raw <table> idiom — the escape
+ * hatch for a small, static table that does not earn a full TanStack instance.
+ * Centralised here so routes don't re-type the strings and so a change to the
+ * header treatment reaches every app at once.
+ *
+ * For anything sortable, filterable or selectable, use DataTableTanstack
+ * (`@poodle64/ui/data-table-tanstack`) instead.
+ */
+/** Header cell. */
+export const TH_CLASS = 'text-muted-foreground border-border border-b px-3 py-2 text-left text-2xs font-medium tracking-eyebrow uppercase';
+/** Body cell. */
+export const TD_CLASS = 'px-3 py-2.5';
+/** Append to TH_CLASS for columns hidden below xl. */
+export const TH_HIDDEN_UNTIL_XL = 'hidden xl:table-cell';