@human-synthesis/norns-ui 0.0.11 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.0.11",
+	"version": "0.1.0",
 	"description": "UI library for the Norns ecosystem — Pug + Civet components on Tailwind v4.",
 	"license": "MIT",
 	"author": "Daniel Teodoroiu (https://humansynthesis.ai)",
@@ -29,12 +29,13 @@
 		"./styles/tokens": "./src/styles/tokens.css",
 		"./styles/atoms": "./src/styles/atoms.css",
 		"./components/*": "./src/components/*",
+		"./contracts": "./src/contracts.js",
 		"./motion": "./src/motion/index.js",
 		"./motion/*": "./src/motion/*",
 		"./package.json": "./package.json"
 	},
 	"peerDependencies": {
-		"@human-synthesis/norns": "^0.0.16",
+		"@human-synthesis/norns": "^0.1.0",
 		"@human-synthesis/norns-core": "^0.0.10",
 		"svelte": "^5.0.0",
 		"tailwindcss": "^4.0.0"
@@ -49,6 +50,7 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.6",
+		"valibot": "^1.4.0",
 		"@fontsource-variable/outfit": "^5.2.8",
 		"@iconify-json/lucide": "^1.2.105",
 		"@iconify/svelte": "^5.2.1",

package/src/auto-import.js

@@ -63,6 +63,7 @@ export function presetUI() {
 			Avatar: c('Avatar'),
 			Skeleton: c('Skeleton'),
 			Progress: c('Progress'),
+			Spinner: c('Spinner'),
 			ProgressCircular: c('ProgressCircular'),
 
 			// 0.0.4 — composite layer
@@ -106,6 +107,15 @@ export function presetUI() {
 			TimePicker: c('TimePicker'),
 			Calendar: c('Calendar'),
 			DataTable: c('DataTable'),
+			Table: c('Table'),
+
+			// U-03 — data views
+			Kanban: c('Kanban'),
+			Chart: c('Chart'),
+
+			// U-04 — data tier (Combobox is Autocomplete's ARIA name; same component)
+			Listbox: c('Listbox'),
+			Combobox: c('Autocomplete'),
 
 			// 0.0.5 — CSS-only motion components
 			AvatarGroup: c('AvatarGroup'),

package/src/components/Chart.n

@@ -0,0 +1,129 @@
+figure.chart-root(class!="{rootClasses}")
+	svg(viewBox!="{`0 0 ${W} ${H}`}" role="img" aria-label!="{label}" preserveAspectRatio="none")
+		line.chart-axis(x1!="{pad}" y1!="{H - pad}" x2!="{W - pad}" y2!="{H - pad}")
+		+if('type === "bar"')
+			+each('points as p (p.i)')
+				rect.chart-bar(
+					x!="{p.x - barW / 2}"
+					y!="{p.y}"
+					width!="{barW}"
+					height!="{H - pad - p.y}"
+				)
+		+if('type === "line" || type === "area"')
+			+if('type === "area"')
+				path.chart-area(d!="{areaPath}")
+			path.chart-line(d!="{linePath}")
+			+each('points as p (p.i)')
+				circle.chart-dot(cx!="{p.x}" cy!="{p.y}" r="2.5")
+	+if('showLabels')
+		.chart-labels
+			+each('points as p (p.i)')
+				span.chart-label {p.label}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		data = []
+		type = 'bar'
+		x = undefined
+		y = undefined
+		label = 'chart'
+		labels = true
+		class: extra = ''
+	} .= $props()
+
+	W := 600
+	H := 200
+	pad := 8
+
+	rootClasses := $derived cn('chart', `chart-${type}`, extra)
+
+	rows := $derived Array.isArray(data) ? data : []
+
+	xKey := $derived.by => {
+		return x if x
+		const first = rows[0] ?? {}
+		Object.keys(first).find((k) => typeof first[k] !== 'number') ?? Object.keys(first)[0]
+	}
+
+	yKey := $derived.by => {
+		return y if y
+		const first = rows[0] ?? {}
+		Object.keys(first).find((k) => typeof first[k] === 'number' && k !== xKey)
+	}
+
+	values := $derived rows.map((row) => Number(row?.[yKey]) || 0)
+	maxV := $derived Math.max(1, ...values)
+
+	points := $derived.by => {
+		const n = rows.length
+		return [] if n === 0
+		const span = W - pad * 2
+		const step = n > 1 ? span / (n - 1) : 0
+		rows.map (row, i) =>
+			const v = Number(row?.[yKey]) || 0
+			{
+				i
+				x: n > 1 ? pad + step * i : W / 2
+				y: H - pad - (v / maxV) * (H - pad * 2)
+				v
+				label: String(row?.[xKey] ?? i + 1)
+			}
+	}
+
+	barW := $derived.by => {
+		const n = Math.max(1, points.length)
+		Math.max(4, Math.min(48, ((W - pad * 2) / n) * 0.6))
+	}
+
+	linePath := $derived points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
+
+	areaPath := $derived.by => {
+		return '' if points.length === 0
+		const first = points[0]
+		const last = points[points.length - 1]
+		`${linePath} L${last.x},${H - pad} L${first.x},${H - pad} Z`
+	}
+
+	showLabels := $derived labels !== false && labels !== 'false' && points.length > 0
+</script>
+
+<style>
+	.chart-root {
+		display: grid;
+		gap: 0.25rem;
+		margin: 0;
+	}
+	svg {
+		width: 100%;
+		height: auto;
+		display: block;
+	}
+	.chart-axis {
+		stroke: var(--color-border, color-mix(in oklab, currentColor 20%, transparent));
+		stroke-width: 1;
+	}
+	.chart-bar {
+		fill: var(--color-accent, currentColor);
+		opacity: 0.85;
+	}
+	.chart-line {
+		fill: none;
+		stroke: var(--color-accent, currentColor);
+		stroke-width: 2;
+	}
+	.chart-area {
+		fill: var(--color-accent, currentColor);
+		opacity: 0.15;
+	}
+	.chart-dot {
+		fill: var(--color-accent, currentColor);
+	}
+	.chart-labels {
+		display: flex;
+		justify-content: space-between;
+		font-size: 0.6875rem;
+		opacity: 0.7;
+	}
+</style>

package/src/components/Kanban.n

@@ -0,0 +1,181 @@
+.kanban-root(class!="{rootClasses}")
+	+each('cols as col (col.key)')
+		section.kanban-column(
+			class!="{dropTarget === col.key ? 'kanban-column-active' : ''}"
+			ondragover!="{(e) => onDragOver(e, col.key)}"
+			ondragleave!="{() => onDragLeave(col.key)}"
+			ondrop!="{(e) => onDrop(e, col.key)}"
+		)
+			header.kanban-column-header
+				span.kanban-column-title {col.label}
+				span.kanban-column-count {col.cards.length}
+			.kanban-cards
+				+if('col.cards.length === 0')
+					.kanban-empty {emptyMessage}
+				+each('col.cards as card, i (cardId(card) ?? i)')
+					article.kanban-card(
+						draggable!="{movable}"
+						ondragstart!="{(e) => onDragStart(e, card, col.key)}"
+						onclick!="{oncardclick ? () => oncardclick(card) : undefined}"
+						class!="{oncardclick ? 'kanban-card-clickable' : ''}"
+					)
+						.kanban-card-title {titleOf(card)}
+						+if('subtitle && card[subtitle] != null')
+							.kanban-card-subtitle {card[subtitle]}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		data = {}
+		columns = undefined
+		title = undefined
+		subtitle = undefined
+		onMove = undefined
+		oncardclick = undefined
+		emptyMessage = 'No cards'
+		class: extra = ''
+	} .= $props()
+
+	// local overlay so a drop lands instantly; server truth wins on reload
+	moves .= $state({})
+
+	movable := $derived onMove !== undefined
+	rootClasses := $derived cn('kanban', extra)
+
+	labelOf := (key) => {
+		const spaced = String(key).replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+		return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+	}
+
+	cardId := (card) => card?.id ?? card?.key ?? undefined
+
+	titleOf := (card) => {
+		if title then return card?.[title]
+		card?.title ?? card?.subject ?? card?.name ?? cardId(card) ?? ''
+	}
+
+	grouped := $derived (data && typeof data === 'object' && !Array.isArray(data)) ? data : {}
+
+	keys := $derived.by => {
+		const source = columns ?? Object.keys(grouped)
+		return typeof source === 'string'
+			? source.split(',').map((s) => s.trim()).filter(Boolean)
+			: source
+	}
+
+	cols := $derived.by => {
+		const out = keys.map (key) =>
+			{ key, label: labelOf(key), cards: [] }
+		const byKey = new Map(out.map((c) => [c.key, c]))
+		for (const [key, cards] of Object.entries(grouped))
+			for (const card of Array.isArray(cards) ? cards : [])
+				const to = moves[cardId(card)] ?? key
+				byKey.get(to)?.cards.push(card)
+		out
+	}
+
+	dragged .= $state(undefined)
+	dropTarget .= $state(undefined)
+
+	onDragStart := (e, card, from) =>
+		dragged = { card, from }
+		e.dataTransfer?.setData('text/plain', String(cardId(card) ?? ''))
+		if e.dataTransfer then e.dataTransfer.effectAllowed = 'move'
+
+	onDragOver := (e, key) =>
+		return unless movable and dragged
+		e.preventDefault()
+		dropTarget = key
+
+	onDragLeave := (key) =>
+		if dropTarget === key then dropTarget = undefined
+
+	submitMove := (card, to) =>
+		if typeof onMove is 'function'
+			onMove(card, to)
+		else if typeof onMove is 'string'
+			// generated pages bind onMove to a "?/action" form-action URL; the
+			// action's input contract is strict, so only `id` goes over the wire —
+			// the transition itself is what the bound action means by "move"
+			const body = new FormData()
+			body.set('id', String(cardId(card) ?? ''))
+			fetch(onMove, { method: 'POST', body }).catch(=> undefined)
+
+	onDrop := (e, to) =>
+		dropTarget = undefined
+		return unless dragged
+		e.preventDefault()
+		{ card, from } := dragged
+		dragged = undefined
+		return if from === to
+		moves = { ...moves, [cardId(card)]: to }
+		submitMove(card, to)
+</script>
+
+<style>
+	.kanban-root {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(14rem, 1fr);
+		gap: var(--spacing-3, 0.75rem);
+		align-items: start;
+		overflow-x: auto;
+	}
+	.kanban-column {
+		background: var(--color-surface-2, color-mix(in oklab, currentColor 4%, transparent));
+		border-radius: var(--radius-lg, 0.5rem);
+		padding: var(--spacing-2, 0.5rem);
+		display: grid;
+		gap: var(--spacing-2, 0.5rem);
+	}
+	.kanban-column-active {
+		outline: 2px dashed var(--color-accent, currentColor);
+		outline-offset: -2px;
+	}
+	.kanban-column-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		padding-inline: var(--spacing-1, 0.25rem);
+	}
+	.kanban-column-count {
+		opacity: 0.6;
+		font-variant-numeric: tabular-nums;
+	}
+	.kanban-cards {
+		display: grid;
+		gap: var(--spacing-2, 0.5rem);
+		min-height: 2rem;
+	}
+	.kanban-card {
+		background: var(--color-surface, canvas);
+		border: 1px solid var(--color-border, color-mix(in oklab, currentColor 12%, transparent));
+		border-radius: var(--radius-md, 0.375rem);
+		padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+		display: grid;
+		gap: 0.125rem;
+	}
+	.kanban-card[draggable='true'] {
+		cursor: grab;
+	}
+	.kanban-card-clickable {
+		cursor: pointer;
+	}
+	.kanban-card-title {
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+	.kanban-card-subtitle {
+		font-size: 0.75rem;
+		opacity: 0.7;
+	}
+	.kanban-empty {
+		font-size: 0.75rem;
+		opacity: 0.6;
+		padding: var(--spacing-2, 0.5rem);
+		text-align: center;
+	}
+</style>

package/src/components/Listbox.n

@@ -0,0 +1,141 @@
+ul.listbox(
+	role="listbox"
+	tabindex="0"
+	aria-multiselectable!="{multiple ? 'true' : undefined}"
+	aria-activedescendant!="{items.length > 0 ? optionId(active) : undefined}"
+	aria-disabled!="{disabled ? 'true' : undefined}"
+	class!="{rootClasses}"
+	onkeydown!="{onKeyDown}"
+)
+	+if('normalized.length === 0')
+		li.listbox-empty {emptyMessage}
+	+each('normalized as item, i (item.value)')
+		li.listbox-option(
+			role="option"
+			id!="{optionId(i)}"
+			aria-selected!="{isSelected(item.value)}"
+			aria-disabled!="{item.disabled ? 'true' : undefined}"
+			data-active!="{i === active ? 'true' : undefined}"
+			onpointerdown!="{(e) => { e.preventDefault(); pick(item, i) }}"
+		)
+			Icon(name="lucide:check" size="size-3.5" class!="{isSelected(item.value) ? '' : 'opacity-0'}")
+			span {item.label}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		value = $bindable(undefined)
+		multiple = false
+		disabled = false
+		emptyMessage = 'No options'
+		onchange = undefined
+		class: extra = ''
+	} .= $props()
+
+	uid := Math.random().toString(36).slice(2, 8)
+	optionId := (i) => `listbox-${uid}-${i}`
+
+	normalized := $derived items.map (it) =>
+		typeof it === 'object' and it !== null ? it : { value: it, label: String(it) }
+
+	selected := $derived.by =>
+		return new Set(Array.isArray(value) ? value : []) if multiple
+		new Set(value === undefined ? [] : [value])
+
+	isSelected := (v) => selected.has(v)
+
+	active .= $state 0
+
+	pick := (item, i) =>
+		return if disabled or item.disabled
+		active = i
+		if multiple
+			current := Array.isArray(value) ? value : []
+			value = isSelected(item.value)
+				? current.filter (v) => v !== item.value
+				: [...current, item.value]
+		else
+			value = item.value
+		onchange?(value)
+
+	step := (delta) =>
+		return if normalized.length === 0
+		next .= active
+		loop
+			next = Math.min(normalized.length - 1, Math.max(0, next + delta))
+			break unless normalized[next]?.disabled and next > 0 and next < normalized.length - 1
+		active = next
+
+	onKeyDown := (e) =>
+		return if disabled
+		switch e.key
+			when 'ArrowDown'
+				e.preventDefault()
+				step 1
+			when 'ArrowUp'
+				e.preventDefault()
+				step -1
+			when 'Home'
+				e.preventDefault()
+				active = 0
+			when 'End'
+				e.preventDefault()
+				active = Math.max(0, normalized.length - 1)
+			when 'Enter', ' '
+				e.preventDefault()
+				item := normalized[active]
+				pick(item, active) if item
+
+	rootClasses := $derived cn('listbox-root', disabled && 'listbox-disabled', extra)
+</script>
+
+<style>
+	.listbox {
+		display: grid;
+		gap: 1px;
+		margin: 0;
+		padding: var(--spacing-1, 0.25rem);
+		list-style: none;
+		border: 1px solid var(--color-border, color-mix(in oklab, currentColor 12%, transparent));
+		border-radius: var(--radius-md, 0.375rem);
+		max-height: 16rem;
+		overflow-y: auto;
+	}
+	.listbox:focus-visible {
+		outline: 2px solid var(--color-accent, currentColor);
+		outline-offset: 1px;
+	}
+	.listbox-option {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2, 0.5rem);
+		padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+		border-radius: var(--radius-sm, 0.25rem);
+		font-size: 0.875rem;
+		cursor: pointer;
+		user-select: none;
+	}
+	.listbox-option[data-active='true'] {
+		background: color-mix(in oklab, currentColor 8%, transparent);
+	}
+	.listbox-option[aria-selected='true'] {
+		font-weight: 500;
+	}
+	.listbox-option[aria-disabled='true'] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	.listbox-disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+	.listbox-empty {
+		font-size: 0.8125rem;
+		opacity: 0.6;
+		padding: var(--spacing-2, 0.5rem);
+		text-align: center;
+	}
+</style>

