@lattice-php/lattice 0.4.0 → 0.5.0

package/dist/core/components/fragment.js.map

@@ -1 +1 @@
-{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n} as const;\n\nfunction getComponents(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(getComponents(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;AAWA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,cAAc,OAAwB;CAC7C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,eAAc,MAFP,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAE3C,MAAM,CAAC;GAC1C,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}
+{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n} as const;\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(toNodes(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;;AAYA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,SAAQ,MAFD,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAEjD,MAAM,CAAC;GACpC,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}

package/dist/core/components/grid.js

@@ -1,10 +1,11 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/grid.tsx
 var GridComponent = ({ children, node }) => {
 	const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);
 	return /* @__PURE__ */ jsx("div", {
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		className: cn("grid gap-x-4 gap-y-6", columns >= 2 && "md:grid-cols-2", columns >= 3 && "lg:grid-cols-3", columns >= 4 && "xl:grid-cols-4"),
 		children
 	});

package/dist/core/components/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;AAGA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;;AAIA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}

package/dist/core/components/index.js

@@ -1,6 +1,5 @@
 import { createPlugin, eagerComponent, lazyComponent } from "../registry.js";
 import ButtonComponent from "./button.js";
-import { ChatBox } from "../../chat/components/chat-box.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
 import FloatingPanelComponent from "./floating-panel.js";
@@ -23,7 +22,6 @@ var coreComponents = createPlugin({
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
 		chart: lazyComponent(() => import("./chart.js")),
-		"chat.box": eagerComponent(ChatBox),
 		"floating-panel": eagerComponent(FloatingPanelComponent),
 		fragment: eagerComponent(FragmentComponent),
 		grid: eagerComponent(GridComponent),

package/dist/core/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport ChatBoxComponent from \"../../chat/components/chat-box\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}

package/dist/core/components/section.js

@@ -1,7 +1,8 @@
 import { cn } from "../../lib/utils.js";
-import { nodeIdentity, prefixedTestId } from "../test-id.js";
 import { Icon } from "../../icons/sprite.js";
 import { Renderer } from "../renderer.js";
+import { nodeIdentity, prefixedTestId } from "../test-id.js";
+import { toNodes } from "../nodes.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/section.tsx
@@ -10,15 +11,11 @@ function readStored(key, remember, fallback) {
 	const stored = window.localStorage.getItem(key);
 	return stored === null ? fallback : stored === "true";
 }
-function getNodes(value) {
-	if (!Array.isArray(value)) return [];
-	return value.filter((node) => typeof node === "object" && node !== null && "type" in node && typeof node.type === "string");
-}
 var SectionComponent = ({ children, node }) => {
 	const { title, description } = node.props;
 	const collapsible = node.props.collapsible === true;
 	const rememberState = node.props.rememberState !== false;
-	const headerActions = getNodes(node.props.headerActions);
+	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));
@@ -30,11 +27,10 @@ var SectionComponent = ({ children, node }) => {
 		});
 	}
 	const isCollapsed = collapsible && collapsed;
-	const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);
 	return /* @__PURE__ */ jsxs("section", {
 		className: "flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm",
-		"data-lattice-component": node.id,
-		children: [hasHeader && /* @__PURE__ */ jsxs("div", {
+		"data-lattice-component": identity,
+		children: [Boolean(title || description || headerActions.length > 0 || collapsible) && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between gap-4 px-6",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-start gap-2",

package/dist/core/components/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/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 type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\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\nfunction getNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = getNodes(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      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={node.id}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-6\">\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 && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\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 && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;AAOA,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,SAAS,SAAS,OAAwB;CACxC,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,gBAAgB,KAAK;CACpC,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,SAAS,KAAK,MAAM,aAAa;CACvD,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;CACnC,MAAM,YAAY,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAAW;CAEzF,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB,KAAK;YAF/B,CAIG,aACC,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,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}
+{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/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\";\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 } = 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      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 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-6\">\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 && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\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 && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;AAQA,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,gBAAgB,KAAK;CACpC,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,WAAU;EACV,0BAAwB;YAF1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAOzE,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,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}

package/dist/core/components/stack.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/stack.tsx
 var gridAlignments = {
@@ -53,7 +54,7 @@ var StackComponent = ({ children, node }) => {
 	const float = node.props.float;
 	const isFlex = direction === "row" || justify != null;
 	return /* @__PURE__ */ jsx("div", {
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		className: cn(isFlex ? cn("flex", direction === "row" ? "flex-wrap" : "flex-col") : "grid content-start", isFlex ? flexAlignments[align] ?? flexAlignments.stretch : gridAlignments[align] ?? gridAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full, justify ? justifyClasses[justify] : null, height ? stackHeights[height] : null, float ? floatClasses[float] : null),
 		children
 	});

package/dist/core/components/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  auto: \"w-auto\",\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst floatClasses: Record<string, string> = {\n  end: \"ml-auto\",\n  start: \"mr-auto\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const float = node.props.float;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n        float ? floatClasses[float] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;AAGA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,eAAuC;CAC3C,KAAK;CACL,OAAO;AACT;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,MAChC,QAAQ,aAAa,SAAS,IAChC;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  auto: \"w-auto\",\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst floatClasses: Record<string, string> = {\n  end: \"ml-auto\",\n  start: \"mr-auto\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const float = node.props.float;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n        float ? floatClasses[float] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;;AAIA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,eAAuC;CAC3C,KAAK;CACL,OAAO;AACT;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,MAChC,QAAQ,aAAa,SAAS,IAChC;EAEC;CACE,CAAA;AAET"}

package/dist/core/components/tabs.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/utils.js";
 import { useT } from "../../i18n/instance.js";
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { router } from "@inertiajs/react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/tabs.tsx
 var TabsContext = createContext(null);

package/dist/core/nodes.d.ts

@@ -0,0 +1,6 @@
+import { Node } from './types';
+/**
+ * Keep only the well-formed component nodes from an untyped value, dropping
+ * anything that isn't an object carrying a string `type`.
+ */
+export declare function toNodes(value: unknown): Node[];

package/dist/core/nodes.js

@@ -0,0 +1,13 @@
+//#region resources/js/core/nodes.ts
+/**
+* Keep only the well-formed component nodes from an untyped value, dropping
+* anything that isn't an object carrying a string `type`.
+*/
+function toNodes(value) {
+	if (!Array.isArray(value)) return [];
+	return value.filter((node) => typeof node === "object" && node !== null && "type" in node && typeof node.type === "string");
+}
+//#endregion
+export { toNodes };
+
+//# sourceMappingURL=nodes.js.map

package/dist/core/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","names":[],"sources":["../../resources/js/core/nodes.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\n\n/**\n * Keep only the well-formed component nodes from an untyped value, dropping\n * anything that isn't an object carrying a string `type`.\n */\nexport function toNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n"],"mappings":";;;;;AAMA,SAAgB,QAAQ,OAAwB;CAC9C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF"}

package/dist/core/renderer.js

@@ -1,5 +1,5 @@
-import { useComponentRegistry } from "./registry-context.js";
 import { useCollapsed } from "./collapsed-context.js";
+import { useComponentRegistry } from "./registry-context.js";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/renderer.tsx

package/dist/create-app.d.ts

@@ -0,0 +1,21 @@
+import { createInertiaApp } from '@inertiajs/react';
+import { ReactElement } from 'react';
+import { Registry } from './core/registry';
+import { SpriteValue } from './icons/sprite';
+import { CreateLayoutResolverOptions, PageModules } from './inertia';
+type InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;
+export type CreateLatticeAppOptions = Omit<InertiaAppOptions, "resolve" | "layout" | "setup" | "withApp" | "pages"> & {
+    registry?: Registry;
+    sprite?: SpriteValue;
+    /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\/*.tsx')`. */
+    pages?: PageModules;
+    defaultLayout?: CreateLayoutResolverOptions["defaultLayout"];
+};
+/**
+ * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers
+ * (server-driven Lattice pages and normal Inertia pages alike), the Provider —
+ * registry, sprite, flash toasts via Lattice's own Toaster — and theme
+ * initialization. Forwards any other createInertiaApp option.
+ */
+export declare function createLatticeApp({ registry, sprite, pages, defaultLayout, strictMode, ...inertiaOptions }?: CreateLatticeAppOptions): Promise<void | ((page: import('@inertiajs/core').Page<import('@inertiajs/core').PageProps>, renderToString: (element: ReactElement) => string) => Promise<import('@inertiajs/core').InertiaAppSSRResponse>)>;
+export {};

package/dist/create-app.js

@@ -0,0 +1,31 @@
+import { initializeTheme } from "./appearance/index.js";
+import { createLayoutResolver, createPageResolver } from "./inertia.js";
+import { Provider } from "./provider.js";
+import { createInertiaApp } from "@inertiajs/react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/create-app.tsx
+/**
+* Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers
+* (server-driven Lattice pages and normal Inertia pages alike), the Provider —
+* registry, sprite, flash toasts via Lattice's own Toaster — and theme
+* initialization. Forwards any other createInertiaApp option.
+*/
+function createLatticeApp({ registry, sprite, pages = {}, defaultLayout, strictMode = true, ...inertiaOptions } = {}) {
+	const app = createInertiaApp({
+		...inertiaOptions,
+		strictMode,
+		resolve: createPageResolver(pages),
+		layout: createLayoutResolver({ defaultLayout }),
+		withApp: (node) => /* @__PURE__ */ jsx(Provider, {
+			registry,
+			sprite,
+			children: node
+		})
+	});
+	initializeTheme();
+	return app;
+}
+//#endregion
+export { createLatticeApp };
+
+//# sourceMappingURL=create-app.js.map

package/dist/create-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-app.js","names":[],"sources":["../resources/js/create-app.tsx"],"sourcesContent":["import { createInertiaApp } from \"@inertiajs/react\";\nimport type { ReactElement } from \"react\";\nimport { initializeTheme } from \"./appearance\";\nimport type { Registry } from \"./core/registry\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport {\n  createLayoutResolver,\n  createPageResolver,\n  type CreateLayoutResolverOptions,\n  type PageModules,\n} from \"./inertia\";\nimport { Provider } from \"./provider\";\n\ntype InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;\n\nexport type CreateLatticeAppOptions = Omit<\n  InertiaAppOptions,\n  \"resolve\" | \"layout\" | \"setup\" | \"withApp\" | \"pages\"\n> & {\n  registry?: Registry;\n  sprite?: SpriteValue;\n  /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\\/*.tsx')`. */\n  pages?: PageModules;\n  defaultLayout?: CreateLayoutResolverOptions[\"defaultLayout\"];\n};\n\n/**\n * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers\n * (server-driven Lattice pages and normal Inertia pages alike), the Provider —\n * registry, sprite, flash toasts via Lattice's own Toaster — and theme\n * initialization. Forwards any other createInertiaApp option.\n */\nexport function createLatticeApp({\n  registry,\n  sprite,\n  pages = {},\n  defaultLayout,\n  strictMode = true,\n  ...inertiaOptions\n}: CreateLatticeAppOptions = {}) {\n  const app = createInertiaApp({\n    ...inertiaOptions,\n    strictMode,\n    resolve: createPageResolver(pages),\n    layout: createLayoutResolver({ defaultLayout }),\n    withApp: (node: ReactElement): ReactElement => (\n      <Provider registry={registry} sprite={sprite}>\n        {node}\n      </Provider>\n    ),\n  });\n\n  initializeTheme();\n\n  return app;\n}\n"],"mappings":";;;;;;;;;;;;AAgCA,SAAgB,iBAAiB,EAC/B,UACA,QACA,QAAQ,CAAC,GACT,eACA,aAAa,MACb,GAAG,mBACwB,CAAC,GAAG;CAC/B,MAAM,MAAM,iBAAiB;EAC3B,GAAG;EACH;EACA,SAAS,mBAAmB,KAAK;EACjC,QAAQ,qBAAqB,EAAE,cAAc,CAAC;EAC9C,UAAU,SACR,oBAAC,UAAD;GAAoB;GAAkB;aACnC;EACO,CAAA;CAEd,CAAC;CAED,gBAAgB;CAEhB,OAAO;AACT"}

package/dist/effects/registry.js

@@ -37,7 +37,8 @@ var builtinEffectHandlers = {
 	reloadComponent: bridge(LATTICE_EVENT.reloadComponent),
 	openModal: bridge(LATTICE_EVENT.openModal),
 	closeModal: bridge(LATTICE_EVENT.closeModal),
-	resetForm: bridge(LATTICE_EVENT.resetForm)
+	resetForm: bridge(LATTICE_EVENT.resetForm),
+	toggleSidebar: bridge(LATTICE_EVENT.toggleSidebar)
 };
 function mergeEffectHandlers(...registries) {
 	return registries.reduce((merged, registry) => ({

package/dist/effects/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type { ResolveProps } from \"@lattice-php/lattice/core/types\";\nimport type { Effect } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\n/**\n * Augmentable map of effect `type` → payload (the effect's fields minus `type`).\n * Consumer apps extend it via `declare module \"@lattice-php/lattice\"` so their\n * custom effects type their handler's payload; built-ins resolve through the\n * generated `Effect` union.\n */\nexport interface EffectProps {}\n\n// The generated built-in effect payloads, keyed by `type` (the discriminant stripped).\ntype EffectPayloads = { [TEffect in Effect as TEffect[\"type\"]]: Omit<TEffect, \"type\"> };\n\ntype EffectPayloadOf<TType extends string> = ResolveProps<\n  EffectProps,\n  EffectPayloads,\n  TType,\n  Record<string, unknown>\n>;\n\n/**\n * Resolves an effect `type` to its full shape — `{ type, ...payload }` — the way\n * `Node<T>` pairs a type with its props, so built-ins and consumer effects alike\n * always carry `type`. An unknown type falls back to the loose `Effect` union.\n */\nexport type EffectOf<TType extends string> = string extends TType\n  ? Effect\n  : { type: TType } & EffectPayloadOf<TType>;\n\nexport type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;\n\nexport type EffectHandlerRegistry = Record<string, EffectHandler>;\n\n/**\n * Registers a typed effect handler, erasing the type parameter for the registry.\n * Mirrors `eagerComponent`/`columnCell`: author against `EffectHandler<\"my.type\">`\n * for a typed payload, register through this.\n */\nexport function effectHandler<TType extends string>(\n  _type: TType,\n  fn: EffectHandler<TType>,\n): EffectHandler {\n  return fn as unknown as EffectHandler;\n}\n\nfunction triggerDownload(url: string): void {\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.rel = \"noopener\";\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n}\n\n/** Re-broadcast an effect as its `lattice:*` DOM event for feature components. */\nfunction bridge(event: string): EffectHandler {\n  return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect }));\n}\n\n/**\n * Built-in effect handlers. Imperative effects act directly; the rest bridge to\n * the `lattice:*` DOM events that toast/callout/modal/fragment/form subscribe to\n * — preserving today's behavior exactly.\n */\nexport const builtinEffectHandlers: EffectHandlerRegistry = {\n  reloadPage: () => router.reload(),\n  redirect: effectHandler(\"redirect\", (effect) => router.visit(effect.url)),\n  download: effectHandler(\"download\", (effect) => triggerDownload(effect.url)),\n  localeChange: effectHandler(\"localeChange\", (effect) => setLocale(effect.locale)),\n  toast: bridge(LATTICE_EVENT.toast),\n  callout: bridge(LATTICE_EVENT.callout),\n  reloadComponent: bridge(LATTICE_EVENT.reloadComponent),\n  openModal: bridge(LATTICE_EVENT.openModal),\n  closeModal: bridge(LATTICE_EVENT.closeModal),\n  resetForm: bridge(LATTICE_EVENT.resetForm),\n};\n\nexport function mergeEffectHandlers(\n  ...registries: Array<EffectHandlerRegistry | undefined>\n): EffectHandlerRegistry {\n  return registries.reduce<EffectHandlerRegistry>(\n    (merged, registry) => ({ ...merged, ...registry }),\n    {},\n  );\n}\n"],"mappings":";;;;;;;;;AA0CA,SAAgB,cACd,OACA,IACe;CACf,OAAO;AACT;AAEA,SAAS,gBAAgB,KAAmB;CAC1C,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,MAAM;CACX,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;AACd;;AAGA,SAAS,OAAO,OAA8B;CAC5C,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,CAAC,CAAC;AACpF;;;;;;AAOA,IAAa,wBAA+C;CAC1D,kBAAkB,OAAO,OAAO;CAChC,UAAU,cAAc,aAAa,WAAW,OAAO,MAAM,OAAO,GAAG,CAAC;CACxE,UAAU,cAAc,aAAa,WAAW,gBAAgB,OAAO,GAAG,CAAC;CAC3E,cAAc,cAAc,iBAAiB,WAAW,UAAU,OAAO,MAAM,CAAC;CAChF,OAAO,OAAO,cAAc,KAAK;CACjC,SAAS,OAAO,cAAc,OAAO;CACrC,iBAAiB,OAAO,cAAc,eAAe;CACrD,WAAW,OAAO,cAAc,SAAS;CACzC,YAAY,OAAO,cAAc,UAAU;CAC3C,WAAW,OAAO,cAAc,SAAS;AAC3C;AAEA,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type { ResolveProps } from \"@lattice-php/lattice/core/types\";\nimport type { Effect } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\n/**\n * Augmentable map of effect `type` → payload (the effect's fields minus `type`).\n * Consumer apps extend it via `declare module \"@lattice-php/lattice\"` so their\n * custom effects type their handler's payload; built-ins resolve through the\n * generated `Effect` union.\n */\nexport interface EffectProps {}\n\n// The generated built-in effect payloads, keyed by `type` (the discriminant stripped).\ntype EffectPayloads = { [TEffect in Effect as TEffect[\"type\"]]: Omit<TEffect, \"type\"> };\n\ntype EffectPayloadOf<TType extends string> = ResolveProps<\n  EffectProps,\n  EffectPayloads,\n  TType,\n  Record<string, unknown>\n>;\n\n/**\n * Resolves an effect `type` to its full shape — `{ type, ...payload }` — the way\n * `Node<T>` pairs a type with its props, so built-ins and consumer effects alike\n * always carry `type`. An unknown type falls back to the loose `Effect` union.\n */\nexport type EffectOf<TType extends string> = string extends TType\n  ? Effect\n  : { type: TType } & EffectPayloadOf<TType>;\n\nexport type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;\n\nexport type EffectHandlerRegistry = Record<string, EffectHandler>;\n\n/**\n * Registers a typed effect handler, erasing the type parameter for the registry.\n * Mirrors `eagerComponent`/`columnCell`: author against `EffectHandler<\"my.type\">`\n * for a typed payload, register through this.\n */\nexport function effectHandler<TType extends string>(\n  _type: TType,\n  fn: EffectHandler<TType>,\n): EffectHandler {\n  return fn as unknown as EffectHandler;\n}\n\nfunction triggerDownload(url: string): void {\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.rel = \"noopener\";\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n}\n\n/** Re-broadcast an effect as its `lattice:*` DOM event for feature components. */\nfunction bridge(event: string): EffectHandler {\n  return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect }));\n}\n\n/**\n * Built-in effect handlers. Imperative effects act directly; the rest bridge to\n * the `lattice:*` DOM events that toast/callout/modal/fragment/form subscribe to\n * — preserving today's behavior exactly.\n */\nexport const builtinEffectHandlers: EffectHandlerRegistry = {\n  reloadPage: () => router.reload(),\n  redirect: effectHandler(\"redirect\", (effect) => router.visit(effect.url)),\n  download: effectHandler(\"download\", (effect) => triggerDownload(effect.url)),\n  localeChange: effectHandler(\"localeChange\", (effect) => setLocale(effect.locale)),\n  toast: bridge(LATTICE_EVENT.toast),\n  callout: bridge(LATTICE_EVENT.callout),\n  reloadComponent: bridge(LATTICE_EVENT.reloadComponent),\n  openModal: bridge(LATTICE_EVENT.openModal),\n  closeModal: bridge(LATTICE_EVENT.closeModal),\n  resetForm: bridge(LATTICE_EVENT.resetForm),\n  toggleSidebar: bridge(LATTICE_EVENT.toggleSidebar),\n};\n\nexport function mergeEffectHandlers(\n  ...registries: Array<EffectHandlerRegistry | undefined>\n): EffectHandlerRegistry {\n  return registries.reduce<EffectHandlerRegistry>(\n    (merged, registry) => ({ ...merged, ...registry }),\n    {},\n  );\n}\n"],"mappings":";;;;;;;;;AA0CA,SAAgB,cACd,OACA,IACe;CACf,OAAO;AACT;AAEA,SAAS,gBAAgB,KAAmB;CAC1C,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,MAAM;CACX,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;AACd;;AAGA,SAAS,OAAO,OAA8B;CAC5C,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,CAAC,CAAC;AACpF;;;;;;AAOA,IAAa,wBAA+C;CAC1D,kBAAkB,OAAO,OAAO;CAChC,UAAU,cAAc,aAAa,WAAW,OAAO,MAAM,OAAO,GAAG,CAAC;CACxE,UAAU,cAAc,aAAa,WAAW,gBAAgB,OAAO,GAAG,CAAC;CAC3E,cAAc,cAAc,iBAAiB,WAAW,UAAU,OAAO,MAAM,CAAC;CAChF,OAAO,OAAO,cAAc,KAAK;CACjC,SAAS,OAAO,cAAc,OAAO;CACrC,iBAAiB,OAAO,cAAc,eAAe;CACrD,WAAW,OAAO,cAAc,SAAS;CACzC,YAAY,OAAO,cAAc,UAAU;CAC3C,WAAW,OAAO,cAAc,SAAS;CACzC,eAAe,OAAO,cAAc,aAAa;AACnD;AAEA,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}

package/dist/effects/use-effect-dispatcher.js

@@ -1,6 +1,6 @@
+import { useEffectHandlerRegistry } from "../core/registry-context.js";
 import { builtinEffectHandlers, mergeEffectHandlers } from "./registry.js";
 import { dispatchEffects } from "./dispatch.js";
-import { useEffectHandlerRegistry } from "../core/registry-context.js";
 import { useCallback, useMemo } from "react";
 //#region resources/js/effects/use-effect-dispatcher.ts
 /**

package/dist/effects/use-flash-effects.js

@@ -1,7 +1,7 @@
 import { getActionEffects } from "./dispatch.js";
 import { useEffectDispatcher } from "./use-effect-dispatcher.js";
-import { useEffect } from "react";
 import { router } from "@inertiajs/react";
+import { useEffect } from "react";
 //#region resources/js/effects/use-flash-effects.ts
 /**
 * Drains the `latticeEffects` flash bag (server `Effects::flash(...)`) on each

package/dist/events/event-names.d.ts

@@ -1,7 +1,7 @@
 /**
  * Single source of truth for the `lattice:*` DOM events the runtime dispatches
- * and listens for. Effect-driven events are mapped from the generated EffectType
- * in effects/registry.ts; the rest are framework events with no PHP counterpart.
+ * and listens for. The built-in effect handlers in effects/registry.ts bridge
+ * effects to these events; the rest are framework events with no PHP counterpart.
  */
 export declare const LATTICE_EVENT: {
     readonly callout: "lattice:callout";
@@ -13,6 +13,7 @@ export declare const LATTICE_EVENT: {
     readonly openModal: "lattice:open-modal";
     readonly closeModal: "lattice:close-modal";
     readonly resetForm: "lattice:reset-form";
+    readonly toggleSidebar: "lattice:toggle-sidebar";
     readonly appearanceChange: "lattice:appearance-change";
     readonly localeChange: "lattice:locale-change";
     readonly actionError: "lattice:action-error";

package/dist/events/event-names.js

@@ -1,8 +1,8 @@
 //#region resources/js/events/event-names.ts
 /**
 * Single source of truth for the `lattice:*` DOM events the runtime dispatches
-* and listens for. Effect-driven events are mapped from the generated EffectType
-* in effects/registry.ts; the rest are framework events with no PHP counterpart.
+* and listens for. The built-in effect handlers in effects/registry.ts bridge
+* effects to these events; the rest are framework events with no PHP counterpart.
 */
 var LATTICE_EVENT = {
 	callout: "lattice:callout",
@@ -14,6 +14,7 @@ var LATTICE_EVENT = {
 	openModal: "lattice:open-modal",
 	closeModal: "lattice:close-modal",
 	resetForm: "lattice:reset-form",
+	toggleSidebar: "lattice:toggle-sidebar",
 	appearanceChange: "lattice:appearance-change",
 	localeChange: "lattice:locale-change",
 	actionError: "lattice:action-error"

package/dist/events/event-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-names.js","names":[],"sources":["../../resources/js/events/event-names.ts"],"sourcesContent":["/**\n * Single source of truth for the `lattice:*` DOM events the runtime dispatches\n * and listens for. Effect-driven events are mapped from the generated EffectType\n * in effects/registry.ts; the rest are framework events with no PHP counterpart.\n */\nexport const LATTICE_EVENT = {\n  callout: \"lattice:callout\",\n  toast: \"lattice:toast\",\n  reloadComponent: \"lattice:reload-component\",\n  reloadPage: \"lattice:reload-page\",\n  redirect: \"lattice:redirect\",\n  download: \"lattice:download\",\n  openModal: \"lattice:open-modal\",\n  closeModal: \"lattice:close-modal\",\n  resetForm: \"lattice:reset-form\",\n  appearanceChange: \"lattice:appearance-change\",\n  localeChange: \"lattice:locale-change\",\n  actionError: \"lattice:action-error\",\n} as const;\n\nexport type ReloadComponentEvent = CustomEvent<{\n  component?: string;\n  type?: string;\n}>;\n"],"mappings":";;;;;;AAKA,IAAa,gBAAgB;CAC3B,SAAS;CACT,OAAO;CACP,iBAAiB;CACjB,YAAY;CACZ,UAAU;CACV,UAAU;CACV,WAAW;CACX,YAAY;CACZ,WAAW;CACX,kBAAkB;CAClB,cAAc;CACd,aAAa;AACf"}
+{"version":3,"file":"event-names.js","names":[],"sources":["../../resources/js/events/event-names.ts"],"sourcesContent":["/**\n * Single source of truth for the `lattice:*` DOM events the runtime dispatches\n * and listens for. The built-in effect handlers in effects/registry.ts bridge\n * effects to these events; the rest are framework events with no PHP counterpart.\n */\nexport const LATTICE_EVENT = {\n  callout: \"lattice:callout\",\n  toast: \"lattice:toast\",\n  reloadComponent: \"lattice:reload-component\",\n  reloadPage: \"lattice:reload-page\",\n  redirect: \"lattice:redirect\",\n  download: \"lattice:download\",\n  openModal: \"lattice:open-modal\",\n  closeModal: \"lattice:close-modal\",\n  resetForm: \"lattice:reset-form\",\n  toggleSidebar: \"lattice:toggle-sidebar\",\n  appearanceChange: \"lattice:appearance-change\",\n  localeChange: \"lattice:locale-change\",\n  actionError: \"lattice:action-error\",\n} as const;\n\nexport type ReloadComponentEvent = CustomEvent<{\n  component?: string;\n  type?: string;\n}>;\n"],"mappings":";;;;;;AAKA,IAAa,gBAAgB;CAC3B,SAAS;CACT,OAAO;CACP,iBAAiB;CACjB,YAAY;CACZ,UAAU;CACV,UAAU;CACV,WAAW;CACX,YAAY;CACZ,WAAW;CACX,eAAe;CACf,kBAAkB;CAClB,cAAc;CACd,aAAa;AACf"}

package/dist/form/components/base/input-otp.d.ts

@@ -0,0 +1,7 @@
+import { OTPInput } from 'input-otp';
+import { ComponentProps } from 'react';
+export type InputOTPProps = Omit<ComponentProps<typeof OTPInput>, "children" | "maxLength" | "render"> & {
+    length: number;
+};
+/** A segmented one-time-code input styled to match Lattice's control surfaces. */
+export declare function InputOTP({ length, containerClassName, pattern, ...props }: InputOTPProps): import("react").JSX.Element;

package/dist/form/components/base/input-otp.js

@@ -0,0 +1,30 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
+//#region resources/js/form/components/base/input-otp.tsx
+function Slot({ char, hasFakeCaret, isActive }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm", isActive && "z-10 border-lt-ring ring-lt-ring/50 ring-[3px]"),
+		children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "bg-lt-fg h-5 w-px animate-pulse" })
+		}) : null]
+	});
+}
+/** A segmented one-time-code input styled to match Lattice's control surfaces. */
+function InputOTP({ length, containerClassName, pattern = REGEXP_ONLY_DIGITS, ...props }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		maxLength: length,
+		pattern,
+		containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName),
+		render: ({ slots }) => /* @__PURE__ */ jsx("div", {
+			className: "flex items-center",
+			children: slots.map((slot, index) => /* @__PURE__ */ jsx(Slot, { ...slot }, index))
+		}),
+		...props
+	});
+}
+//#endregion
+export { InputOTP };
+
+//# sourceMappingURL=input-otp.js.map

package/dist/form/components/base/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../../../resources/js/form/components/base/input-otp.tsx"],"sourcesContent":["import { OTPInput, REGEXP_ONLY_DIGITS, type SlotProps } from \"input-otp\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Slot({ char, hasFakeCaret, isActive }: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm\",\n        isActive && \"z-10 border-lt-ring ring-lt-ring/50 ring-[3px]\",\n      )}\n    >\n      {char}\n      {hasFakeCaret ? (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"bg-lt-fg h-5 w-px animate-pulse\" />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport type InputOTPProps = Omit<\n  ComponentProps<typeof OTPInput>,\n  \"children\" | \"maxLength\" | \"render\"\n> & {\n  length: number;\n};\n\n/** A segmented one-time-code input styled to match Lattice's control surfaces. */\nexport function InputOTP({\n  length,\n  containerClassName,\n  pattern = REGEXP_ONLY_DIGITS,\n  ...props\n}: InputOTPProps) {\n  return (\n    <OTPInput\n      maxLength={length}\n      pattern={pattern}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n        containerClassName,\n      )}\n      render={({ slots }) => (\n        <div className=\"flex items-center\">\n          {slots.map((slot, index) => (\n            <Slot key={index} {...slot} />\n          ))}\n        </div>\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,KAAK,EAAE,MAAM,cAAc,YAAuB;CACzD,OACE,qBAAC,OAAD;EACE,WAAW,GACT,oMACA,YAAY,gDACd;YAJF,CAMG,MACA,eACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,kCAAmC,CAAA;EAC/C,CAAA,IACH,IACD;;AAET;;AAUA,SAAgB,SAAS,EACvB,QACA,oBACA,UAAU,oBACV,GAAG,SACa;CAChB,OACE,oBAAC,UAAD;EACE,WAAW;EACF;EACT,oBAAoB,GAClB,sDACA,kBACF;EACA,SAAS,EAAE,YACT,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,MAAM,UAChB,oBAAC,MAAD,EAAkB,GAAI,KAAO,GAAlB,KAAkB,CAC9B;EACE,CAAA;EAEP,GAAI;CACL,CAAA;AAEL"}

package/dist/form/components/conditions.js

@@ -18,7 +18,7 @@ function isIn(actual, expected) {
 	return (Array.isArray(expected) ? expected : [expected]).map((value) => String(value)).includes(String(actual ?? ""));
 }
 function isBlank(value) {
-	return value == null || String(value) === "";
+	return value == null || String(value).trim() === "";
 }
 function compareDates(actual, expected) {
 	const left = Date.parse(String(actual));

package/dist/form/components/conditions.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditions.js","names":[],"sources":["../../../resources/js/form/components/conditions.ts"],"sourcesContent":["import type { Condition, Op } from \"@lattice-php/lattice/types/generated\";\n\nexport type { Condition };\n\nexport type FieldConditions = {\n  visible?: Condition[];\n  required?: Condition[];\n  readOnly?: Condition[];\n  disabled?: Condition[];\n};\n\nexport type FieldFlags = {\n  hidden?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  disabled?: boolean;\n};\n\nexport type FieldState = {\n  hidden: boolean;\n  required: boolean;\n  readOnly: boolean;\n  disabled: boolean;\n};\n\nconst BOOLEAN_TRUE_VALUES = new Set([\"1\", \"true\", \"on\", \"yes\"]);\n\n// Mirrors PHP filter_var(FILTER_VALIDATE_BOOLEAN) so conditions evaluate\n// identically on the server and the client.\nexport function toBoolean(value: unknown): boolean {\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n\n  if (typeof value === \"number\") {\n    return value === 1;\n  }\n\n  return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());\n}\n\nfunction equals(actual: unknown, expected: unknown): boolean {\n  if (typeof expected === \"boolean\") {\n    return toBoolean(actual) === expected;\n  }\n  return String(actual ?? \"\") === String(expected ?? \"\");\n}\n\nfunction isIn(actual: unknown, expected: unknown): boolean {\n  const needles = (Array.isArray(expected) ? expected : [expected]).map((value) => String(value));\n  return needles.includes(String(actual ?? \"\"));\n}\n\nfunction isBlank(value: unknown): boolean {\n  return value == null || String(value) === \"\";\n}\n\n// Null when either value can't be parsed, so before/after never matches a bad date. Mirrors PHP strtotime.\nfunction compareDates(actual: unknown, expected: unknown): number | null {\n  const left = Date.parse(String(actual));\n  const right = Date.parse(String(expected));\n\n  if (Number.isNaN(left) || Number.isNaN(right)) {\n    return null;\n  }\n\n  return left === right ? 0 : left < right ? -1 : 1;\n}\n\n// Unknown operators from untrusted payloads fail open (the condition matches).\n// The `never` parameter makes an Op value added without a case above a\n// compile error rather than a silent fall-through.\nfunction evaluateUnknownOperator(_operator: never): boolean {\n  return true;\n}\n\nfunction evaluateOp(operator: Op, actual: unknown, expected: unknown): boolean {\n  switch (operator) {\n    case \"eq\":\n      return equals(actual, expected);\n    case \"neq\":\n      return !equals(actual, expected);\n    case \"gt\":\n      return Number(actual) > Number(expected);\n    case \"lt\":\n      return Number(actual) < Number(expected);\n    case \"gte\":\n      return Number(actual) >= Number(expected);\n    case \"lte\":\n      return Number(actual) <= Number(expected);\n    case \"contains\":\n      return String(actual ?? \"\").includes(String(expected ?? \"\"));\n    case \"starts_with\":\n      return String(actual ?? \"\").startsWith(String(expected ?? \"\"));\n    case \"ends_with\":\n      return String(actual ?? \"\").endsWith(String(expected ?? \"\"));\n    case \"in\":\n      return isIn(actual, expected);\n    case \"not_in\":\n      return !isIn(actual, expected);\n    case \"before\":\n      return compareDates(actual, expected) === -1;\n    case \"after\":\n      return compareDates(actual, expected) === 1;\n    case \"empty\":\n      return isBlank(actual);\n    case \"filled\":\n      return !isBlank(actual);\n    default:\n      return evaluateUnknownOperator(operator);\n  }\n}\n\nfunction allMatch(conditions: Condition[], values: Record<string, unknown>): boolean {\n  return conditions.every((condition) =>\n    evaluateOp(condition.operator, values[condition.field], condition.value),\n  );\n}\n\nfunction anyMatch(conditions: Condition[] | undefined, values: Record<string, unknown>): boolean {\n  return Boolean(\n    conditions?.some((condition) =>\n      evaluateOp(condition.operator, values[condition.field], condition.value),\n    ),\n  );\n}\n\nexport function evaluateConditions(\n  conditions: FieldConditions | undefined,\n  values: Record<string, unknown>,\n  flags: FieldFlags,\n): FieldState {\n  const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);\n\n  return {\n    hidden: Boolean(flags.hidden) || !visible,\n    required: Boolean(flags.required) || anyMatch(conditions?.required, values),\n    readOnly: Boolean(flags.readOnly) || anyMatch(conditions?.readOnly, values),\n    disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"conditions.js","names":[],"sources":["../../../resources/js/form/components/conditions.ts"],"sourcesContent":["import type { Condition, Op } from \"@lattice-php/lattice/types/generated\";\n\nexport type { Condition };\n\nexport type FieldConditions = {\n  visible?: Condition[];\n  required?: Condition[];\n  readOnly?: Condition[];\n  disabled?: Condition[];\n};\n\nexport type FieldFlags = {\n  hidden?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  disabled?: boolean;\n};\n\nexport type FieldState = {\n  hidden: boolean;\n  required: boolean;\n  readOnly: boolean;\n  disabled: boolean;\n};\n\nconst BOOLEAN_TRUE_VALUES = new Set([\"1\", \"true\", \"on\", \"yes\"]);\n\n// Mirrors PHP filter_var(FILTER_VALIDATE_BOOLEAN) so conditions evaluate\n// identically on the server and the client.\nexport function toBoolean(value: unknown): boolean {\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n\n  if (typeof value === \"number\") {\n    return value === 1;\n  }\n\n  return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());\n}\n\nfunction equals(actual: unknown, expected: unknown): boolean {\n  if (typeof expected === \"boolean\") {\n    return toBoolean(actual) === expected;\n  }\n  return String(actual ?? \"\") === String(expected ?? \"\");\n}\n\nfunction isIn(actual: unknown, expected: unknown): boolean {\n  const needles = (Array.isArray(expected) ? expected : [expected]).map((value) => String(value));\n  return needles.includes(String(actual ?? \"\"));\n}\n\nfunction isBlank(value: unknown): boolean {\n  return value == null || String(value).trim() === \"\";\n}\n\n// Null when either value can't be parsed, so before/after never matches a bad date. Mirrors PHP strtotime.\nfunction compareDates(actual: unknown, expected: unknown): number | null {\n  const left = Date.parse(String(actual));\n  const right = Date.parse(String(expected));\n\n  if (Number.isNaN(left) || Number.isNaN(right)) {\n    return null;\n  }\n\n  return left === right ? 0 : left < right ? -1 : 1;\n}\n\n// Unknown operators from untrusted payloads fail open (the condition matches).\n// The `never` parameter makes an Op value added without a case above a\n// compile error rather than a silent fall-through.\nfunction evaluateUnknownOperator(_operator: never): boolean {\n  return true;\n}\n\nfunction evaluateOp(operator: Op, actual: unknown, expected: unknown): boolean {\n  switch (operator) {\n    case \"eq\":\n      return equals(actual, expected);\n    case \"neq\":\n      return !equals(actual, expected);\n    case \"gt\":\n      return Number(actual) > Number(expected);\n    case \"lt\":\n      return Number(actual) < Number(expected);\n    case \"gte\":\n      return Number(actual) >= Number(expected);\n    case \"lte\":\n      return Number(actual) <= Number(expected);\n    case \"contains\":\n      return String(actual ?? \"\").includes(String(expected ?? \"\"));\n    case \"starts_with\":\n      return String(actual ?? \"\").startsWith(String(expected ?? \"\"));\n    case \"ends_with\":\n      return String(actual ?? \"\").endsWith(String(expected ?? \"\"));\n    case \"in\":\n      return isIn(actual, expected);\n    case \"not_in\":\n      return !isIn(actual, expected);\n    case \"before\":\n      return compareDates(actual, expected) === -1;\n    case \"after\":\n      return compareDates(actual, expected) === 1;\n    case \"empty\":\n      return isBlank(actual);\n    case \"filled\":\n      return !isBlank(actual);\n    default:\n      return evaluateUnknownOperator(operator);\n  }\n}\n\nfunction allMatch(conditions: Condition[], values: Record<string, unknown>): boolean {\n  return conditions.every((condition) =>\n    evaluateOp(condition.operator, values[condition.field], condition.value),\n  );\n}\n\nfunction anyMatch(conditions: Condition[] | undefined, values: Record<string, unknown>): boolean {\n  return Boolean(\n    conditions?.some((condition) =>\n      evaluateOp(condition.operator, values[condition.field], condition.value),\n    ),\n  );\n}\n\nexport function evaluateConditions(\n  conditions: FieldConditions | undefined,\n  values: Record<string, unknown>,\n  flags: FieldFlags,\n): FieldState {\n  const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);\n\n  return {\n    hidden: Boolean(flags.hidden) || !visible,\n    required: Boolean(flags.required) || anyMatch(conditions?.required, values),\n    readOnly: Boolean(flags.readOnly) || anyMatch(conditions?.readOnly, values),\n    disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values),\n  };\n}\n"],"mappings":"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"}

