npm - @signal9/era-ui - Versions diffs - 24.0.3 → 25.1.0 - Mend

@signal9/era-ui 24.0.3 → 25.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +29 -0
package/dist/era-ui.css +1 -1
package/dist/eslint/index.js +1 -1
package/dist/ui/alert-dialog/alert-dialog-content.svelte +14 -1
package/dist/ui/dialog/dialog-content.svelte +17 -3
package/dist/ui/index.d.ts +1 -0
package/dist/ui/index.js +1 -0
package/dist/ui/tree/ancestor-path.d.ts +22 -0
package/dist/ui/tree/ancestor-path.js +36 -0
package/dist/ui/tree/context.svelte.d.ts +80 -0
package/dist/ui/tree/context.svelte.js +94 -0
package/dist/ui/tree/index.d.ts +4 -0
package/dist/ui/tree/index.js +4 -0
package/dist/ui/tree/tree-item.svelte +110 -0
package/dist/ui/tree/tree-item.svelte.d.ts +11 -0
package/dist/ui/tree/tree.svelte +140 -0
package/dist/ui/tree/tree.svelte.d.ts +19 -0
package/package.json +5 -4
package/skill/SKILL.md +5 -5

package/dist/ui/dialog/dialog-content.svelte CHANGED Viewed

@@ -39,20 +39,34 @@
 	     provider/axis-relay.svelte.ts. Portalled content is a child of <body>,
 	     so without this it inherits the page's density, surface, corners, font,
 	     motion and theme rather than the subtree's. -->
+	<!-- A HEIGHT CEILING, because a dialog taller than the viewport is not
+	     degraded, it is unusable. Centred with -translate-y-1/2 and no ceiling, a
+	     tall panel overflows in BOTH directions with nothing to scroll: a
+	     consumer measured a 1642px dialog in a 900px viewport whose title, input
+	     and submit button were all off-screen, with no scroll and no keyboard
+	     route to the button. It typechecks, lints and builds perfectly happily.
+	     Sheet.Content already had this exact treatment; Dialog and AlertDialog
+	     never got it. 85dvh matches Sheet's, deliberately — one ceiling for every
+	     floating panel, not three opinions.
+	     The BODY scrolls, not the panel, so a long form's footer stays put
+	     instead of scrolling away with the fields. -->
 	<Dialog.Content
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
 			relay?.schemeClass,
