@human-synthesis/norns-ui 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.1.0",
+	"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"
 	},
@@ -30,12 +31,13 @@
 		"./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.1.0",
+		"@human-synthesis/norns": "^0.2.0",
 		"@human-synthesis/norns-core": "^0.0.10",
 		"svelte": "^5.0.0",
 		"tailwindcss": "^4.0.0"

package/src/auto-import.js

@@ -123,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/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

@@ -11,7 +11,11 @@
 				span.kanban-column-count {col.cards.length}
 			.kanban-cards
 				+if('col.cards.length === 0')
-					.kanban-empty {emptyMessage}
+					.kanban-empty
+						+if('empty')
+							| {@render empty()}
+						+if('!empty')
+							| {emptyMessage}
 				+each('col.cards as card, i (cardId(card) ?? i)')
 					article.kanban-card(
 						draggable!="{movable}"
@@ -19,12 +23,16 @@
 						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]}
+						+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 = {}
@@ -34,11 +42,13 @@
 		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 .= $state({})
+	moves := optimisticOverlay()
 
 	movable := $derived onMove !== undefined
 	rootClasses := $derived cn('kanban', extra)
@@ -70,7 +80,7 @@
 		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
+				const to = moves.get(cardId(card), key)
 				byKey.get(to)?.cards.push(card)
 		out
 	}
@@ -109,7 +119,7 @@
 		{ card, from } := dragged
 		dragged = undefined
 		return if from === to
-		moves = { ...moves, [cardId(card)]: to }
+		moves.set(cardId(card), to)
 		submitMove(card, to)
 </script>
 

package/src/components/LiveLog.n

@@ -0,0 +1,64 @@
+pre.live-log(class!="{classes}" bind:this!="{el}" aria-live="polite")
+	| {lines.join('\n')}
+
+<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 = '*'
+		maxLines = 200
+		class: extra = ''
+	} .= $props()
+
+	lines .= $state([])
+	el .= $state(undefined)
+
+	classes := $derived cn('live-log', extra)
+
+	append := (frame) =>
+		line := typeof frame === 'string' ? frame : JSON.stringify(frame)
+		lines = [...lines, line].slice(-Math.max(1, Number(maxLines) || 200))
+
+	$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
+
+	$effect =>
+		lines
+		el?.scrollTo?.(0, el.scrollHeight)
+		return
+</script>
+
+<style>
+	.live-log {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+		line-height: 1.5;
+		max-height: 20rem;
+		overflow-y: auto;
+		margin: 0;
+		padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-surface-2, color-mix(in oklab, currentColor 5%, transparent));
+	}
+</style>

package/src/components/PresenceAvatars.n

@@ -0,0 +1,45 @@
+.presence-avatars(class!="{classes}" role="status" aria-label!="{`${clients} ${label}`}")
+	AvatarGroup(items!="{people}" max!="{max}" size!="{size}" label!="{label}")
+	+if('showCount')
+		span.presence-avatars-count {clients} {label}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { roomChannel as openRoom } from '@human-synthesis/norns/live-client'
+	import AvatarGroup from './AvatarGroup.n'
+
+	{
+		roomChannel = undefined
+		max = 5
+		size = 'sm'
+		label = 'online'
+		showCount = true
+		class: extra = ''
+	} .= $props()
+
+	clients .= $state(0)
+
+	classes := $derived cn('presence-avatars', extra)
+	people := $derived Array.from({ length: Math.min(clients, Number(max) || 5) }, (_, i) => ({ name: `Guest ${i + 1}` }))
+
+	$effect =>
+		return unless roomChannel
+		ch := openRoom(roomChannel)
+		off := ch.on('presence', (frame) => clients = Number(frame?.clients) || 0)
+		=>
+			off()
+			ch.close()
+</script>
+
+<style>
+	.presence-avatars {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2, 0.5rem);
+	}
+	.presence-avatars-count {
+		font-size: 0.8125rem;
+		opacity: 0.7;
+		font-variant-numeric: tabular-nums;
+	}
+</style>

