@burtson-labs/ui 0.8.1 → 0.9.0

package/dist/components/tree-view.js

@@ -0,0 +1,278 @@
+import { cn } from "../lib/utils.js";
+import { Spinner } from "./spinner.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronRight from "@burtson-labs/icons/react/chevron-right";
+//#region src/components/tree-view.tsx
+var isExpandable = (n) => (n.children?.length ?? 0) > 0 || Boolean(n.hasChildren);
+/** The rows a person can see, in order, with the ARIA position data for each. */
+function flattenTree(nodes, expanded) {
+	const rows = [];
+	const walk = (list, level, parentId) => {
+		list.forEach((node, i) => {
+			const expandable = isExpandable(node);
+			const open = expandable && expanded.has(node.id);
+			rows.push({
+				node,
+				level,
+				parentId,
+				setSize: list.length,
+				posInSet: i + 1,
+				expandable,
+				expanded: open
+			});
+			if (open && node.children) walk(node.children, level + 1, node.id);
+		});
+	};
+	walk(nodes, 1, null);
+	return rows;
+}
+var isTypingTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+/**
+* A file-explorer style tree. Everything is controlled: the app owns which
+* nodes are expanded and selected, and file operations are callbacks. Rows
+* render flat (role="treeitem" with aria-level), one tab stop for the tree,
+* arrows to move, Right/Left to open and close, Home/End, typeahead.
+*/
+function TreeView({ nodes, expanded, onExpandedChange, selected, onSelectedChange, selectionMode = "single", selectionFollowsFocus = false, onAction, onLoadChildren, renderLabel, density = "default", empty, onRowContextMenu, className, ...props }) {
+	const expandedSet = React.useMemo(() => new Set(expanded), [expanded]);
+	const selectedSet = React.useMemo(() => new Set(selected), [selected]);
+	const rows = React.useMemo(() => flattenTree(nodes, expandedSet), [nodes, expandedSet]);
+	const index = React.useMemo(() => new Map(rows.map((r, i) => [r.node.id, i])), [rows]);
+	const [focusedId, setFocusedId] = React.useState(null);
+	const anchorId = React.useRef(null);
+	const rowRefs = React.useRef(/* @__PURE__ */ new Map());
+	const treeRef = React.useRef(null);
+	const hadFocus = React.useRef(false);
+	const lastIds = React.useRef([]);
+	const lastParents = React.useRef(/* @__PURE__ */ new Map());
+	const typeahead = React.useRef({
+		text: "",
+		at: 0
+	});
+	const tabStopId = (focusedId && index.has(focusedId) ? focusedId : null) ?? rows.find((r) => selectedSet.has(r.node.id))?.node.id ?? rows[0]?.node.id ?? null;
+	const focusRow = React.useCallback((id) => {
+		setFocusedId(id);
+		rowRefs.current.get(id)?.focus();
+		rowRefs.current.get(id)?.scrollIntoView?.({ block: "nearest" });
+	}, []);
+	React.useLayoutEffect(() => {
+		if (focusedId && !index.has(focusedId)) {
+			let next = null;
+			let parent = lastParents.current.get(focusedId) ?? null;
+			while (parent && !index.has(parent)) parent = lastParents.current.get(parent) ?? null;
+			const was = Math.max(0, lastIds.current.indexOf(focusedId));
+			next = parent ?? rows[Math.min(was, rows.length - 1)]?.node.id ?? null;
+			setFocusedId(next);
+			const active = document.activeElement;
+			if (next && hadFocus.current && (!active || active === document.body)) rowRefs.current.get(next)?.focus();
+		}
+		lastIds.current = rows.map((r) => r.node.id);
+		lastParents.current = new Map(rows.map((r) => [r.node.id, r.parentId]));
+	}, [
+		rows,
+		index,
+		focusedId
+	]);
+	const setExpanded = (row, open) => {
+		if (!row.expandable || row.expanded === open) return;
+		const id = row.node.id;
+		onExpandedChange(open ? [...expanded, id] : expanded.filter((e) => e !== id));
+		if (open && !row.node.children && row.node.hasChildren) onLoadChildren?.(id);
+	};
+	const selectRange = (toId) => {
+		const from = index.get(anchorId.current ?? toId) ?? 0;
+		const to = index.get(toId) ?? 0;
+		const [a, b] = from < to ? [from, to] : [to, from];
+		onSelectedChange(rows.slice(a, b + 1).filter((r) => !r.node.disabled).map((r) => r.node.id));
+	};
+	const select = (id, mode) => {
+		if (rows[index.get(id) ?? -1]?.node.disabled) return;
+		if (selectionMode === "single" || mode === "replace") {
+			anchorId.current = id;
+			onSelectedChange([id]);
+		} else if (mode === "toggle") {
+			anchorId.current = id;
+			onSelectedChange(selectedSet.has(id) ? selected.filter((s) => s !== id) : [...selected, id]);
+		} else selectRange(id);
+	};
+	const moveTo = (i, extend) => {
+		const row = rows[Math.max(0, Math.min(rows.length - 1, i))];
+		if (!row) return;
+		focusRow(row.node.id);
+		if (selectionMode === "multiple" && extend) selectRange(row.node.id);
+		else if (selectionFollowsFocus && !row.node.disabled) select(row.node.id, "replace");
+	};
+	const onKeyDown = (event) => {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented || isTypingTarget(event.target)) return;
+		const id = tabStopId;
+		if (!id) return;
+		const i = index.get(id) ?? 0;
+		const row = rows[i];
+		if (!row) return;
+		const mod = event.metaKey || event.ctrlKey;
+		let handled = true;
+		switch (event.key) {
+			case "ArrowDown":
+				moveTo(i + 1, event.shiftKey);
+				break;
+			case "ArrowUp":
+				moveTo(i - 1, event.shiftKey);
+				break;
+			case "Home":
+				moveTo(0, event.shiftKey);
+				break;
+			case "End":
+				moveTo(rows.length - 1, event.shiftKey);
+				break;
+			case "ArrowRight":
+				if (row.expandable && !row.expanded) setExpanded(row, true);
+				else if (row.expanded && rows[i + 1]?.parentId === row.node.id) moveTo(i + 1, event.shiftKey);
+				break;
+			case "ArrowLeft":
+				if (row.expanded) setExpanded(row, false);
+				else if (row.parentId) moveTo(index.get(row.parentId) ?? i, event.shiftKey);
+				break;
+			case "Enter":
+				if (row.node.disabled) break;
+				select(row.node.id, "replace");
+				onAction?.(row.node.id);
+				break;
+			case " ":
+				select(row.node.id, selectionMode === "multiple" ? event.shiftKey ? "range" : "toggle" : "replace");
+				break;
+			case "a":
+				if (mod && selectionMode === "multiple") onSelectedChange(rows.filter((r) => !r.node.disabled).map((r) => r.node.id));
+				else handled = false;
+				break;
+			case "ContextMenu":
+				onRowContextMenu?.(row.node.id, event);
+				break;
+			default: handled = false;
+		}
+		if (!handled && event.key.length === 1 && !mod && !event.altKey) {
+			const now = event.timeStamp;
+			const t = typeahead.current;
+			t.text = now - t.at > 600 ? event.key : t.text + event.key;
+			t.at = now;
+			const query = t.text.toLowerCase();
+			const start = t.text.length === 1 ? i + 1 : i;
+			for (let k = 0; k < rows.length; k++) {
+				const r = rows[(start + k) % rows.length];
+				if (r && r.node.label.toLowerCase().startsWith(query)) {
+					moveTo(index.get(r.node.id) ?? 0, false);
+					break;
+				}
+			}
+			handled = true;
+		}
+		if (handled) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	};
+	if (rows.length === 0 && empty) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "tree-view",
+		"data-empty": true,
+		className: cn("text-[13px]", className),
+		...props,
+		children: empty
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: treeRef,
+		role: "tree",
+		tabIndex: -1,
+		"data-slot": "tree-view",
+		"data-density": density,
+		"aria-multiselectable": selectionMode === "multiple" || void 0,
+		className: cn("group/tree flex flex-col py-1 text-[13px] select-none", className),
+		...props,
+		onKeyDown,
+		onFocus: (event) => {
+			hadFocus.current = true;
+			if (event.target === event.currentTarget && tabStopId) rowRefs.current.get(tabStopId)?.focus();
+			props.onFocus?.(event);
+		},
+		onBlur: (event) => {
+			if (!treeRef.current?.contains(event.relatedTarget)) hadFocus.current = false;
+			props.onBlur?.(event);
+		},
+		children: rows.map((row) => {
+			const { node } = row;
+			const isSelected = selectedSet.has(node.id);
+			return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				ref: (el) => {
+					if (el) rowRefs.current.set(node.id, el);
+					else rowRefs.current.delete(node.id);
+				},
+				role: "treeitem",
+				"data-slot": "tree-item",
+				"data-id": node.id,
+				"aria-level": row.level,
+				"aria-setsize": row.setSize,
+				"aria-posinset": row.posInSet,
+				"aria-expanded": row.expandable ? row.expanded : void 0,
+				"aria-selected": isSelected,
+				"aria-disabled": node.disabled || void 0,
+				"aria-busy": row.expanded && node.loading || void 0,
+				"aria-label": node.label,
+				tabIndex: node.id === tabStopId ? 0 : -1,
+				"data-state": isSelected ? "selected" : void 0,
+				style: { paddingInlineStart: `${(row.level - 1) * 12 + 4}px` },
+				className: cn("flex h-7 shrink-0 cursor-default items-center gap-1 rounded-sm pe-2 outline-none group-data-[density=compact]/tree:h-6", "hover:bg-muted/70 data-[state=selected]:bg-brand-soft/70 data-[state=selected]:text-foreground", "focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] aria-disabled:opacity-50"),
+				onFocus: () => setFocusedId(node.id),
+				onClick: (event) => {
+					if (isTypingTarget(event.target)) return;
+					select(node.id, event.shiftKey ? "range" : event.metaKey || event.ctrlKey ? "toggle" : "replace");
+					if (!event.shiftKey && !event.metaKey && !event.ctrlKey && row.expandable && selectionMode === "single") setExpanded(row, !row.expanded);
+				},
+				onDoubleClick: (event) => {
+					if (!isTypingTarget(event.target) && !node.disabled) onAction?.(node.id);
+				},
+				onContextMenu: onRowContextMenu ? (event) => onRowContextMenu(node.id, event) : void 0,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
+						onClick: (event) => {
+							if (!row.expandable) return;
+							event.stopPropagation();
+							setExpanded(row, !row.expanded);
+						},
+						children: row.expandable && /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3.5 motion-safe:transition-transform", row.expanded && "rotate-90") })
+					}),
+					node.icon && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex shrink-0 text-muted-foreground [&_svg]:size-4",
+						children: node.icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: renderLabel ? renderLabel(node) : node.label
+					}),
+					node.meta && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-xs text-muted-foreground",
+						children: node.meta
+					})
+				]
+			}), row.expanded && node.loading && !node.children?.length && /* @__PURE__ */ jsxs("div", {
+				role: "presentation",
+				"data-slot": "tree-loading",
+				style: { paddingInlineStart: `${row.level * 12 + 8}px` },
+				className: "flex h-7 items-center gap-2 text-muted-foreground group-data-[density=compact]/tree:h-6",
+				children: [/* @__PURE__ */ jsx(Spinner, {
+					className: "size-3.5",
+					label: `Loading ${node.label}`
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: "Loading…"
+				})]
+			})] }, node.id);
+		})
+	});
+}
+//#endregion
+export { TreeView, flattenTree };
+
+//# sourceMappingURL=tree-view.js.map

