@gridui/tree 0.0.0-stage → 0.0.0

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
+# @gridui/tree
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A single-selection hierarchical tree with keyboard navigation, controlled expansion, and searchable labels. Tree owns interaction and row presentation; applications own data loading, navigation, and persistence.
+
+```tsx
+import "@gridui/theme/styles.css";
+import "@gridui/tree/styles.css";
+import { Tree } from "@gridui/tree";
+
+<Tree
+    label="Project files"
+    items={[
+        { id: "docs", label: "Documents", children: [{ id: "brief", label: "Project brief" }] },
+        { id: "assets", label: "Assets" },
+    ]}
+    defaultExpandedIds={["docs"]}
+    onSelectedIdChange={setSelectedFile}
+/>;
+```
+
+Every `TreeNode` has a stable, unique non-empty `id`, `label`, optional `children`, and optional `disabled`. A non-text label requires `textValue`, which supplies its accessible name and typeahead text. Labels contain presentation rather than nested interactive controls. Empty children are a leaf; this component does not infer asynchronous loading or children that have not been supplied.
+
+`expandedIds`/`onExpandedIdsChange` and `selectedId`/`onSelectedIdChange` independently control expansion and selection. Their uncontrolled counterparts are `defaultExpandedIds` and `defaultSelectedId`. `null` means no selection. Controlled consumers can reject a change. Collapsing a branch preserves descendant expansion and selection. Only visible descendants render. `empty` supplies optional content when the tree has no items.
+
+The tree has one tab stop. Up/Down navigate visible items; Home/End jump to the first/last. Right expands a closed branch or enters its first child; Left collapses it or focuses its parent. Horizontal commands reverse in inherited RTL. Enter/Space select without making arrow navigation select. `*` expands available sibling branches. Printable keys find a visible name; consecutive input forms a prefix for 700 ms, repeated letters cycle matches, and `locale` controls case/accent-insensitive matching. IME composition is left to the input method.
+
+Click a row to select, the disclosure marker to expand/collapse, or double-click a branch row to toggle it. Disabled items remain keyboard discoverable but cannot be selected or toggled. `disabled` disables activation for the whole tree while preserving inspection. When a focused descendant collapses, focus returns to the nearest visible ancestor; when it is removed, focus falls back to the first visible item. Updates repair only focus owned by a removed tree item; they do not steal focus after the user leaves the tree, including clicking a nonfocusable area. When an empty, focused tree receives items, focus moves to its first item.
+
+`label` is the tree's required accessible name. Each item reports level, position, set size, expansion, selection, and disabled state. Native ul props and `ref` reach the root. Tree emits no hidden form field; applications submit their selected identifier explicitly. The component does not introduce routes, drag-and-drop, multiselect, or virtualization policy.
+
+See [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/tree/.changeset/history).

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Tree
+ * @namespace Root
+ * @description Index
+ */
+export type { TreeProps } from "./tree/tree";
+export { Tree } from "./tree/tree";
+export type { TreeNode } from "./tree/types";

package/dist/index.js

