@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/layout/index.js

@@ -1,4 +1,6 @@
+import { CollapsedContext, useCollapsed } from "../core/collapsed-context.js";
+import Callouts from "./callouts.js";
 import { OutletContext } from "./context.js";
 import { layoutComponents } from "./components.js";
 import SchemaLayout from "./schema-layout.js";
-export { OutletContext, SchemaLayout, layoutComponents };
+export { Callouts, OutletContext, SchemaLayout, CollapsedContext as SidebarCollapsedContext, layoutComponents, useCollapsed as useSidebarCollapsed };

package/dist/layout/menu-item.js

@@ -1,57 +1,81 @@
 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";
+var rowClass = "flex items-center gap-2 rounded-lt-sm px-3 py-2 text-base font-medium text-lt-fg transition-colors hover:bg-lt-muted";
+function MenuAffix({ affix, className }) {
+	if (affix.icon) return /* @__PURE__ */ jsx(IconRenderer, {
+		className: cn("size-lt-icon-md shrink-0", className),
+		icon: affix.icon
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("shrink-0 text-sm text-lt-muted-fg", className),
+		children: affix.text
+	});
+}
 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 prefix = node.props.prefix;
+	const suffix = node.props.suffix;
+	const iconOnly = Boolean(icon);
+	const flyoutIcon = icon ?? prefix?.icon ?? null;
 	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 = icon ? /* @__PURE__ */ jsx(IconRenderer, {
 		className: "size-lt-icon-md shrink-0",
 		icon
-	}) : null, /* @__PURE__ */ jsx("span", {
-		className: cn(collapsed && "sr-only"),
-		children: label
-	})] });
+	}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		prefix ? /* @__PURE__ */ jsx(MenuAffix, { affix: prefix }) : 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-lt-sm border border-lt-border bg-lt-popover px-2 py-1 text-sm whitespace-nowrap text-lt-popover-fg shadow-lt-md group-hover:block",
+			role: "tooltip",
+			children: label
+		}) : /* @__PURE__ */ jsx("span", { children: label }),
+		suffix ? /* @__PURE__ */ jsx(MenuAffix, {
+			affix: suffix,
+			className: "ml-auto"
+		}) : null
+	] });
 	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",
 			children: content
 		}) });
 		if (collapsed) return /* @__PURE__ */ jsx(FlyoutGroup, {
-			icon,
+			icon: flyoutIcon,
 			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 || iconOnly ? label : void 0,
+		as: method === "get" ? void 0 : "button",
+		className: cn(rowClass, "w-full", collapsed && "group relative justify-center", iconOnly && "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 +97,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 type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport { useSidebarCollapsed } from \"./context\";\nimport { Popover } from \"./popover\";\n\nconst rowClass =\n  \"flex items-center gap-2 rounded-lt-sm px-3 py-2 text-base font-medium text-lt-fg transition-colors hover:bg-lt-muted\";\n\nfunction MenuAffix({ affix, className }: { affix: Affix; className?: string }) {\n  if (affix.icon) {\n    return <IconRenderer className={cn(\"size-lt-icon-md shrink-0\", className)} icon={affix.icon} />;\n  }\n\n  return <span className={cn(\"shrink-0 text-sm text-lt-muted-fg\", className)}>{affix.text}</span>;\n}\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 prefix = node.props.prefix;\n  const suffix = node.props.suffix;\n  const iconOnly = Boolean(icon);\n  const flyoutIcon = icon ?? prefix?.icon ?? null;\n  const href = node.props.href ?? \"\";\n  const currentPath = usePage().url.split(\"?\")[0];\n  const testId = prefixedNodeTestId(\"menu\", node);\n\n  const content = icon ? (\n    <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />\n  ) : (\n    <>\n      {prefix ? <MenuAffix affix={prefix} /> : 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-lt-sm border border-lt-border bg-lt-popover px-2 py-1 text-sm whitespace-nowrap text-lt-popover-fg shadow-lt-md group-hover:block\"\n          role=\"tooltip\"\n        >\n          {label}\n        </span>\n      ) : (\n        <span>{label}</span>\n      )}\n      {suffix ? <MenuAffix affix={suffix} className=\"ml-auto\" /> : null}\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={flyoutIcon} 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 || iconOnly ? label : undefined}\n        as={method === \"get\" ? undefined : \"button\"}\n        className={cn(\n          rowClass,\n          \"w-full\",\n          collapsed && \"group relative justify-center\",\n          iconOnly && \"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":"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"}

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,16 +21,16 @@ 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,
 				"aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
 				"data-test": "sidebar-toggle",
-				className: cn("inline-flex items-center rounded-md p-2 text-lt-fg transition-colors hover:bg-lt-muted", isCollapsed ? "self-center" : "self-end"),
+				className: cn("inline-flex items-center rounded-lt-sm p-2 text-lt-fg transition-colors hover:bg-lt-muted", isCollapsed ? "self-center" : "self-end"),
 				onClick: toggle,
 				type: "button",
 				children: /* @__PURE__ */ jsx(Icon, {

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-lt-sm 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,6FACA,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/layout/topbar.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../core/types';
+declare const TopbarComponent: RendererComponent<"topbar">;
+export default TopbarComponent;

package/dist/layout/topbar.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/layout/topbar.tsx
+var TopbarComponent = ({ children, node }) => {
+	const sticky = node.props.sticky;
+	return /* @__PURE__ */ jsx("header", {
+		"data-lattice-component": node.id,
+		className: cn("flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg", sticky && "sticky top-0 z-30"),
+		children
+	});
+};
+//#endregion
+export { TopbarComponent as default };
+
+//# sourceMappingURL=topbar.js.map

package/dist/layout/topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.js","names":[],"sources":["../../resources/js/layout/topbar.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst TopbarComponent: RendererComponent<\"topbar\"> = ({ children, node }) => {\n  const sticky = node.props.sticky;\n\n  return (\n    <header\n      data-lattice-component={node.id}\n      className={cn(\n        \"flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg\",\n        sticky && \"sticky top-0 z-30\",\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default TopbarComponent;\n"],"mappings":";;;AAGA,IAAM,mBAAgD,EAAE,UAAU,WAAW;CAC3E,MAAM,SAAS,KAAK,MAAM;CAE1B,OACE,oBAAC,UAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,0FACA,UAAU,mBACZ;EAEC;CACK,CAAA;AAEZ"}

package/dist/page.js

@@ -1,28 +1,27 @@
 import { cn } from "./lib/utils.js";
 import { Renderer } from "./core/renderer.js";
-import { useRegistry } from "./provider.js";
+import { RealtimeListeners } from "./realtime/listeners.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
-	});
-	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",
-			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",
+	const content = /* @__PURE__ */ jsx(Renderer, { nodes: lattice.schema });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Head, { title: lattice.title ?? void 0 }),
+		/* @__PURE__ */ jsx(RealtimeListeners, { listeners: lattice.listeners }),
+		lattice.container === "centered" ? /* @__PURE__ */ jsx("main", {
+			className: "min-h-svh bg-lt-bg text-lt-fg",
+			children: /* @__PURE__ */ jsx("div", {
+				"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-test": "lattice-default-container",
+			className: cn("w-full", { "px-4 py-6": lattice.layout !== null }),
 			children: content
 		})
-	}) : /* @__PURE__ */ jsx("div", {
-		"data-testid": "lattice-default-container",
-		className: cn("w-full", { "px-4 py-6": lattice.layout !== null }),
-		children: content
-	})] });
+	] });
 }
 //#endregion
 export { Page as default };

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\";\nimport { RealtimeListeners } from \"@lattice-php/lattice/realtime/listeners\";\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      <RealtimeListeners listeners={lattice.listeners} />\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":";;;;;;AAUA,SAAwB,KAAK,EAAE,WAAkB;CAC/C,MAAM,UAAU,oBAAC,UAAD,EAAU,OAAO,QAAQ,OAAS,CAAA;CAElD,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,MAAD,EAAM,OAAO,QAAQ,SAAS,KAAA,EAAY,CAAA;EAE1C,oBAAC,mBAAD,EAAmB,WAAW,QAAQ,UAAY,CAAA;EAEjD,QAAQ,cAAc,aACrB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,OAAD;IACE,aAAU;IACV,WAAU;cAET;GACE,CAAA;EACD,CAAA,IAEN,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,UAAU,EACtB,aAAa,QAAQ,WAAW,KAClC,CAAC;aAEA;EACE,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/realtime/build-effects.d.ts