package/src/components/StreamText.n

@@ -0,0 +1,64 @@
+.stream-text(class!="{classes}" aria-live="polite" aria-busy!="{streaming}")
+	| {text}
+	+if('streaming')
+		span.stream-text-cursor(aria-hidden="true")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { streamSource as openStream } from '@human-synthesis/norns/live-client'
+
+	{
+		streamSource = undefined
+		input = undefined
+		autostart = true
+		onframe = undefined
+		ondone = undefined
+		class: extra = ''
+	} .= $props()
+
+	text .= $state('')
+	streaming .= $state(false)
+
+	classes := $derived cn('stream-text', extra)
+
+	start := async (override) =>
+		return unless streamSource
+		return if streaming
+		text = ''
+		streaming = true
+		body := override ?? input
+		try
+			opts := body === undefined ? {} : { input: body }
+			for await (const frame of openStream(streamSource, opts))
+				delta := typeof frame === 'string' ? frame : (frame?.delta ?? '')
+				text += delta
+				onframe?.(frame)
+		finally
+			streaming = false
+			ondone?.(text)
+
+	$effect =>
+		start() if autostart
+		return
+</script>
+
+<style>
+	.stream-text {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+	.stream-text-cursor {
+		display: inline-block;
+		width: 0.55ch;
+		height: 1em;
+		margin-left: 0.15ch;
+		vertical-align: text-bottom;
+		background: currentColor;
+		animation: stream-text-blink 1s steps(2, start) infinite;
+	}
+	@keyframes stream-text-blink {
+		to {
+			visibility: hidden;
+		}
+	}
+</style>

package/src/components/Table.n

@@ -7,6 +7,8 @@
 		stickyHeader!="{stickyHeader}"
 		emptyMessage!="{emptyMessage}"
 		onrowclick!="{onrowclick}"
+		cell!="{cell}"
+		empty!="{empty}"
 		bind:sortKey
 		bind:sortDir
 	)
@@ -29,6 +31,8 @@
 		stickyHeader = false
 		emptyMessage = 'No data'
 		onrowclick
+		cell = undefined
+		empty = undefined
 		class: extra = ''
 	} .= $props()
 

package/src/components/Timeline.n

@@ -1,10 +1,10 @@
 ol(class!="{classes}")
-	+each('items as item, i')
+	+each('list as item, i')
 		li.timeline-item
 			.timeline-dot(class!="{item.variant ? `timeline-dot-${item.variant}` : ''}")
 				+if('item.icon')
 					Icon(name!="{item.icon}" size="size-3")
-			+if('i < items.length - 1')
+			+if('i < list.length - 1')
 				.timeline-line
 			.timeline-body
 				+if('item.time')
@@ -19,9 +19,11 @@ ol(class!="{classes}")
 	import Icon from './Icon.n'
 
 	{
-		items = []
+		items = undefined
+		data = undefined
 		class: extra = ''
 	} := $props()
 
+	list := items ?? data ?? []
 	classes := cn 'timeline', extra
 </script>

package/src/components/Tree.n

@@ -1,5 +1,5 @@
 ul.tree(class!="{classes}" role="tree")
-	+each('items as node')
+	+each('list as node')
 		| {@render renderNode(node, 0)}
 
 +snippet('renderNode', node, depth)
@@ -33,12 +33,14 @@ ul.tree(class!="{classes}" role="tree")
 	import Icon from './Icon.n'
 
 	{
-		items = []
+		items = undefined
+		data = undefined
 		expanded = $bindable([])
 		selected = $bindable(undefined)
 		class: extra = ''
 	} .= $props()
 
+	list := items ?? data ?? []
 	classes := cn 'tree', extra
 
 	hasChildren := (node) => Array.isArray(node.children) && node.children.length > 0