@lattice-php/lattice 0.19.0 → 0.21.0

package/dist/ui/tree-context.js

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,187 @@
+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 { useT } from "../i18n/instance.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

@@ -0,0 +1 @@
+{"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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"}

package/dist/ui/use-collapsible-state.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Boolean open/collapsed state remembered in `localStorage` as `"true"`/`"false"`.
+ * Shared by the section, collapsible, and sidebar chrome. Callers resolve
+ * `rememberState` as `props.rememberState !== false`; the wire prop is always a
+ * boolean, so the polarity is uniform across all three.
+ */
+export declare function useCollapsibleState(storageKey: string, fallback: boolean, rememberState: boolean): [boolean, () => void];

package/dist/ui/use-collapsible-state.js

@@ -0,0 +1,21 @@
+import { usePersistentState } from "../lib/use-persistent-state.js";
+import { useCallback } from "react";
+//#region resources/js/ui/use-collapsible-state.ts
+/**
+* Boolean open/collapsed state remembered in `localStorage` as `"true"`/`"false"`.
+* Shared by the section, collapsible, and sidebar chrome. Callers resolve
+* `rememberState` as `props.rememberState !== false`; the wire prop is always a
+* boolean, so the polarity is uniform across all three.
+*/
+function useCollapsibleState(storageKey, fallback, rememberState) {
+	const [value, setValue] = usePersistentState(storageKey, fallback, {
+		enabled: rememberState,
+		parse: (raw) => raw === "true",
+		serialize: String
+	});
+	return [value, useCallback(() => setValue((current) => !current), [setValue])];
+}
+//#endregion
+export { useCollapsibleState };
+
+//# sourceMappingURL=use-collapsible-state.js.map

package/dist/ui/use-collapsible-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-collapsible-state.js","names":[],"sources":["../../resources/js/ui/use-collapsible-state.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { usePersistentState } from \"@lattice-php/lattice/lib/use-persistent-state\";\n\n/**\n * Boolean open/collapsed state remembered in `localStorage` as `\"true\"`/`\"false\"`.\n * Shared by the section, collapsible, and sidebar chrome. Callers resolve\n * `rememberState` as `props.rememberState !== false`; the wire prop is always a\n * boolean, so the polarity is uniform across all three.\n */\nexport function useCollapsibleState(\n  storageKey: string,\n  fallback: boolean,\n  rememberState: boolean,\n): [boolean, () => void] {\n  const [value, setValue] = usePersistentState<boolean>(storageKey, fallback, {\n    enabled: rememberState,\n    parse: (raw) => raw === \"true\",\n    serialize: String,\n  });\n\n  const toggle = useCallback(() => setValue((current) => !current), [setValue]);\n\n  return [value, toggle];\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,oBACd,YACA,UACA,eACuB;CACvB,MAAM,CAAC,OAAO,YAAY,mBAA4B,YAAY,UAAU;EAC1E,SAAS;EACT,QAAQ,QAAQ,QAAQ;EACxB,WAAW;CACb,CAAC;CAID,OAAO,CAAC,OAFO,kBAAkB,UAAU,YAAY,CAAC,OAAO,GAAG,CAAC,QAAQ,CAE5D,CAAM;AACvB"}