@lattice-php/lattice 0.2.0 → 0.3.0

package/dist/layout/menu-item.js

@@ -1,31 +1,32 @@
 import { cn } from "../lib/utils.js";
+import { prefixedNodeTestId } from "../core/test-id.js";
 import { Icon } from "../icons/sprite.js";
 import { IconRenderer } from "../icons/icon-renderer.js";
-import { useT } from "../i18n/instance.js";
-import { SidebarCollapsedContext, useSidebarCollapsed } from "./context.js";
-import { useEffect, useRef, useState } from "react";
+import { useCollapsed } from "../core/collapsed-context.js";
+import { Popover } from "./popover.js";
+import { useState } from "react";
 import { Link, usePage } from "@inertiajs/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/menu-item.tsx
 var rowClass = "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-lt-fg transition-colors hover:bg-lt-muted";
 function schemaContainsPath(schema, path) {
 	return (schema ?? []).some((child) => child.props?.href === path || schemaContainsPath(child.schema, path));
 }
 var MenuItemComponent = ({ children, node }) => {
-	const collapsed = useSidebarCollapsed();
+	const collapsed = useCollapsed();
 	const icon = node.props.icon;
 	const label = node.props.label;
 	const href = node.props.href ?? "";
 	const currentPath = usePage().url.split("?")[0];
-	const slug = label.toLowerCase().replace(/\s+/g, "-");
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon ? /* @__PURE__ */ jsx(IconRenderer, {
+	const testId = prefixedNodeTestId("menu", node);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ? /* @__PURE__ */ jsx(IconRenderer, {
 		className: "size-lt-icon-md shrink-0",
 		icon
-	}) : null, /* @__PURE__ */ jsx("span", {
-		className: cn(collapsed && "sr-only"),
+	}) : null, collapsed ? /* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none absolute top-1/2 left-full z-50 ml-2 hidden -translate-y-1/2 rounded-md border border-lt-border bg-lt-popover px-2 py-1 text-sm whitespace-nowrap text-lt-popover-fg shadow-lg group-hover:block",
+		role: "tooltip",
 		children: label
-	})] });
+	}) : /* @__PURE__ */ jsx("span", { children: label })] });
 	if (href === "") {
 		if (!children) return collapsed ? null : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", {
 			className: "flex items-center gap-2 px-3 py-2 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase",
@@ -34,24 +35,26 @@ var MenuItemComponent = ({ children, node }) => {
 		if (collapsed) return /* @__PURE__ */ jsx(FlyoutGroup, {
 			icon,
 			label,
-			testId: `menu-${slug}`,
+			testId,
 			children
 		});
 		return /* @__PURE__ */ jsx(CollapsibleItem, {
 			content,
 			defaultOpen: schemaContainsPath(node.schema, currentPath),
-			testId: `menu-${slug}`,
+			testId,
 			children
 		});
 	}
 	const active = currentPath === href;
+	const method = node.props.method ?? "get";
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 		"aria-current": active ? "page" : void 0,
-		className: cn(rowClass, collapsed && "justify-center", active && "bg-lt-muted font-medium"),
-		"data-test": `menu-${slug}`,
+		"aria-label": collapsed ? label : void 0,
+		as: method === "get" ? void 0 : "button",
+		className: cn(rowClass, "w-full", collapsed && "group relative justify-center", active && "bg-lt-muted font-medium"),
+		"data-test": testId,
 		href,
-		method: node.props.method ?? "get",
-		title: collapsed ? label : void 0,
+		method,
 		children: content
 	}) });
 };
@@ -73,56 +76,24 @@ function CollapsibleItem({ children, content, defaultOpen, testId }) {
 	}) : null] });
 }
 function FlyoutGroup({ children, icon, label, testId }) {
-	const { t } = useT("lattice");
-	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState({
-		left: 0,
-		top: 0
-	});
-	const triggerRef = useRef(null);
-	const url = usePage().url;
-	useEffect(() => setOpen(false), [url]);
-	function toggle() {
-		const rect = triggerRef.current?.getBoundingClientRect();
-		if (rect) setPosition({
-			left: rect.right + 4,
-			top: rect.top
-		});
-		setOpen((value) => !value);
-	}
-	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("button", {
-		"aria-expanded": open,
-		"aria-label": label,
-		className: cn(rowClass, "w-full justify-center"),
-		"data-test": testId,
-		onClick: toggle,
-		ref: triggerRef,
-		title: label,
-		type: "button",
-		children: icon ? /* @__PURE__ */ jsx(IconRenderer, {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Popover, {
+		className: "min-w-48",
+		placement: "right",
+		testId,
+		trigger: icon ? /* @__PURE__ */ jsx(IconRenderer, {
 			className: "size-lt-icon-md shrink-0",
 			icon
-		}) : /* @__PURE__ */ jsx("span", { children: label })
-	}), open ? createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-		"aria-label": t("a11y.closeMenu", "Close menu"),
-		className: "fixed inset-0 z-40 cursor-default",
-		"data-test": `${testId}-close`,
-		onClick: () => setOpen(false),
-		type: "button"
-	}), /* @__PURE__ */ jsx(SidebarCollapsedContext.Provider, {
-		value: false,
+		}) : /* @__PURE__ */ jsx("span", { children: label }),
+		triggerClassName: cn(rowClass, "justify-center"),
+		triggerLabel: label,
 		children: /* @__PURE__ */ jsxs("ul", {
-			className: "fixed z-50 min-w-48 rounded-md border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-lg",
-			style: {
-				left: position.left,
-				top: position.top
-			},
+			className: "flex flex-col gap-1",
 			children: [/* @__PURE__ */ jsx("li", {
 				className: "px-3 py-1.5 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase",
 				children: label
 			}), children]
 		})
-	})] }), document.body) : null] });
+	}) });
 }
 //#endregion
 export { MenuItemComponent as default };