package/dist/form/components/fields/file-upload.js

@@ -1,6 +1,6 @@
-import { testIdentity } from "../../../core/test-id.js";
 import { Icon } from "../../../icons/sprite.js";
 import { useT } from "../../../i18n/instance.js";
+import { testIdentity } from "../../../core/test-id.js";
 import { apiFetch } from "../../../core/api.js";
 import { useFormContext } from "../context.js";
 import { useFieldScope } from "../field-scope.js";

package/dist/form/components/fields/otp-input.d.ts

@@ -0,0 +1,2 @@
+import { RendererComponent } from '../../../core/types';
+export declare const OtpInputComponent: RendererComponent<"field.otp">;

package/dist/form/components/fields/otp-input.js

@@ -0,0 +1,25 @@
+import { SimpleField } from "./simple-field.js";
+import { InputOTP } from "../base/input-otp.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/otp-input.tsx
+var OtpInputComponent = ({ node }) => {
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(InputOTP, {
+			autoFocus: props.autoFocus ?? false,
+			"data-test": testId,
+			disabled: disabled || readOnly,
+			id: name,
+			length: props.length,
+			name,
+			onChange: (next) => commit(next),
+			value
+		})
+	});
+};
+//#endregion
+export { OtpInputComponent };
+
+//# sourceMappingURL=otp-input.js.map