package/src/components/Spinner.n

@@ -0,0 +1,13 @@
+span.ui-spinner(role="status" aria-label!="{label}" class!="{classes}")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		size = 'size-4'
+		label = 'Loading'
+		class: extra = ''
+	} .= $props()
+
+	classes := cn size, extra
+</script>

package/src/components/Table.n

@@ -0,0 +1,81 @@
+.table-root(class!="{rootClasses}")
+	DataTable(
+		columns!="{cols}"
+		rows!="{pageRows}"
+		striped!="{striped}"
+		dense!="{dense}"
+		stickyHeader!="{stickyHeader}"
+		emptyMessage!="{emptyMessage}"
+		onrowclick!="{onrowclick}"
+		bind:sortKey
+		bind:sortDir
+	)
+	+if('showFooter')
+		.table-footer
+			span.table-total {total} {total === 1 ? 'row' : 'rows'}
+			Pagination(bind:page total!="{total}" pageSize!="{size}")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import DataTable from './DataTable.n'
+	import Pagination from './Pagination.n'
+
+	{
+		data = []
+		columns = undefined
+		pageSize = 20
+		striped = false
+		dense = false
+		stickyHeader = false
+		emptyMessage = 'No data'
+		onrowclick
+		class: extra = ''
+	} .= $props()
+
+	sortKey .= $state(undefined)
+	sortDir .= $state('asc')
+	page .= $state(1)
+
+	rows := $derived Array.isArray(data) ? data : []
+	size := $derived Math.max(0, Number(pageSize) || 0)
+
+	labelOf := (key) => {
+		const spaced = String(key).replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+		return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+	}
+
+	cols := $derived.by => {
+		const source = columns ?? Object.keys(rows[0] ?? {})
+		const list = typeof source === 'string'
+			? source.split(',').map((s) => s.trim()).filter(Boolean)
+			: source
+		return list.map((col) =>
+			typeof col === 'string'
+				? { key: col, label: labelOf(col), sortable: true }
+				: { sortable: true, ...col }
+		)
+	}
+
+	sorted := $derived.by => {
+		if (!sortKey) return rows
+		const key = sortKey
+		const dir = sortDir === 'desc' ? -1 : 1
+		return [...rows].sort((a, b) => {
+			const x = a?.[key]
+			const y = b?.[key]
+			if (x === y) return 0
+			const base = typeof x === 'number' && typeof y === 'number'
+				? x - y
+				: String(x ?? '').localeCompare(String(y ?? ''))
+			return dir * (base > 0 ? 1 : base < 0 ? -1 : 0)
+		})
+	}
+
+	total := $derived sorted.length
+	totalPages := $derived size > 0 ? Math.max(1, Math.ceil(total / size)) : 1
+	current := $derived Math.min(page, totalPages)
+	pageRows := $derived size > 0 ? sorted.slice((current - 1) * size, current * size) : sorted
+	showFooter := $derived size > 0 && total > size
+
+	rootClasses := $derived cn(extra)
+</script>

package/src/contracts.js

@@ -0,0 +1,137 @@
+/**
+ * Valibot props contracts for the palette components a generated Page can
+ * bind (U-02). The norns generator validates each page `components:` entry
+ * against these before emitting, so a bad binding is a structured refusal
+ * at generate time instead of a runtime surprise.
+ *
+ * A contract describes the *normalized spec entry*: the entry's first key
+ * (the component slot) is renamed to `data` when it binds a Query and to
+ * `action` when it binds an Action, matching the prop the emitter actually
+ * passes. Values are what TRON specs can hold: unit addresses for Query/
+ * Action bindings, scalars for everything else. Snippet/function props are
+ * not spec-bindable and are deliberately absent.
+ *
+ * Components without a contract here are not refused — they may be custom
+ * `.n` components, which carry their own Component-unit contract.
+ */
+
+import * as v from 'valibot';
+
+const NAME = '[A-Za-z_][A-Za-z0-9_]*';
+export const QUERY_ADDRESS = new RegExp(`^${NAME}\\.Query\\.${NAME}$`);
+export const ACTION_ADDRESS = new RegExp(`^${NAME}\\.Action\\.${NAME}$`);
+
+export const query = () =>
+	v.pipe(v.string(), v.regex(QUERY_ADDRESS, 'expected a Query address (module.Query.name)'));
+
+export const action = () =>
+	v.pipe(v.string(), v.regex(ACTION_ADDRESS, 'expected an Action address (module.Action.name)'));
+
+/** A pass-through prop value — string/number/boolean literal from the spec. */
+export const literal = () => v.union([v.string(), v.number(), v.boolean()]);
+
+const opt = (schema) => v.optional(schema);
+
+export const contracts = {
+	Table: v.strictObject({
+		data: query(),
+		columns: opt(literal()),
+		pageSize: opt(literal()),
+		striped: opt(literal()),
+		dense: opt(literal()),
+		stickyHeader: opt(literal()),
+		emptyMessage: opt(literal()),
+		class: opt(literal())
+	}),
+	DataTable: v.strictObject({
+		data: query(),
+		columns: opt(literal()),
+		striped: opt(literal()),
+		dense: opt(literal()),
+		stickyHeader: opt(literal()),
+		emptyMessage: opt(literal()),
+		sortKey: opt(literal()),
+		sortDir: opt(literal()),
+		class: opt(literal())
+	}),
+	Kanban: v.strictObject({
+		data: query(),
+		onMove: opt(action()),
+		columns: opt(literal()),
+		title: opt(literal()),
+		subtitle: opt(literal()),
+		emptyMessage: opt(literal()),
+		class: opt(literal())
+	}),
+	Chart: v.strictObject({
+		data: query(),
+		type: opt(literal()),
+		x: opt(literal()),
+		y: opt(literal()),
+		label: opt(literal()),
+		labels: opt(literal()),
+		class: opt(literal())
+	}),
+	Form: v.strictObject({
+		action: action(),
+		method: opt(literal()),
+		enctype: opt(literal()),
+		class: opt(literal())
+	}),
+	Field: v.strictObject({
+		label: opt(literal()),
+		help: opt(literal()),
+		error: opt(literal()),
+		name: opt(literal()),
+		required: opt(literal()),
+		id: opt(literal()),
+		class: opt(literal())
+	}),
+	Input: v.strictObject({
+		name: opt(literal()),
+		type: opt(literal()),
+		value: opt(literal()),
+		placeholder: opt(literal()),
+		required: opt(literal()),
+		size: opt(literal()),
+		class: opt(literal())
+	}),
+	Select: v.strictObject({
+		name: opt(literal()),
+		value: opt(literal()),
+		required: opt(literal()),
+		class: opt(literal())
+	}),
+	Btn: v.strictObject({
+		variant: opt(literal()),
+		size: opt(literal()),
+		type: opt(literal()),
+		icon: opt(literal()),
+		href: opt(literal()),
+		disabled: opt(literal()),
+		class: opt(literal())
+	}),
+	Card: v.strictObject({
+		padded: opt(literal()),
+		interactive: opt(literal()),
+		href: opt(literal()),
+		class: opt(literal())
+	}),
+	Badge: v.strictObject({
+		variant: opt(literal()),
+		size: opt(literal()),
+		class: opt(literal())
+	}),
+	Banner: v.strictObject({
+		variant: opt(literal()),
+		icon: opt(literal()),
+		class: opt(literal())
+	}),
+	Pagination: v.strictObject({
+		page: opt(literal()),
+		total: opt(literal()),
+		pageSize: opt(literal()),
+		siblingCount: opt(literal()),
+		class: opt(literal())
+	})
+};