package/dist/layout/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":[],"sources":["../../resources/js/layout/menu-item.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { RendererComponent, Schema } from \"@lattice/lattice/core/types\";\nimport { Icon, IconRenderer } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport { SidebarCollapsedContext, useSidebarCollapsed } from \"./context\";\n\nconst rowClass =\n  \"flex items-center gap-2 rounded-md px-3 py-2 text-sm text-lt-fg transition-colors hover:bg-lt-muted\";\n\nfunction schemaContainsPath(schema: Schema | undefined, path: string): boolean {\n  return (schema ?? []).some(\n    (child) => child.props?.href === path || schemaContainsPath(child.schema, path),\n  );\n}\n\nconst MenuItemComponent: RendererComponent<\"menu-item\"> = ({ children, node }) => {\n  const collapsed = useSidebarCollapsed();\n  const icon = node.props.icon;\n  const label = node.props.label;\n  const href = node.props.href ?? \"\";\n  const currentPath = usePage().url.split(\"?\")[0];\n  const slug = label.toLowerCase().replace(/\\s+/g, \"-\");\n\n  const content = (\n    <>\n      {icon ? <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} /> : null}\n      <span className={cn(collapsed && \"sr-only\")}>{label}</span>\n    </>\n  );\n\n  if (href === \"\") {\n    if (!children) {\n      return collapsed ? null : (\n        <li>\n          <span className=\"flex items-center gap-2 px-3 py-2 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase\">\n            {content}\n          </span>\n        </li>\n      );\n    }\n\n    if (collapsed) {\n      return (\n        <FlyoutGroup icon={icon} label={label} testId={`menu-${slug}`}>\n          {children}\n        </FlyoutGroup>\n      );\n    }\n\n    return (\n      <CollapsibleItem\n        content={content}\n        defaultOpen={schemaContainsPath(node.schema, currentPath)}\n        testId={`menu-${slug}`}\n      >\n        {children}\n      </CollapsibleItem>\n    );\n  }\n\n  const active = currentPath === href;\n\n  return (\n    <li>\n      <Link\n        aria-current={active ? \"page\" : undefined}\n        className={cn(rowClass, collapsed && \"justify-center\", active && \"bg-lt-muted font-medium\")}\n        data-test={`menu-${slug}`}\n        href={href}\n        method={node.props.method ?? \"get\"}\n        title={collapsed ? label : undefined}\n      >\n        {content}\n      </Link>\n    </li>\n  );\n};\n\nfunction CollapsibleItem({\n  children,\n  content,\n  defaultOpen,\n  testId,\n}: {\n  children: ReactNode;\n  content: ReactNode;\n  defaultOpen: boolean;\n  testId: string;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n\n  return (\n    <li>\n      <button\n        aria-expanded={open}\n        className={cn(rowClass, \"w-full\")}\n        data-test={testId}\n        onClick={() => setOpen((value) => !value)}\n        type=\"button\"\n      >\n        {content}\n        <Icon\n          name=\"chevron-right\"\n          className={cn(\n            \"ml-auto size-lt-icon-md shrink-0 transition-transform\",\n            open && \"rotate-90\",\n          )}\n        />\n      </button>\n      {open ? <ul className=\"mt-1 flex flex-col gap-1 pl-3\">{children}</ul> : null}\n    </li>\n  );\n}\n\nfunction FlyoutGroup({\n  children,\n  icon,\n  label,\n  testId,\n}: {\n  children: ReactNode;\n  icon?: string | null;\n  label: string;\n  testId: string;\n}) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState({ left: 0, top: 0 });\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const url = usePage().url;\n\n  useEffect(() => setOpen(false), [url]);\n\n  function toggle(): void {\n    const rect = triggerRef.current?.getBoundingClientRect();\n\n    if (rect) {\n      setPosition({ left: rect.right + 4, top: rect.top });\n    }\n\n    setOpen((value) => !value);\n  }\n\n  return (\n    <li>\n      <button\n        aria-expanded={open}\n        aria-label={label}\n        className={cn(rowClass, \"w-full justify-center\")}\n        data-test={testId}\n        onClick={toggle}\n        ref={triggerRef}\n        title={label}\n        type=\"button\"\n      >\n        {icon ? (\n          <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />\n        ) : (\n          <span>{label}</span>\n        )}\n      </button>\n      {open\n        ? createPortal(\n            <>\n              <button\n                aria-label={t(\"a11y.closeMenu\", \"Close menu\")}\n                className=\"fixed inset-0 z-40 cursor-default\"\n                data-test={`${testId}-close`}\n                onClick={() => setOpen(false)}\n                type=\"button\"\n              />\n              <SidebarCollapsedContext.Provider value={false}>\n                <ul\n                  className=\"fixed z-50 min-w-48 rounded-md border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-lg\"\n                  style={{ left: position.left, top: position.top }}\n                >\n                  <li className=\"px-3 py-1.5 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase\">\n                    {label}\n                  </li>\n                  {children}\n                </ul>\n              </SidebarCollapsedContext.Provider>\n            </>,\n            document.body,\n          )\n        : null}\n    </li>\n  );\n}\n\nexport default MenuItemComponent;\n"],"mappings":"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"}
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../resources/js/layout/menu-item.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { prefixedNodeTestId } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { Icon, IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useSidebarCollapsed } from \"./context\";\nimport { Popover } from \"./popover\";\n\nconst rowClass =\n  \"flex items-center gap-2 rounded-md px-3 py-2 text-sm text-lt-fg transition-colors hover:bg-lt-muted\";\n\nfunction schemaContainsPath(schema: Schema | undefined, path: string): boolean {\n  return (schema ?? []).some(\n    (child) => child.props?.href === path || schemaContainsPath(child.schema, path),\n  );\n}\n\nconst MenuItemComponent: RendererComponent<\"menu-item\"> = ({ children, node }) => {\n  const collapsed = useSidebarCollapsed();\n  const icon = node.props.icon;\n  const label = node.props.label;\n  const href = node.props.href ?? \"\";\n  const currentPath = usePage().url.split(\"?\")[0];\n  const testId = prefixedNodeTestId(\"menu\", node);\n\n  const content = (\n    <>\n      {icon ? <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} /> : null}\n      {collapsed ? (\n        <span\n          className=\"pointer-events-none absolute top-1/2 left-full z-50 ml-2 hidden -translate-y-1/2 rounded-md border border-lt-border bg-lt-popover px-2 py-1 text-sm whitespace-nowrap text-lt-popover-fg shadow-lg group-hover:block\"\n          role=\"tooltip\"\n        >\n          {label}\n        </span>\n      ) : (\n        <span>{label}</span>\n      )}\n    </>\n  );\n\n  if (href === \"\") {\n    if (!children) {\n      return collapsed ? null : (\n        <li>\n          <span className=\"flex items-center gap-2 px-3 py-2 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase\">\n            {content}\n          </span>\n        </li>\n      );\n    }\n\n    if (collapsed) {\n      return (\n        <FlyoutGroup icon={icon} label={label} testId={testId}>\n          {children}\n        </FlyoutGroup>\n      );\n    }\n\n    return (\n      <CollapsibleItem\n        content={content}\n        defaultOpen={schemaContainsPath(node.schema, currentPath)}\n        testId={testId}\n      >\n        {children}\n      </CollapsibleItem>\n    );\n  }\n\n  const active = currentPath === href;\n  const method = node.props.method ?? \"get\";\n\n  return (\n    <li>\n      <Link\n        aria-current={active ? \"page\" : undefined}\n        aria-label={collapsed ? label : undefined}\n        as={method === \"get\" ? undefined : \"button\"}\n        className={cn(\n          rowClass,\n          \"w-full\",\n          collapsed && \"group relative justify-center\",\n          active && \"bg-lt-muted font-medium\",\n        )}\n        data-test={testId}\n        href={href}\n        method={method}\n      >\n        {content}\n      </Link>\n    </li>\n  );\n};\n\nfunction CollapsibleItem({\n  children,\n  content,\n  defaultOpen,\n  testId,\n}: {\n  children: ReactNode;\n  content: ReactNode;\n  defaultOpen: boolean;\n  testId?: string;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n\n  return (\n    <li>\n      <button\n        aria-expanded={open}\n        className={cn(rowClass, \"w-full\")}\n        data-test={testId}\n        onClick={() => setOpen((value) => !value)}\n        type=\"button\"\n      >\n        {content}\n        <Icon\n          name=\"chevron-right\"\n          className={cn(\n            \"ml-auto size-lt-icon-md shrink-0 transition-transform\",\n            open && \"rotate-90\",\n          )}\n        />\n      </button>\n      {open ? <ul className=\"mt-1 flex flex-col gap-1 pl-3\">{children}</ul> : null}\n    </li>\n  );\n}\n\nfunction FlyoutGroup({\n  children,\n  icon,\n  label,\n  testId,\n}: {\n  children: ReactNode;\n  icon?: string | null;\n  label: string;\n  testId?: string;\n}) {\n  return (\n    <li>\n      <Popover\n        className=\"min-w-48\"\n        placement=\"right\"\n        testId={testId}\n        trigger={\n          icon ? (\n            <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />\n          ) : (\n            <span>{label}</span>\n          )\n        }\n        triggerClassName={cn(rowClass, \"justify-center\")}\n        triggerLabel={label}\n      >\n        <ul className=\"flex flex-col gap-1\">\n          <li className=\"px-3 py-1.5 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase\">\n            {label}\n          </li>\n          {children}\n        </ul>\n      </Popover>\n    </li>\n  );\n}\n\nexport default MenuItemComponent;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,WACJ;AAEF,SAAS,mBAAmB,QAA4B,MAAuB;CAC7E,QAAQ,UAAU,CAAC,GAAG,MACnB,UAAU,MAAM,OAAO,SAAS,QAAQ,mBAAmB,MAAM,QAAQ,IAAI,CAChF;AACF;AAEA,IAAM,qBAAqD,EAAE,UAAU,WAAW;CAChF,MAAM,YAAY,aAAoB;CACtC,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,OAAO,KAAK,MAAM,QAAQ;CAChC,MAAM,cAAc,QAAQ,EAAE,IAAI,MAAM,GAAG,EAAE;CAC7C,MAAM,SAAS,mBAAmB,QAAQ,IAAI;CAE9C,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACG,OAAO,oBAAC,cAAD;EAAc,WAAU;EAAiC;CAAO,CAAA,IAAI,MAC3E,YACC,oBAAC,QAAD;EACE,WAAU;EACV,MAAK;YAEJ;CACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CAErB,EAAA,CAAA;CAGJ,IAAI,SAAS,IAAI;EACf,IAAI,CAAC,UACH,OAAO,YAAY,OACjB,oBAAC,MAAD,EAAA,UACE,oBAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA,EACJ,CAAA;EAIR,IAAI,WACF,OACE,oBAAC,aAAD;GAAmB;GAAa;GAAe;GAC5C;EACU,CAAA;EAIjB,OACE,oBAAC,iBAAD;GACW;GACT,aAAa,mBAAmB,KAAK,QAAQ,WAAW;GAChD;GAEP;EACc,CAAA;CAErB;CAEA,MAAM,SAAS,gBAAgB;CAC/B,MAAM,SAAS,KAAK,MAAM,UAAU;CAEpC,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;EACE,gBAAc,SAAS,SAAS,KAAA;EAChC,cAAY,YAAY,QAAQ,KAAA;EAChC,IAAI,WAAW,QAAQ,KAAA,IAAY;EACnC,WAAW,GACT,UACA,UACA,aAAa,iCACb,UAAU,yBACZ;EACA,aAAW;EACL;EACE;YAEP;CACG,CAAA,EACJ,CAAA;AAER;AAEA,SAAS,gBAAgB,EACvB,UACA,SACA,aACA,UAMC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAE5C,OACE,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,iBAAe;EACf,WAAW,GAAG,UAAU,QAAQ;EAChC,aAAW;EACX,eAAe,SAAS,UAAU,CAAC,KAAK;EACxC,MAAK;YALP,CAOG,SACD,oBAAC,MAAD;GACE,MAAK;GACL,WAAW,GACT,yDACA,QAAQ,WACV;EACD,CAAA,CACK;KACP,OAAO,oBAAC,MAAD;EAAI,WAAU;EAAiC;CAAa,CAAA,IAAI,IACtE,EAAA,CAAA;AAER;AAEA,SAAS,YAAY,EACnB,UACA,MACA,OACA,UAMC;CACD,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,SAAD;EACE,WAAU;EACV,WAAU;EACF;EACR,SACE,OACE,oBAAC,cAAD;GAAc,WAAU;GAAiC;EAAO,CAAA,IAEhE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;EAGvB,kBAAkB,GAAG,UAAU,gBAAgB;EAC/C,cAAc;YAEd,qBAAC,MAAD;GAAI,WAAU;aAAd,CACE,oBAAC,MAAD;IAAI,WAAU;cACX;GACC,CAAA,GACH,QACC;;CACG,CAAA,EACP,CAAA;AAER"}

package/dist/layout/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../../resources/js/layout/menu.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nconst MenuComponent: RendererComponent<\"menu\"> = ({ children, node }) => (\n  <nav data-lattice-component={node.id}>\n    <ul className=\"flex flex-col gap-1\">{children}</ul>\n  </nav>\n);\n\nexport default MenuComponent;\n"],"mappings":";;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAC5D,oBAAC,OAAD;CAAK,0BAAwB,KAAK;WAChC,oBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA;AAC/C,CAAA"}
+{"version":3,"file":"menu.js","names":[],"sources":["../../resources/js/layout/menu.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst MenuComponent: RendererComponent<\"menu\"> = ({ children, node }) => (\n  <nav data-lattice-component={node.id}>\n    <ul className=\"flex flex-col gap-1\">{children}</ul>\n  </nav>\n);\n\nexport default MenuComponent;\n"],"mappings":";;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAC5D,oBAAC,OAAD;CAAK,0BAAwB,KAAK;WAChC,oBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA;AAC/C,CAAA"}

package/dist/layout/outlet.js

@@ -1,12 +1,12 @@
 import { OutletContext } from "./context.js";
 import { useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region resources/js/layout/outlet.tsx
 /**
 * Renders the active page at the position the layout schema places it.
 */
 var OutletComponent = () => {
-	return /* @__PURE__ */ jsx(Fragment, { children: useContext(OutletContext) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: useContext(OutletContext) });
 };
 //#endregion
 export { OutletComponent as default };

package/dist/layout/outlet.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlet.js","names":[],"sources":["../../resources/js/layout/outlet.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { OutletContext } from \"./context\";\n\n/**\n * Renders the active page at the position the layout schema places it.\n */\nconst OutletComponent: RendererComponent<\"outlet\"> = () => {\n  return <>{useContext(OutletContext)}</>;\n};\n\nexport default OutletComponent;\n"],"mappings":";;;;;;;AAOA,IAAM,wBAAqD;CACzD,OAAO,oBAAA,UAAA,EAAA,UAAG,WAAW,aAAa,EAAI,CAAA;AACxC"}
+{"version":3,"file":"outlet.js","names":[],"sources":["../../resources/js/layout/outlet.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { OutletContext } from \"./context\";\n\n/**\n * Renders the active page at the position the layout schema places it.\n */\nconst OutletComponent: RendererComponent<\"outlet\"> = () => {\n  return <>{useContext(OutletContext)}</>;\n};\n\nexport default OutletComponent;\n"],"mappings":";;;;;;;AAOA,IAAM,wBAAqD;CACzD,OAAO,oBAAA,YAAA,EAAA,UAAG,WAAW,aAAa,EAAI,CAAA;AACxC"}