package/dist/components/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/components/tree-view.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Spinner } from './spinner';\n\nexport interface TreeNode {\n  /** Stable identity. Keep it across renders (a path, a database id). */\n  id: string;\n  /** Plain text: the accessible name and the typeahead key. */\n  label: string;\n  icon?: React.ReactNode;\n  /** Undefined: a leaf, unless `hasChildren` says the children load later. */\n  children?: TreeNode[];\n  /** Expandable before its children are known; expanding calls onLoadChildren. */\n  hasChildren?: boolean;\n  /** Children are being fetched; shows a loading row while expanded. */\n  loading?: boolean;\n  disabled?: boolean;\n  /** Trailing detail, such as a git status letter or a count. */\n  meta?: React.ReactNode;\n}\n\nexport interface TreeViewProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children' | 'onSelect' | 'aria-label'\n> {\n  nodes: TreeNode[];\n  /** Required: what the tree holds, e.g. \"Files\". */\n  'aria-label': string;\n  expanded: string[];\n  onExpandedChange: (ids: string[]) => void;\n  selected: string[];\n  onSelectedChange: (ids: string[]) => void;\n  /** `multiple`: Shift extends a range, Ctrl/⌘ toggles, Space toggles. */\n  selectionMode?: 'single' | 'multiple';\n  /** Move selection with focus on arrow keys (a file explorer); default off. */\n  selectionFollowsFocus?: boolean;\n  /** Enter or double-click: open the file, run the item. */\n  onAction?: (id: string) => void;\n  /** Called once when a node with `hasChildren` and no children expands. */\n  onLoadChildren?: (id: string) => void;\n  /** Replace the label, e.g. with a rename input. Keys typed in an input never move focus. */\n  renderLabel?: (node: TreeNode) => React.ReactNode;\n  /** `compact` 24px rows for desktop explorers, `default` 28px. */\n  density?: 'compact' | 'default';\n  /** Shown when `nodes` is empty. */\n  empty?: React.ReactNode;\n  /** Right-click or the context-menu key on a row. */\n  onRowContextMenu?: (id: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n}\n\ninterface Row {\n  node: TreeNode;\n  level: number;\n  parentId: string | null;\n  setSize: number;\n  posInSet: number;\n  expandable: boolean;\n  expanded: boolean;\n}\n\nconst isExpandable = (n: TreeNode) => (n.children?.length ?? 0) > 0 || Boolean(n.hasChildren);\n\n/** The rows a person can see, in order, with the ARIA position data for each. */\nexport function flattenTree(nodes: TreeNode[], expanded: ReadonlySet<string>): Row[] {\n  const rows: Row[] = [];\n  const walk = (list: TreeNode[], level: number, parentId: string | null) => {\n    list.forEach((node, i) => {\n      const expandable = isExpandable(node);\n      const open = expandable && expanded.has(node.id);\n      rows.push({\n        node,\n        level,\n        parentId,\n        setSize: list.length,\n        posInSet: i + 1,\n        expandable,\n        expanded: open,\n      });\n      if (open && node.children) walk(node.children, level + 1, node.id);\n    });\n  };\n  walk(nodes, 1, null);\n  return rows;\n}\n\nconst isTypingTarget = (target: EventTarget | null) =>\n  target instanceof HTMLElement &&\n  (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));\n\n/**\n * A file-explorer style tree. Everything is controlled: the app owns which\n * nodes are expanded and selected, and file operations are callbacks. Rows\n * render flat (role=\"treeitem\" with aria-level), one tab stop for the tree,\n * arrows to move, Right/Left to open and close, Home/End, typeahead.\n */\nfunction TreeView({\n  nodes,\n  expanded,\n  onExpandedChange,\n  selected,\n  onSelectedChange,\n  selectionMode = 'single',\n  selectionFollowsFocus = false,\n  onAction,\n  onLoadChildren,\n  renderLabel,\n  density = 'default',\n  empty,\n  onRowContextMenu,\n  className,\n  ...props\n}: TreeViewProps) {\n  const expandedSet = React.useMemo(() => new Set(expanded), [expanded]);\n  const selectedSet = React.useMemo(() => new Set(selected), [selected]);\n  const rows = React.useMemo(() => flattenTree(nodes, expandedSet), [nodes, expandedSet]);\n  const index = React.useMemo(() => new Map(rows.map((r, i) => [r.node.id, i])), [rows]);\n\n  const [focusedId, setFocusedId] = React.useState<string | null>(null);\n  const anchorId = React.useRef<string | null>(null);\n  const rowRefs = React.useRef(new Map<string, HTMLDivElement>());\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const hadFocus = React.useRef(false);\n  const lastIds = React.useRef<string[]>([]);\n  const lastParents = React.useRef(new Map<string, string | null>());\n  const typeahead = React.useRef({ text: '', at: 0 });\n\n  // The tab stop: the focused row if it is still visible, else the first\n  // selected visible row, else the first row.\n  const tabStopId =\n    (focusedId && index.has(focusedId) ? focusedId : null) ??\n    rows.find((r) => selectedSet.has(r.node.id))?.node.id ??\n    rows[0]?.node.id ??\n    null;\n\n  const focusRow = React.useCallback((id: string) => {\n    setFocusedId(id);\n    rowRefs.current.get(id)?.focus();\n    rowRefs.current.get(id)?.scrollIntoView?.({ block: 'nearest' });\n  }, []);\n\n  // Focus recovery: when the focused row disappears (deleted, or a parent\n  // collapsed), move to its nearest visible ancestor, else the row now at its\n  // old position. Only takes DOM focus if the tree had it.\n  React.useLayoutEffect(() => {\n    if (focusedId && !index.has(focusedId)) {\n      let next: string | null = null;\n      let parent = lastParents.current.get(focusedId) ?? null;\n      while (parent && !index.has(parent)) parent = lastParents.current.get(parent) ?? null;\n      const was = Math.max(0, lastIds.current.indexOf(focusedId));\n      next = parent ?? rows[Math.min(was, rows.length - 1)]?.node.id ?? null;\n      setFocusedId(next);\n      const active = document.activeElement;\n      if (next && hadFocus.current && (!active || active === document.body))\n        rowRefs.current.get(next)?.focus();\n    }\n    lastIds.current = rows.map((r) => r.node.id);\n    lastParents.current = new Map(rows.map((r) => [r.node.id, r.parentId]));\n  }, [rows, index, focusedId]);\n\n  const setExpanded = (row: Row, open: boolean) => {\n    if (!row.expandable || row.expanded === open) return;\n    const id = row.node.id;\n    onExpandedChange(open ? [...expanded, id] : expanded.filter((e) => e !== id));\n    if (open && !row.node.children && row.node.hasChildren) onLoadChildren?.(id);\n  };\n\n  const selectRange = (toId: string) => {\n    const from = index.get(anchorId.current ?? toId) ?? 0;\n    const to = index.get(toId) ?? 0;\n    const [a, b] = from < to ? [from, to] : [to, from];\n    onSelectedChange(\n      rows\n        .slice(a, b + 1)\n        .filter((r) => !r.node.disabled)\n        .map((r) => r.node.id),\n    );\n  };\n\n  const select = (id: string, mode: 'replace' | 'toggle' | 'range') => {\n    if (rows[index.get(id) ?? -1]?.node.disabled) return;\n    if (selectionMode === 'single' || mode === 'replace') {\n      anchorId.current = id;\n      onSelectedChange([id]);\n    } else if (mode === 'toggle') {\n      anchorId.current = id;\n      onSelectedChange(selectedSet.has(id) ? selected.filter((s) => s !== id) : [...selected, id]);\n    } else selectRange(id);\n  };\n\n  const moveTo = (i: number, extend: boolean) => {\n    const row = rows[Math.max(0, Math.min(rows.length - 1, i))];\n    if (!row) return;\n    focusRow(row.node.id);\n    if (selectionMode === 'multiple' && extend) selectRange(row.node.id);\n    else if (selectionFollowsFocus && !row.node.disabled) select(row.node.id, 'replace');\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n    if (event.defaultPrevented || isTypingTarget(event.target)) return;\n    const id = tabStopId;\n    if (!id) return;\n    const i = index.get(id) ?? 0;\n    const row = rows[i];\n    if (!row) return;\n    const mod = event.metaKey || event.ctrlKey;\n    let handled = true;\n    switch (event.key) {\n      case 'ArrowDown':\n        moveTo(i + 1, event.shiftKey);\n        break;\n      case 'ArrowUp':\n        moveTo(i - 1, event.shiftKey);\n        break;\n      case 'Home':\n        moveTo(0, event.shiftKey);\n        break;\n      case 'End':\n        moveTo(rows.length - 1, event.shiftKey);\n        break;\n      case 'ArrowRight':\n        if (row.expandable && !row.expanded) setExpanded(row, true);\n        else if (row.expanded && rows[i + 1]?.parentId === row.node.id)\n          moveTo(i + 1, event.shiftKey);\n        break;\n      case 'ArrowLeft':\n        if (row.expanded) setExpanded(row, false);\n        else if (row.parentId) moveTo(index.get(row.parentId) ?? i, event.shiftKey);\n        break;\n      case 'Enter':\n        if (row.node.disabled) break;\n        select(row.node.id, 'replace');\n        onAction?.(row.node.id);\n        break;\n      case ' ':\n        select(\n          row.node.id,\n          selectionMode === 'multiple' ? (event.shiftKey ? 'range' : 'toggle') : 'replace',\n        );\n        break;\n      case 'a':\n        if (mod && selectionMode === 'multiple') {\n          onSelectedChange(rows.filter((r) => !r.node.disabled).map((r) => r.node.id));\n        } else handled = false;\n        break;\n      case 'ContextMenu':\n        onRowContextMenu?.(row.node.id, event);\n        break;\n      default:\n        handled = false;\n    }\n    if (!handled && event.key.length === 1 && !mod && !event.altKey) {\n      // Typeahead: jump to the next row whose label starts with what was typed.\n      const now = event.timeStamp;\n      const t = typeahead.current;\n      t.text = now - t.at > 600 ? event.key : t.text + event.key;\n      t.at = now;\n      const query = t.text.toLowerCase();\n      const start = t.text.length === 1 ? i + 1 : i;\n      for (let k = 0; k < rows.length; k++) {\n        const r = rows[(start + k) % rows.length];\n        if (r && r.node.label.toLowerCase().startsWith(query)) {\n          moveTo(index.get(r.node.id) ?? 0, false);\n          break;\n        }\n      }\n      handled = true;\n    }\n    if (handled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  if (rows.length === 0 && empty) {\n    return (\n      <div data-slot=\"tree-view\" data-empty className={cn('text-[13px]', className)} {...props}>\n        {empty}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={treeRef}\n      role=\"tree\"\n      tabIndex={-1}\n      data-slot=\"tree-view\"\n      data-density={density}\n      aria-multiselectable={selectionMode === 'multiple' || undefined}\n      className={cn('group/tree flex flex-col py-1 text-[13px] select-none', className)}\n      {...props}\n      onKeyDown={onKeyDown}\n      onFocus={(event) => {\n        hadFocus.current = true;\n        // Focus landing on the tree itself (a click on empty space) goes to the tab stop.\n        if (event.target === event.currentTarget && tabStopId)\n          rowRefs.current.get(tabStopId)?.focus();\n        props.onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (!treeRef.current?.contains(event.relatedTarget)) hadFocus.current = false;\n        props.onBlur?.(event);\n      }}\n    >\n      {rows.map((row) => {\n        const { node } = row;\n        const isSelected = selectedSet.has(node.id);\n        return (\n          <React.Fragment key={node.id}>\n            {/* Keys are handled once on the tree, for whichever row has focus. */}\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <div\n              ref={(el) => {\n                if (el) rowRefs.current.set(node.id, el);\n                else rowRefs.current.delete(node.id);\n              }}\n              role=\"treeitem\"\n              data-slot=\"tree-item\"\n              data-id={node.id}\n              aria-level={row.level}\n              aria-setsize={row.setSize}\n              aria-posinset={row.posInSet}\n              aria-expanded={row.expandable ? row.expanded : undefined}\n              aria-selected={isSelected}\n              aria-disabled={node.disabled || undefined}\n              aria-busy={(row.expanded && node.loading) || undefined}\n              aria-label={node.label}\n              tabIndex={node.id === tabStopId ? 0 : -1}\n              data-state={isSelected ? 'selected' : undefined}\n              style={{ paddingInlineStart: `${(row.level - 1) * 12 + 4}px` }}\n              className={cn(\n                'flex h-7 shrink-0 cursor-default items-center gap-1 rounded-sm pe-2 outline-none group-data-[density=compact]/tree:h-6',\n                'hover:bg-muted/70 data-[state=selected]:bg-brand-soft/70 data-[state=selected]:text-foreground',\n                'focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] aria-disabled:opacity-50',\n              )}\n              onFocus={() => setFocusedId(node.id)}\n              onClick={(event) => {\n                if (isTypingTarget(event.target)) return;\n                select(\n                  node.id,\n                  event.shiftKey ? 'range' : event.metaKey || event.ctrlKey ? 'toggle' : 'replace',\n                );\n                if (\n                  !event.shiftKey &&\n                  !event.metaKey &&\n                  !event.ctrlKey &&\n                  row.expandable &&\n                  selectionMode === 'single'\n                )\n                  setExpanded(row, !row.expanded);\n              }}\n              onDoubleClick={(event) => {\n                if (!isTypingTarget(event.target) && !node.disabled) onAction?.(node.id);\n              }}\n              onContextMenu={\n                onRowContextMenu ? (event) => onRowContextMenu(node.id, event) : undefined\n              }\n            >\n              {/* A pointer shortcut only: Right and Left expand and collapse from the keyboard. */}\n              <span\n                aria-hidden\n                className=\"flex size-4 shrink-0 items-center justify-center text-muted-foreground\"\n                onClick={(event) => {\n                  if (!row.expandable) return;\n                  event.stopPropagation();\n                  setExpanded(row, !row.expanded);\n                }}\n              >\n                {row.expandable && (\n                  <ChevronRight\n                    className={cn(\n                      'size-3.5 motion-safe:transition-transform',\n                      row.expanded && 'rotate-90',\n                    )}\n                  />\n                )}\n              </span>\n              {node.icon && (\n                <span aria-hidden className=\"flex shrink-0 text-muted-foreground [&_svg]:size-4\">\n                  {node.icon}\n                </span>\n              )}\n              <span className=\"min-w-0 flex-1 truncate\">\n                {renderLabel ? renderLabel(node) : node.label}\n              </span>\n              {node.meta && (\n                <span className=\"shrink-0 text-xs text-muted-foreground\">{node.meta}</span>\n              )}\n            </div>\n            {row.expanded && node.loading && !node.children?.length && (\n              <div\n                role=\"presentation\"\n                data-slot=\"tree-loading\"\n                style={{ paddingInlineStart: `${row.level * 12 + 8}px` }}\n                className=\"flex h-7 items-center gap-2 text-muted-foreground group-data-[density=compact]/tree:h-6\"\n              >\n                <Spinner className=\"size-3.5\" label={`Loading ${node.label}`} />\n                <span aria-hidden>Loading…</span>\n              </div>\n            )}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { TreeView };\n"],"mappings":";;;;;;AA+DA,IAAM,gBAAgB,OAAiB,EAAE,UAAU,UAAU,KAAK,KAAK,QAAQ,EAAE,WAAW;;AAG5F,SAAgB,YAAY,OAAmB,UAAsC;CACnF,MAAM,OAAc,CAAC;CACrB,MAAM,QAAQ,MAAkB,OAAe,aAA4B;EACzE,KAAK,SAAS,MAAM,MAAM;GACxB,MAAM,aAAa,aAAa,IAAI;GACpC,MAAM,OAAO,cAAc,SAAS,IAAI,KAAK,EAAE;GAC/C,KAAK,KAAK;IACR;IACA;IACA;IACA,SAAS,KAAK;IACd,UAAU,IAAI;IACd;IACA,UAAU;GACZ,CAAC;GACD,IAAI,QAAQ,KAAK,UAAU,KAAK,KAAK,UAAU,QAAQ,GAAG,KAAK,EAAE;EACnE,CAAC;CACH;CACA,KAAK,OAAO,GAAG,IAAI;CACnB,OAAO;AACT;AAEA,IAAM,kBAAkB,WACtB,kBAAkB,gBACjB,OAAO,qBAAqB,4BAA4B,KAAK,OAAO,OAAO;;;;;;;AAQ9E,SAAS,SAAS,EAChB,OACA,UACA,kBACA,UACA,kBACA,gBAAgB,UAChB,wBAAwB,OACxB,UACA,gBACA,aACA,UAAU,WACV,OACA,kBACA,WACA,GAAG,SACa;CAChB,MAAM,cAAc,MAAM,cAAc,IAAI,IAAI,QAAQ,GAAG,CAAC,QAAQ,CAAC;CACrE,MAAM,cAAc,MAAM,cAAc,IAAI,IAAI,QAAQ,GAAG,CAAC,QAAQ,CAAC;CACrE,MAAM,OAAO,MAAM,cAAc,YAAY,OAAO,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC;CACtF,MAAM,QAAQ,MAAM,cAAc,IAAI,IAAI,KAAK,KAAK,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;CAErF,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAwB,IAAI;CACpE,MAAM,WAAW,MAAM,OAAsB,IAAI;CACjD,MAAM,UAAU,MAAM,uBAAO,IAAI,IAA4B,CAAC;CAC9D,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,WAAW,MAAM,OAAO,KAAK;CACnC,MAAM,UAAU,MAAM,OAAiB,CAAC,CAAC;CACzC,MAAM,cAAc,MAAM,uBAAO,IAAI,IAA2B,CAAC;CACjE,MAAM,YAAY,MAAM,OAAO;EAAE,MAAM;EAAI,IAAI;CAAE,CAAC;CAIlD,MAAM,aACH,aAAa,MAAM,IAAI,SAAS,IAAI,YAAY,SACjD,KAAK,MAAM,MAAM,YAAY,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,KAAK,MACnD,KAAK,EAAE,EAAE,KAAK,MACd;CAEF,MAAM,WAAW,MAAM,aAAa,OAAe;EACjD,aAAa,EAAE;EACf,QAAQ,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM;EAC/B,QAAQ,QAAQ,IAAI,EAAE,CAAC,EAAE,iBAAiB,EAAE,OAAO,UAAU,CAAC;CAChE,GAAG,CAAC,CAAC;CAKL,MAAM,sBAAsB;EAC1B,IAAI,aAAa,CAAC,MAAM,IAAI,SAAS,GAAG;GACtC,IAAI,OAAsB;GAC1B,IAAI,SAAS,YAAY,QAAQ,IAAI,SAAS,KAAK;GACnD,OAAO,UAAU,CAAC,MAAM,IAAI,MAAM,GAAG,SAAS,YAAY,QAAQ,IAAI,MAAM,KAAK;GACjF,MAAM,MAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ,QAAQ,SAAS,CAAC;GAC1D,OAAO,UAAU,KAAK,KAAK,IAAI,KAAK,KAAK,SAAS,CAAC,EAAE,EAAE,KAAK,MAAM;GAClE,aAAa,IAAI;GACjB,MAAM,SAAS,SAAS;GACxB,IAAI,QAAQ,SAAS,YAAY,CAAC,UAAU,WAAW,SAAS,OAC9D,QAAQ,QAAQ,IAAI,IAAI,CAAC,EAAE,MAAM;EACrC;EACA,QAAQ,UAAU,KAAK,KAAK,MAAM,EAAE,KAAK,EAAE;EAC3C,YAAY,UAAU,IAAI,IAAI,KAAK,KAAK,MAAM,CAAC,EAAE,KAAK,IAAI,EAAE,QAAQ,CAAC,CAAC;CACxE,GAAG;EAAC;EAAM;EAAO;CAAS,CAAC;CAE3B,MAAM,eAAe,KAAU,SAAkB;EAC/C,IAAI,CAAC,IAAI,cAAc,IAAI,aAAa,MAAM;EAC9C,MAAM,KAAK,IAAI,KAAK;EACpB,iBAAiB,OAAO,CAAC,GAAG,UAAU,EAAE,IAAI,SAAS,QAAQ,MAAM,MAAM,EAAE,CAAC;EAC5E,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,IAAI,KAAK,aAAa,iBAAiB,EAAE;CAC7E;CAEA,MAAM,eAAe,SAAiB;EACpC,MAAM,OAAO,MAAM,IAAI,SAAS,WAAW,IAAI,KAAK;EACpD,MAAM,KAAK,MAAM,IAAI,IAAI,KAAK;EAC9B,MAAM,CAAC,GAAG,KAAK,OAAO,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI;EACjD,iBACE,KACG,MAAM,GAAG,IAAI,CAAC,CAAC,CACf,QAAQ,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC,CAC/B,KAAK,MAAM,EAAE,KAAK,EAAE,CACzB;CACF;CAEA,MAAM,UAAU,IAAY,SAAyC;EACnE,IAAI,KAAK,MAAM,IAAI,EAAE,KAAK,GAAG,EAAE,KAAK,UAAU;EAC9C,IAAI,kBAAkB,YAAY,SAAS,WAAW;GACpD,SAAS,UAAU;GACnB,iBAAiB,CAAC,EAAE,CAAC;EACvB,OAAO,IAAI,SAAS,UAAU;GAC5B,SAAS,UAAU;GACnB,iBAAiB,YAAY,IAAI,EAAE,IAAI,SAAS,QAAQ,MAAM,MAAM,EAAE,IAAI,CAAC,GAAG,UAAU,EAAE,CAAC;EAC7F,OAAO,YAAY,EAAE;CACvB;CAEA,MAAM,UAAU,GAAW,WAAoB;EAC7C,MAAM,MAAM,KAAK,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAAS,GAAG,CAAC,CAAC;EACzD,IAAI,CAAC,KAAK;EACV,SAAS,IAAI,KAAK,EAAE;EACpB,IAAI,kBAAkB,cAAc,QAAQ,YAAY,IAAI,KAAK,EAAE;OAC9D,IAAI,yBAAyB,CAAC,IAAI,KAAK,UAAU,OAAO,IAAI,KAAK,IAAI,SAAS;CACrF;CAEA,MAAM,aAAa,UAA+C;EAChE,MAAM,YAAY,KAAK;EACvB,IAAI,MAAM,oBAAoB,eAAe,MAAM,MAAM,GAAG;EAC5D,MAAM,KAAK;EACX,IAAI,CAAC,IAAI;EACT,MAAM,IAAI,MAAM,IAAI,EAAE,KAAK;EAC3B,MAAM,MAAM,KAAK;EACjB,IAAI,CAAC,KAAK;EACV,MAAM,MAAM,MAAM,WAAW,MAAM;EACnC,IAAI,UAAU;EACd,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,OAAO,IAAI,GAAG,MAAM,QAAQ;IAC5B;GACF,KAAK;IACH,OAAO,IAAI,GAAG,MAAM,QAAQ;IAC5B;GACF,KAAK;IACH,OAAO,GAAG,MAAM,QAAQ;IACxB;GACF,KAAK;IACH,OAAO,KAAK,SAAS,GAAG,MAAM,QAAQ;IACtC;GACF,KAAK;IACH,IAAI,IAAI,cAAc,CAAC,IAAI,UAAU,YAAY,KAAK,IAAI;SACrD,IAAI,IAAI,YAAY,KAAK,IAAI,EAAE,EAAE,aAAa,IAAI,KAAK,IAC1D,OAAO,IAAI,GAAG,MAAM,QAAQ;IAC9B;GACF,KAAK;IACH,IAAI,IAAI,UAAU,YAAY,KAAK,KAAK;SACnC,IAAI,IAAI,UAAU,OAAO,MAAM,IAAI,IAAI,QAAQ,KAAK,GAAG,MAAM,QAAQ;IAC1E;GACF,KAAK;IACH,IAAI,IAAI,KAAK,UAAU;IACvB,OAAO,IAAI,KAAK,IAAI,SAAS;IAC7B,WAAW,IAAI,KAAK,EAAE;IACtB;GACF,KAAK;IACH,OACE,IAAI,KAAK,IACT,kBAAkB,aAAc,MAAM,WAAW,UAAU,WAAY,SACzE;IACA;GACF,KAAK;IACH,IAAI,OAAO,kBAAkB,YAC3B,iBAAiB,KAAK,QAAQ,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,KAAK,MAAM,EAAE,KAAK,EAAE,CAAC;SACtE,UAAU;IACjB;GACF,KAAK;IACH,mBAAmB,IAAI,KAAK,IAAI,KAAK;IACrC;GACF,SACE,UAAU;EACd;EACA,IAAI,CAAC,WAAW,MAAM,IAAI,WAAW,KAAK,CAAC,OAAO,CAAC,MAAM,QAAQ;GAE/D,MAAM,MAAM,MAAM;GAClB,MAAM,IAAI,UAAU;GACpB,EAAE,OAAO,MAAM,EAAE,KAAK,MAAM,MAAM,MAAM,EAAE,OAAO,MAAM;GACvD,EAAE,KAAK;GACP,MAAM,QAAQ,EAAE,KAAK,YAAY;GACjC,MAAM,QAAQ,EAAE,KAAK,WAAW,IAAI,IAAI,IAAI;GAC5C,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;IACpC,MAAM,IAAI,MAAM,QAAQ,KAAK,KAAK;IAClC,IAAI,KAAK,EAAE,KAAK,MAAM,YAAY,CAAC,CAAC,WAAW,KAAK,GAAG;KACrD,OAAO,MAAM,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK;KACvC;IACF;GACF;GACA,UAAU;EACZ;EACA,IAAI,SAAS;GACX,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;CACF;CAEA,IAAI,KAAK,WAAW,KAAK,OACvB,OACE,oBAAC,OAAD;EAAK,aAAU;EAAY,cAAA;EAAW,WAAW,GAAG,eAAe,SAAS;EAAG,GAAI;EAChF,UAAA;CACE,CAAA;CAIT,OACE,oBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,aAAU;EACV,gBAAc;EACd,wBAAsB,kBAAkB,cAAc,KAAA;EACtD,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;EACO;EACX,UAAU,UAAU;GAClB,SAAS,UAAU;GAEnB,IAAI,MAAM,WAAW,MAAM,iBAAiB,WAC1C,QAAQ,QAAQ,IAAI,SAAS,CAAC,EAAE,MAAM;GACxC,MAAM,UAAU,KAAK;EACvB;EACA,SAAS,UAAU;GACjB,IAAI,CAAC,QAAQ,SAAS,SAAS,MAAM,aAAa,GAAG,SAAS,UAAU;GACxE,MAAM,SAAS,KAAK;EACtB;EAEC,UAAA,KAAK,KAAK,QAAQ;GACjB,MAAM,EAAE,SAAS;GACjB,MAAM,aAAa,YAAY,IAAI,KAAK,EAAE;GAC1C,OACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CAGE,qBAAC,OAAD;IACE,MAAM,OAAO;KACX,IAAI,IAAI,QAAQ,QAAQ,IAAI,KAAK,IAAI,EAAE;UAClC,QAAQ,QAAQ,OAAO,KAAK,EAAE;IACrC;IACA,MAAK;IACL,aAAU;IACV,WAAS,KAAK;IACd,cAAY,IAAI;IAChB,gBAAc,IAAI;IAClB,iBAAe,IAAI;IACnB,iBAAe,IAAI,aAAa,IAAI,WAAW,KAAA;IAC/C,iBAAe;IACf,iBAAe,KAAK,YAAY,KAAA;IAChC,aAAY,IAAI,YAAY,KAAK,WAAY,KAAA;IAC7C,cAAY,KAAK;IACjB,UAAU,KAAK,OAAO,YAAY,IAAI;IACtC,cAAY,aAAa,aAAa,KAAA;IACtC,OAAO,EAAE,oBAAoB,IAAI,IAAI,QAAQ,KAAK,KAAK,EAAE,IAAI;IAC7D,WAAW,GACT,0HACA,kGACA,6EACF;IACA,eAAe,aAAa,KAAK,EAAE;IACnC,UAAU,UAAU;KAClB,IAAI,eAAe,MAAM,MAAM,GAAG;KAClC,OACE,KAAK,IACL,MAAM,WAAW,UAAU,MAAM,WAAW,MAAM,UAAU,WAAW,SACzE;KACA,IACE,CAAC,MAAM,YACP,CAAC,MAAM,WACP,CAAC,MAAM,WACP,IAAI,cACJ,kBAAkB,UAElB,YAAY,KAAK,CAAC,IAAI,QAAQ;IAClC;IACA,gBAAgB,UAAU;KACxB,IAAI,CAAC,eAAe,MAAM,MAAM,KAAK,CAAC,KAAK,UAAU,WAAW,KAAK,EAAE;IACzE;IACA,eACE,oBAAoB,UAAU,iBAAiB,KAAK,IAAI,KAAK,IAAI,KAAA;IA5CrE,UAAA;KAgDE,oBAAC,QAAD;MACE,eAAA;MACA,WAAU;MACV,UAAU,UAAU;OAClB,IAAI,CAAC,IAAI,YAAY;OACrB,MAAM,gBAAgB;OACtB,YAAY,KAAK,CAAC,IAAI,QAAQ;MAChC;MAEC,UAAA,IAAI,cACH,oBAAC,cAAD,EACE,WAAW,GACT,6CACA,IAAI,YAAY,WAClB,EACD,CAAA;KAEC,CAAA;KACL,KAAK,QACJ,oBAAC,QAAD;MAAM,eAAA;MAAY,WAAU;MACzB,UAAA,KAAK;KACF,CAAA;KAER,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,cAAc,YAAY,IAAI,IAAI,KAAK;KACpC,CAAA;KACL,KAAK,QACJ,oBAAC,QAAD;MAAM,WAAU;MAA0C,UAAA,KAAK;KAAW,CAAA;IAEzE;GACJ,CAAA,GAAA,IAAI,YAAY,KAAK,WAAW,CAAC,KAAK,UAAU,UAC/C,qBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,OAAO,EAAE,oBAAoB,GAAG,IAAI,QAAQ,KAAK,EAAE,IAAI;IACvD,WAAU;IAJZ,UAAA,CAME,oBAAC,SAAD;KAAS,WAAU;KAAW,OAAO,WAAW,KAAK;IAAU,CAAA,GAC/D,oBAAC,QAAD;KAAM,eAAA;KAAY,UAAA;IAAc,CAAA,CAC7B;GAEO,CAAA,CAAA,EAAA,GA5FK,KAAK,EA4FV;EAEpB,CAAC;CACE,CAAA;AAET"}