@@ -0,0 +1,4 @@
+import { Effect } from '../types/generated';
+import { Translate } from '../i18n/translatable';
+export type RawEffect = Record<string, unknown>;
+export declare function buildEffects(effects: readonly RawEffect[], payload: Record<string, unknown>, t: Translate): Effect[];

package/dist/realtime/build-effects.js

@@ -0,0 +1,23 @@
+import { isTranslatable, resolveTranslatable } from "../i18n/translatable.js";
+//#region resources/js/realtime/build-effects.ts
+function buildEffects(effects, payload, t) {
+	return effects.map((effect) => resolveEffect(effect, payload, t));
+}
+function resolveEffect(effect, payload, t) {
+	if (effect.type !== "toast") return effect;
+	const toast = effect.toast;
+	if (typeof toast !== "object" || toast === null) return effect;
+	const message = toast.message;
+	if (!isTranslatable(message)) return effect;
+	return {
+		...effect,
+		toast: {
+			...toast,
+			message: resolveTranslatable(message, payload, t)
+		}
+	};
+}
+//#endregion
+export { buildEffects };
+
+//# sourceMappingURL=build-effects.js.map

package/dist/realtime/build-effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-effects.js","names":[],"sources":["../../resources/js/realtime/build-effects.ts"],"sourcesContent":["import type { Effect } from \"@lattice-php/lattice/types/generated\";\nimport { isTranslatable, resolveTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\nimport type { Translate } from \"@lattice-php/lattice/i18n/translatable\";\n\nexport type RawEffect = Record<string, unknown>;\n\nexport function buildEffects(\n  effects: readonly RawEffect[],\n  payload: Record<string, unknown>,\n  t: Translate,\n): Effect[] {\n  return effects.map((effect) => resolveEffect(effect, payload, t)) as Effect[];\n}\n\nfunction resolveEffect(\n  effect: RawEffect,\n  payload: Record<string, unknown>,\n  t: Translate,\n): RawEffect {\n  if (effect.type !== \"toast\") {\n    return effect;\n  }\n\n  const toast = effect.toast;\n\n  if (typeof toast !== \"object\" || toast === null) {\n    return effect;\n  }\n\n  const message = (toast as Record<string, unknown>).message;\n\n  if (!isTranslatable(message)) {\n    return effect;\n  }\n\n  return {\n    ...effect,\n    toast: {\n      ...(toast as Record<string, unknown>),\n      message: resolveTranslatable(message, payload, t),\n    },\n  };\n}\n"],"mappings":";;AAMA,SAAgB,aACd,SACA,SACA,GACU;CACV,OAAO,QAAQ,KAAK,WAAW,cAAc,QAAQ,SAAS,CAAC,CAAC;AAClE;AAEA,SAAS,cACP,QACA,SACA,GACW;CACX,IAAI,OAAO,SAAS,SAClB,OAAO;CAGT,MAAM,QAAQ,OAAO;CAErB,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,UAAW,MAAkC;CAEnD,IAAI,CAAC,eAAe,OAAO,GACzB,OAAO;CAGT,OAAO;EACL,GAAG;EACH,OAAO;GACL,GAAI;GACJ,SAAS,oBAAoB,SAAS,SAAS,CAAC;EAClD;CACF;AACF"}

package/dist/realtime/listeners.d.ts

@@ -0,0 +1,8 @@
+import { ListenerPayload } from '../types/generated';
+/**
+ * Renders nothing when a page declares no listeners, so the echo-react chunk
+ * is only fetched where it is actually needed.
+ */
+export declare function RealtimeListeners({ listeners }: {
+    listeners?: ListenerPayload[];
+}): import("react").JSX.Element | null;