@human-synthesis/norns-ui 0.0.5 → 0.0.7

package/src/components/TimePicker.n

@@ -1,71 +1,59 @@
-PopoverRoot(bind:open)
-	PopoverTrigger.input.date-picker-trigger(
-		type="button"
-		disabled!="{disabled}"
-		id!="{resolvedId}"
-		aria-label!="{label ?? 'Pick a time'}"
-		class!="{hasError ? 'input-err' : ''}"
-	)
-		Icon(name="lucide:clock" size="size-4" class="text-fg-muted shrink-0")
-		span.flex-1.text-left.font-mono.tabular-nums
-			| {value || placeholder}
-		Icon(name="lucide:chevron-down" size="size-3.5" class="text-fg-muted shrink-0")
-	PopoverPortal
-		PopoverContent.popover-content(
-			class="p-2 time-picker-popover"
-			onOpenAutoFocus!="{(e) => e.preventDefault()}"
-			onCloseAutoFocus!="{(e) => e.preventDefault()}"
+Popover(bind:open class="p-2 time-picker-popover")
+	+snippet('trigger')
+		button.input.date-picker-trigger(
+			type="button"
+			disabled!="{disabled}"
+			id!="{resolvedId}"
+			aria-label!="{label ?? 'Pick a time'}"
+			class!="{hasError ? 'input-err' : ''}"
 		)
-			.time-picker-grid
-				.time-picker-col(role="listbox" aria-label="Hour" bind:this!="{hourCol}")
-					+each('hours as h')
-						button.time-picker-cell(
-							type="button"
-							class!="{h === currentHour ? 'time-picker-cell-selected' : ''}"
-							onclick!="{() => setHour(h)}"
-							data-time-h!="{h}"
-						)
-							| {pad(h)}
-				.time-picker-sep :
-				.time-picker-col(role="listbox" aria-label="Minute" bind:this!="{minuteCol}")
-					+each('minutes as m')
-						button.time-picker-cell(
-							type="button"
-							class!="{m === currentMinute ? 'time-picker-cell-selected' : ''}"
-							onclick!="{() => setMinute(m)}"
-							data-time-m!="{m}"
-						)
-							| {pad(m)}
-				+if('hourCycle === 12')
-					.time-picker-col(role="listbox" aria-label="AM/PM")
-						button.time-picker-cell(
-							type="button"
-							class!="{period === 'AM' ? 'time-picker-cell-selected' : ''}"
-							onclick!="{() => setPeriod('AM')}"
-						)
-							| AM
-						button.time-picker-cell(
-							type="button"
-							class!="{period === 'PM' ? 'time-picker-cell-selected' : ''}"
-							onclick!="{() => setPeriod('PM')}"
-						)
-							| PM
-			.flex.justify-between.gap-2.mt-2.pt-2(class="border-t border-border")
-				button.btn.btn-ghost.btn-sm(type="button" onclick!="{clearValue}") Clear
-				button.btn.btn-primary.btn-sm(type="button" onclick!="{() => open = false}") Done
+			Icon(name="lucide:clock" size="size-4" class="text-fg-muted shrink-0")
+			span.flex-1.text-left.font-mono.tabular-nums
+				| {value || placeholder}
+			Icon(name="lucide:chevron-down" size="size-3.5" class="text-fg-muted shrink-0")
+	.time-picker-grid
+		.time-picker-col(role="listbox" aria-label="Hour" bind:this!="{hourCol}")
+			+each('hours as h')
+				button.time-picker-cell(
+					type="button"
+					class!="{h === currentHour ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setHour(h)}"
+					data-time-h!="{h}"
+				)
+					| {pad(h)}
+		.time-picker-sep :
+		.time-picker-col(role="listbox" aria-label="Minute" bind:this!="{minuteCol}")
+			+each('minutes as m')
+				button.time-picker-cell(
+					type="button"
+					class!="{m === currentMinute ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setMinute(m)}"
+					data-time-m!="{m}"
+				)
+					| {pad(m)}
+		+if('hourCycle === 12')
+			.time-picker-col(role="listbox" aria-label="AM/PM")
+				button.time-picker-cell(
+					type="button"
+					class!="{period === 'AM' ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setPeriod('AM')}"
+				)
+					| AM
+				button.time-picker-cell(
+					type="button"
+					class!="{period === 'PM' ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setPeriod('PM')}"
+				)
+					| PM
+	.flex.justify-between.gap-2.mt-2.pt-2(class="border-t border-border")
+		button.btn.btn-ghost.btn-sm(type="button" onclick!="{clearValue}") Clear
+		button.btn.btn-primary.btn-sm(type="button" onclick!="{() => open = false}") Done
 
 <script>
-	import { Popover } from 'bits-ui'
 	import { getContext } from 'svelte'
+	import Popover from './Popover.n'
 	import Icon from './Icon.n'
 
-	{
-		Root: PopoverRoot
-		Trigger: PopoverTrigger
-		Portal: PopoverPortal
-		Content: PopoverContent
-	} := Popover
-
 	{
 		value = $bindable('')
 		open = $bindable(false)
@@ -151,16 +139,15 @@ PopoverRoot(bind:open)
 	hourCol .= $state null
 	minuteCol .= $state null
 
-	// When the popover opens, scroll each column to its currently-selected cell.
 	$effect =>
 		return unless open && (hourCol || minuteCol)
 		queueMicrotask =>
 			scrollSelected hourCol, currentHour, 'data-time-h'
 			scrollSelected minuteCol, currentMinute, 'data-time-m'
 
-	scrollSelected := (col, value, attr) =>
+	scrollSelected := (col, val, attr) =>
 		return unless col
-		target := col.querySelector `[${attr}="${value}"]`
+		target := col.querySelector `[${attr}="${val}"]`
 		return unless target
 		col.scrollTop = target.offsetTop - col.clientHeight / 2 + target.clientHeight / 2
 </script>

package/src/components/ToggleButton.n

@@ -1,29 +1,35 @@
-ToggleRoot(bind:pressed class!="{classes}" disabled!="{disabled}" onPressedChange!="{onpressedchange}")
+button(
+	type="button"
+	class!="{classes}"
+	disabled!="{disabled}"
+	data-pressed!="{pressed ? 'true' : undefined}"
+	aria-pressed!="{pressed}"
+	onclick!="{toggle}"
+)
 	+if('icon')
-		Icon(name!="{icon}" size="size-4")
-	| {@render children?.()}
+		Icon(name!="{icon}" size!="{iconSize}")
+	+if('children')
+		| {@render children()}
 
 <script>
-	import { Toggle } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
 	import Icon from './Icon.n'
 
-	{ Root: ToggleRoot } := Toggle
-
 	{
 		pressed = $bindable(false)
 		disabled = false
 		icon
-		variant = 'default'
+		variant = 'secondary'
 		size = 'md'
 		onpressedchange
 		children
 		class: extra = ''
 	} .= $props()
 
-	classes := cn
-		'toggle-btn'
-		variant !== 'default' && `toggle-btn-${variant}`
-		size !== 'md' && `toggle-btn-${size}`
-		extra
+	classes := cn 'btn', `btn-${variant}`, size !== 'md' && `btn-${size}`, extra
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+
+	toggle := =>
+		pressed = !pressed
+		onpressedchange?.(pressed)
 </script>

package/src/components/ToggleButtonGroup.n

@@ -1,14 +1,19 @@
-ToggleGroupRoot(
-	type!="{multiple ? 'multiple' : 'single'}"
-	bind:value
+.btn-group(
+	role="group"
+	aria-label!="{label}"
 	class!="{classes}"
-	disabled!="{disabled}"
+	use:rovingTabindex!="{{ orientation: 'horizontal' }}"
 )
 	+each('items as item')
-		ToggleGroupItem.toggle-btn(
-			value!="{item.value}"
-			disabled!="{item.disabled}"
+		button(
+			type="button"
+			class!="{itemClasses(item.value)}"
+			data-roving
+			data-pressed!="{isActive(item.value) ? 'true' : undefined}"
+			aria-pressed!="{isActive(item.value)}"
+			disabled!="{disabled || item.disabled}"
 			aria-label!="{item.label}"
+			onclick!="{() => toggle(item.value)}"
 		)
 			+if('item.icon')
 				Icon(name!="{item.icon}" size="size-4")
@@ -16,19 +21,34 @@ ToggleGroupRoot(
 				span {item.label}
 
 <script>
-	import { ToggleGroup } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
 	import Icon from './Icon.n'
 
-	{ Root: ToggleGroupRoot, Item: ToggleGroupItem } := ToggleGroup
-
 	{
 		items = []
 		value = $bindable(undefined)
 		multiple = false
 		disabled = false
+		label = 'Toggle group'
 		class: extra = ''
 	} .= $props()
 
-	classes := cn 'btn-group toggle-group', extra
+	classes := cn extra
+
+	isActive := (v) =>
+		if multiple
+			Array.isArray(value) && value.includes v
+		else
+			value === v
+
+	itemClasses := (v) => cn 'btn btn-secondary'
+
+	toggle := (v) =>
+		return if disabled
+		if multiple
+			cur := Array.isArray(value) ? value : []
+			value = cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]
+		else
+			value = value === v ? undefined : v
 </script>

package/src/components/Tooltip.n

@@ -1,34 +1,67 @@
-TooltipProvider(delayDuration!="{delay}")
-	TooltipRoot
-		TooltipTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger?.()}
-		TooltipPortal
-			TooltipContent(class!="{contentClasses}" side!="{side}" sideOffset!="{sideOffset}")
-				| {content ?? ''}
-				| {@render children?.()}
+span.tooltip-trigger-wrap(
+	use:refAction
+	class!="{triggerClass ?? ''}"
+	onmouseenter!="{onEnter}"
+	onmouseleave!="{onLeave}"
+	onfocusin!="{onEnter}"
+	onfocusout!="{onLeave}"
+)
+	| {@render trigger?.()}
+
++if('open')
+	div(
+		use:portal
+		use:floatAction
+		role="tooltip"
+		class!="{contentClasses}"
+		data-state="open"
+	)
+		+if('content')
+			| {content}
+		+if('children')
+			| {@render children()}
 
 <script>
-	import { Tooltip } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Provider: TooltipProvider
-		Root: TooltipRoot
-		Trigger: TooltipTrigger
-		Portal: TooltipPortal
-		Content: TooltipContent
-	} := Tooltip
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { useFloating } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
 
 	{
 		content
 		side = 'top'
+		align = 'center'
 		sideOffset = 6
 		delay = 300
+		rich = false
 		trigger
 		children
 		triggerClass
 		class: extra = ''
-	} .= $props()
+	} := $props()
+
+	open .= $state false
+	openTimer .= null
+	closeTimer .= null
+
+	placement := align === 'center' ? side : `${side}-${align}`
+
+	{ reference: refAction, floating: floatAction } := useFloating
+		placement: placement
+		offset: sideOffset
+
+	contentClasses := cn rich ? 'tooltip-rich' : 'tooltip-content', extra
+
+	clear := =>
+		clearTimeout openTimer if openTimer
+		clearTimeout closeTimer if closeTimer
+		openTimer = null
+		closeTimer = null
+
+	onEnter := =>
+		clear()
+		openTimer = setTimeout (=> open = true), delay
 
-	contentClasses := cn 'tooltip-content', extra
+	onLeave := =>
+		clear()
+		closeTimer = setTimeout (=> open = false), 100
 </script>

package/src/index.js

@@ -21,7 +21,7 @@ export { default as Select } from './components/Select.n';
 export { default as Switch } from './components/Switch.n';
 export { default as Textarea } from './components/Textarea.n';
 
-// Phase 3 — behavior tier (Bits UI)
+// Phase 3 — behavior tier (custom on @floating-ui/dom + behaviors module)
 export { default as Dialog } from './components/Dialog.n';
 export { default as Sheet } from './components/Sheet.n';
 export { default as Popover } from './components/Popover.n';
@@ -44,7 +44,6 @@ export { default as ProgressCircular } from './components/ProgressCircular.n';
 
 // 0.0.4 — composite layer
 export { default as Header } from './components/Header.n';
-export { default as Drawer } from './components/Drawer.n';
 export { default as HeroBanner } from './components/HeroBanner.n';
 export { default as Stepper } from './components/Stepper.n';
 export { default as Breadcrumbs } from './components/Breadcrumbs.n';
@@ -72,8 +71,6 @@ export { default as Timeline } from './components/Timeline.n';
 export { default as Autocomplete } from './components/Autocomplete.n';
 export { default as MultiSelect } from './components/MultiSelect.n';
 export { default as ContextMenu } from './components/ContextMenu.n';
-export { default as RichTooltip } from './components/RichTooltip.n';
-export { default as PreviewCard } from './components/PreviewCard.n';
 export { default as ScrollArea } from './components/ScrollArea.n';
 export { default as ColorPicker } from './components/ColorPicker.n';
 export { default as Uploader } from './components/Uploader.n';

package/src/lib/behaviors/clickOutside.svelte.js

@@ -0,0 +1,54 @@
+/**
+ * Svelte action: invoke `handler` when a pointerdown occurs outside `node`.
+ *
+ *   div(use:clickOutside={onClose})
+ *   div(use:clickOutside={[onClose, open]})
+ *   div(use:clickOutside={[onClose, open, triggerEl]})
+ *
+ * Three parameter shapes:
+ *   - `handler` alone
+ *   - `[handler, enabled]` — pass the open flag so the action no-ops while closed
+ *   - `[handler, enabled, ignore]` — `ignore` is an element (or array of elements)
+ *     whose subtree also counts as "inside." Use this to exclude the trigger
+ *     button so clicking it doesn't close-then-reopen the overlay.
+ *
+ * Listens on `pointerdown` (capture) so it fires before inner handlers get
+ * a chance to stop propagation.
+ */
+export function clickOutside(node, paramOrHandler) {
+	let handler;
+	let enabled = true;
+	let ignoreEls = [];
+	const set = (value) => {
+		if (Array.isArray(value)) {
+			handler = value[0];
+			enabled = value[1] !== false;
+			const ig = value[2];
+			ignoreEls = ig == null ? [] : Array.isArray(ig) ? ig : [ig];
+		} else {
+			handler = value;
+			enabled = true;
+			ignoreEls = [];
+		}
+	};
+	set(paramOrHandler);
+
+	const onPointerDown = (e) => {
+		if (!enabled || !handler) return;
+		if (node.contains(e.target)) return;
+		for (const el of ignoreEls) {
+			if (el && typeof el.contains === 'function' && el.contains(e.target)) return;
+		}
+		handler(e);
+	};
+	document.addEventListener('pointerdown', onPointerDown, true);
+
+	return {
+		update(value) {
+			set(value);
+		},
+		destroy() {
+			document.removeEventListener('pointerdown', onPointerDown, true);
+		}
+	};
+}

package/src/lib/behaviors/escape.svelte.js

@@ -0,0 +1,36 @@
+/**
+ * Svelte action: invoke `handler` on Escape keydown while the action is
+ * mounted. Honors disabled state via the second-tuple parameter form:
+ *
+ *   div(use:escape={[onClose, open]})
+ */
+export function escape(node, paramOrHandler) {
+	let handler;
+	let enabled = true;
+	const set = (value) => {
+		if (Array.isArray(value)) {
+			handler = value[0];
+			enabled = value[1] !== false;
+		} else {
+			handler = value;
+			enabled = true;
+		}
+	};
+	set(paramOrHandler);
+
+	const onKeyDown = (e) => {
+		if (!enabled || !handler) return;
+		if (e.key !== 'Escape') return;
+		handler(e);
+	};
+	document.addEventListener('keydown', onKeyDown);
+
+	return {
+		update(value) {
+			set(value);
+		},
+		destroy() {
+			document.removeEventListener('keydown', onKeyDown);
+		}
+	};
+}

package/src/lib/behaviors/floating.svelte.js

@@ -0,0 +1,137 @@
+/**
+ * Floating-element positioning, built on `@floating-ui/dom`.
+ *
+ *   import { useFloating } from '$lib/behaviors/floating.svelte.js'
+ *
+ *   floating := useFloating
+ *     placement: 'bottom-start'
+ *     offset: 8
+ *
+ *   ...
+ *   div(use:floating.reference)
+ *   div(use:floating.floating)
+ *
+ * The action sets `position: absolute` + `left`/`top` on the floating
+ * element, plus a `data-placement` attribute reflecting the actually-used
+ * placement after collision flips.
+ *
+ * Imperative `update()` is exposed too — call it after content size changes.
+ */
+import { computePosition, flip, shift, offset as offsetMiddleware, autoUpdate, size } from '@floating-ui/dom';
+
+/**
+ * @param {object} [opts]
+ * @param {import('@floating-ui/dom').Placement} [opts.placement] — e.g. 'bottom-start'
+ * @param {number} [opts.offset] — gap from reference, in px
+ * @param {number} [opts.padding] — viewport padding for collision
+ * @param {boolean} [opts.matchWidth] — match floating's min-width to reference width
+ * @param {boolean} [opts.flip] — enable collision flip (default true)
+ */
+export function useFloating(opts = {}) {
+	const {
+		placement = 'bottom',
+		offset: gap = 8,
+		padding = 8,
+		matchWidth = false,
+		flip: flipOnCollision = true
+	} = opts;
+
+	let referenceEl = null;
+	let floatingEl = null;
+	let cleanupAutoUpdate = null;
+
+	const middleware = [offsetMiddleware(gap)];
+	if (flipOnCollision) middleware.push(flip({ padding }));
+	middleware.push(shift({ padding }));
+	if (matchWidth) {
+		middleware.push(
+			size({
+				apply({ rects, elements }) {
+					Object.assign(elements.floating.style, {
+						minWidth: `${rects.reference.width}px`
+					});
+				}
+			})
+		);
+	}
+
+	async function update() {
+		if (!referenceEl || !floatingEl) return;
+		const { x, y, placement: actualPlacement } = await computePosition(referenceEl, floatingEl, {
+			placement,
+			middleware,
+			strategy: 'absolute'
+		});
+		Object.assign(floatingEl.style, {
+			position: 'absolute',
+			left: `${x}px`,
+			top: `${y}px`
+		});
+		floatingEl.setAttribute('data-placement', actualPlacement);
+	}
+
+	function bind() {
+		if (cleanupAutoUpdate) cleanupAutoUpdate();
+		if (referenceEl && floatingEl) {
+			cleanupAutoUpdate = autoUpdate(referenceEl, floatingEl, update);
+		}
+	}
+
+	const reference = (node) => {
+		referenceEl = node;
+		bind();
+		return {
+			destroy() {
+				if (referenceEl === node) referenceEl = null;
+				if (cleanupAutoUpdate) cleanupAutoUpdate();
+				cleanupAutoUpdate = null;
+			}
+		};
+	};
+
+	const floating = (node) => {
+		floatingEl = node;
+		bind();
+		return {
+			destroy() {
+				if (floatingEl === node) floatingEl = null;
+				if (cleanupAutoUpdate) cleanupAutoUpdate();
+				cleanupAutoUpdate = null;
+			}
+		};
+	};
+
+	return { reference, floating, update };
+}
+
+/**
+ * Position a floating element relative to an arbitrary `{ x, y }` virtual
+ * reference (e.g. a right-click position for a context menu).
+ */
+export function positionAt(floatingEl, x, y, opts = {}) {
+	const virtual = {
+		getBoundingClientRect: () => ({
+			x,
+			y,
+			width: 0,
+			height: 0,
+			left: x,
+			top: y,
+			right: x,
+			bottom: y
+		})
+	};
+	const { placement = 'right-start', offset: gap = 0, padding = 8 } = opts;
+	return computePosition(virtual, floatingEl, {
+		placement,
+		middleware: [offsetMiddleware(gap), flip({ padding }), shift({ padding })],
+		strategy: 'absolute'
+	}).then(({ x: fx, y: fy, placement: p }) => {
+		Object.assign(floatingEl.style, {
+			position: 'absolute',
+			left: `${fx}px`,
+			top: `${fy}px`
+		});
+		floatingEl.setAttribute('data-placement', p);
+	});
+}

package/src/lib/behaviors/focusTrap.svelte.js

@@ -0,0 +1,80 @@
+/**
+ * Svelte action: trap Tab/Shift+Tab focus inside `node`.
+ *
+ *   div(use:focusTrap)
+ *
+ * On mount, focuses the first focusable child (or the node itself if it's
+ * tabbable). On destroy, returns focus to the previously focused element
+ * outside the trap.
+ *
+ * Disable via tuple form:
+ *   div(use:focusTrap={open})
+ */
+const FOCUSABLE = [
+	'a[href]',
+	'button:not([disabled])',
+	'input:not([disabled]):not([type="hidden"])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'[tabindex]:not([tabindex="-1"])',
+	'audio[controls]',
+	'video[controls]',
+	'[contenteditable]:not([contenteditable="false"])'
+].join(',');
+
+function focusable(node) {
+	return Array.from(node.querySelectorAll(FOCUSABLE)).filter(
+		(el) => !el.hasAttribute('disabled') && el.offsetParent !== null
+	);
+}
+
+export function focusTrap(node, enabled = true) {
+	let active = enabled !== false;
+	const previouslyFocused = document.activeElement;
+
+	const focusFirst = () => {
+		const items = focusable(node);
+		if (items.length > 0) {
+			items[0].focus();
+		} else {
+			node.setAttribute('tabindex', '-1');
+			node.focus();
+		}
+	};
+
+	const onKeyDown = (e) => {
+		if (!active || e.key !== 'Tab') return;
+		const items = focusable(node);
+		if (items.length === 0) {
+			e.preventDefault();
+			return;
+		}
+		const first = items[0];
+		const last = items[items.length - 1];
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	};
+
+	if (active) {
+		// Defer one frame so the node is actually in the DOM after portal moves.
+		queueMicrotask(focusFirst);
+	}
+	node.addEventListener('keydown', onKeyDown);
+
+	return {
+		update(value) {
+			active = value !== false;
+		},
+		destroy() {
+			node.removeEventListener('keydown', onKeyDown);
+			if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+				previouslyFocused.focus();
+			}
+		}
+	};
+}