@human-synthesis/norns-ui 0.0.11 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.0.11",
+	"version": "0.2.0",
 	"description": "UI library for the Norns ecosystem — Pug + Civet components on Tailwind v4.",
 	"license": "MIT",
 	"author": "Daniel Teodoroiu (https://humansynthesis.ai)",
@@ -15,6 +15,7 @@
 	],
 	"scripts": {
 		"test": "bun test",
+		"build:manifest": "bun scripts/build-manifest.mjs",
 		"check:shims": "bun scripts/check-shims.mjs",
 		"check:shims:strict": "bun scripts/check-shims.mjs --strict"
 	},
@@ -29,12 +30,14 @@
 		"./styles/tokens": "./src/styles/tokens.css",
 		"./styles/atoms": "./src/styles/atoms.css",
 		"./components/*": "./src/components/*",
+		"./contracts": "./src/contracts.js",
+		"./manifest": "./src/palette-manifest.json",
 		"./motion": "./src/motion/index.js",
 		"./motion/*": "./src/motion/*",
 		"./package.json": "./package.json"
 	},
 	"peerDependencies": {
-		"@human-synthesis/norns": "^0.0.16",
+		"@human-synthesis/norns": "^0.2.0",
 		"@human-synthesis/norns-core": "^0.0.10",
 		"svelte": "^5.0.0",
 		"tailwindcss": "^4.0.0"
@@ -49,6 +52,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'),
@@ -113,7 +123,14 @@ export function presetUI() {
 			CopyButton: c('CopyButton'),
 			ThemeToggler: c('ThemeToggler'),
 			ShinyButton: c('ShinyButton'),
-			RippleButton: c('RippleButton')
+			RippleButton: c('RippleButton'),
+
+			// U-09 — realtime tier
+			StreamText: c('StreamText'),
+			ChatThread: c('ChatThread'),
+			Feed: c('Feed'),
+			PresenceAvatars: c('PresenceAvatars'),
+			LiveLog: c('LiveLog')
 			// Motion-driven components live in `@human-synthesis/norns-ui/motion`
 			// and are NOT registered here (opt-in import only).
 		},

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/ChatThread.n

@@ -0,0 +1,97 @@
+.chat-thread(class!="{classes}")
+	ul.chat-thread-list
+		+if('messages.length === 0')
+			li.chat-thread-empty {emptyMessage}
+		+each('messages as msg')
+			li.chat-thread-msg(class!="{msg.self ? 'chat-thread-msg-self' : ''}")
+				+if('message')
+					| {@render message(msg)}
+				+if('!message')
+					+if('msg.from')
+						span.chat-thread-from {msg.from}
+					span.chat-thread-text {msg.text}
+	form.chat-thread-composer(onsubmit!="{submit}")
+		input.input.chat-thread-input(bind:value!="{draft}" placeholder!="{placeholder}")
+		button.btn.btn-primary(type="submit" disabled!="{draft.trim() === ''}") {sendLabel}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { roomChannel as openRoom } from '@human-synthesis/norns/live-client'
+
+	{
+		roomChannel = undefined
+		send = 'chat'
+		receive = undefined
+		placeholder = 'Message'
+		sendLabel = 'Send'
+		emptyMessage = 'No messages yet'
+		message = undefined
+		class: extra = ''
+	} .= $props()
+
+	messages .= $state([])
+	draft .= $state('')
+	channel .= $state(undefined)
+
+	classes := $derived cn('chat-thread', extra)
+
+	$effect =>
+		return unless roomChannel
+		ch := openRoom(roomChannel)
+		channel = ch
+		off := ch.on(receive ?? send, (frame) => messages = [...messages, frame])
+		=>
+			off()
+			ch.close()
+			channel = undefined
+
+	submit := (e) =>
+		e.preventDefault()
+		body := draft.trim()
+		return unless body and channel
+		channel.send(send, { text: body })
+		messages = [...messages, { text: body, self: true }]
+		draft = ''
+</script>
+
+<style>
+	.chat-thread {
+		display: grid;
+		gap: var(--spacing-2, 0.5rem);
+	}
+	.chat-thread-list {
+		display: grid;
+		gap: var(--spacing-1, 0.25rem);
+		max-height: 24rem;
+		overflow-y: auto;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.chat-thread-empty {
+		opacity: 0.6;
+		font-size: 0.875rem;
+	}
+	.chat-thread-msg {
+		display: flex;
+		gap: var(--spacing-2, 0.5rem);
+		align-items: baseline;
+		padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-surface-2, color-mix(in oklab, currentColor 4%, transparent));
+	}
+	.chat-thread-msg-self {
+		background: color-mix(in oklab, var(--color-primary-500, currentColor) 12%, transparent);
+	}
+	.chat-thread-from {
+		font-weight: 600;
+		font-size: 0.8125rem;
+	}
+	.chat-thread-composer {
+		display: flex;
+		gap: var(--spacing-2, 0.5rem);
+	}
+	.chat-thread-input {
+		flex: 1;
+	}
+</style>

package/src/components/DataTable.n

@@ -17,12 +17,18 @@
 			+if('rows.length === 0')
 				tr.data-table-empty
 					td(colspan!="{columns.length}")
-						| {emptyMessage}
+						+if('empty')
+							| {@render empty()}
+						+if('!empty')
+							| {emptyMessage}
 			+each('rows as row, i')
 				tr(onclick!="{onrowclick ? () => onrowclick(row, i) : undefined}" class!="{onrowclick ? 'data-table-row-clickable' : ''}")
 					+each('columns as col')
 						td(class!="{col.cellClass ?? ''}")
-							| {row[col.key]}
+							+if('cell')
+								| {@render cell(row, col.key, row[col.key])}
+							+if('!cell')
+								| {row[col.key]}
 
 <script>
 	import { cn } from '@human-synthesis/norns-ui/cn'
@@ -38,6 +44,8 @@
 		sortKey = $bindable(undefined)
 		sortDir = $bindable('asc')
 		onrowclick
+		cell = undefined
+		empty = undefined
 		class: extra = ''
 	} .= $props()
 