-			'fixed top-1/2 left-1/2 z-overlay flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col border border-divider bg-well shadow-lg glass-blur',
-			header ? 'rounded-control' : 'gap-gutter rounded-bar p-card',
+			'fixed top-1/2 left-1/2 z-overlay flex max-h-[85dvh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col border border-divider bg-well shadow-lg glass-blur',
+			// No header: the panel itself is the body, so the panel scrolls.
+			header ? 'rounded-control' : 'gap-gutter overflow-y-auto rounded-bar p-card',
 			className
 		)}
 		{...restProps}
 	>
 		{#if header}
 			{@render header()}
-			<div class="flex min-h-0 flex-col gap-gutter p-card">
+			<div class="flex min-h-0 flex-1 flex-col gap-gutter overflow-y-auto p-card">
 				{@render children?.()}
 			</div>
 		{:else}

package/dist/ui/index.d.ts CHANGED Viewed

@@ -41,6 +41,7 @@ export * as TimeRangeField from './time-range-field/index.js';
 export * as Tooltip from './tooltip/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
 export * as Timeline from './timeline/index.js';
+export * as Tree from './tree/index.js';
 export * as Toolbar from './toolbar/index.js';
 export { Bar } from './bar/index.js';
 export { Button } from './button/index.js';

package/dist/ui/index.js CHANGED Viewed

@@ -41,6 +41,7 @@ export * as TimeRangeField from './time-range-field/index.js';
 export * as Tooltip from './tooltip/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
 export * as Timeline from './timeline/index.js';
+export * as Tree from './tree/index.js';
 export * as Toolbar from './toolbar/index.js';
 export { Bar } from './bar/index.js';
 export { Button } from './button/index.js';

package/dist/ui/tree/ancestor-path.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { TreeNode } from './context.svelte.js';
+/**
+ * The ids of every ancestor of `id`, outermost first. Empty if not found.
+ *
+ * ITS OWN MODULE, WITH NO RUNES, on purpose. The whole claim of this function is
+ * that it needs no state, no context and no DOM — the commonest deep-link flow
+ * runs BEFORE a tree exists, turning a URL into the `expanded` array the
+ * component is handed on first render. Living in context.svelte.ts would have
+ * made it unimportable from a plain Node context (that file declares $state
+ * fields), and living in the barrel drags every .svelte component in with it.
+ * Same reasoning as docs/consumer-import.ts, which is standalone so the node doc
+ * builder can load it.
+ *
+ * A consumer previously had to construct a throwaway TreeState, assign nodes,
+ * call revealPath and discard the instance — "reaching around the component for
+ * something the component owns", as they put it. The giveaway is that the walk
+ * is pure over `nodes`.
+ *
+ * TreeState.revealPath is the stateful wrapper over this: one implementation,
+ * two surfaces.
+ */
+export declare function ancestorPath(nodes: TreeNode[], id: string): string[];

package/dist/ui/tree/ancestor-path.js ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * The ids of every ancestor of `id`, outermost first. Empty if not found.
+ *
+ * ITS OWN MODULE, WITH NO RUNES, on purpose. The whole claim of this function is
+ * that it needs no state, no context and no DOM — the commonest deep-link flow
+ * runs BEFORE a tree exists, turning a URL into the `expanded` array the
+ * component is handed on first render. Living in context.svelte.ts would have
+ * made it unimportable from a plain Node context (that file declares $state
+ * fields), and living in the barrel drags every .svelte component in with it.
+ * Same reasoning as docs/consumer-import.ts, which is standalone so the node doc
+ * builder can load it.
+ *
+ * A consumer previously had to construct a throwaway TreeState, assign nodes,
+ * call revealPath and discard the instance — "reaching around the component for
+ * something the component owns", as they put it. The giveaway is that the walk
+ * is pure over `nodes`.
+ *
+ * TreeState.revealPath is the stateful wrapper over this: one implementation,
+ * two surfaces.
+ */
+export function ancestorPath(nodes, id) {
+    const path = [];
+    const find = (list, trail) => {
+        for (const n of list) {
+            if (n.id === id) {
+                path.push(...trail);
+                return true;
+            }
+            if (n.children?.length && find(n.children, [...trail, n.id]))
+                return true;
+        }
+        return false;
+    };
+    find(nodes, []);
+    return path;
+}

package/dist/ui/tree/context.svelte.d.ts ADDED Viewed

@@ -0,0 +1,80 @@
+import { SvelteSet } from 'svelte/reactivity';
+/**
+ * A disclosure hierarchy with real tree semantics.
+ *
+ * WHY THIS IS A PRIMITIVE AND NOT APP COMPOSITION. A tree looks like nested
+ * Collapsibles and is not one. What separates them is the keyboard model:
+ * exactly ONE node in the whole tree is tabbable, arrow keys move between
+ * VISIBLE nodes across nesting levels, and left/right collapse and expand rather
+ * than navigate. Nested Collapsibles give you a tab stop per node and no
+ * cross-level movement — which is a different control that happens to look the
+ * same, and the difference is invisible until someone uses a keyboard.
+ *
+ * That is precisely the kind of thing a library should own once instead of
+ * having every consumer rediscover it, so bits-ui not shipping one is a gap era
+ * fills rather than a signal that it does not belong.
+ *
+ * SELECTION IS NOT EXPANSION, and they are separate props for that reason. In a
+ * catalog browser, clicking a branch selects it (its detail renders elsewhere)
+ * without necessarily opening it, and the twisty opens it without selecting.
+ * Collapsing them into one piece of state is the mistake that makes a tree
+ * unable to show a selected-but-collapsed ancestor.
+ */
+export interface TreeNode {
+    /** Stable identity. This is what `expanded` and `selected` refer to. */
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    /** Present but empty = a branch that has not loaded yet; absent = a leaf. */
+    disabled?: boolean;
+}
+/** A node flattened into render order, with the depth it sits at. */
+export interface FlatNode {
+    node: TreeNode;
+    depth: number;
+    /** Has children (or is a not-yet-loaded branch). */
+    branch: boolean;
+    expanded: boolean;
+    parentId: string | null;
+}
+export declare class TreeState {
+    nodes: TreeNode[];
+    expanded: SvelteSet<string>;
+    selected: string | null;
+    /** The one tabbable node — the roving tabindex. */
+    active: string | null;
+    onExpandedChange?: (ids: string[]) => void;
+    onSelect?: (id: string) => void;
+    /**
+     * VISIBLE nodes in render order, which is also keyboard order.
+     *
+     * The whole tree can be handed to `nodes`; only what is open gets flattened.
+     * Measured in the field on the catalog this was built for: 1,196 nodes in,
+     * ~58 visible, recomputed per render, comfortable with no windowing. That is
+     * a real number from a consumer rather than an estimate — their earlier cap
+     * of 162 was an artifact of the hand-rolled sidebar they replaced, which
+     * could only mount one family at a time.
+     *
+     * Arrow keys move through what is on screen, not through the data — a
+     * collapsed branch's children are not reachable by ↓ and must not be, or the
+     * focus ring disappears into a closed subtree.
+     */
+    get visible(): FlatNode[];
+    /** The node the roving tabindex sits on, defaulting to the first visible. */
+    get activeId(): string | null;
+    setExpanded(id: string, open: boolean): void;
+    toggle(id: string): void;
+    select(id: string): void;
+    /**
+     * Open every ancestor of `id` so a deep link lands on a visible node.
+     *
+     * Deep-linking is why `expanded` is controllable at all: a URL like
+     * /sp800-53r5/AC/ac-2.1 has to open AC and AC-2 before AC-2(1) exists on
+     * screen. This is the stateful half — it mutates `expanded` and notifies.
+     * The path computation itself is {@link ancestorPath}, which needs no state
+     * and is exported for callers who only want the ids.
+     */
+    revealPath(id: string): string[];
+}
+export declare function setTreeState(state: TreeState): TreeState;
+export declare function getTreeState(): TreeState | null;

package/dist/ui/tree/context.svelte.js ADDED Viewed

@@ -0,0 +1,94 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+import { ancestorPath } from './ancestor-path.js';
+export class TreeState {
+    nodes = $state([]);
+    // SvelteSet, so membership reads are tracked per-key rather than the whole
+    // set being replaced on every toggle — which matters at catalog scale, where
+    // one expand should not invalidate 1,196 rows.
+    expanded = new SvelteSet();
+    selected = $state(null);
+    /** The one tabbable node — the roving tabindex. */
+    active = $state(null);
+    onExpandedChange;
+    onSelect;
+    /**
+     * VISIBLE nodes in render order, which is also keyboard order.
+     *
+     * The whole tree can be handed to `nodes`; only what is open gets flattened.
+     * Measured in the field on the catalog this was built for: 1,196 nodes in,
+     * ~58 visible, recomputed per render, comfortable with no windowing. That is
+     * a real number from a consumer rather than an estimate — their earlier cap
+     * of 162 was an artifact of the hand-rolled sidebar they replaced, which
+     * could only mount one family at a time.
+     *
+     * Arrow keys move through what is on screen, not through the data — a
+     * collapsed branch's children are not reachable by ↓ and must not be, or the
+     * focus ring disappears into a closed subtree.
+     */
+    get visible() {
+        const out = [];
+        const walk = (list, depth, parentId) => {
+            for (const node of list) {
+                const branch = node.children !== undefined;
+                const expanded = this.expanded.has(node.id);
+                out.push({ node, depth, branch, expanded, parentId });
+                if (branch && expanded && node.children?.length) {
+                    walk(node.children, depth + 1, node.id);
+                }
+            }
+        };
+        walk(this.nodes, 0, null);
+        return out;
+    }
+    /** The node the roving tabindex sits on, defaulting to the first visible. */
+    get activeId() {
+        const vis = this.visible;
+        if (this.active && vis.some((v) => v.node.id === this.active))
+            return this.active;
+        return this.selected && vis.some((v) => v.node.id === this.selected)
+            ? this.selected
+            : (vis[0]?.node.id ?? null);
+    }
+    setExpanded(id, open) {
+        if (open)
+            this.expanded.add(id);
+        else
+            this.expanded.delete(id);
+        this.onExpandedChange?.([...this.expanded]);
+    }
+    toggle(id) {
+        this.setExpanded(id, !this.expanded.has(id));
+    }
+    select(id) {
+        this.selected = id;
+        this.active = id;
+        this.onSelect?.(id);
+    }
+    /**
+     * Open every ancestor of `id` so a deep link lands on a visible node.
+     *
+     * Deep-linking is why `expanded` is controllable at all: a URL like
+     * /sp800-53r5/AC/ac-2.1 has to open AC and AC-2 before AC-2(1) exists on
+     * screen. This is the stateful half — it mutates `expanded` and notifies.
+     * The path computation itself is {@link ancestorPath}, which needs no state
+     * and is exported for callers who only want the ids.
+     */
+    revealPath(id) {
+        const path = ancestorPath(this.nodes, id);
+        if (path.length) {
+            for (const p of path)
+                this.expanded.add(p);
+            this.onExpandedChange?.([...this.expanded]);
+        }
+        return path;
+    }
+}
+const KEY = Symbol('era.tree');
+export function setTreeState(state) {
+    setContext(KEY, state);
+    return state;
+}
+export function getTreeState() {
+    return getContext(KEY) ?? null;
+}

package/dist/ui/tree/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { default as Root } from './tree.svelte';
+export { default as Item } from './tree-item.svelte';
+export { TreeState, type TreeNode, type FlatNode } from './context.svelte.js';
+export { ancestorPath } from './ancestor-path.js';

package/dist/ui/tree/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { default as Root } from './tree.svelte';
+export { default as Item } from './tree-item.svelte';
+export { TreeState } from './context.svelte.js';
+export { ancestorPath } from './ancestor-path.js';

package/dist/ui/tree/tree-item.svelte ADDED Viewed

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '../../utils/index.js';
+	import { getTreeState, type FlatNode } from './context.svelte.js';
+	let {
+		item,
+		trailing,
+		class: className
+	}: {
+		item: FlatNode;
+		/** Rendered at the end of the row — a count badge, a status dot. */
+		trailing?: Snippet<[FlatNode]>;
+		class?: string;
+	} = $props();
+	const tree = getTreeState();
+	const selected = $derived(tree?.selected === item.node.id);
+	const active = $derived(tree?.activeId === item.node.id);
+</script>
+<!--
+	role="treeitem" with aria-level/expanded/selected, and the ROVING TABINDEX:
+	exactly one node in the tree is tabbable, so Tab moves past the whole tree the
+	way it moves past one control, and arrows move within it. A tab stop per node
+	is what nested Collapsibles give you, and it makes a 1,196-node catalog take
+	1,196 tabs to step over.
+	The indent is padding on the row, not a spacer element, so the whole row —
+	including the indent — stays one hit target and one highlight.
+	The wall is icon-inset-control, NOT the gutter. A control-tier row holding an
+	icon-tier glyph centres it (h-control − h-icon)/2 = 5px vertically, so 5px is
+	what the sides owe. Reaching for the gutter (4px) left the row 4 at the sides
+	against 5 top and bottom — the same mistake Bar made, caught here by
+	layout/wall-is-isotropic, which exists because of it.
+	Enter and Space select the focused node, here. Navigation (arrows, Home/End)
+	is handled on the ROOT: it moves BETWEEN nodes, and only the container knows
+	the visible order — a per-item handler would have to re-derive the whole
+	flattened tree just to find its own neighbour.
+-->
+<li
+	role="treeitem"
+	aria-level={item.depth + 1}
+	aria-expanded={item.branch ? item.expanded : undefined}
+	aria-selected={selected}
+	aria-disabled={item.node.disabled || undefined}
+	tabindex={active ? 0 : -1}
+	data-tree-item
+	data-id={item.node.id}
+	data-selected={selected || undefined}
+	data-depth={item.depth}
+	style="padding-left: calc(var(--spacing-gutter) + {item.depth} * var(--era-h-control) / 2)"
+	class={cn(
+		'flex h-control era-interactive cursor-default items-center gap-gutter rounded-control pr-icon-inset-control text-body',
+		'hover:bg-highlight focus:outline-none focus-visible:bg-highlight',
+		selected ? 'bg-fill text-bright' : 'text-fg',
+		item.node.disabled && 'pointer-events-none opacity-50',
+		className
+	)}
+	onclick={(e) => {
+		e.stopPropagation();
+		tree?.select(item.node.id);
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			e.stopPropagation();
+			tree?.select(item.node.id);
+		}
+	}}
+>
+	<!--
+		The twisty is a SEPARATE hit target from the row, which is the whole point
+		of keeping selection and expansion apart: clicking the label selects
+		without opening, clicking the chevron opens without selecting. Which is
+		why it carries its OWN hover: a target that behaves differently from the
+		row it sits in has to say so under the cursor, or the two affordances are
+		indistinguishable until you click one. Caught by the surface sweep, which
+		hovers every button on the board and found this one inert. A leaf gets
+		an empty box of the same size so labels stay on one vertical line — an
+		indent that jitters by a glyph width per level is worse than no chevron.
+	-->
+	{#if item.branch}
+		<button
+			type="button"
+			tabindex="-1"
+			aria-hidden="true"
+			class="flex size-icon shrink-0 era-interactive items-center justify-center text-muted hover:text-bright"
+			onclick={(e) => {
+				e.stopPropagation();
+				tree?.toggle(item.node.id);
+			}}
+		>
+			<ChevronRight
+				class={cn(
+					'size-icon transition-transform duration-base ease-base',
+					item.expanded && 'rotate-90'
+				)}
+			/>
+		</button>
+	{:else}
+		<span class="size-icon shrink-0" aria-hidden="true"></span>
+	{/if}
+	<span class="min-w-0 flex-1 truncate era-text-trim">{item.node.label}</span>
+	{#if trailing}{@render trailing(item)}{/if}
+</li>

package/dist/ui/tree/tree-item.svelte.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type FlatNode } from './context.svelte.js';
+type $$ComponentProps = {
+    item: FlatNode;
+    /** Rendered at the end of the row — a count badge, a status dot. */
+    trailing?: Snippet<[FlatNode]>;
+    class?: string;
+};
+declare const TreeItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type TreeItem = ReturnType<typeof TreeItem>;
+export default TreeItem;

package/dist/ui/tree/tree.svelte ADDED Viewed

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { TreeState, setTreeState, type FlatNode, type TreeNode } from './context.svelte.js';
+	import Item from './tree-item.svelte';
+	let {
+		ref = $bindable(null),
+		nodes = [],
+		expanded = $bindable<string[]>([]),
+		selected = $bindable<string | null>(null),
+		label = 'Tree',
+		item,
+		trailing,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLUListElement> & {
+		ref?: HTMLUListElement | null;
+		nodes?: TreeNode[];
+		/** Controlled: bind it, or drive it from the URL. */
+		expanded?: string[];
+		selected?: string | null;
+		/** Accessible name for the tree landmark. */
+		label?: string;
+		/** Render your own row. Omitted, the default row is used. */
+		item?: Snippet<[FlatNode]>;
+		/** End-of-row slot on the default row — a count badge, a status dot. */
+		trailing?: Snippet<[FlatNode]>;
+	} = $props();
+	const tree = setTreeState(new TreeState());
+	$effect(() => {
+		tree.nodes = nodes;
+	});
+	$effect(() => {
+		// Reconcile in place rather than replacing the set: the prop is the source
+		// of truth, but swapping the instance would detach every membership read
+		// the rows have already taken.
+		const want = new Set(expanded);
+		for (const id of tree.expanded) if (!want.has(id)) tree.expanded.delete(id);
+		for (const id of want) tree.expanded.add(id);
+	});
+	$effect(() => {
+		tree.selected = selected;
+	});
+	tree.onExpandedChange = (ids) => (expanded = ids);
+	tree.onSelect = (id) => (selected = id);
+	/**
+	 * The keyboard model, which is the reason this is a component.
+	 *
+	 * It lives on the ROOT because every one of these keys moves BETWEEN nodes,
+	 * and only the container knows the visible order — the flattened list that
+	 * skips collapsed subtrees. An item cannot answer "what is below me" without
+	 * rebuilding that list for itself.
+	 *
+	 * Right/Left are asymmetric on purpose, and this is the part hand-rolled
+	 * trees get wrong: Right on a COLLAPSED branch opens it and stays put, and on
+	 * an already-open branch descends to the first child. Left on an OPEN branch
+	 * closes it; on a leaf or a closed branch it jumps to the parent. That is
+	 * what makes a keyboard user able to climb out of a deep subtree without
+	 * pressing Up past every sibling.
+	 */
+	function onkeydown(e: KeyboardEvent) {
+		const vis = tree.visible;
+		if (!vis.length) return;
+		const id = tree.activeId;
+		const i = vis.findIndex((v) => v.node.id === id);
+		if (i < 0) return;
+		const cur = vis[i];
+		const focus = (nextId: string | null | undefined) => {
+			if (!nextId) return;
+			tree.active = nextId;
+			// The roving tabindex has to be followed by real DOM focus, or the
+			// browser keeps the focus ring on the node we just moved away from.
+			queueMicrotask(() => {
+				const el = ref?.querySelector<HTMLElement>(
+					`[data-tree-item][data-id="${CSS.escape(nextId)}"]`
+				);
+				el?.focus();
+			});
+		};
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				focus(vis[Math.min(i + 1, vis.length - 1)]?.node.id);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				focus(vis[Math.max(i - 1, 0)]?.node.id);
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				if (cur.branch && !cur.expanded) tree.setExpanded(cur.node.id, true);
+				else if (cur.branch && cur.expanded) focus(vis[i + 1]?.node.id);
+				break;
+			case 'ArrowLeft':
+				e.preventDefault();
+				if (cur.branch && cur.expanded) tree.setExpanded(cur.node.id, false);
+				else focus(cur.parentId);
+				break;
+			case 'Home':
+				e.preventDefault();
+				focus(vis[0]?.node.id);
+				break;
+			case 'End':
+				e.preventDefault();
+				focus(vis[vis.length - 1]?.node.id);
+				break;
+		}
+	}
+</script>
+<!--
+	role="tree" over a <ul> of role="treeitem". The nesting is expressed with
+	aria-level rather than nested <ul role="group">, because the rows are rendered
+	FLAT: a flattened list is what makes arrow-key order and DOM order the same
+	thing, and it keeps a 1,196-node catalog from building a matching depth of
+	nested elements. aria-level carries the depth that the DOM no longer does.
+-->
+<ul
+	bind:this={ref}
+	role="tree"
+	aria-label={label}
+	aria-multiselectable="false"
+	{onkeydown}
+	class={cn('flex flex-col', className)}
+	{...restProps}
+>
+	{#each tree.visible as v (v.node.id)}
+		{#if item}
+			{@render item(v)}
+		{:else}
+			<Item item={v} {trailing} />
+		{/if}
+	{/each}
+</ul>

package/dist/ui/tree/tree.svelte.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlatNode, type TreeNode } from './context.svelte.js';
+type $$ComponentProps = HTMLAttributes<HTMLUListElement> & {
+    ref?: HTMLUListElement | null;
+    nodes?: TreeNode[];
+    /** Controlled: bind it, or drive it from the URL. */
+    expanded?: string[];
+    selected?: string | null;
+    /** Accessible name for the tree landmark. */
+    label?: string;
+    /** Render your own row. Omitted, the default row is used. */
+    item?: Snippet<[FlatNode]>;
+    /** End-of-row slot on the default row — a count badge, a status dot. */
+    trailing?: Snippet<[FlatNode]>;
+};
+declare const Tree: import("svelte").Component<$$ComponentProps, {}, "ref" | "expanded" | "selected">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "24.0.3",
+	"version": "25.1.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -25,13 +25,14 @@
 		"check:classes": "node --experimental-strip-types scripts/check-classes.ts",
 		"check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules",
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:package-name && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:package-name",
 		"test": "npm run test:visual",
 		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
 		"check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
 		"check:specimen-coverage": "node --experimental-strip-types scripts/check-specimen-coverage.ts",
-		"check:eslint-rules": "node --experimental-strip-types scripts/check-eslint-rules.ts"
+		"check:eslint-rules": "node --experimental-strip-types scripts/check-eslint-rules.ts",
+		"check:package-name": "node --experimental-strip-types scripts/check-package-name.ts"
 	},
 	"files": [
 		"dist",

package/skill/SKILL.md CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 name: era-ui
 description: |
-  Design-system methodology for building UIs with @sig-nine/era-ui (Svelte 5 +
+  Design-system methodology for building UIs with @signal9/era-ui (Svelte 5 +
   Tailwind v4). Use when: writing or reviewing any component, layout, or page
   in a project that uses era-ui — sizing controls, spacing/padding, radii,
   surfaces, motion, or composing library components. Covers: the named class
@@ -167,7 +167,7 @@ Not everything era exposes is a component — these ride along with the styleshe
 and need no import. Reach for one before hand-rolling the same styling or bending
 a component into the role. Full reference (including every named scale above):
 `/utilities.md`; machine-readable list: `/utilities.json` (or
-`@sig-nine/era-ui/utilities.json`).
+`@signal9/era-ui/utilities.json`).
 | Class                | Use it for                                                                                                             |
 | -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
@@ -183,8 +183,8 @@ a component into the role. Full reference (including every named scale above):
 ```svelte
 <script lang="ts">
-	import { Button, Badge, OS, AI } from '@sig-nine/era-ui';
-	import * as Select from '@sig-nine/era-ui'; // namespaced parts: Select.Root…
+	import { Button, Badge, OS, AI } from '@signal9/era-ui';
+	import * as Select from '@signal9/era-ui'; // namespaced parts: Select.Root…
 </script>
 ```
@@ -192,7 +192,7 @@ a component into the role. Full reference (including every named scale above):
   through; style via `class` (merged with tailwind-merge, consumer wins — the
   named classes conflict-resolve against internals, so `class="h-bar"` on a
   control-tier control just works).
-- `OS` (or `@sig-nine/era-ui/os`): WindowManager + workspaces, Desktop,
+- `OS` (or `@signal9/era-ui/os`): WindowManager + workspaces, Desktop,
   Window, Taskbar (built-in command bar). `AI` (or `/ai`): Conversation,
   Message, Response, PromptInput, Tool/Reasoning/Task over the Step primitive.
 - List-item keyboard highlight is `data-[highlighted]:bg-hover` — never