@human-synthesis/norns-ui 0.0.3 → 0.0.6

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/components/Tree.n

@@ -0,0 +1,57 @@
+ul.tree(class!="{classes}" role="tree")
+	+each('items as node')
+		| {@render renderNode(node, 0)}
+
++snippet('renderNode', node, depth)
+	li.tree-node(
+		role="treeitem"
+		aria-expanded!="{hasChildren(node) ? isExpanded(node.id) : undefined}"
+		aria-selected!="{node.id === selected}"
+	)
+		button.tree-row(
+			type="button"
+			class!="{node.id === selected ? 'tree-row-selected' : ''}"
+			style!="{`padding-left: ${0.5 + depth * 1.25}rem`}"
+			onclick!="{() => onRowClick(node)}"
+		)
+			+if('hasChildren(node)')
+				span.tree-chevron(class!="{isExpanded(node.id) ? 'tree-chevron-open' : ''}")
+					Icon(name="lucide:chevron-right" size="size-3.5")
+			+if('!hasChildren(node)')
+				span.tree-chevron-spacer
+			+if('node.icon')
+				Icon(name!="{node.icon}" size="size-4" class="text-fg-muted shrink-0")
+			span.tree-label
+				| {node.label}
+		+if('hasChildren(node) && isExpanded(node.id)')
+			ul(role="group")
+				+each('node.children as child')
+					| {@render renderNode(child, depth + 1)}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		expanded = $bindable([])
+		selected = $bindable(undefined)
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'tree', extra
+
+	hasChildren := (node) => Array.isArray(node.children) && node.children.length > 0
+	isExpanded := (id) => expanded.includes(id)
+
+	toggle := (id) =>
+		if isExpanded(id)
+			expanded = expanded.filter (x) => x !== id
+		else
+			expanded = [...expanded, id]
+
+	onRowClick := (node) =>
+		if hasChildren(node)
+			toggle node.id
+		selected = node.id
+</script>

package/src/components/Uploader.n

@@ -0,0 +1,88 @@
+.uploader(
+	class!="{classes}"
+	ondragover!="{onDragOver}"
+	ondragleave!="{onDragLeave}"
+	ondrop!="{onDrop}"
+	role="button"
+	tabindex="0"
+	onclick!="{() => inputEl?.click()}"
+	onkeydown!="{(e) => { if (e.key === 'Enter' || e.key === ' ') inputEl?.click() }}"
+)
+	input(
+		type="file"
+		bind:this!="{inputEl}"
+		multiple!="{multiple}"
+		accept!="{accept}"
+		disabled!="{disabled}"
+		class="sr-only"
+		onchange!="{(e) => onPick(e.currentTarget.files)}"
+	)
+	Icon(name="lucide:upload-cloud" size="size-8" class="text-fg-muted")
+	.uploader-text
+		span.uploader-primary
+			| {placeholder}
+		+if('helper')
+			span.uploader-helper
+				| {helper}
+
++if('files.length > 0')
+	ul.uploader-list
+		+each('files as file, i')
+			li.uploader-item
+				Icon(name="lucide:file" size="size-4" class="text-fg-muted shrink-0")
+				.flex-1.min-w-0
+					.text-sm.truncate {file.name}
+					.text-xs(class="text-fg-muted") {humanSize(file.size)}
+				button.btn.btn-ghost.btn-sm(type="button" aria-label="Remove" onclick!="{() => remove(i)}")
+					Icon(name="lucide:x" size="size-3.5")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		files = $bindable([])
+		multiple = true
+		accept
+		disabled = false
+		placeholder = 'Drop files here or click to browse'
+		helper
+		onchange
+		class: extra = ''
+	} .= $props()
+
+	inputEl .= $state null
+	dragging .= $state false
+
+	classes := cn 'uploader-root', dragging && 'uploader-dragging', extra
+
+	humanSize := (n) =>
+		return '' unless n
+		if n < 1024
+			`${n} B`
+		else if n < 1024 * 1024
+			`${(n / 1024).toFixed(1)} KB`
+		else
+			`${(n / 1024 / 1024).toFixed(1)} MB`
+
+	onPick := (list) =>
+		return unless list
+		next := Array.from list
+		files = multiple ? [...files, ...next] : next.slice(0, 1)
+		onchange?.(files)
+
+	remove := (i) =>
+		files = files.filter (_, idx) => idx !== i
+		onchange?.(files)
+
+	onDragOver := (e) =>
+		e.preventDefault()
+		dragging = true
+
+	onDragLeave := => dragging = false
+
+	onDrop := (e) =>
+		e.preventDefault()
+		dragging = false
+		onPick e.dataTransfer?.files
+</script>

package/src/components/Video.n

