@lattice-php/lattice 0.23.0 → 0.24.0

package/dist-standalone/manifest.json

@@ -1,7 +1,7 @@
 {
-  "version": "0.23.0",
+  "version": "0.24.0",
   "files": {
-    "lattice.js": "6f4566a831f1",
+    "lattice.js": "de39e3025b4d",
     "chunks/chart-view-DEwGTt9d.js": "3e80210cc3d7",
     "chunks/date-picker-field-CCQ9nWx0.js": "d97e934b112d",
     "chunks/dist-PaT1gYi_.js": "4da471d00496",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-php/lattice",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Server-driven React components for Laravel and Inertia.",
   "license": "MIT",
   "author": "Manuel Christlieb <manuel@christlieb.eu>",

package/dist/ui/tree-context.d.ts

@@ -1,33 +0,0 @@
-import { RefObject } from 'react';
-export type TreeItemRegistration = {
-    id: string;
-    label: string;
-    orderPath: string;
-    parentPath: string | null;
-    path: string;
-    ref: RefObject<HTMLLIElement | null>;
-};
-export type TreeFocusDirection = "first" | "firstChild" | "last" | "next" | "parent" | "prev";
-export type TreeContextValue = {
-    activate: (id: string) => void;
-    activeId: string | null;
-    expanded: Set<string>;
-    focus: (id: string) => void;
-    focusedId: string | null;
-    moveFocus: (fromId: string, direction: TreeFocusDirection) => void;
-    register: (entry: TreeItemRegistration) => void;
-    toggle: (id: string) => void;
-    typeAhead: (fromId: string, character: string) => void;
-    unregister: (path: string) => void;
-};
-export declare const TreeContext: import('react').Context<TreeContextValue>;
-export declare function useTreeContext(): TreeContextValue;
-export declare function useTreeState({ activeId: initialActiveId, defaultExpanded, nodes, rememberState, storageKey, }: {
-    activeId: string | null;
-    defaultExpanded: string[];
-    nodes: Array<{
-        id: string;
-    }>;
-    rememberState: boolean;
-    storageKey: string;
-}): TreeContextValue;

package/dist/ui/tree-context.js

@@ -1,135 +0,0 @@
-import { usePersistentState } from "../lib/use-persistent-state.js";
-import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-var TreeContext = createContext({
-	activate: () => {},
-	activeId: null,
-	expanded: /* @__PURE__ */ new Set(),
-	focus: () => {},
-	focusedId: null,
-	moveFocus: () => {},
-	register: () => {},
-	toggle: () => {},
-	typeAhead: () => {},
-	unregister: () => {}
-});
-function useTreeContext() {
-	return useContext(TreeContext);
-}
-function parseExpanded(raw) {
-	const parsed = JSON.parse(raw);
-	if (!Array.isArray(parsed)) throw new Error("expected an array of ids");
-	return new Set(parsed.filter((id) => typeof id === "string"));
-}
-function visibleOrder(registry) {
-	return [...registry.values()].sort((a, b) => a.orderPath.localeCompare(b.orderPath));
-}
-var TYPEAHEAD_IDLE_MS = 800;
-function useTreeState({ activeId: initialActiveId, defaultExpanded, nodes, rememberState, storageKey }) {
-	const [expanded, setExpanded] = usePersistentState(storageKey, () => new Set(defaultExpanded), {
-		enabled: rememberState,
-		parse: parseExpanded,
-		serialize: (value) => JSON.stringify([...value])
-	});
-	const [activeId, setActiveId] = useState(initialActiveId);
-	const [focusedId, setFocusedId] = useState(() => nodes[0]?.id ?? null);
-	const registryRef = useRef(/* @__PURE__ */ new Map());
-	const typeAheadRef = useRef({
-		text: "",
-		timestamp: 0
-	});
-	const toggle = useCallback((id) => {
-		setExpanded((current) => {
-			const next = new Set(current);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	}, [setExpanded]);
-	const activate = useCallback((id) => setActiveId(id), []);
-	const focus = useCallback((id) => {
-		setFocusedId(id);
-		[...registryRef.current.values()].find((candidate) => candidate.id === id)?.ref.current?.focus();
-	}, []);
-	const register = useCallback((entry) => {
-		registryRef.current.set(entry.path, entry);
-	}, []);
-	const unregister = useCallback((path) => {
-		registryRef.current.delete(path);
-	}, []);
-	const moveFocus = useCallback((fromId, direction) => {
-		const order = visibleOrder(registryRef.current);
-		if (order.length === 0) return;
-		const index = order.findIndex((entry) => entry.id === fromId);
-		const current = index === -1 ? void 0 : order[index];
-		let target;
-		switch (direction) {
-			case "next":
-				target = index === -1 ? void 0 : order[index + 1];
-				break;
-			case "prev":
-				target = index === -1 ? void 0 : order[index - 1];
-				break;
-			case "first":
-				target = order[0];
-				break;
-			case "last":
-				target = order[order.length - 1];
-				break;
-			case "parent":
-				target = current ? order.find((entry) => entry.path === current.parentPath) : void 0;
-				break;
-			case "firstChild":
-				target = current ? order.find((entry) => entry.parentPath === current.path) : void 0;
-				break;
-		}
-		if (target) focus(target.id);
-	}, [focus]);
-	const typeAhead = useCallback((fromId, character) => {
-		const order = visibleOrder(registryRef.current);
-		if (order.length === 0) return;
-		const now = Date.now();
-		const buffer = typeAheadRef.current;
-		const text = now - buffer.timestamp > TYPEAHEAD_IDLE_MS ? character : buffer.text + character;
-		typeAheadRef.current = {
-			text,
-			timestamp: now
-		};
-		const needle = text.toLowerCase();
-		const startIndex = order.findIndex((entry) => entry.id === fromId);
-		const start = startIndex === -1 ? 0 : startIndex;
-		for (let offset = 1; offset <= order.length; offset++) {
-			const candidate = order[(start + offset) % order.length];
-			if (candidate.label.toLowerCase().startsWith(needle)) {
-				focus(candidate.id);
-				return;
-			}
-		}
-	}, [focus]);
-	return useMemo(() => ({
-		activate,
-		activeId,
-		expanded,
-		focus,
-		focusedId,
-		moveFocus,
-		register,
-		toggle,
-		typeAhead,
-		unregister
-	}), [
-		activate,
-		activeId,
-		expanded,
-		focus,
-		focusedId,
-		moveFocus,
-		register,
-		toggle,
-		typeAhead,
-		unregister
-	]);
-}
-//#endregion
-export { TreeContext, useTreeContext, useTreeState };
-
-//# sourceMappingURL=tree-context.js.map

package/dist/ui/tree-context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tree-context.js","names":[],"sources":["../../resources/js/ui/tree-context.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport type { RefObject } from \"react\";\nimport { usePersistentState } from \"@lattice-php/lattice/lib/use-persistent-state\";\n\nexport type TreeItemRegistration = {\n  id: string;\n  label: string;\n  orderPath: string;\n  parentPath: string | null;\n  path: string;\n  ref: RefObject<HTMLLIElement | null>;\n};\n\nexport type TreeFocusDirection = \"first\" | \"firstChild\" | \"last\" | \"next\" | \"parent\" | \"prev\";\n\nexport type TreeContextValue = {\n  activate: (id: string) => void;\n  activeId: string | null;\n  expanded: Set<string>;\n  focus: (id: string) => void;\n  focusedId: string | null;\n  moveFocus: (fromId: string, direction: TreeFocusDirection) => void;\n  register: (entry: TreeItemRegistration) => void;\n  toggle: (id: string) => void;\n  typeAhead: (fromId: string, character: string) => void;\n  unregister: (path: string) => void;\n};\n\nconst defaultTreeContext: TreeContextValue = {\n  activate: () => {},\n  activeId: null,\n  expanded: new Set(),\n  focus: () => {},\n  focusedId: null,\n  moveFocus: () => {},\n  register: () => {},\n  toggle: () => {},\n  typeAhead: () => {},\n  unregister: () => {},\n};\n\nexport const TreeContext = createContext<TreeContextValue>(defaultTreeContext);\n\nexport function useTreeContext(): TreeContextValue {\n  return useContext(TreeContext);\n}\n\nfunction parseExpanded(raw: string): Set<string> {\n  const parsed: unknown = JSON.parse(raw);\n\n  if (!Array.isArray(parsed)) {\n    throw new Error(\"expected an array of ids\");\n  }\n\n  return new Set(parsed.filter((id): id is string => typeof id === \"string\"));\n}\n\nfunction visibleOrder(registry: Map<string, TreeItemRegistration>): TreeItemRegistration[] {\n  return [...registry.values()].sort((a, b) => a.orderPath.localeCompare(b.orderPath));\n}\n\nconst TYPEAHEAD_IDLE_MS = 800;\n\nexport function useTreeState({\n  activeId: initialActiveId,\n  defaultExpanded,\n  nodes,\n  rememberState,\n  storageKey,\n}: {\n  activeId: string | null;\n  defaultExpanded: string[];\n  nodes: Array<{ id: string }>;\n  rememberState: boolean;\n  storageKey: string;\n}): TreeContextValue {\n  const [expanded, setExpanded] = usePersistentState<Set<string>>(\n    storageKey,\n    () => new Set(defaultExpanded),\n    {\n      enabled: rememberState,\n      parse: parseExpanded,\n      serialize: (value) => JSON.stringify([...value]),\n    },\n  );\n  const [activeId, setActiveId] = useState<string | null>(initialActiveId);\n  const [focusedId, setFocusedId] = useState<string | null>(() => nodes[0]?.id ?? null);\n  const registryRef = useRef<Map<string, TreeItemRegistration>>(new Map());\n  const typeAheadRef = useRef<{ text: string; timestamp: number }>({ text: \"\", timestamp: 0 });\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((current) => {\n        const next = new Set(current);\n\n        if (next.has(id)) {\n          next.delete(id);\n        } else {\n          next.add(id);\n        }\n\n        return next;\n      });\n    },\n    [setExpanded],\n  );\n\n  const activate = useCallback((id: string) => setActiveId(id), []);\n\n  const focus = useCallback((id: string) => {\n    setFocusedId(id);\n    const entry = [...registryRef.current.values()].find((candidate) => candidate.id === id);\n    entry?.ref.current?.focus();\n  }, []);\n\n  const register = useCallback((entry: TreeItemRegistration) => {\n    registryRef.current.set(entry.path, entry);\n  }, []);\n\n  const unregister = useCallback((path: string) => {\n    registryRef.current.delete(path);\n  }, []);\n\n  const moveFocus = useCallback(\n    (fromId: string, direction: TreeFocusDirection) => {\n      const order = visibleOrder(registryRef.current);\n\n      if (order.length === 0) {\n        return;\n      }\n\n      const index = order.findIndex((entry) => entry.id === fromId);\n      const current = index === -1 ? undefined : order[index];\n\n      let target: TreeItemRegistration | undefined;\n\n      switch (direction) {\n        case \"next\":\n          target = index === -1 ? undefined : order[index + 1];\n          break;\n        case \"prev\":\n          target = index === -1 ? undefined : order[index - 1];\n          break;\n        case \"first\":\n          target = order[0];\n          break;\n        case \"last\":\n          target = order[order.length - 1];\n          break;\n        case \"parent\":\n          target = current ? order.find((entry) => entry.path === current.parentPath) : undefined;\n          break;\n        case \"firstChild\":\n          target = current ? order.find((entry) => entry.parentPath === current.path) : undefined;\n          break;\n      }\n\n      if (target) {\n        focus(target.id);\n      }\n    },\n    [focus],\n  );\n\n  const typeAhead = useCallback(\n    (fromId: string, character: string) => {\n      const order = visibleOrder(registryRef.current);\n\n      if (order.length === 0) {\n        return;\n      }\n\n      const now = Date.now();\n      const buffer = typeAheadRef.current;\n      const text = now - buffer.timestamp > TYPEAHEAD_IDLE_MS ? character : buffer.text + character;\n      typeAheadRef.current = { text, timestamp: now };\n\n      const needle = text.toLowerCase();\n      const startIndex = order.findIndex((entry) => entry.id === fromId);\n      const start = startIndex === -1 ? 0 : startIndex;\n\n      for (let offset = 1; offset <= order.length; offset++) {\n        const candidate = order[(start + offset) % order.length];\n\n        if (candidate.label.toLowerCase().startsWith(needle)) {\n          focus(candidate.id);\n          return;\n        }\n      }\n    },\n    [focus],\n  );\n\n  return useMemo(\n    () => ({\n      activate,\n      activeId,\n      expanded,\n      focus,\n      focusedId,\n      moveFocus,\n      register,\n      toggle,\n      typeAhead,\n      unregister,\n    }),\n    [\n      activate,\n      activeId,\n      expanded,\n      focus,\n      focusedId,\n      moveFocus,\n      register,\n      toggle,\n      typeAhead,\n      unregister,\n    ],\n  );\n}\n"],"mappings":"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"}

package/dist/ui/tree.d.ts

@@ -1,19 +0,0 @@
-import { RendererComponent } from '../core/types.js';
-import { Tree as TreeProps, TreeNode as GeneratedTreeNode } from '../types/generated.js';
-/**
- * The actual sparse wire shape a tree node serializes as (see `TreeNode::jsonSerialize()`):
- * every optional/falsy field is omitted rather than sent as `null`/`false`, unlike the
- * generated `TreeNode`, which reflects every declared PHP property as required.
- */
-export type TreeNodeData = Pick<GeneratedTreeNode, "id" | "label"> & Partial<Omit<GeneratedTreeNode, "children" | "id" | "label">> & {
-    children?: TreeNodeData[];
-};
-declare module '../core/types' {
-    interface ComponentProps {
-        tree: TreeProps & {
-            nodes: TreeNodeData[];
-        };
-    }
-}
-declare const TreeComponent: RendererComponent<"tree">;
-export default TreeComponent;

package/dist/ui/tree.js

@@ -1,187 +0,0 @@
-import { useT } from "../i18n/instance.js";
-import { cn } from "../lib/utils.js";
-import { Icon } from "../icons/sprite.js";
-import { IconRenderer } from "../icons/icon-renderer.js";
-import { Renderer } from "../core/renderer.js";
-import { nodeIdentity } from "../core/test-id.js";
-import { Badge } from "./badge.js";
-import { TextLink } from "./link.js";
-import { TreeContext, useTreeContext, useTreeState } from "./tree-context.js";
-import { router } from "@inertiajs/react";
-import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/ui/tree.tsx
-function hasExpandableChildren(node) {
-	return Boolean(node.children?.length) || node.hasChildren === true;
-}
-var ORDER_PATH_SEGMENT_WIDTH = 6;
-function orderPathSegment(index) {
-	return String(index).padStart(ORDER_PATH_SEGMENT_WIDTH, "0");
-}
-function TreeItem({ depth, node, orderPath, parentPath, siblingCount, siblingIndex }) {
-	const { activate, activeId, expanded, focusedId, moveFocus, register, toggle, typeAhead, unregister } = useTreeContext();
-	const { t } = useT("lattice");
-	const ref = useRef(null);
-	const path = parentPath ? `${parentPath}/${node.id}` : node.id;
-	const isExpanded = expanded.has(node.id);
-	const isActive = activeId === node.id;
-	const isFocused = focusedId === node.id;
-	const isDisabled = node.disabled === true;
-	const expandable = hasExpandableChildren(node);
-	const actionsRef = useRef(null);
-	useEffect(() => {
-		register({
-			id: node.id,
-			label: node.label,
-			orderPath,
-			parentPath,
-			path,
-			ref
-		});
-		return () => unregister(path);
-	}, [
-		node.id,
-		node.label,
-		orderPath,
-		parentPath,
-		path,
-		register,
-		unregister
-	]);
-	useEffect(() => {
-		const container = actionsRef.current;
-		if (!container) return;
-		container.querySelectorAll("button, a[href], [tabindex]").forEach((control) => {
-			control.tabIndex = -1;
-		});
-	}, [node.actions]);
-	function onKeyDown(event) {
-		if (event.target !== event.currentTarget) return;
-		switch (event.key) {
-			case "ArrowDown":
-				event.preventDefault();
-				moveFocus(node.id, "next");
-				return;
-			case "ArrowUp":
-				event.preventDefault();
-				moveFocus(node.id, "prev");
-				return;
-			case "ArrowRight":
-				event.preventDefault();
-				if (expandable && !isExpanded) toggle(node.id);
-				else if (expandable) moveFocus(node.id, "firstChild");
-				return;
-			case "ArrowLeft":
-				event.preventDefault();
-				if (expandable && isExpanded) toggle(node.id);
-				else moveFocus(node.id, "parent");
-				return;
-			case "Home":
-				event.preventDefault();
-				moveFocus(node.id, "first");
-				return;
-			case "End":
-				event.preventDefault();
-				moveFocus(node.id, "last");
-				return;
-			case "Enter":
-			case " ":
-				event.preventDefault();
-				if (isDisabled) return;
-				if (node.href) router.visit(node.href);
-				else if (node.actions) {
-					actionsRef.current?.querySelector("button")?.click();
-					ref.current?.focus();
-				} else activate(node.id);
-				return;
-			default: if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) typeAhead(node.id, event.key);
-		}
-	}
-	return /* @__PURE__ */ jsxs("li", {
-		"aria-disabled": isDisabled,
-		"aria-expanded": expandable ? isExpanded : void 0,
-		"aria-level": depth,
-		"aria-posinset": siblingIndex,
-		"aria-selected": isActive,
-		"aria-setsize": siblingCount,
-		"data-test": `tree-node-${node.id}`,
-		onKeyDown,
-		ref,
-		role: "treeitem",
-		tabIndex: isFocused ? 0 : -1,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-center gap-2 rounded-lt-sm px-2 py-1.5 text-sm text-lt-fg", isActive && "bg-lt-muted font-medium", isDisabled && "pointer-events-none opacity-50"),
-			children: [
-				expandable ? /* @__PURE__ */ jsx("button", {
-					"aria-label": isExpanded ? t("common.tree.collapse", "Collapse {{label}}", { label: node.label }) : t("common.tree.expand", "Expand {{label}}", { label: node.label }),
-					"data-test": `tree-node-${node.id}-toggle`,
-					onClick: () => toggle(node.id),
-					tabIndex: -1,
-					type: "button",
-					children: /* @__PURE__ */ jsx(Icon, {
-						className: cn("size-lt-icon-md shrink-0 transition-transform", isExpanded && "rotate-90"),
-						name: "chevron-right"
-					})
-				}) : null,
-				node.icon ? /* @__PURE__ */ jsx(IconRenderer, {
-					className: "size-lt-icon-md shrink-0",
-					icon: node.icon
-				}) : null,
-				node.href && !isDisabled ? /* @__PURE__ */ jsx(TextLink, {
-					href: node.href,
-					tabIndex: -1,
-					children: node.label
-				}) : /* @__PURE__ */ jsx("span", { children: node.label }),
-				node.badge ? /* @__PURE__ */ jsx(Badge, {
-					variant: "secondary",
-					children: node.badge
-				}) : null,
-				node.actions ? /* @__PURE__ */ jsx("span", {
-					className: "ml-auto",
-					ref: actionsRef,
-					children: /* @__PURE__ */ jsx(Renderer, { nodes: [node.actions] })
-				}) : null
-			]
-		}), expandable && isExpanded && node.children && node.children.length > 0 ? /* @__PURE__ */ jsx("ul", {
-			className: "pl-6",
-			role: "group",
-			children: node.children.map((child, index) => /* @__PURE__ */ jsx(TreeItem, {
-				depth: depth + 1,
-				node: child,
-				orderPath: `${orderPath}.${orderPathSegment(index)}`,
-				parentPath: path,
-				siblingCount: node.children?.length ?? 1,
-				siblingIndex: index + 1
-			}, child.id))
-		}) : null]
-	});
-}
-var TreeComponent = ({ node }) => {
-	const identity = nodeIdentity(node);
-	const value = useTreeState({
-		activeId: node.props.activeId,
-		defaultExpanded: node.props.defaultExpanded,
-		nodes: node.props.nodes,
-		rememberState: node.props.rememberState,
-		storageKey: `lattice:tree:${identity ?? "default"}`
-	});
-	return /* @__PURE__ */ jsx(TreeContext.Provider, {
-		value,
-		children: /* @__PURE__ */ jsx("ul", {
-			"data-lattice-component": identity,
-			role: "tree",
-			children: node.props.nodes.map((child, index) => /* @__PURE__ */ jsx(TreeItem, {
-				depth: 1,
-				node: child,
-				orderPath: orderPathSegment(index),
-				parentPath: null,
-				siblingCount: node.props.nodes.length,
-				siblingIndex: index + 1
-			}, child.id))
-		})
-	});
-};
-//#endregion
-export { TreeComponent as default };
-
-//# sourceMappingURL=tree.js.map