package/dist/layout/popover.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/**
+ * A navigation-aware popover for the sidebar: it wraps the shared popover
+ * primitive (so positioning and dismissal stay consistent with the rest of the
+ * app) and closes itself on every Inertia navigation. Items render expanded
+ * regardless of the sidebar's collapsed state.
+ */
+export declare function Popover({ align, children, className, placement, testId, trigger, triggerClassName, triggerLabel, }: {
+    align?: "start" | "end";
+    children: ReactNode;
+    className?: string;
+    placement?: "bottom" | "right" | "top";
+    testId?: string;
+    trigger: ReactNode;
+    triggerClassName?: string;
+    triggerLabel?: string;
+}): import("react").JSX.Element;

package/dist/layout/popover.js

@@ -0,0 +1,46 @@
+import { cn } from "../lib/utils.js";
+import { CollapsedContext } from "../core/collapsed-context.js";
+import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../core/components/popover.js";
+import { useEffect, useState } from "react";
+import { usePage } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/layout/popover.tsx
+/**
+* A navigation-aware popover for the sidebar: it wraps the shared popover
+* primitive (so positioning and dismissal stay consistent with the rest of the
+* app) and closes itself on every Inertia navigation. Items render expanded
+* regardless of the sidebar's collapsed state.
+*/
+function Popover({ align = "start", children, className, placement = "bottom", testId, trigger, triggerClassName, triggerLabel }) {
+	const [open, setOpen] = useState(false);
+	const url = usePage().url;
+	useEffect(() => setOpen(false), [url]);
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				"aria-label": triggerLabel,
+				className: cn("w-full", triggerClassName),
+				"data-test": testId,
+				title: triggerLabel,
+				type: "button",
+				children: trigger
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align,
+			className: cn("min-w-56 p-1", className),
+			role: "menu",
+			side: placement,
+			children: /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+				value: false,
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=popover.js.map

package/dist/layout/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../resources/js/layout/popover.tsx"],"sourcesContent":["import { usePage } from \"@inertiajs/react\";\nimport { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\n\n/**\n * A navigation-aware popover for the sidebar: it wraps the shared popover\n * primitive (so positioning and dismissal stay consistent with the rest of the\n * app) and closes itself on every Inertia navigation. Items render expanded\n * regardless of the sidebar's collapsed state.\n */\nexport function Popover({\n  align = \"start\",\n  children,\n  className,\n  placement = \"bottom\",\n  testId,\n  trigger,\n  triggerClassName,\n  triggerLabel,\n}: {\n  align?: \"start\" | \"end\";\n  children: ReactNode;\n  className?: string;\n  placement?: \"bottom\" | \"right\" | \"top\";\n  testId?: string;\n  trigger: ReactNode;\n  triggerClassName?: string;\n  triggerLabel?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  const url = usePage().url;\n\n  useEffect(() => setOpen(false), [url]);\n\n  return (\n    <PopoverRoot open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          aria-label={triggerLabel}\n          className={cn(\"w-full\", triggerClassName)}\n          data-test={testId}\n          title={triggerLabel}\n          type=\"button\"\n        >\n          {trigger}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align={align}\n        className={cn(\"min-w-56 p-1\", className)}\n        role=\"menu\"\n        side={placement}\n      >\n        <CollapsedContext.Provider value={false}>{children}</CollapsedContext.Provider>\n      </PopoverContent>\n    </PopoverRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,QAAQ,EACtB,QAAQ,SACR,UACA,WACA,YAAY,UACZ,QACA,SACA,kBACA,gBAUC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,MAAM,QAAQ,EAAE;CAEtB,gBAAgB,QAAQ,KAAK,GAAG,CAAC,GAAG,CAAC;CAErC,OACE,qBAAC,WAAD;EAAmB;EAAM,cAAc;YAAvC,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IACE,cAAY;IACZ,WAAW,GAAG,UAAU,gBAAgB;IACxC,aAAW;IACX,OAAO;IACP,MAAK;cAEJ;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GACS;GACP,WAAW,GAAG,gBAAgB,SAAS;GACvC,MAAK;GACL,MAAM;aAEN,oBAAC,iBAAiB,UAAlB;IAA2B,OAAO;IAAQ;GAAoC,CAAA;EAChE,CAAA,CACL;;AAEjB"}

package/dist/layout/schema-layout.js

@@ -1,6 +1,5 @@
 import { Renderer } from "../core/renderer.js";
 import { OutletContext } from "./context.js";
-import { useRegistry } from "../provider.js";
 import { usePage } from "@inertiajs/react";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region resources/js/layout/schema-layout.tsx
@@ -11,17 +10,11 @@ import { Fragment, jsx } from "react/jsx-runtime";
 * shell state (open sidebar, scroll position) survives page visits.
 */
 function SchemaLayout({ children }) {
-	const lattice = usePage().props.lattice;
-	const registry = useRegistry();
-	const layout = lattice.layout;
+	const layout = usePage().props.lattice.layout;
 	if (!layout) return /* @__PURE__ */ jsx(Fragment, { children });
 	return /* @__PURE__ */ jsx(OutletContext.Provider, {
 		value: children,
-		children: /* @__PURE__ */ jsx(Renderer, {
-			fallback: null,
-			nodes: layout.schema,
-			registry
-		})
+		children: /* @__PURE__ */ jsx(Renderer, { nodes: layout.schema })
 	});
 }
 //#endregion