package/dist/form/components/fields/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/otp-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InputOTP } from \"../base/input-otp\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const OtpInputComponent: RendererComponent<\"field.otp\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <InputOTP\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled || readOnly}\n          id={name}\n          length={props.length}\n          name={name}\n          onChange={(next) => commit(next)}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqD,EAAE,WAAW;CAC7E,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,UAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACX,UAAU,YAAY;GACtB,IAAI;GACJ,QAAQ,MAAM;GACR;GACN,WAAW,SAAS,OAAO,IAAI;GACxB;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/row-item.js

@@ -1,6 +1,6 @@
 import { Icon } from "../../../icons/sprite.js";
-import { useT } from "../../../i18n/instance.js";
 import { RenderNode } from "../../../core/renderer.js";
+import { useT } from "../../../i18n/instance.js";
 import { FieldScopeProvider } from "../field-scope.js";
 import { buildRowActions } from "./row-action-menu.js";
 import { RowActions } from "./row-actions.js";

package/dist/form/components/fields/table-rows.js

@@ -1,6 +1,6 @@
 import { Icon } from "../../../icons/sprite.js";
-import { useT } from "../../../i18n/instance.js";
 import { RenderNode } from "../../../core/renderer.js";
+import { useT } from "../../../i18n/instance.js";
 import { FieldScopeProvider } from "../field-scope.js";
 import "../../../core/column-sizing.js";
 import { useColumnResizing } from "../../../core/use-column-resizing.js";