package/src/index.js

@@ -83,6 +83,7 @@ export { default as DateRangePicker } from './components/DateRangePicker.n';
 export { default as TimePicker } from './components/TimePicker.n';
 export { default as Calendar } from './components/Calendar.n';
 export { default as DataTable } from './components/DataTable.n';
+export { default as Table } from './components/Table.n';
 
 // 0.0.5 — CSS-only motion components
 export { default as AvatarGroup } from './components/AvatarGroup.n';
@@ -98,3 +99,4 @@ export { cn } from './lib/cn.js';
 export { variantClasses } from './lib/variants.js';
 export { presetUI } from './auto-import.js';
 export { toast, notify, dismiss, clear } from './lib/toast.svelte.js';
+export { contracts } from './contracts.js';

package/src/styles/atoms.css

@@ -1604,6 +1604,14 @@
 	}
 	.data-table-sort:hover { color: var(--color-primary-600); }
 
+	/* Table — paginated wrapper around DataTable */
+	.table-root { @apply flex w-full flex-col gap-3; }
+	.table-footer { @apply flex items-center justify-between gap-3; }
+	.table-total {
+		@apply text-xs;
+		color: var(--color-fg-muted);
+	}
+
 	/* ============================================================ */
 	/* Tree                                                         */
 	/* ============================================================ */

package/src/types/Table.d.ts

@@ -0,0 +1,25 @@
+import type { Component } from 'svelte';
+import type { DataTableColumn } from './DataTable.js';
+
+export type TableColumn = DataTableColumn;
+
+export type TableProps = {
+	/** Rows to render — typically a generated Query result bound by a Page spec. */
+	data?: Record<string, unknown>[];
+	/**
+	 * Columns: array of keys/column objects, or a comma-separated key string
+	 * (the form spec literals arrive in). Defaults to the first row's keys.
+	 */
+	columns?: string | Array<string | TableColumn>;
+	/** Client-side page size. 0 disables pagination. Accepts numeric strings. */
+	pageSize?: number | string;
+	striped?: boolean;
+	dense?: boolean;
+	stickyHeader?: boolean;
+	emptyMessage?: string;
+	onrowclick?: (row: Record<string, unknown>, index: number) => void;
+	class?: string;
+};
+
+declare const Table: Component<TableProps>;
+export default Table;