@lattice-php/lattice 0.20.0 → 0.22.0

package/dist/ui/modal.js

@@ -1,4 +1,5 @@
-import { LATTICE_EVENT } from "../events/event-names.js";
+import { LATTICE_EVENT } from "../core/event-names.js";
+import { useT } from "../i18n/instance.js";
 import { Dialog, DialogContent, DialogHeader } from "./dialog.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +9,8 @@ function matchesModal(event, modal) {
 	return target == null || target === modal;
 }
 var ModalComponent = ({ children, node }) => {
-	const title = node.props.title ?? "Dialog";
+	const { t } = useT("lattice");
+	const title = node.props.title ?? t("common.dialog", "Dialog");
 	const description = node.props.description;
 	const closeLabel = node.props.closeLabel;
 	const [isOpen, setIsOpen] = useState(node.props.open === true);
@@ -46,7 +48,8 @@ var ModalComponent = ({ children, node }) => {
 		onOpenChange: setIsOpen,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			...description ? {} : { "aria-describedby": void 0 },
-			className: "max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto",
+			placement: node.props.side ?? "center",
+			width: node.props.width,
 			children: [/* @__PURE__ */ jsx(DialogHeader, {
 				closeLabel,
 				description,

package/dist/ui/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n  const openerRef = useRef<HTMLElement | null>(null);\n  const wasOpenRef = useRef(isOpen);\n\n  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        openerRef.current =\n          document.activeElement instanceof HTMLElement ? document.activeElement : null;\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  // Radix only restores focus to a `DialogTrigger`-registered element, and this\n  // modal is opened imperatively rather than through one. Own the restore\n  // ourselves instead: whatever had focus when the modal opened gets it back\n  // once the closing dialog has finished unmounting.\n  useEffect(() => {\n    if (wasOpenRef.current && !isOpen) {\n      const opener = openerRef.current;\n\n      if (opener) {\n        requestAnimationFrame(() => opener.focus());\n      }\n    }\n\n    wasOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto\"\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;AASA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAC7D,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,aAAa,OAAO,MAAM;CAKhC,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GAAG;IAC3C,UAAU,UACR,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;IAC3E,UAAU,IAAI;GAChB;EACF;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAMZ,gBAAgB;EACd,IAAI,WAAW,WAAW,CAAC,QAAQ;GACjC,MAAM,SAAS,UAAU;GAEzB,IAAI,QACF,4BAA4B,OAAO,MAAM,CAAC;EAE9C;EAEA,WAAW,UAAU;CACvB,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;aAFZ,CAIE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}
+{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const title = node.props.title ?? t(\"common.dialog\", \"Dialog\");\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n  const openerRef = useRef<HTMLElement | null>(null);\n  const wasOpenRef = useRef(isOpen);\n\n  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        openerRef.current =\n          document.activeElement instanceof HTMLElement ? document.activeElement : null;\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  // Radix only restores focus to a `DialogTrigger`-registered element, and this\n  // modal is opened imperatively rather than through one. Own the restore\n  // ourselves instead: whatever had focus when the modal opened gets it back\n  // once the closing dialog has finished unmounting.\n  useEffect(() => {\n    if (wasOpenRef.current && !isOpen) {\n      const opener = openerRef.current;\n\n      if (opener) {\n        requestAnimationFrame(() => opener.focus());\n      }\n    }\n\n    wasOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        placement={node.props.side ?? \"center\"}\n        width={node.props.width}\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;;AAUA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK,MAAM,SAAS,EAAE,iBAAiB,QAAQ;CAC7D,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAC7D,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,aAAa,OAAO,MAAM;CAKhC,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GAAG;IAC3C,UAAU,UACR,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;IAC3E,UAAU,IAAI;GAChB;EACF;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAMZ,gBAAgB;EACd,IAAI,WAAW,WAAW,CAAC,QAAQ;GACjC,MAAM,SAAS,UAAU;GAEzB,IAAI,QACF,4BAA4B,OAAO,MAAM,CAAC;EAE9C;EAEA,WAAW,UAAU;CACvB,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAW,KAAK,MAAM,QAAQ;GAC9B,OAAO,KAAK,MAAM;aAHpB,CAKE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}

package/dist/ui/pill.d.ts

@@ -0,0 +1,2 @@
+/** Shared pill styling for the tabs strip and the segmented control. */
+export declare function pillClassName(active: boolean): string;

package/dist/ui/pill.js

@@ -0,0 +1,10 @@
+import { cn } from "../lib/utils.js";
+//#region resources/js/ui/pill.ts
+/** Shared pill styling for the tabs strip and the segmented control. */
+function pillClassName(active) {
+	return cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", active ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg");
+}
+//#endregion
+export { pillClassName };
+
+//# sourceMappingURL=pill.js.map

package/dist/ui/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","names":[],"sources":["../../resources/js/ui/pill.ts"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/** Shared pill styling for the tabs strip and the segmented control. */\nexport function pillClassName(active: boolean): string {\n  return cn(\n    \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n    active\n      ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n      : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,cAAc,QAAyB;CACrD,OAAO,GACL,qFACA,SACI,qCACA,qDACN;AACF"}

package/dist/ui/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/ui/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { ActionNodeType, FormNodeType, NodeType } from \"@lattice-php/lattice/types/generated\";\nimport type { ChatComponentType } from \"@lattice-php/lattice/chat/plugin\";\nimport type { LayoutComponentType } from \"@lattice-php/lattice/layout/plugin\";\nimport type { NotificationsComponentType } from \"@lattice-php/lattice/notifications/plugin\";\nimport type { RemoteComponentType } from \"@lattice-php/lattice/remote/plugin\";\nimport type { TableComponentType } from \"@lattice-php/lattice/table/plugin\";\nimport AvatarComponent from \"./avatar\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport ImageComponent from \"./image\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport ProgressComponent from \"./progress\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport SeparatorComponent from \"./separator\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\nimport TreeComponent from \"./tree\";\n\ntype NonUiComponentType =\n  | ActionNodeType\n  | ChatComponentType\n  | FormNodeType\n  | LayoutComponentType\n  | NotificationsComponentType\n  | RemoteComponentType\n  | TableComponentType;\n\ntype UiComponentType = Exclude<NodeType, NonUiComponentType>;\n\nexport const uiComponents = createPlugin({\n  components: {\n    avatar: eagerComponent(AvatarComponent),\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    image: eagerComponent(ImageComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    progress: eagerComponent(ProgressComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    separator: eagerComponent(SeparatorComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n    tree: eagerComponent(TreeComponent),\n  } satisfies ComponentRegistryFor<UiComponentType>,\n  name: \"lattice/ui\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,QAAQ,eAAe,eAAe;EACtC,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,UAAU,eAAe,iBAAiB;EAC1C,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,WAAW,eAAe,kBAAkB;EAC5C,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/ui/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { FragmentNodeType, UiNodeType } from \"@lattice-php/lattice/types/generated\";\nimport AvatarComponent from \"./avatar\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport ImageComponent from \"./image\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport ProgressComponent from \"./progress\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport SeparatorComponent from \"./separator\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\nimport TreeComponent from \"./tree\";\n\ntype UiComponentType = UiNodeType | FragmentNodeType;\n\nexport const uiComponents = createPlugin({\n  components: {\n    avatar: eagerComponent(AvatarComponent),\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    image: eagerComponent(ImageComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    progress: eagerComponent(ProgressComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    separator: eagerComponent(SeparatorComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n    tree: eagerComponent(TreeComponent),\n  } satisfies ComponentRegistryFor<UiComponentType>,\n  name: \"lattice/ui\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,QAAQ,eAAe,eAAe;EACtC,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,UAAU,eAAe,iBAAiB;EAC1C,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,WAAW,eAAe,kBAAkB;EAC5C,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}

package/dist/ui/progress.js

@@ -1,5 +1,5 @@
-import { cn } from "../lib/utils.js";
 import { useLocale } from "../i18n/locale.js";
+import { cn } from "../lib/utils.js";
 import { coerceColor, colorValue, namedColor } from "../lib/color.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/progress.tsx

package/dist/ui/section.js

@@ -3,30 +3,17 @@ import { Icon } from "../icons/sprite.js";
 import { toNodes } from "../core/nodes.js";
 import { Renderer } from "../core/renderer.js";
 import { nodeIdentity, prefixedTestId } from "../core/test-id.js";
+import { useCollapsibleState } from "./use-collapsible-state.js";
 import { InfoTooltip } from "./info-tooltip.js";
-import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/section.tsx
-function readStored(key, remember, fallback) {
-	if (!remember || typeof window === "undefined") return fallback;
-	const stored = window.localStorage.getItem(key);
-	return stored === null ? fallback : stored === "true";
-}
 var SectionComponent = ({ children, node }) => {
 	const { title, description, tooltip } = node.props;
 	const collapsible = node.props.collapsible === true;
 	const rememberState = node.props.rememberState !== false;
 	const headerActions = toNodes(node.props.headerActions);
 	const identity = nodeIdentity(node);
-	const storageKey = `lattice:section:${identity ?? "default"}`;
-	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState, node.props.collapsed === true));
-	function toggle() {
-		setCollapsed((value) => {
-			const next = !value;
-			if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
-			return next;
-		});
-	}
+	const [collapsed, toggle] = useCollapsibleState(`lattice:section:${identity ?? "default"}`, node.props.collapsed === true, collapsible && rememberState);
 	const isCollapsed = collapsible && collapsed;
 	return /* @__PURE__ */ jsxs("section", {
 		"data-slot": "section",

package/dist/ui/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","names":[],"sources":["../../resources/js/ui/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = toNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      data-slot=\"section\"\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-lt-gutter text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={identity}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-lt-gutter\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && (\n                <div className=\"flex items-center\">\n                  <div className=\"font-semibold leading-none\">{title}</div>\n                  <InfoTooltip content={tooltip} />\n                </div>\n              )}\n              {description && (\n                <div className=\"flex items-center\">\n                  <div className=\"text-sm text-lt-muted-fg\">{description}</div>\n                  {!title && <InfoTooltip content={tooltip} />}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && (\n        <div className=\"flex flex-col gap-6 px-lt-gutter\">{children}</div>\n      )}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAC7C,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,QAAQ,KAAK,MAAM,aAAa;CACtD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAGnC,OACE,qBAAC,WAAD;EACE,aAAU;EACV,WAAU;EACV,0BAAwB;YAH1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAQzE,KACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA8B;MAAW,CAAA,GACxD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;SAEN,eACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA4B;MAAiB,CAAA,GAC3D,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;OAEJ;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YACf,oBAAC,OAAD;GAAK,WAAU;GAAoC;EAAc,CAAA,CAE5D;;AAEb"}
+{"version":3,"file":"section.js","names":[],"sources":["../../resources/js/ui/section.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { useCollapsibleState } from \"./use-collapsible-state\";\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = toNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, toggle] = useCollapsibleState(\n    storageKey,\n    node.props.collapsed === true,\n    collapsible && rememberState,\n  );\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      data-slot=\"section\"\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-lt-gutter text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={identity}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-lt-gutter\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && (\n                <div className=\"flex items-center\">\n                  <div className=\"font-semibold leading-none\">{title}</div>\n                  <InfoTooltip content={tooltip} />\n                </div>\n              )}\n              {description && (\n                <div className=\"flex items-center\">\n                  <div className=\"text-sm text-lt-muted-fg\">{description}</div>\n                  {!title && <InfoTooltip content={tooltip} />}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && (\n        <div className=\"flex flex-col gap-6 px-lt-gutter\">{children}</div>\n      )}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;;AASA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAC7C,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,QAAQ,KAAK,MAAM,aAAa;CACtD,MAAM,WAAW,aAAa,IAAI;CAGlC,MAAM,CAAC,WAAW,UAAU,oBAC1B,mBAHoC,YAAY,aAIhD,KAAK,MAAM,cAAc,MACzB,eAAe,aACjB;CAEA,MAAM,cAAc,eAAe;CAGnC,OACE,qBAAC,WAAD;EACE,aAAU;EACV,WAAU;EACV,0BAAwB;YAH1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAQzE,KACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA8B;MAAW,CAAA,GACxD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;SAEN,eACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA4B;MAAiB,CAAA,GAC3D,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;OAEJ;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YACf,oBAAC,OAAD;GAAK,WAAU;GAAoC;EAAc,CAAA,CAE5D;;AAEb"}

package/dist/ui/segmented-pills.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { pillClassName } from "./pill.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/segmented-pills.tsx
@@ -23,7 +24,7 @@ function SegmentedPills({ ariaLabel, autoFocus = false, disabled = false, name,
 			return /* @__PURE__ */ jsx("button", {
 				"aria-checked": isSelected,
 				"data-test": `${name ?? "segment"}-${option.value}`,
-				className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", disabled && "cursor-not-allowed opacity-60"),
+				className: cn(pillClassName(isSelected), disabled && "cursor-not-allowed opacity-60"),
 				disabled,
 				onClick: () => onSelect(option.value),
 				role: "radio",

package/dist/ui/segmented-pills.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../resources/js/ui/segmented-pills.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  autoFocus = false,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  name?: string;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    const group = groupRef.current;\n    const target =\n      group?.querySelector<HTMLButtonElement>('button[aria-checked=\"true\"]') ??\n      group?.querySelector<HTMLButtonElement>(\"button\");\n\n    target?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      ref={groupRef}\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            data-test={`${name ?? \"segment\"}-${option.value}`}\n            className={cn(\n              \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n              isSelected\n                ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n                : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n              disabled && \"cursor-not-allowed opacity-60\",\n            )}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WAAW,OACX,MACA,UACA,SACA,UACA,SAUC;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,IAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,QAAQ,UAAU,GAAG,OAAO;IAC1C,WAAW,GACT,qFACA,aACI,qCACA,uDACJ,YAAY,+BACd;IACU;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../resources/js/ui/segmented-pills.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { pillClassName } from \"./pill\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  autoFocus = false,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  name?: string;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    const group = groupRef.current;\n    const target =\n      group?.querySelector<HTMLButtonElement>('button[aria-checked=\"true\"]') ??\n      group?.querySelector<HTMLButtonElement>(\"button\");\n\n    target?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      ref={groupRef}\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            data-test={`${name ?? \"segment\"}-${option.value}`}\n            className={cn(pillClassName(isSelected), disabled && \"cursor-not-allowed opacity-60\")}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WAAW,OACX,MACA,UACA,SACA,UACA,SAUC;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,IAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,QAAQ,UAAU,GAAG,OAAO;IAC1C,WAAW,GAAG,cAAc,UAAU,GAAG,YAAY,+BAA+B;IAC1E;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/ui/tabs.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
 import { useT } from "../i18n/instance.js";
+import { pillClassName } from "./pill.js";
 import { router } from "@inertiajs/react";
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/tabs.tsx
 var TabsContext = createContext(null);
@@ -54,18 +55,22 @@ var TabsComponent = ({ children, node }) => {
 	const defaultValue = node.props.defaultValue ?? firstValue;
 	const tablistRef = useRef(null);
 	const [activeValue, setActiveTabValue] = useState(() => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue);
-	function selectTab(tab) {
+	const selectTab = useCallback((tab) => {
 		if (tab.confirm?.required) {
 			router.visit(queryUrl(queryKey, tab.value), { preserveScroll: true });
 			return;
 		}
 		setActiveTabValue(tab.value);
 		replaceQueryValue(queryKey, tab.value);
-	}
-	function selectTabValue(value) {
+	}, [queryKey]);
+	const selectTabValue = useCallback((value) => {
 		const tab = tabs.find((item) => item.value === value);
 		if (tab) selectTab(tab);
-	}
+	}, [selectTab, tabs]);
+	const contextValue = useMemo(() => ({
+		activeValue,
+		setActiveValue: selectTabValue
+	}), [activeValue, selectTabValue]);
 	function onTablistKeyDown(event) {
 		const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
 		const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
@@ -84,10 +89,7 @@ var TabsComponent = ({ children, node }) => {
 		buttons[index]?.focus();
 	}
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
-		value: {
-			activeValue,
-			setActiveValue: selectTabValue
-		},
+		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("gap-6", isVertical ? cn("flex", alignment === "end" && "flex-row-reverse") : "grid"),
 			"data-lattice-tabs": node.key ?? node.id,
@@ -106,7 +108,7 @@ var TabsComponent = ({ children, node }) => {
 						"aria-controls": `${tab.value}-panel`,
 						"aria-selected": isActive,
 						"data-test": `tab-${tab.value}`,
-						className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isActive ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", isVertical && "text-left", isStretched && "flex-1"),
+						className: cn(pillClassName(isActive), isVertical && "text-left", isStretched && "flex-1"),
 						id: `${tab.value}-tab`,
 						onClick: () => selectTab(tab),
 						onKeyDown: onTablistKeyDown,

package/dist/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../resources/js/ui/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { Tab } from \"@lattice-php/lattice/types/generated\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.schema ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => {\n      const props = child.props as unknown as Tab;\n\n      return {\n        confirm: props.confirm ? { required: props.confirm.required } : undefined,\n        label: props.label,\n        value: props.value,\n      };\n    })\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = node.props.queryKey;\n  const orientation = node.props.orientation;\n  const isVertical = orientation === \"vertical\";\n  const alignment = node.props.alignment;\n  const isStretched = !isVertical && alignment === \"stretch\";\n  const serverActiveValue = node.props.activeValue;\n  const defaultValue = node.props.defaultValue ?? firstValue;\n  const tablistRef = useRef<HTMLDivElement>(null);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  function onTablistKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {\n    const nextKey = isVertical ? \"ArrowDown\" : \"ArrowRight\";\n    const prevKey = isVertical ? \"ArrowUp\" : \"ArrowLeft\";\n\n    if (\n      event.key !== nextKey &&\n      event.key !== prevKey &&\n      event.key !== \"Home\" &&\n      event.key !== \"End\"\n    ) {\n      return;\n    }\n\n    const buttons = Array.from(\n      tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]') ?? [],\n    );\n\n    if (buttons.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n\n    let index: number;\n    if (event.key === \"Home\") {\n      index = 0;\n    } else if (event.key === \"End\") {\n      index = buttons.length - 1;\n    } else {\n      const delta = event.key === nextKey ? 1 : -1;\n      const base = current < 0 ? 0 : current;\n      index = (base + delta + buttons.length) % buttons.length;\n    }\n\n    buttons[index]?.focus();\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div\n        className={cn(\n          \"gap-6\",\n          isVertical ? cn(\"flex\", alignment === \"end\" && \"flex-row-reverse\") : \"grid\",\n        )}\n        data-lattice-tabs={node.key ?? node.id}\n      >\n        <div\n          aria-label={t(\"common.tabs\", \"Tabs\")}\n          aria-orientation={orientation}\n          className={cn(\n            \"gap-1 rounded-lt bg-lt-muted p-1\",\n            isVertical && \"flex flex-col\",\n            isStretched && \"flex w-full\",\n            !isVertical &&\n              !isStretched &&\n              cn(\"inline-flex w-fit max-w-full overflow-x-auto\", {\n                \"justify-self-center\": alignment === \"center\",\n                \"justify-self-end\": alignment === \"end\",\n              }),\n          )}\n          ref={tablistRef}\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                data-test={`tab-${tab.value}`}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\n                    ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n                    : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n                  isVertical && \"text-left\",\n                  isStretched && \"flex-1\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                onKeyDown={onTablistKeyDown}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={cn(\"min-w-0\", isVertical && \"flex-1\")}>{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = node.props.value;\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../resources/js/ui/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { Tab } from \"@lattice-php/lattice/types/generated\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { pillClassName } from \"./pill\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.schema ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => {\n      const props = child.props as unknown as Tab;\n\n      return {\n        confirm: props.confirm ? { required: props.confirm.required } : undefined,\n        label: props.label,\n        value: props.value,\n      };\n    })\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = node.props.queryKey;\n  const orientation = node.props.orientation;\n  const isVertical = orientation === \"vertical\";\n  const alignment = node.props.alignment;\n  const isStretched = !isVertical && alignment === \"stretch\";\n  const serverActiveValue = node.props.activeValue;\n  const defaultValue = node.props.defaultValue ?? firstValue;\n  const tablistRef = useRef<HTMLDivElement>(null);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  const selectTab = useCallback(\n    (tab: TabItem): void => {\n      if (tab.confirm?.required) {\n        router.visit(queryUrl(queryKey, tab.value), {\n          preserveScroll: true,\n        });\n\n        return;\n      }\n\n      setActiveTabValue(tab.value);\n      replaceQueryValue(queryKey, tab.value);\n    },\n    [queryKey],\n  );\n\n  const selectTabValue = useCallback(\n    (value: string): void => {\n      const tab = tabs.find((item) => item.value === value);\n\n      if (tab) {\n        selectTab(tab);\n      }\n    },\n    [selectTab, tabs],\n  );\n\n  const contextValue = useMemo(\n    () => ({ activeValue, setActiveValue: selectTabValue }),\n    [activeValue, selectTabValue],\n  );\n\n  function onTablistKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {\n    const nextKey = isVertical ? \"ArrowDown\" : \"ArrowRight\";\n    const prevKey = isVertical ? \"ArrowUp\" : \"ArrowLeft\";\n\n    if (\n      event.key !== nextKey &&\n      event.key !== prevKey &&\n      event.key !== \"Home\" &&\n      event.key !== \"End\"\n    ) {\n      return;\n    }\n\n    const buttons = Array.from(\n      tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]') ?? [],\n    );\n\n    if (buttons.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n\n    let index: number;\n    if (event.key === \"Home\") {\n      index = 0;\n    } else if (event.key === \"End\") {\n      index = buttons.length - 1;\n    } else {\n      const delta = event.key === nextKey ? 1 : -1;\n      const base = current < 0 ? 0 : current;\n      index = (base + delta + buttons.length) % buttons.length;\n    }\n\n    buttons[index]?.focus();\n  }\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"gap-6\",\n          isVertical ? cn(\"flex\", alignment === \"end\" && \"flex-row-reverse\") : \"grid\",\n        )}\n        data-lattice-tabs={node.key ?? node.id}\n      >\n        <div\n          aria-label={t(\"common.tabs\", \"Tabs\")}\n          aria-orientation={orientation}\n          className={cn(\n            \"gap-1 rounded-lt bg-lt-muted p-1\",\n            isVertical && \"flex flex-col\",\n            isStretched && \"flex w-full\",\n            !isVertical &&\n              !isStretched &&\n              cn(\"inline-flex w-fit max-w-full overflow-x-auto\", {\n                \"justify-self-center\": alignment === \"center\",\n                \"justify-self-end\": alignment === \"end\",\n              }),\n          )}\n          ref={tablistRef}\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                data-test={`tab-${tab.value}`}\n                className={cn(\n                  pillClassName(isActive),\n                  isVertical && \"text-left\",\n                  isStretched && \"flex-1\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                onKeyDown={onTablistKeyDown}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={cn(\"min-w-0\", isVertical && \"flex-1\")}>{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = node.props.value;\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}

package/dist/ui/tree-context.js

@@ -1,3 +1,4 @@
+import { usePersistentState } from "../lib/use-persistent-state.js";
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 var TreeContext = createContext({
 	activate: () => {},
@@ -14,23 +15,21 @@ var TreeContext = createContext({
 function useTreeContext() {
 	return useContext(TreeContext);
 }
-function readStoredExpanded(key, remember, fallback) {
-	if (!remember || typeof window === "undefined") return new Set(fallback);
-	const stored = window.localStorage.getItem(key);
-	if (stored === null) return new Set(fallback);
-	try {
-		const parsed = JSON.parse(stored);
-		return Array.isArray(parsed) ? new Set(parsed.filter((id) => typeof id === "string")) : new Set(fallback);
-	} catch {
-		return new Set(fallback);
-	}
+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] = useState(() => readStoredExpanded(storageKey, rememberState, defaultExpanded));
+	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());
@@ -43,10 +42,9 @@ function useTreeState({ activeId: initialActiveId, defaultExpanded, nodes, remem
 			const next = new Set(current);
 			if (next.has(id)) next.delete(id);
 			else next.add(id);
-			if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, JSON.stringify([...next]));
 			return next;
 		});
-	}, [rememberState, storageKey]);
+	}, [setExpanded]);
 	const activate = useCallback((id) => setActiveId(id), []);
 	const focus = useCallback((id) => {
 		setFocusedId(id);

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

@@ -1 +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\";\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 readStoredExpanded(key: string, remember: boolean, fallback: string[]): Set<string> {\n  if (!remember || typeof window === \"undefined\") {\n    return new Set(fallback);\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  if (stored === null) {\n    return new Set(fallback);\n  }\n\n  try {\n    const parsed: unknown = JSON.parse(stored);\n\n    return Array.isArray(parsed)\n      ? new Set(parsed.filter((id): id is string => typeof id === \"string\"))\n      : new Set(fallback);\n  } catch {\n    return new Set(fallback);\n  }\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] = useState<Set<string>>(() =>\n    readStoredExpanded(storageKey, rememberState, defaultExpanded),\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        if (rememberState && typeof window !== \"undefined\") {\n          window.localStorage.setItem(storageKey, JSON.stringify([...next]));\n        }\n\n        return next;\n      });\n    },\n    [rememberState, storageKey],\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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"}
+{"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.js

@@ -54,7 +54,7 @@ function TreeItem({ depth, node, orderPath, parentPath, siblingCount, siblingInd
 		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) {

package/dist/ui/tree.js.map

@@ -1 +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  });\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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"}
+{"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"}