package/dist/index.d.ts

@@ -15,10 +15,12 @@ export * from './components/collapsible';
 export * from './components/combobox';
 export * from './components/command';
 export * from './components/composer';
+export * from './components/context-menu';
 export * from './components/conversation';
 export * from './components/copy-button';
 export * from './components/dialog';
 export * from './components/dropdown-menu';
+export * from './components/editor-tabs';
 export * from './components/empty-state';
 export * from './components/field';
 export * from './components/icon-button';
@@ -26,14 +28,17 @@ export * from './components/input';
 export * from './components/kbd';
 export * from './components/label';
 export * from './components/markdown';
+export * from './components/menubar';
 export * from './components/message';
 export * from './components/navigation-menu';
+export * from './components/onboarding-checklist';
 export * from './components/page-header';
 export * from './components/pagination';
 export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio-group';
 export * from './components/reasoning';
+export * from './components/resizable';
 export * from './components/scroll-area';
 export * from './components/secret-input';
 export * from './components/select';
@@ -54,3 +59,5 @@ export * from './components/toaster';
 export * from './components/tool-call';
 export * from './components/toolbar';
 export * from './components/tooltip';
+export * from './components/tour';
+export * from './components/tree-view';

package/dist/index.js

@@ -15,28 +15,33 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./component
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/command.js";
 import { Input, fieldClasses } from "./components/input.js";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, surfaceClasses } from "./components/popover.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, surfaceClasses } from "./components/popover.js";
 import { Spinner } from "./components/spinner.js";
 import { Combobox } from "./components/combobox.js";
 import { Composer, Suggestions } from "./components/composer.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/context-menu.js";
 import { Conversation } from "./components/conversation.js";
 import { IconButton } from "./components/icon-button.js";
 import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./components/toast.js";
 import { Toaster, toast } from "./components/toaster.js";
 import { CopyButton } from "./components/copy-button.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu.js";