package/dist/layout/schema-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema-layout.js","names":[],"sources":["../../resources/js/layout/schema-layout.tsx"],"sourcesContent":["import { usePage } from \"@inertiajs/react\";\nimport type { ReactNode } from \"react\";\nimport { Renderer } from \"@lattice/lattice/core/renderer\";\nimport type { PagePayload } from \"@lattice/lattice/core/types\";\nimport { useRegistry } from \"@lattice/lattice/provider\";\nimport { OutletContext } from \"./context\";\n\n/**\n * Persistent Inertia layout that renders a server-composed layout schema and\n * exposes the active page (`children`) to the Outlet via context. The same\n * component instance is reused across navigations that share a layout, so\n * shell state (open sidebar, scroll position) survives page visits.\n */\nexport default function SchemaLayout({ children }: { children: ReactNode }) {\n  const lattice = usePage().props.lattice as PagePayload;\n  const registry = useRegistry();\n  const layout = lattice.layout;\n\n  if (!layout) {\n    return <>{children}</>;\n  }\n\n  return (\n    <OutletContext.Provider value={children}>\n      <Renderer fallback={null} nodes={layout.schema} registry={registry} />\n    </OutletContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAwB,aAAa,EAAE,YAAqC;CAC1E,MAAM,UAAU,QAAQ,EAAE,MAAM;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,SAAS,QAAQ;CAEvB,IAAI,CAAC,QACH,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;CAGvB,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,oBAAC,UAAD;GAAU,UAAU;GAAM,OAAO,OAAO;GAAkB;EAAW,CAAA;CAC/C,CAAA;AAE5B"}
+{"version":3,"file":"schema-layout.js","names":[],"sources":["../../resources/js/layout/schema-layout.tsx"],"sourcesContent":["import { usePage } from \"@inertiajs/react\";\nimport type { ReactNode } from \"react\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { PagePayload } from \"@lattice-php/lattice/core/types\";\nimport { OutletContext } from \"./context\";\n\n/**\n * Persistent Inertia layout that renders a server-composed layout schema and\n * exposes the active page (`children`) to the Outlet via context. The same\n * component instance is reused across navigations that share a layout, so\n * shell state (open sidebar, scroll position) survives page visits.\n */\nexport default function SchemaLayout({ children }: { children: ReactNode }) {\n  const lattice = usePage().props.lattice as PagePayload;\n  const layout = lattice.layout;\n\n  if (!layout) {\n    return <>{children}</>;\n  }\n\n  return (\n    <OutletContext.Provider value={children}>\n      <Renderer nodes={layout.schema} />\n    </OutletContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAwB,aAAa,EAAE,YAAqC;CAE1E,MAAM,SADU,QAAQ,EAAE,MAAM,QACT;CAEvB,IAAI,CAAC,QACH,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;CAGvB,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,oBAAC,UAAD,EAAU,OAAO,OAAO,OAAS,CAAA;CACX,CAAA;AAE5B"}

package/dist/layout/sidebar.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
-import { SidebarCollapsedContext } from "./context.js";
+import { CollapsedContext } from "../core/collapsed-context.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/sidebar.tsx
@@ -21,10 +21,10 @@ var SidebarComponent = ({ children, node }) => {
 		});
 	}
 	const isCollapsed = collapsible && collapsed;