package/src/components/Feed.n

@@ -0,0 +1,71 @@
+ul.feed(class!="{classes}" aria-live="polite")
+	+if('entries.length === 0')
+		li.feed-empty {emptyMessage}
+	+each('entries as it')
+		li.feed-item
+			+if('item')
+				| {@render item(it)}
+			+if('!item')
+				| {typeof it === 'string' ? it : (it.text ?? JSON.stringify(it))}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { streamSource as openStream, roomChannel as openRoom } from '@human-synthesis/norns/live-client'
+
+	{
+		streamSource = undefined
+		roomChannel = undefined
+		receive = '*'
+		max = 100
+		emptyMessage = 'Nothing yet'
+		item = undefined
+		class: extra = ''
+	} .= $props()
+
+	entries .= $state([])
+
+	classes := $derived cn('feed', extra)
+
+	append := (frame) =>
+		entries = [...entries, frame].slice(-Math.max(1, Number(max) || 100))
+
+	$effect =>
+		return unless roomChannel
+		ch := openRoom(roomChannel)
+		off := ch.on(receive, append)
+		=>
+			off()
+			ch.close()
+
+	$effect =>
+		return unless streamSource
+		let stopped = false
+		(async =>
+			try
+				for await (const frame of openStream(streamSource))
+					return if stopped
+					append(frame)
+			catch
+				return
+		)()
+		=> stopped = true
+</script>
+
+<style>
+	.feed {
+		display: grid;
+		gap: var(--spacing-1, 0.25rem);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.feed-empty {
+		opacity: 0.6;
+		font-size: 0.875rem;
+	}
+	.feed-item {
+		padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-surface-2, color-mix(in oklab, currentColor 4%, transparent));
+	}
+</style>

package/src/components/Kanban.n

@@ -0,0 +1,191 @@
+.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
+						+if('empty')
+							| {@render empty()}
+						+if('!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' : ''}"
+					)
+						+if('renderCard')
+							| {@render renderCard(card)}
+						+if('!renderCard')
+							.kanban-card-title {titleOf(card)}
+							+if('subtitle && card[subtitle] != null')
+								.kanban-card-subtitle {card[subtitle]}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { optimisticOverlay } from '@human-synthesis/norns-ui/behaviors/optimistic.svelte.js'
+
+	{
+		data = {}
+		columns = undefined
+		title = undefined
+		subtitle = undefined
+		onMove = undefined
+		oncardclick = undefined
+		emptyMessage = 'No cards'
+		card: renderCard = undefined
+		empty = undefined
+		class: extra = ''
+	} .= $props()
+
+	// local overlay so a drop lands instantly; server truth wins on reload
+	moves := optimisticOverlay()
+
+	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.get(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.set(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>