@human-synthesis/norns-ui 0.0.11 → 0.2.0

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/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/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/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

@@ -0,0 +1,85 @@
+.table-root(class!="{rootClasses}")
+	DataTable(
+		columns!="{cols}"
+		rows!="{pageRows}"
+		striped!="{striped}"
+		dense!="{dense}"
+		stickyHeader!="{stickyHeader}"
+		emptyMessage!="{emptyMessage}"
+		onrowclick!="{onrowclick}"
+		cell!="{cell}"
+		empty!="{empty}"
+		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
+		cell = undefined
+		empty = undefined
+		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/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