+import { EditorTabs } from "./components/editor-tabs.js";
 import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./components/empty-state.js";
 import { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel } from "./components/field.js";
 import { Kbd, KbdGroup } from "./components/kbd.js";
 import { Label } from "./components/label.js";
 import { CodeBlock, Markdown, parseMarkdown } from "./components/markdown.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/menubar.js";
 import { Message } from "./components/message.js";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/navigation-menu.js";
+import { Progress } from "./components/progress.js";
+import { OnboardingChecklist } from "./components/onboarding-checklist.js";
 import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle } from "./components/page-header.js";
 import { Pagination, paginationRange } from "./components/pagination.js";
-import { Progress } from "./components/progress.js";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group.js";
 import { Reasoning, StreamingIndicator } from "./components/reasoning.js";
+import { ResizablePanel, ResizablePanelGroup, ResizeHandle, useGroupRef, usePanelRef } from "./components/resizable.js";
 import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
 import { SecretInput } from "./components/secret-input.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
@@ -54,4 +59,6 @@ import { Textarea } from "./components/textarea.js";
 import { ToolApproval, ToolCall } from "./components/tool-call.js";
 import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer } from "./components/toolbar.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Conversation, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, Markdown, Message, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ScrollArea, ScrollBar, SecretInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatCard, Status, StatusDot, Steps, StreamingIndicator, Suggestions, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, ToolApproval, ToolCall, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, fontMono, fontSans, isApplePlatform, light, modKeyLabel, motion, navigationMenuTriggerStyle, paginationRange, parseMarkdown, radius, shadow, shortcutLabel, statusDotVariants, surfaceClasses, toast, toastVariants, tokens };
+import { Spotlight, Tour, TourAnchor, findTourTarget, tourTarget, waitForTourTarget } from "./components/tour.js";
+import { TreeView, flattenTree } from "./components/tree-view.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Conversation, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditorTabs, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, Markdown, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OnboardingChecklist, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizablePanel, ResizablePanelGroup, ResizeHandle, ScrollArea, ScrollBar, SecretInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, Spotlight, StatCard, Status, StatusDot, Steps, StreamingIndicator, Suggestions, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, ToolApproval, ToolCall, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TourAnchor, TreeView, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, findTourTarget, flattenTree, fontMono, fontSans, isApplePlatform, light, menuItemClasses, modKeyLabel, motion, navigationMenuTriggerStyle, paginationRange, parseMarkdown, radius, shadow, shortcutLabel, statusDotVariants, surfaceClasses, toast, toastVariants, tokens, tourTarget, useGroupRef, usePanelRef, waitForTourTarget };