@@ -0,0 +1,379 @@
+// src/tree/model.ts
+var treeModel = (items, expanded) => {
+  const entries = /* @__PURE__ */ new Map();
+  const visible = [];
+  const visit = (nodes, parent, level, shown) => {
+    nodes.forEach((node, index) => {
+      if (!node.id || entries.has(node.id)) {
+        throw new Error("Tree items require unique, non-empty IDs.");
+      }
+      entries.set(node.id, {
+        node,
+        parent,
+        level,
+        position: index + 1,
+        count: nodes.length
+      });
+      if (shown) {
+        visible.push(node.id);
+      }
+      visit(node.children ?? [], node.id, level + 1, shown && expanded.has(node.id));
+    });
+  };
+  visit(items, null, 1, true);
+  return {
+    entries,
+    visible
+  };
+};
+var visibleFocus = (id, model) => {
+  let candidate = id;
+  while (candidate !== null) {
+    if (model.visible.includes(candidate)) {
+      return candidate;
+    }
+    candidate = model.entries.get(candidate)?.parent ?? null;
+  }
+  return model.visible[0] ?? null;
+};
+var nodeText = (node) => {
+  return node.textValue ?? (typeof node.label === "string" ? node.label : "");
+};
+var typeaheadMatch = (query, active, model, locale) => {
+  const characters = Array.from(query);
+  const repeated = characters.length > 1 && characters.every((character) => {
+    return character === characters[0];
+  });
+  const term = repeated ? characters[0] ?? "" : query;
+  const collator = new Intl.Collator(locale, {
+    usage: "search",
+    sensitivity: "base"
+  });
+  const current = model.visible.indexOf(active);
+  const offset = term.length === 1 ? 1 : 0;
+  for (let index = offset; index < model.visible.length + offset; index++) {
+    const id = model.visible[(current + index + model.visible.length) % model.visible.length];
+    const node = id === void 0 ? void 0 : model.entries.get(id)?.node;
+    if (node && id && collator.compare(nodeText(node).slice(0, term.length), term) === 0) {
+      return id;
+    }
+  }
+  return null;
+};
+var treeKeyAction = (key, id, model, expanded, reverse) => {
+  const entry = model.entries.get(id);
+  if (!entry) {
+    return null;
+  }
+  const index = model.visible.indexOf(id);
+  let target;
+  if (key === "ArrowDown") {
+    target = model.visible[Math.min(index + 1, model.visible.length - 1)];
+  } else if (key === "ArrowUp") {
+    target = model.visible[Math.max(index - 1, 0)];
+  } else if (key === "Home") {
+    target = model.visible[0];
+  } else if (key === "End") {
+    target = model.visible.at(-1);
+  } else if (key === (reverse ? "ArrowLeft" : "ArrowRight")) {
+    if (entry.node.children?.length) {
+      if (!expanded.has(id)) {
+        return {
+          kind: "expand",
+          id
+        };
+      }
+      target = entry.node.children[0]?.id;
+    }
+  } else if (key === (reverse ? "ArrowRight" : "ArrowLeft")) {
+    if (entry.node.children?.length && expanded.has(id)) {
+      return {
+        kind: "collapse",
+        id
+      };
+    }
+    target = entry.parent ?? void 0;
+  } else if (key === "Enter" || key === " ") {
+    return {
+      kind: "select",
+      id
+    };
+  } else if (key === "*") {
+    return {
+      kind: "siblings",
+      id
+    };
+  } else {
+    return null;
+  }
+  return {
+    kind: "focus",
+    id: target ?? id
+  };
+};
+
+// src/tree/tree.tsx
+import { isComposingKeyEvent } from "@gridui/interaction";
+import { cn } from "@gridui/style-utils";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tree = (props) => {
+  const {
+    items,
+    label,
+    expandedIds,
+    defaultExpandedIds = [],
+    onExpandedIdsChange,
+    selectedId,
+    defaultSelectedId = null,
+    onSelectedIdChange,
+    disabled = false,
+    locale,
+    empty,
+    className,
+    onKeyDown,
+    ref,
+    ...restProps
+  } = props;
+  const [
+    localExpanded,
+    setLocalExpanded
+  ] = useState(defaultExpandedIds);
+  const [
+    localSelected,
+    setLocalSelected
+  ] = useState(defaultSelectedId);
+  const [
+    active,
+    setActive
+  ] = useState(selectedId ?? defaultSelectedId);
+  const root = useRef(null);
+  const rows = useRef(/* @__PURE__ */ new Map());
+  const removedFocus = useRef(null);
+  const search = useRef({
+    text: "",
+    time: 0
+  });
+  const expanded = new Set(expandedIds ?? localExpanded);
+  const selected = selectedId === void 0 ? localSelected : selectedId;
+  const model = treeModel(items, expanded);
+  const focused = visibleFocus(active, model);
+  useImperativeHandle(ref, () => {
+    return root.current;
+  });
+  useLayoutEffect(() => {
+    const previous = removedFocus.current;
+    removedFocus.current = null;
+    const element = root.current;
+    if (!element) {
+      return;
+    }
+    const document = element.ownerDocument;
+    const activeElement = document.activeElement;
+    const populatedFocusedRoot = activeElement === element && focused !== null;
+    const removedOwnedFocus = previous && !previous.isConnected && (activeElement === document.body || element.contains(activeElement));
+    if (populatedFocusedRoot || removedOwnedFocus) {
+      if (focused) {
+        rows.current.get(focused)?.focus({ preventScroll: true });
+      } else {
+        element.focus({ preventScroll: true });
+      }
+    }
+  });
+  const focus = (id) => {
+    rows.current.get(id)?.focus();
+  };
+  const changeExpanded = (next) => {
+    const values = [...next];
+    if (expandedIds === void 0) {
+      setLocalExpanded(values);
+    }
+    onExpandedIdsChange?.(values);
+  };
+  const toggle = (id, open) => {
+    if (disabled || model.entries.get(id)?.node.disabled || expanded.has(id) === open) {
+      return;
+    }
+    const next = new Set(expanded);
+    if (open) {
+      next.add(id);
+    } else {
+      next.delete(id);
+    }
+    changeExpanded(next);
+  };
+  const select = (id) => {
+    if (disabled || model.entries.get(id)?.node.disabled || selected === id) {
+      return;
+    }
+    if (selectedId === void 0) {
+      setLocalSelected(id);
+    }
+    onSelectedIdChange?.(id);
+  };
+  const renderItems = (nodes) => {
+    return nodes.map((node) => {
+      const entry = model.entries.get(node.id);
+      const branch = Boolean(node.children?.length);
+      const open = branch && expanded.has(node.id);
+      const unavailable = disabled || node.disabled;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          role: "treeitem",
+          "aria-label": nodeText(node),
+          "aria-level": entry?.level,
+          "aria-posinset": entry?.position,
+          "aria-setsize": entry?.count,
+          "aria-expanded": branch ? open : void 0,
+          "aria-selected": selected === node.id,
+          "aria-disabled": unavailable || void 0,
+          tabIndex: focused === node.id ? 0 : -1,
+          className: "gridui-tree-item",
+          ref: (element) => {
+            if (element) {
+              rows.current.set(node.id, element);
+            } else {
+              const previous = rows.current.get(node.id);
+              if (previous && previous.ownerDocument.activeElement === previous) {
+                removedFocus.current = previous;
+              }
+              rows.current.delete(node.id);
+            }
+          },
+          onFocus: (event) => {
+            if (event.target === event.currentTarget) {
+              setActive(node.id);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "gridui-tree-row",
+                onClick: () => {
+                  focus(node.id);
+                  select(node.id);
+                },
+                onDoubleClick: () => {
+                  if (branch) {
+                    toggle(node.id, !open);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "gridui-tree-disclosure",
+                      onClick: (event) => {
+                        if (branch) {
+                          event.stopPropagation();
+                          focus(node.id);
+                          toggle(node.id, !open);
+                        }
+                      },
+                      onDoubleClick: (event) => {
+                        event.stopPropagation();
+                      },
+                      children: branch && (open ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(
+                        ChevronRight,
+                        {
+                          className: "gridui-tree-chevron"
+                        }
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "gridui-tree-label",
+                      children: node.label
+                    }
+                  )
+                ]
+              }
+            ),
+            open && /* @__PURE__ */ jsx(
+              "ul",
+              {
+                role: "group",
+                className: "gridui-tree-group",
+                children: renderItems(node.children ?? [])
+              }
+            )
+          ]
+        },
+        node.id
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ...restProps,
+      ref: root,
+      role: "tree",
+      "aria-label": label,
+      "aria-disabled": disabled || void 0,
+      tabIndex: focused === null ? 0 : -1,
+      className: cn("gridui-tree", className),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || isComposingKeyEvent(event.nativeEvent) || event.altKey || event.ctrlKey || event.metaKey || !focused) {
+          return;
+        }
+        const action = treeKeyAction(event.key, focused, model, expanded, getComputedStyle(event.currentTarget).direction === "rtl");
+        if (action) {
+          event.preventDefault();
+          search.current.text = "";
+          if (action.kind === "focus") {
+            focus(action.id);
+          } else if (action.kind === "select") {
+            select(action.id);
+          } else if (action.kind === "expand" || action.kind === "collapse") {
+            toggle(action.id, action.kind === "expand");
+          } else if (!disabled) {
+            const next = new Set(expanded);
+            const parent = model.entries.get(action.id)?.parent;
+            for (const [
+              id,
+              entry
+            ] of model.entries) {
+              if (entry.parent === parent && entry.node.children?.length && !entry.node.disabled) {
+                next.add(id);
+              }
+            }
+            if (next.size !== expanded.size) {
+              changeExpanded(next);
+            }
+          }
+        } else if (event.key.length === 1) {
+          const now = Date.now();
+          search.current.text = now - search.current.time > 700 ? event.key : search.current.text + event.key;
+          search.current.time = now;
+          const match = typeaheadMatch(search.current.text, focused, model, locale);
+          if (match) {
+            event.preventDefault();
+            focus(match);
+          }
+        }
+      },
+      children: [
+        renderItems(items),
+        items.length === 0 && empty !== void 0 && /* @__PURE__ */ jsx(
+          "li",
+          {
+            role: "none",
+            children: empty
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tree
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/tree/model.ts", "../src/tree/tree.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Tree\n * @namespace Tree\n * @description Model\n */\n\nimport type { TreeNode } from \"./types\";\n\nexport type TreeEntry = {\n    readonly node: TreeNode;\n    readonly parent: string | null;\n    readonly level: number;\n    readonly position: number;\n    readonly count: number;\n};\nexport type TreeModel = {\n    readonly entries: ReadonlyMap<string, TreeEntry>;\n    readonly visible: readonly string[];\n};\nexport type TreeAction = {\n    readonly kind: \"focus\" | \"expand\" | \"collapse\" | \"select\" | \"siblings\";\n    readonly id: string;\n};\n\nexport const treeModel = (items: readonly TreeNode[], expanded: ReadonlySet<string>): TreeModel => {\n    const entries = new Map<string, TreeEntry>();\n    const visible: string[] = [];\n    const visit = (nodes: readonly TreeNode[], parent: string | null, level: number, shown: boolean): void => {\n        nodes.forEach((node, index) => {\n            if (!node.id || entries.has(node.id)) {\n                throw new Error(\"Tree items require unique, non-empty IDs.\");\n            }\n            entries.set(node.id, {\n                node,\n                parent,\n                level,\n                position: index + 1,\n                count: nodes.length,\n            });\n            if (shown) {\n                visible.push(node.id);\n            }\n            visit(node.children ?? [], node.id, level + 1, shown && expanded.has(node.id));\n        });\n    };\n    visit(items, null, 1, true);\n    return {\n        entries,\n        visible,\n    };\n};\n\nexport const visibleFocus = (id: string | null, model: TreeModel): string | null => {\n    let candidate = id;\n    while (candidate !== null) {\n        if (model.visible.includes(candidate)) {\n            return candidate;\n        }\n        candidate = model.entries.get(candidate)?.parent ?? null;\n    }\n    return model.visible[0] ?? null;\n};\n\nexport const nodeText = (node: TreeNode): string => {\n    return node.textValue ?? (typeof node.label === \"string\" ? node.label : \"\");\n};\n\nexport const typeaheadMatch = (query: string, active: string, model: TreeModel, locale?: string): string | null => {\n    const characters = Array.from(query);\n    const repeated = characters.length > 1 && characters.every((character) => {\n        return character === characters[0];\n    });\n    const term = repeated ? characters[0] ?? \"\" : query;\n    const collator = new Intl.Collator(locale, {\n        usage: \"search\",\n        sensitivity: \"base\",\n    });\n    const current = model.visible.indexOf(active);\n    const offset = term.length === 1 ? 1 : 0;\n    for (let index = offset; index < model.visible.length + offset; index++) {\n        const id = model.visible[(current + index + model.visible.length) % model.visible.length];\n        const node = id === undefined ? undefined : model.entries.get(id)?.node;\n        if (node && id && collator.compare(nodeText(node).slice(0, term.length), term) === 0) {\n            return id;\n        }\n    }\n    return null;\n};\n\nexport const treeKeyAction = (key: string, id: string, model: TreeModel, expanded: ReadonlySet<string>, reverse: boolean): TreeAction | null => {\n    const entry = model.entries.get(id);\n    if (!entry) {\n        return null;\n    }\n    const index = model.visible.indexOf(id);\n    let target: string | undefined;\n    if (key === \"ArrowDown\") {\n        target = model.visible[Math.min(index + 1, model.visible.length - 1)];\n    } else if (key === \"ArrowUp\") {\n        target = model.visible[Math.max(index - 1, 0)];\n    } else if (key === \"Home\") {\n        target = model.visible[0];\n    } else if (key === \"End\") {\n        target = model.visible.at(-1);\n    } else if (key === (reverse ? \"ArrowLeft\" : \"ArrowRight\")) {\n        if (entry.node.children?.length) {\n            if (!expanded.has(id)) {\n                return {\n                    kind: \"expand\",\n                    id,\n                };\n            }\n            target = entry.node.children[0]?.id;\n        }\n    } else if (key === (reverse ? \"ArrowRight\" : \"ArrowLeft\")) {\n        if (entry.node.children?.length && expanded.has(id)) {\n            return {\n                kind: \"collapse\",\n                id,\n            };\n        }\n        target = entry.parent ?? undefined;\n    } else if (key === \"Enter\" || key === \" \") {\n        return {\n            kind: \"select\",\n            id,\n        };\n    } else if (key === \"*\") {\n        return {\n            kind: \"siblings\",\n            id,\n        };\n    } else {\n        return null;\n    }\n    return {\n        kind: \"focus\",\n        id: target ?? id,\n    };\n};\n", "/**\n * @author WMXPY\n * @package Tree\n * @namespace Tree\n * @description Tree\n */\n\nimport { nodeText, treeKeyAction, treeModel, typeaheadMatch, visibleFocus } from \"./model\";\nimport type { TreeNode } from \"./types\";\nimport { isComposingKeyEvent } from \"@gridui/interaction\";\nimport { cn } from \"@gridui/style-utils\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { type ComponentPropsWithRef, type FC, type ReactNode, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\";\n\nexport type TreeProps = Omit<ComponentPropsWithRef<\"ul\">, \"children\" | \"role\" | \"tabIndex\" | \"aria-label\"> & {\n    readonly items: readonly TreeNode[];\n    readonly label: string;\n    readonly expandedIds?: readonly string[];\n    readonly defaultExpandedIds?: readonly string[];\n    readonly onExpandedIdsChange?: (ids: string[]) => void;\n    readonly selectedId?: string | null;\n    readonly defaultSelectedId?: string | null;\n    readonly onSelectedIdChange?: (id: string | null) => void;\n    readonly disabled?: boolean;\n    readonly locale?: string;\n    readonly empty?: ReactNode;\n};\n\nexport const Tree: FC<TreeProps> = (props: TreeProps) => {\n    const { items, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange,\n        selectedId, defaultSelectedId = null, onSelectedIdChange, disabled = false, locale, empty,\n        className, onKeyDown, ref, ...restProps } = props;\n    const [\n        localExpanded,\n        setLocalExpanded,\n    ] = useState<readonly string[]>(defaultExpandedIds);\n    const [\n        localSelected,\n        setLocalSelected,\n    ] = useState<string | null>(defaultSelectedId);\n    const [\n        active,\n        setActive,\n    ] = useState<string | null>(selectedId ?? defaultSelectedId);\n    const root = useRef<HTMLUListElement>(null);\n    const rows = useRef(new Map<string, HTMLLIElement>());\n    const removedFocus = useRef<HTMLLIElement | null>(null);\n    const search = useRef({\n        text: \"\",\n        time: 0,\n    });\n    const expanded = new Set(expandedIds ?? localExpanded);\n    const selected = selectedId === undefined ? localSelected : selectedId;\n    const model = treeModel(items, expanded);\n    const focused = visibleFocus(active, model);\n    useImperativeHandle(ref, () => {\n        return root.current as HTMLUListElement;\n    });\n    useLayoutEffect(() => {\n        const previous = removedFocus.current;\n        removedFocus.current = null;\n        const element = root.current;\n        if (!element) {\n            return;\n        }\n        const document = element.ownerDocument;\n        const activeElement = document.activeElement;\n        const populatedFocusedRoot = activeElement === element && focused !== null;\n        const removedOwnedFocus = previous && !previous.isConnected\n            && (activeElement === document.body || element.contains(activeElement));\n        if (populatedFocusedRoot || removedOwnedFocus) {\n            if (focused) {\n                rows.current.get(focused)?.focus({ preventScroll: true });\n            } else {\n                element.focus({ preventScroll: true });\n            }\n        }\n    });\n    const focus = (id: string) => {\n        rows.current.get(id)?.focus();\n    };\n    const changeExpanded = (next: Set<string>) => {\n        const values = [...next];\n        if (expandedIds === undefined) {\n            setLocalExpanded(values);\n        }\n        onExpandedIdsChange?.(values);\n    };\n    const toggle = (id: string, open: boolean) => {\n        if (disabled || model.entries.get(id)?.node.disabled || expanded.has(id) === open) {\n            return;\n        }\n        const next = new Set(expanded);\n        if (open) {\n            next.add(id);\n        } else {\n            next.delete(id);\n        }\n        changeExpanded(next);\n    };\n    const select = (id: string) => {\n        if (disabled || model.entries.get(id)?.node.disabled || selected === id) {\n            return;\n        }\n        if (selectedId === undefined) {\n            setLocalSelected(id);\n        }\n        onSelectedIdChange?.(id);\n    };\n    const renderItems = (nodes: readonly TreeNode[]): ReactNode => {\n        return nodes.map((node) => {\n            const entry = model.entries.get(node.id);\n            const branch = Boolean(node.children?.length);\n            const open = branch && expanded.has(node.id);\n            const unavailable = disabled || node.disabled;\n            return (<li\n                key={node.id}\n                role=\"treeitem\"\n                aria-label={nodeText(node)}\n                aria-level={entry?.level}\n                aria-posinset={entry?.position}\n                aria-setsize={entry?.count}\n                aria-expanded={branch ? open : undefined}\n                aria-selected={selected === node.id}\n                aria-disabled={unavailable || undefined}\n                tabIndex={focused === node.id ? 0 : -1}\n                className=\"gridui-tree-item\"\n                ref={(element) => {\n                    if (element) {\n                        rows.current.set(node.id, element);\n                    } else {\n                        const previous = rows.current.get(node.id);\n                        if (previous && previous.ownerDocument.activeElement === previous) {\n                            removedFocus.current = previous;\n                        }\n                        rows.current.delete(node.id);\n                    }\n                }}\n                onFocus={(event) => {\n                    if (event.target === event.currentTarget) {\n                        setActive(node.id);\n                    }\n                }}\n            >\n                <div\n                    className=\"gridui-tree-row\"\n                    onClick={() => {\n                        focus(node.id);\n                        select(node.id);\n                    }}\n                    onDoubleClick={() => {\n                        if (branch) {\n                            toggle(node.id, !open);\n                        }\n                    }}\n                >\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"gridui-tree-disclosure\"\n                        onClick={(event) => {\n                            if (branch) {\n                                event.stopPropagation();\n                                focus(node.id);\n                                toggle(node.id, !open);\n                            }\n                        }}\n                        onDoubleClick={(event) => {\n                            event.stopPropagation();\n                        }}\n                    >\n                        {branch && (open ? (<ChevronDown />) : (<ChevronRight\n                            className=\"gridui-tree-chevron\"\n                        />))}\n                    </span>\n                    <span\n                        className=\"gridui-tree-label\"\n                    >\n                        {node.label}\n                    </span>\n                </div>\n                {open && (<ul\n                    role=\"group\"\n                    className=\"gridui-tree-group\"\n                >\n                    {renderItems(node.children ?? [])}\n                </ul>)}\n            </li>);\n        });\n    };\n    return (<ul\n        {...restProps}\n        ref={root}\n        role=\"tree\"\n        aria-label={label}\n        aria-disabled={disabled || undefined}\n        tabIndex={focused === null ? 0 : -1}\n        className={cn(\"gridui-tree\", className)}\n        onKeyDown={(event) => {\n            onKeyDown?.(event);\n            if (event.defaultPrevented || isComposingKeyEvent(event.nativeEvent) || event.altKey || event.ctrlKey || event.metaKey || !focused) {\n                return;\n            }\n            const action = treeKeyAction(event.key, focused, model, expanded, getComputedStyle(event.currentTarget).direction === \"rtl\");\n            if (action) {\n                event.preventDefault();\n                search.current.text = \"\";\n                if (action.kind === \"focus\") {\n                    focus(action.id);\n                } else if (action.kind === \"select\") {\n                    select(action.id);\n                } else if (action.kind === \"expand\" || action.kind === \"collapse\") {\n                    toggle(action.id, action.kind === \"expand\");\n                } else if (!disabled) {\n                    const next = new Set(expanded);\n                    const parent = model.entries.get(action.id)?.parent;\n                    for (const [\n                        id,\n                        entry,\n                    ] of model.entries) {\n                        if (entry.parent === parent && entry.node.children?.length && !entry.node.disabled) {\n                            next.add(id);\n                        }\n                    }\n                    if (next.size !== expanded.size) {\n                        changeExpanded(next);\n                    }\n                }\n            } else if (event.key.length === 1) {\n                const now = Date.now();\n                search.current.text = now - search.current.time > 700 ? event.key : search.current.text + event.key;\n                search.current.time = now;\n                const match = typeaheadMatch(search.current.text, focused, model, locale);\n                if (match) {\n                    event.preventDefault();\n                    focus(match);\n                }\n            }\n        }}\n    >\n        {renderItems(items)}\n        {items.length === 0 && empty !== undefined && (<li\n            role=\"none\"\n        >\n            {empty}\n        </li>)}\n    </ul>);\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/styles.css

@@ -0,0 +1,69 @@
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities;
+@layer utilities;
+@layer components {
+  .gridui-tree, .gridui-tree-group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .gridui-tree {
+    min-inline-size: 0;
+    color: var(--gridui-foreground);
+  }
+  .gridui-tree-group {
+    padding-inline-start: var(--gridui-space-24);
+  }
+  .gridui-tree-item {
+    outline-offset: calc(-1 * var(--gridui-focus-width));
+  }
+  .gridui-tree-row {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--gridui-control-min-height);
+    padding-inline-end: var(--gridui-space-8);
+    gap: var(--gridui-space-4);
+    cursor: pointer;
+  }
+  .gridui-tree-label {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .gridui-tree-disclosure {
+    display: inline-flex;
+    flex: none;
+    align-self: stretch;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--gridui-space-24);
+  }
+  .gridui-tree-disclosure svg {
+    inline-size: var(--gridui-icon-size);
+    block-size: var(--gridui-icon-size);
+  }
+  .gridui-tree-chevron:dir(rtl) {
+    transform: rotate(180deg);
+  }
+  .gridui-tree-item[aria-selected="true"] > .gridui-tree-row {
+    background: var(--gridui-surface);
+    box-shadow: inset 0 -1px var(--gridui-border);
+  }
+  .gridui-tree-item[aria-disabled="true"] > .gridui-tree-row {
+    color: var(--gridui-muted);
+    cursor: default;
+  }
+  .gridui-tree-item:focus-visible {
+    outline: none;
+  }
+  .gridui-tree-item:focus-visible > .gridui-tree-row {
+    position: relative;
+    z-index: var(--gridui-z-interaction);
+    outline: var(--gridui-focus-width) solid var(--gridui-focus-color);
+    outline-offset: calc(-1 * var(--gridui-focus-width));
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .gridui-tree-item:not([aria-disabled="true"]) > .gridui-tree-row:hover {
+      background: var(--gridui-surface-hover);
+    }
+  }
+}

package/dist/tree/model.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @author WMXPY
+ * @package Tree
+ * @namespace Tree
+ * @description Model
+ */
+import type { TreeNode } from "./types";
+export type TreeEntry = {
+    readonly node: TreeNode;
+    readonly parent: string | null;
+    readonly level: number;
+    readonly position: number;
+    readonly count: number;
+};
+export type TreeModel = {
+    readonly entries: ReadonlyMap<string, TreeEntry>;
+    readonly visible: readonly string[];
+};
+export type TreeAction = {
+    readonly kind: "focus" | "expand" | "collapse" | "select" | "siblings";
+    readonly id: string;
+};
+export declare const treeModel: (items: readonly TreeNode[], expanded: ReadonlySet<string>) => TreeModel;
+export declare const visibleFocus: (id: string | null, model: TreeModel) => string | null;
+export declare const nodeText: (node: TreeNode) => string;
+export declare const typeaheadMatch: (query: string, active: string, model: TreeModel, locale?: string) => string | null;
+export declare const treeKeyAction: (key: string, id: string, model: TreeModel, expanded: ReadonlySet<string>, reverse: boolean) => TreeAction | null;

package/dist/tree/tree.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author WMXPY
+ * @package Tree
+ * @namespace Tree
+ * @description Tree
+ */
+import type { TreeNode } from "./types";
+import { type ComponentPropsWithRef, type FC, type ReactNode } from "react";
+export type TreeProps = Omit<ComponentPropsWithRef<"ul">, "children" | "role" | "tabIndex" | "aria-label"> & {
+    readonly items: readonly TreeNode[];
+    readonly label: string;
+    readonly expandedIds?: readonly string[];
+    readonly defaultExpandedIds?: readonly string[];
+    readonly onExpandedIdsChange?: (ids: string[]) => void;
+    readonly selectedId?: string | null;
+    readonly defaultSelectedId?: string | null;
+    readonly onSelectedIdChange?: (id: string | null) => void;
+    readonly disabled?: boolean;
+    readonly locale?: string;
+    readonly empty?: ReactNode;
+};
+export declare const Tree: FC<TreeProps>;

package/dist/tree/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @author WMXPY
+ * @package Tree
+ * @namespace Tree
+ * @description Types
+ */
+import type { ReactNode } from "react";
+export type TreeNode = {
+    readonly id: string;
+    readonly children?: readonly TreeNode[];
+    readonly disabled?: boolean;
+} & ({
+    readonly label: string;
+    readonly textValue?: string;
+} | {
+    readonly label: ReactNode;
+    readonly textValue: string;
+});

package/docs/catalog.json

@@ -0,0 +1,35 @@
+{
+  "schemaVersion": 1,
+  "name": "@gridui/tree",
+  "version": "0.0.0",
+  "category": "core",
+  "description": "GridUI React tree",
+  "usage": "A single-selection hierarchical tree with keyboard navigation, controlled expansion, and searchable labels. Tree owns interaction and row presentation; applications own data loading, navigation, and persistence.",
+  "documentation": [
+    "README.md"
+  ],
+  "exports": [
+    {
+      "name": "Tree",
+      "kind": "component",
+      "importPath": "@gridui/tree"
+    },
+    {
+      "name": "TreeNode",
+      "kind": "type",
+      "importPath": "@gridui/tree"
+    },
+    {
+      "name": "TreeProps",
+      "kind": "type",
+      "importPath": "@gridui/tree"
+    }
+  ],
+  "styles": [
+    "@gridui/theme/styles.css",
+    "@gridui/tree/styles.css"
+  ],
+  "examples": [
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/tree/stories/tree.stories.tsx"
+  ]
+}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@gridui/tree",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "GridUI React tree",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@gridui/interaction": "^1.1.2",
+    "@gridui/style-utils": "^2.2.0",
+    "@gridui/theme": "^2.5.1",
+    "lucide-react": "1.68.0"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0-internal",
+    "@jest/globals": "30.5.2",
+    "@storybook/react-vite": "10.6.5",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.6",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest",
+    "coverage": "jest --coverage"
+  }
 }