@@ -0,0 +1,26 @@
+video(src!="{src}" controls!="{controls}" autoplay!="{autoplay}" loop!="{looping}" muted!="{muted}" playsinline!="{playsinline}" preload!="{preload}" poster!="{poster}" class!="{classes}")
+	+each('sources as source')
+		source(src!="{source.src}" type!="{source.type}")
+	| {fallback}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	// Note: HTML attribute `loop` becomes `looping` here because `loop` is a
+	// Civet reserved word.
+	{
+		src
+		sources = []
+		controls = true
+		autoplay = false
+		loop: looping = false
+		muted = false
+		playsinline = true
+		preload = 'metadata'
+		poster
+		fallback = 'Your browser does not support the video element.'
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'video-player block w-full rounded-md', extra
+</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';
@@ -30,6 +30,69 @@ export { default as Tooltip } from './components/Tooltip.n';
 export { default as Tabs } from './components/Tabs.n';
 export { default as ToastProvider } from './components/ToastProvider.n';
 
+// 0.0.4 — display layer
+export { default as Icon } from './components/Icon.n';
+export { default as Card } from './components/Card.n';
+export { default as Surface } from './components/Surface.n';
+export { default as Banner } from './components/Banner.n';
+export { default as Badge } from './components/Badge.n';
+export { default as Chip } from './components/Chip.n';
+export { default as Avatar } from './components/Avatar.n';
+export { default as Skeleton } from './components/Skeleton.n';
+export { default as Progress } from './components/Progress.n';
+export { default as ProgressCircular } from './components/ProgressCircular.n';
+
+// 0.0.4 — composite layer
+export { default as Header } from './components/Header.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';
+export { default as Pagination } from './components/Pagination.n';
+export { default as Accordion } from './components/Accordion.n';
+export { default as Carousel } from './components/Carousel.n';
+export { default as Tree } from './components/Tree.n';
+
+// 0.0.4 — wave A
+export { default as Separator } from './components/Separator.n';
+export { default as Toolbar } from './components/Toolbar.n';
+export { default as ButtonGroup } from './components/ButtonGroup.n';
+export { default as ToggleButton } from './components/ToggleButton.n';
+export { default as ToggleButtonGroup } from './components/ToggleButtonGroup.n';
+export { default as Collapsible } from './components/Collapsible.n';
+export { default as NumberInput } from './components/NumberInput.n';
+export { default as OtpField } from './components/OtpField.n';
+export { default as TagsInput } from './components/TagsInput.n';
+export { default as Image } from './components/Image.n';
+export { default as Audio } from './components/Audio.n';
+export { default as Video } from './components/Video.n';
+export { default as Timeline } from './components/Timeline.n';
+
+// 0.0.4 — wave B
+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 ScrollArea } from './components/ScrollArea.n';
+export { default as ColorPicker } from './components/ColorPicker.n';
+export { default as Uploader } from './components/Uploader.n';
+export { default as HierarchicalMenu } from './components/HierarchicalMenu.n';
+export { default as MegaMenu } from './components/MegaMenu.n';
+
+// 0.0.4 — wave C
+export { default as DatePicker } from './components/DatePicker.n';
+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';
+
+// 0.0.5 — CSS-only motion components
+export { default as AvatarGroup } from './components/AvatarGroup.n';
+export { default as GradientText } from './components/GradientText.n';
+export { default as CopyButton } from './components/CopyButton.n';
+export { default as ThemeToggler } from './components/ThemeToggler.n';
+export { default as ShinyButton } from './components/ShinyButton.n';
+export { default as RippleButton } from './components/RippleButton.n';
+// Motion-driven: `import … from '@human-synthesis/norns-ui/motion'`.
+
 // Helpers
 export { cn } from './lib/cn.js';
 export { variantClasses } from './lib/variants.js';

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();
+			}
+		}
+	};
+}

package/src/lib/behaviors/index.js

@@ -0,0 +1,14 @@
+/**
+ * Public re-exports of the behavior actions used by the library's components.
+ * Consumers can use these directly in their own components for consistency
+ * with the library's interaction model.
+ *
+ *   import { portal, clickOutside, escape, focusTrap, useFloating } from '@human-synthesis/norns-ui/behaviors'
+ */
+export { portal } from './portal.svelte.js';
+export { clickOutside } from './clickOutside.svelte.js';
+export { escape } from './escape.svelte.js';
+export { focusTrap } from './focusTrap.svelte.js';
+export { lock as scrollLockAcquire, unlock as scrollLockRelease, scrollLock } from './scrollLock.svelte.js';
+export { useFloating, positionAt } from './floating.svelte.js';
+export { rovingTabindex } from './rovingTabindex.svelte.js';