package/dist/ui/tree.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../../resources/js/ui/tree.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { useEffect, useRef } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon, IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type {\n  Tree as TreeProps,\n  TreeNode as GeneratedTreeNode,\n} from \"@lattice-php/lattice/types/generated\";\nimport { Badge } from \"./badge\";\nimport { TextLink } from \"./link\";\nimport { TreeContext, useTreeContext, useTreeState } from \"./tree-context\";\n\n/**\n * The actual sparse wire shape a tree node serializes as (see `TreeNode::jsonSerialize()`):\n * every optional/falsy field is omitted rather than sent as `null`/`false`, unlike the\n * generated `TreeNode`, which reflects every declared PHP property as required.\n */\nexport type TreeNodeData = Pick<GeneratedTreeNode, \"id\" | \"label\"> &\n  Partial<Omit<GeneratedTreeNode, \"children\" | \"id\" | \"label\">> & {\n    children?: TreeNodeData[];\n  };\n\ndeclare module \"@lattice-php/lattice/core/types\" {\n  interface ComponentProps {\n    tree: TreeProps & { nodes: TreeNodeData[] };\n  }\n}\n\nfunction hasExpandableChildren(node: TreeNodeData): boolean {\n  return Boolean(node.children?.length) || node.hasChildren === true;\n}\n\nconst ORDER_PATH_SEGMENT_WIDTH = 6;\n\nfunction orderPathSegment(index: number): string {\n  return String(index).padStart(ORDER_PATH_SEGMENT_WIDTH, \"0\");\n}\n\nfunction TreeItem({\n  depth,\n  node,\n  orderPath,\n  parentPath,\n  siblingCount,\n  siblingIndex,\n}: {\n  depth: number;\n  node: TreeNodeData;\n  orderPath: string;\n  parentPath: string | null;\n  siblingCount: number;\n  siblingIndex: number;\n}) {\n  const {\n    activate,\n    activeId,\n    expanded,\n    focusedId,\n    moveFocus,\n    register,\n    toggle,\n    typeAhead,\n    unregister,\n  } = useTreeContext();\n  const { t } = useT(\"lattice\");\n  const ref = useRef<HTMLLIElement>(null);\n  const path = parentPath ? `${parentPath}/${node.id}` : node.id;\n  const isExpanded = expanded.has(node.id);\n  const isActive = activeId === node.id;\n  const isFocused = focusedId === node.id;\n  const isDisabled = node.disabled === true;\n  const expandable = hasExpandableChildren(node);\n  const actionsRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    register({ id: node.id, label: node.label, orderPath, parentPath, path, ref });\n\n    return () => unregister(path);\n  }, [node.id, node.label, orderPath, parentPath, path, register, unregister]);\n\n  useEffect(() => {\n    const container = actionsRef.current;\n\n    if (!container) {\n      return;\n    }\n\n    container.querySelectorAll<HTMLElement>(\"button, a[href], [tabindex]\").forEach((control) => {\n      control.tabIndex = -1;\n    });\n  }, [node.actions]);\n\n  function onKeyDown(event: KeyboardEvent<HTMLLIElement>): void {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        moveFocus(node.id, \"next\");\n        return;\n      case \"ArrowUp\":\n        event.preventDefault();\n        moveFocus(node.id, \"prev\");\n        return;\n      case \"ArrowRight\":\n        event.preventDefault();\n        if (expandable && !isExpanded) {\n          toggle(node.id);\n        } else if (expandable) {\n          moveFocus(node.id, \"firstChild\");\n        }\n        return;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        if (expandable && isExpanded) {\n          toggle(node.id);\n        } else {\n          moveFocus(node.id, \"parent\");\n        }\n        return;\n      case \"Home\":\n        event.preventDefault();\n        moveFocus(node.id, \"first\");\n        return;\n      case \"End\":\n        event.preventDefault();\n        moveFocus(node.id, \"last\");\n        return;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        if (isDisabled) {\n          return;\n        }\n        if (node.href) {\n          router.visit(node.href);\n        } else if (node.actions) {\n          actionsRef.current?.querySelector(\"button\")?.click();\n          ref.current?.focus();\n        } else {\n          activate(node.id);\n        }\n        return;\n      default:\n        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n          typeAhead(node.id, event.key);\n        }\n    }\n  }\n\n  return (\n    <li\n      aria-disabled={isDisabled}\n      aria-expanded={expandable ? isExpanded : undefined}\n      aria-level={depth}\n      aria-posinset={siblingIndex}\n      aria-selected={isActive}\n      aria-setsize={siblingCount}\n      data-test={`tree-node-${node.id}`}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      role=\"treeitem\"\n      tabIndex={isFocused ? 0 : -1}\n    >\n      <div\n        className={cn(\n          \"flex items-center gap-2 rounded-lt-sm px-2 py-1.5 text-sm text-lt-fg\",\n          isActive && \"bg-lt-muted font-medium\",\n          isDisabled && \"pointer-events-none opacity-50\",\n        )}\n      >\n        {expandable ? (\n          <button\n            aria-label={\n              isExpanded\n                ? t(\"common.tree.collapse\", \"Collapse {{label}}\", { label: node.label })\n                : t(\"common.tree.expand\", \"Expand {{label}}\", { label: node.label })\n            }\n            data-test={`tree-node-${node.id}-toggle`}\n            onClick={() => toggle(node.id)}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <Icon\n              className={cn(\n                \"size-lt-icon-md shrink-0 transition-transform\",\n                isExpanded && \"rotate-90\",\n              )}\n              name=\"chevron-right\"\n            />\n          </button>\n        ) : null}\n        {node.icon ? <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={node.icon} /> : null}\n        {node.href && !isDisabled ? (\n          <TextLink href={node.href} tabIndex={-1}>\n            {node.label}\n          </TextLink>\n        ) : (\n          <span>{node.label}</span>\n        )}\n        {node.badge ? <Badge variant=\"secondary\">{node.badge}</Badge> : null}\n        {node.actions ? (\n          <span className=\"ml-auto\" ref={actionsRef}>\n            <Renderer nodes={[node.actions]} />\n          </span>\n        ) : null}\n      </div>\n      {expandable && isExpanded && node.children && node.children.length > 0 ? (\n        <ul className=\"pl-6\" role=\"group\">\n          {node.children.map((child, index) => (\n            <TreeItem\n              depth={depth + 1}\n              key={child.id}\n              node={child}\n              orderPath={`${orderPath}.${orderPathSegment(index)}`}\n              parentPath={path}\n              siblingCount={node.children?.length ?? 1}\n              siblingIndex={index + 1}\n            />\n          ))}\n        </ul>\n      ) : null}\n    </li>\n  );\n}\n\nconst TreeComponent: RendererComponent<\"tree\"> = ({ node }) => {\n  const identity = nodeIdentity(node);\n  const value = useTreeState({\n    activeId: node.props.activeId,\n    defaultExpanded: node.props.defaultExpanded,\n    nodes: node.props.nodes,\n    rememberState: node.props.rememberState,\n    storageKey: `lattice:tree:${identity ?? \"default\"}`,\n  });\n\n  return (\n    <TreeContext.Provider value={value}>\n      <ul data-lattice-component={identity} role=\"tree\">\n        {node.props.nodes.map((child, index) => (\n          <TreeItem\n            depth={1}\n            key={child.id}\n            node={child}\n            orderPath={orderPathSegment(index)}\n            parentPath={null}\n            siblingCount={node.props.nodes.length}\n            siblingIndex={index + 1}\n          />\n        ))}\n      </ul>\n    </TreeContext.Provider>\n  );\n};\n\nexport default TreeComponent;\n"],"mappings":"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"}