-	return /* @__PURE__ */ jsx(SidebarCollapsedContext.Provider, {
+	return /* @__PURE__ */ jsx(CollapsedContext.Provider, {
 		value: isCollapsed,
 		children: /* @__PURE__ */ jsxs("aside", {
-			className: cn("flex shrink-0 flex-col gap-4 overflow-hidden border-r border-lt-border p-4 transition-[width]", isCollapsed ? "w-16" : "w-64"),
+			className: cn("sticky top-0 flex h-svh shrink-0 flex-col gap-4 border-r border-lt-border p-4 transition-[width]", isCollapsed ? "w-16 overflow-visible" : "w-64 overflow-x-hidden overflow-y-auto"),
 			"data-lattice-component": node.id,
 			children: [collapsible ? /* @__PURE__ */ jsx("button", {
 				"aria-expanded": !isCollapsed,

package/dist/layout/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { SidebarCollapsedContext } from \"./context\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const storageKey = `lattice:sidebar:${node.id ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\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\n  return (\n    <SidebarCollapsedContext.Provider value={isCollapsed}>\n      <aside\n        className={cn(\n          \"flex shrink-0 flex-col gap-4 overflow-hidden border-r border-lt-border p-4 transition-[width]\",\n          isCollapsed ? \"w-16\" : \"w-64\",\n        )}\n        data-lattice-component={node.id}\n      >\n        {collapsible ? (\n          <button\n            aria-expanded={!isCollapsed}\n            aria-label={isCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n            data-test=\"sidebar-toggle\"\n            className={cn(\n              \"inline-flex items-center rounded-md p-2 text-lt-fg transition-colors hover:bg-lt-muted\",\n              isCollapsed ? \"self-center\" : \"self-end\",\n            )}\n            onClick={toggle}\n            type=\"button\"\n          >\n            <Icon name=\"panel-left\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n          </button>\n        ) : null}\n        {children}\n      </aside>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,aAAa,mBAAmB,KAAK,MAAM;CAEjD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;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;CAEnC,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,qBAAC,SAAD;GACE,WAAW,GACT,iGACA,cAAc,SAAS,MACzB;GACA,0BAAwB,KAAK;aAL/B,CAOG,cACC,oBAAC,UAAD;IACE,iBAAe,CAAC;IAChB,cAAY,cAAc,mBAAmB;IAC7C,aAAU;IACV,WAAW,GACT,0FACA,cAAc,gBAAgB,UAChC;IACA,SAAS;IACT,MAAK;cAEL,oBAAC,MAAD;KAAM,MAAK;KAAa,eAAY;KAAO,WAAU;IAA4B,CAAA;GAC3E,CAAA,IACN,MACH,QACI;;CACyB,CAAA;AAEtC"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const storageKey = `lattice:sidebar:${node.id ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\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\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      <aside\n        className={cn(\n          \"sticky top-0 flex h-svh shrink-0 flex-col gap-4 border-r border-lt-border p-4 transition-[width]\",\n          isCollapsed ? \"w-16 overflow-visible\" : \"w-64 overflow-x-hidden overflow-y-auto\",\n        )}\n        data-lattice-component={node.id}\n      >\n        {collapsible ? (\n          <button\n            aria-expanded={!isCollapsed}\n            aria-label={isCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n            data-test=\"sidebar-toggle\"\n            className={cn(\n              \"inline-flex items-center rounded-md p-2 text-lt-fg transition-colors hover:bg-lt-muted\",\n              isCollapsed ? \"self-center\" : \"self-end\",\n            )}\n            onClick={toggle}\n            type=\"button\"\n          >\n            <Icon name=\"panel-left\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n          </button>\n        ) : null}\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,aAAa,mBAAmB,KAAK,MAAM;CAEjD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;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;CAEnC,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,qBAAC,SAAD;GACE,WAAW,GACT,oGACA,cAAc,0BAA0B,wCAC1C;GACA,0BAAwB,KAAK;aAL/B,CAOG,cACC,oBAAC,UAAD;IACE,iBAAe,CAAC;IAChB,cAAY,cAAc,mBAAmB;IAC7C,aAAU;IACV,WAAW,GACT,0FACA,cAAc,gBAAgB,UAChC;IACA,SAAS;IACT,MAAK;cAEL,oBAAC,MAAD;KAAM,MAAK;KAAa,eAAY;KAAO,WAAU;IAA4B,CAAA;GAC3E,CAAA,IACN,MACH,QACI;;CACkB,CAAA;AAE/B"}

package/dist/page.js

@@ -1,25 +1,19 @@
 import { cn } from "./lib/utils.js";
 import { Renderer } from "./core/renderer.js";
-import { useRegistry } from "./provider.js";
 import { Head } from "@inertiajs/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/page.tsx
 function Page({ lattice }) {
-	const registry = useRegistry();
-	const content = /* @__PURE__ */ jsx(Renderer, {
-		fallback: null,
-		nodes: lattice.schema,
-		registry
-	});
+	const content = /* @__PURE__ */ jsx(Renderer, { nodes: lattice.schema });
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Head, { title: lattice.title ?? void 0 }), lattice.container === "centered" ? /* @__PURE__ */ jsx("main", {
 		className: "min-h-svh bg-lt-bg text-lt-fg",
 		children: /* @__PURE__ */ jsx("div", {
-			"data-testid": "lattice-centered-container",
+			"data-test": "lattice-centered-container",
 			className: "mx-auto flex min-h-svh w-full max-w-6xl flex-col justify-center px-6 py-12 sm:px-8 lg:px-10",
 			children: content
 		})
 	}) : /* @__PURE__ */ jsx("div", {
-		"data-testid": "lattice-default-container",
+		"data-test": "lattice-default-container",
 		className: cn("w-full", { "px-4 py-6": lattice.layout !== null }),
 		children: content
 	})] });

package/dist/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","names":[],"sources":["../resources/js/page.tsx"],"sourcesContent":["import { Head } from \"@inertiajs/react\";\nimport { Renderer } from \"@lattice/lattice/core/renderer\";\nimport { useRegistry } from \"@lattice/lattice/provider\";\nimport type { PagePayload } from \"@lattice/lattice\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ntype Props = {\n  lattice: PagePayload;\n};\n\nexport default function Page({ lattice }: Props) {\n  const registry = useRegistry();\n  const content = <Renderer fallback={null} nodes={lattice.schema} registry={registry} />;\n\n  return (\n    <>\n      <Head title={lattice.title ?? undefined} />\n\n      {lattice.container === \"centered\" ? (\n        <main className=\"min-h-svh bg-lt-bg text-lt-fg\">\n          <div\n            data-testid=\"lattice-centered-container\"\n            className=\"mx-auto flex min-h-svh w-full max-w-6xl flex-col justify-center px-6 py-12 sm:px-8 lg:px-10\"\n          >\n            {content}\n          </div>\n        </main>\n      ) : (\n        <div\n          data-testid=\"lattice-default-container\"\n          className={cn(\"w-full\", {\n            \"px-4 py-6\": lattice.layout !== null,\n          })}\n        >\n          {content}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAwB,KAAK,EAAE,WAAkB;CAC/C,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,oBAAC,UAAD;EAAU,UAAU;EAAM,OAAO,QAAQ;EAAkB;CAAW,CAAA;CAEtF,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,OAAO,QAAQ,SAAS,KAAA,EAAY,CAAA,GAEzC,QAAQ,cAAc,aACrB,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAET;EACE,CAAA;CACD,CAAA,IAEN,oBAAC,OAAD;EACE,eAAY;EACZ,WAAW,GAAG,UAAU,EACtB,aAAa,QAAQ,WAAW,KAClC,CAAC;YAEA;CACE,CAAA,CAEP,EAAA,CAAA;AAEN"}
+{"version":3,"file":"page.js","names":[],"sources":["../resources/js/page.tsx"],"sourcesContent":["import { Head } from \"@inertiajs/react\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { PagePayload } from \"@lattice-php/lattice\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\ntype Props = {\n  lattice: PagePayload;\n};\n\nexport default function Page({ lattice }: Props) {\n  const content = <Renderer nodes={lattice.schema} />;\n\n  return (\n    <>\n      <Head title={lattice.title ?? undefined} />\n\n      {lattice.container === \"centered\" ? (\n        <main className=\"min-h-svh bg-lt-bg text-lt-fg\">\n          <div\n            data-test=\"lattice-centered-container\"\n            className=\"mx-auto flex min-h-svh w-full max-w-6xl flex-col justify-center px-6 py-12 sm:px-8 lg:px-10\"\n          >\n            {content}\n          </div>\n        </main>\n      ) : (\n        <div\n          data-test=\"lattice-default-container\"\n          className={cn(\"w-full\", {\n            \"px-4 py-6\": lattice.layout !== null,\n          })}\n        >\n          {content}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;AASA,SAAwB,KAAK,EAAE,WAAkB;CAC/C,MAAM,UAAU,oBAAC,UAAD,EAAU,OAAO,QAAQ,OAAS,CAAA;CAElD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,OAAO,QAAQ,SAAS,KAAA,EAAY,CAAA,GAEzC,QAAQ,cAAc,aACrB,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,OAAD;GACE,aAAU;GACV,WAAU;aAET;EACE,CAAA;CACD,CAAA,IAEN,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,UAAU,EACtB,aAAa,QAAQ,WAAW,KAClC,CAAC;YAEA;CACE,CAAA,CAEP,EAAA,CAAA;AAEN"}

package/dist/provider.d.ts

@@ -1,12 +1,10 @@
 import { ReactNode } from 'react';
-import { ComponentRegistry, Registry } from './core/registry';
 import { SpriteValue } from './icons/sprite';
-import { ColumnRegistry } from './table/column-registry';
+import { Registry } from './core/registry';
 export declare function Provider({ children, registry, sprite, toaster, }: {
     children: ReactNode;
     registry?: Registry;
     sprite?: SpriteValue;
     toaster?: boolean;
 }): import("react").JSX.Element;
-export declare function useRegistry(): ComponentRegistry;
-export declare function useColumnRegistry(): ColumnRegistry;
+export { useComponentRegistry, useColumnRegistry, useEffectHandlerRegistry, } from './core/registry-context';

package/dist/provider.js

@@ -1,12 +1,14 @@
 import { SpriteProvider } from "./icons/sprite.js";
+import { RegistryContext, setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry } from "./core/registry-context.js";
 import { registry } from "./registry.js";
 import { Toaster } from "./toast/toaster.js";
-import { createContext, useContext } from "react";
+import { useFlashEffects } from "./effects/use-flash-effects.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/provider.tsx
+setDefaultRegistry(registry);
 var defaultSprite = { href: "" };
-var RegistryContext = createContext(registry);
 function Provider({ children, registry: registry$1 = registry, sprite = defaultSprite, toaster = true }) {
+	useFlashEffects();
 	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
 		value: registry$1,
 		children: /* @__PURE__ */ jsxs(SpriteProvider, {
@@ -15,13 +17,7 @@ function Provider({ children, registry: registry$1 = registry, sprite = defaultS
 		})
 	});
 }
-function useRegistry() {
-	return useContext(RegistryContext).components;
-}
-function useColumnRegistry() {
-	return useContext(RegistryContext).columns;
-}
 //#endregion
-export { Provider, useColumnRegistry, useRegistry };
+export { Provider, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry };
 
 //# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ComponentRegistry, Registry } from \"./core/registry\";\nimport { SpriteProvider } from \"./icons/sprite\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { registry as defaultRegistry } from \"./registry\";\nimport type { ColumnRegistry } from \"./table/column-registry\";\nimport { Toaster } from \"./toast\";\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nconst RegistryContext = createContext<Registry>(defaultRegistry);\n\nexport function Provider({\n  children,\n  registry = defaultRegistry,\n  sprite = defaultSprite,\n  toaster = true,\n}: {\n  children: ReactNode;\n  registry?: Registry;\n  sprite?: SpriteValue;\n  toaster?: boolean;\n}) {\n  return (\n    <RegistryContext.Provider value={registry}>\n      <SpriteProvider sprite={sprite}>\n        {children}\n        {toaster ? <Toaster /> : null}\n      </SpriteProvider>\n    </RegistryContext.Provider>\n  );\n}\n\nexport function useRegistry(): ComponentRegistry {\n  return useContext(RegistryContext).components;\n}\n\nexport function useColumnRegistry(): ColumnRegistry {\n  return useContext(RegistryContext).columns;\n}\n"],"mappings":";;;;;;AASA,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAE9C,IAAM,kBAAkB,cAAwB,QAAe;AAE/D,SAAgB,SAAS,EACvB,UACA,UAAA,aAAW,UACX,SAAS,eACT,UAAU,QAMT;CACD,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,qBAAC,gBAAD;GAAwB;aAAxB,CACG,UACA,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,IACX;;CACQ,CAAA;AAE9B;AAEA,SAAgB,cAAiC;CAC/C,OAAO,WAAW,eAAe,EAAE;AACrC;AAEA,SAAgB,oBAAoC;CAClD,OAAO,WAAW,eAAe,EAAE;AACrC"}
+{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { SpriteProvider } from \"./icons/sprite\";\nimport { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { RegistryContext, setDefaultRegistry } from \"./core/registry-context\";\nimport { Toaster } from \"./toast\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport function Provider({\n  children,\n  registry = defaultRegistry,\n  sprite = defaultSprite,\n  toaster = true,\n}: {\n  children: ReactNode;\n  registry?: Registry;\n  sprite?: SpriteValue;\n  toaster?: boolean;\n}) {\n  useFlashEffects();\n\n  return (\n    <RegistryContext.Provider value={registry}>\n      <SpriteProvider sprite={sprite}>\n        {children}\n        {toaster ? <Toaster /> : null}\n      </SpriteProvider>\n    </RegistryContext.Provider>\n  );\n}\n\nexport {\n  useComponentRegistry,\n  useColumnRegistry,\n  useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":";;;;;;;AAYA,mBAAmB,QAAe;AAElC,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAE9C,SAAgB,SAAS,EACvB,UACA,UAAA,aAAW,UACX,SAAS,eACT,UAAU,QAMT;CACD,gBAAgB;CAEhB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,qBAAC,gBAAD;GAAwB;aAAxB,CACG,UACA,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,IACX;;CACQ,CAAA;AAE9B"}

package/dist/registry.js

@@ -1,11 +1,12 @@
 import { createRegistry } from "./core/registry.js";
 import { actionComponents } from "./action/index.js";
+import { chatPlugin } from "./chat/index.js";
 import { coreComponents } from "./core/components/index.js";
 import { formComponents } from "./form/index.js";
 import { layoutComponents } from "./layout/components.js";
 import { tableComponents } from "./table/index.js";
 //#region resources/js/registry.ts
-var registry = createRegistry(coreComponents, actionComponents, formComponents, layoutComponents, tableComponents);
+var registry = createRegistry(coreComponents, actionComponents, formComponents, layoutComponents, tableComponents, chatPlugin);
 //#endregion
 export { registry };
 

package/dist/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice/lattice/core/registry\";\nimport { actionComponents } from \"./action\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { layoutComponents } from \"./layout/components\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n);\n"],"mappings":";;;;;;;AAOA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,kBACA,eACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action\";\nimport { chatPlugin } from \"./chat\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { layoutComponents } from \"./layout/components\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatPlugin,\n);\n"],"mappings":";;;;;;;;AAQA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,kBACA,iBACA,UACF"}

package/dist/svg-sprite-client/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/svg-sprite-client.d.ts

@@ -0,0 +1 @@
+/// <reference types="@lattice-php/vite-svg-sprite/client" />

package/dist/table/align.d.ts

@@ -0,0 +1,4 @@
+import { ColumnAlign } from '../types/generated';
+export declare const alignText: (align: ColumnAlign) => string;
+export declare const alignJustify: (align: ColumnAlign) => string;
+export declare const alignJustifyItems: (align: ColumnAlign) => string;

package/dist/table/align.js

@@ -0,0 +1,23 @@
+//#region resources/js/table/align.ts
+var TEXT = {
+	start: "text-start",
+	center: "text-center",
+	end: "text-end"
+};
+var JUSTIFY = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+};
+var JUSTIFY_ITEMS = {
+	start: "justify-items-start",
+	center: "justify-items-center",
+	end: "justify-items-end"
+};
+var alignText = (align) => TEXT[align];
+var alignJustify = (align) => JUSTIFY[align];
+var alignJustifyItems = (align) => JUSTIFY_ITEMS[align];
+//#endregion
+export { alignJustify, alignJustifyItems, alignText };
+
+//# sourceMappingURL=align.js.map

package/dist/table/align.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"align.js","names":[],"sources":["../../resources/js/table/align.ts"],"sourcesContent":["import type { ColumnAlign } from \"@lattice-php/lattice/types/generated\";\n\nconst TEXT: Record<ColumnAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\nconst JUSTIFY: Record<ColumnAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n};\n\nconst JUSTIFY_ITEMS: Record<ColumnAlign, string> = {\n  start: \"justify-items-start\",\n  center: \"justify-items-center\",\n  end: \"justify-items-end\",\n};\n\nexport const alignText = (align: ColumnAlign): string => TEXT[align];\nexport const alignJustify = (align: ColumnAlign): string => JUSTIFY[align];\nexport const alignJustifyItems = (align: ColumnAlign): string => JUSTIFY_ITEMS[align];\n"],"mappings":";AAEA,IAAM,OAAoC;CACxC,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAEA,IAAM,UAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAEA,IAAM,gBAA6C;CACjD,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAEA,IAAa,aAAa,UAA+B,KAAK;AAC9D,IAAa,gBAAgB,UAA+B,QAAQ;AACpE,IAAa,qBAAqB,UAA+B,cAAc"}

package/dist/table/bulk.js

@@ -12,7 +12,7 @@ function getBulkActions(actions) {
 			ref: props.ref ?? "",
 			variant: props.variant ?? "default",
 			confirmation: props.confirmation,
-			form: props.form ?? null
+			form: props.form
 		}];
 	});
 }

package/dist/table/bulk.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport type { Action, ActionNode, ButtonVariant } from \"@lattice/lattice/types/generated\";\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: ButtonVariant;\n  confirmation: Action[\"confirmation\"];\n  form: Node | null;\n};\n\nexport function getBulkActions(actions: ActionNode[] | undefined): BulkAction[] {\n  return (actions ?? []).flatMap((node): BulkAction[] => {\n    if (node.type === \"action.group\") {\n      return [];\n    }\n\n    const props = node.props;\n\n    if (!props.endpoint) {\n      return [];\n    }\n\n    return [\n      {\n        id: node.id ?? \"\",\n        label: props.label ?? \"Run action\",\n        method: props.method ?? \"post\",\n        endpoint: props.endpoint,\n        ref: props.ref ?? \"\",\n        variant: props.variant ?? \"default\",\n        confirmation: props.confirmation,\n        form: (props.form as unknown as Node | null) ?? null,\n      },\n    ];\n  });\n}\n"],"mappings":";AAeA,SAAgB,eAAe,SAAiD;CAC9E,QAAQ,WAAW,CAAC,GAAG,SAAS,SAAuB;EACrD,IAAI,KAAK,SAAS,gBAChB,OAAO,CAAC;EAGV,MAAM,QAAQ,KAAK;EAEnB,IAAI,CAAC,MAAM,UACT,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,KAAK,MAAM;GACf,OAAO,MAAM,SAAS;GACtB,QAAQ,MAAM,UAAU;GACxB,UAAU,MAAM;GAChB,KAAK,MAAM,OAAO;GAClB,SAAS,MAAM,WAAW;GAC1B,cAAc,MAAM;GACpB,MAAO,MAAM,QAAmC;EAClD,CACF;CACF,CAAC;AACH"}
+{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { Action, ActionNode, ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: ButtonVariant;\n  confirmation: Action[\"confirmation\"];\n  form: Node | null;\n};\n\nexport function getBulkActions(actions: ActionNode[] | undefined): BulkAction[] {\n  return (actions ?? []).flatMap((node): BulkAction[] => {\n    if (node.type === \"action.group\") {\n      return [];\n    }\n\n    const props = node.props;\n\n    if (!props.endpoint) {\n      return [];\n    }\n\n    return [\n      {\n        id: node.id ?? \"\",\n        label: props.label ?? \"Run action\",\n        method: props.method ?? \"post\",\n        endpoint: props.endpoint,\n        ref: props.ref ?? \"\",\n        variant: props.variant ?? \"default\",\n        confirmation: props.confirmation,\n        form: props.form,\n      },\n    ];\n  });\n}\n"],"mappings":";AAeA,SAAgB,eAAe,SAAiD;CAC9E,QAAQ,WAAW,CAAC,GAAG,SAAS,SAAuB;EACrD,IAAI,KAAK,SAAS,gBAChB,OAAO,CAAC;EAGV,MAAM,QAAQ,KAAK;EAEnB,IAAI,CAAC,MAAM,UACT,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,KAAK,MAAM;GACf,OAAO,MAAM,SAAS;GACtB,QAAQ,MAAM,UAAU;GACxB,UAAU,MAAM;GAChB,KAAK,MAAM,OAAO;GAClB,SAAS,MAAM,WAAW;GAC1B,cAAc,MAAM;GACpB,MAAM,MAAM;EACd,CACF;CACF,CAAC;AACH"}

package/dist/table/components/bulk-bar.js

@@ -1,9 +1,11 @@
-import { withRefHeader } from "../../core/component-ref.js";
+import { withHeaders } from "../../core/headers.js";
+import { prefixedTestId } from "../../core/test-id.js";
 import { Button } from "../../core/components/button.js";
 import { useT } from "../../i18n/instance.js";
 import { Spinner } from "../../core/components/spinner.js";
 import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
-import { dispatchActionEffects, dispatchActionError, getActionEffects } from "../../action/effects.js";
+import { dispatchActionError, getActionEffects } from "../../effects/dispatch.js";
+import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
 import { ActionForm } from "../../action/components/action-form.js";
 import { useState } from "react";
 import { useHttp } from "@inertiajs/react";
@@ -12,6 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
 	const { t } = useT("lattice");
 	const http = useHttp({});
+	const dispatch = useEffectDispatcher();
 	const [confirming, setConfirming] = useState(null);
 	const [filling, setFilling] = useState(null);
 	const selectionPayload = () => allMatching ? {
@@ -27,7 +30,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 					...query
 				} : { selected: selectedKeys }
 			}));
-			dispatchActionEffects(getActionEffects((await http[action.method](action.endpoint, { headers: withRefHeader(action.ref ?? "") })).effects));
+			dispatch(getActionEffects((await http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") })).effects));
 			setConfirming(null);
 			onCompleted();
 		} catch (error) {
@@ -64,7 +67,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				className: "flex flex-wrap items-center gap-2",
 				children: actions.map((action) => /* @__PURE__ */ jsxs(Button, {
 					type: "button",
-					"data-test": `bulk-action-${action.label.toLowerCase().replace(/\s+/g, "-")}`,
+					"data-test": prefixedTestId("bulk-action", action.id),
 					variant: action.variant,
 					disabled: http.processing,
 					onClick: () => run(action),
@@ -91,7 +94,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				method: filling.method,
 				onClose: () => setFilling(null),
 				onSuccess: (response) => {
-					dispatchActionEffects(getActionEffects(response.effects));
+					dispatch(getActionEffects(response.effects));
 					setFilling(null);
 					onCompleted();
 				},