package/dist/form/components/form.js

@@ -7,8 +7,8 @@ import { ResolvedNodesProvider } from "./resolved-nodes.js";
 import { FormValuesProvider } from "./values.js";
 import { useFormResolver } from "./use-form-resolver.js";
 import { FormSubmitButton } from "./base/submit-button.js";
-import { useEffect, useMemo } from "react";
 import { Form } from "@inertiajs/react";
+import { useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/form.tsx
 function collectFields(nodes) {

package/dist/form/components/index.d.ts

@@ -6,6 +6,7 @@ export { FileUploadComponent } from './fields/file-upload';
 export { FormComponent } from './form';
 export { HiddenInputComponent } from './fields/hidden-input';
 export { NumberInputComponent } from './fields/number-input';
+export { OtpInputComponent } from './fields/otp-input';
 export { PasswordInputComponent } from './fields/password-input';
 export { RepeaterComponent } from './fields/repeater';
 export { SelectComponent } from './fields/select';

package/dist/form/components/index.js

@@ -6,9 +6,10 @@ import { DateInputComponent } from "./fields/date-input.js";
 import { FileUploadComponent } from "./fields/file-upload.js";
 import { HiddenInputComponent } from "./fields/hidden-input.js";
 import { NumberInputComponent } from "./fields/number-input.js";
+import { OtpInputComponent } from "./fields/otp-input.js";
 import { PasswordInputComponent } from "./fields/password-input.js";
 import { RepeaterComponent } from "./fields/repeater.js";
 import { SelectComponent } from "./fields/select.js";
 import { TextareaComponent } from "./fields/textarea.js";
 import { TextInputComponent } from "./fields/text-input.js";
-export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent };
+export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent };