@lattice-php/lattice 0.3.0 → 0.4.0

package/dist/lattice.css

@@ -2,7 +2,7 @@
 
 :root,
 [data-theme="light"] {
-  --lt-bg: var(--background, oklch(1 0 0));
+  --lt-bg: var(--background, oklch(0.97 0 0));
   --lt-fg: var(--foreground, oklch(0.145 0 0));
   --lt-surface: var(--card, oklch(1 0 0));
   --lt-surface-fg: var(--card-foreground, oklch(0.145 0 0));
@@ -27,15 +27,72 @@
   --lt-success-fg: var(--success-foreground, oklch(0.985 0 0));
   --lt-info: var(--info, oklch(0.62 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.985 0 0));
-  --lt-radius: var(--radius, 0.625rem);
-  --lt-radius-sm: calc(var(--lt-radius) - 2px);
-  --lt-radius-xs: calc(var(--lt-radius) - 4px);
+  /* Interaction states (hover / active / disabled) */
+  --lt-primary-hover: var(--primary-hover, oklch(0.43 0.092 182));
+  --lt-primary-active: var(--primary-active, oklch(0.39 0.092 182));
+  --lt-danger-hover: var(--destructive-hover, oklch(0.53 0.21 27.3));
+  --lt-danger-active: var(--destructive-active, oklch(0.48 0.21 27.3));
+  --lt-success-hover: var(--success-hover, oklch(0.57 0.125 160));
+  --lt-success-active: var(--success-active, oklch(0.52 0.125 160));
+  --lt-info-hover: var(--info-hover, oklch(0.57 0.14 240));
+  --lt-info-active: var(--info-active, oklch(0.52 0.14 240));
+  --lt-secondary-hover: var(--secondary-hover, oklch(0.93 0 0));
+  --lt-secondary-active: var(--secondary-active, oklch(0.9 0 0));
+  --lt-disabled: var(--disabled, oklch(0.95 0 0));
+  --lt-disabled-fg: var(--disabled-foreground, oklch(0.7 0 0));
+
+  /* Radius: base = cards, -sm = controls, -xs = chips */
+  --lt-radius: var(--radius, 0.5rem);
+  --lt-radius-sm: calc(var(--lt-radius) - 0.125rem);
+  --lt-radius-xs: calc(var(--lt-radius) - 0.25rem);
 
   --lt-icon-xs: 0.75rem;
   --lt-icon-sm: 0.875rem;
   --lt-icon-md: 1rem;
   --lt-icon-lg: 1.25rem;
   --lt-icon-xl: 1.5rem;
+  --lt-icon-stroke: 1.5;
+
+  /* Control heights — density lever */
+  --lt-control-h-sm: 2rem;
+  --lt-control-h-md: 2.25rem;
+  --lt-control-h-lg: 2.5rem;
+
+  --lt-font-weight-normal: 400;
+  --lt-font-weight-medium: 500;
+  --lt-font-weight-semibold: 600;
+  --lt-font-weight-bold: 700;
+
+  /* Focus-ring size (colour: --lt-ring) */
+  --lt-ring-width: 0.125rem;
+  --lt-ring-offset: 0.125rem;
+
+  /* Elevation */
+  --lt-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.04);
+  --lt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --lt-shadow-md:
+    0 2px 4px -1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.06);
+  --lt-shadow-lg:
+    0 8px 16px -4px oklch(0 0 0 / 0.12), 0 2px 4px -2px oklch(0 0 0 / 0.08);
+
+  /* Z-index scale */
+  --lt-z-dropdown: 1000;
+  --lt-z-sticky: 1100;
+  --lt-z-overlay: 1200;
+  --lt-z-modal: 1300;
+  --lt-z-popover: 1400;
+  --lt-z-toast: 1500;
+
+  /* Motion */
+  --lt-duration-fast: 120ms;
+  --lt-duration-base: 160ms;
+  --lt-duration-slow: 240ms;
+  --lt-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Layout dimensions */
+  --lt-sidebar-w: 16rem;
+  --lt-sidebar-w-collapsed: 4rem;
+  --lt-container-max: 80rem;
 
   color-scheme: light;
 }
@@ -68,6 +125,20 @@
   --lt-info: var(--info, oklch(0.7 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
 
+  /* Interaction states (dark) */
+  --lt-primary-hover: var(--primary-hover, oklch(0.79 0.105 182));
+  --lt-primary-active: var(--primary-active, oklch(0.84 0.105 182));
+  --lt-danger-hover: var(--destructive-hover, oklch(0.47 0.13 26));
+  --lt-danger-active: var(--destructive-active, oklch(0.52 0.13 26));
+  --lt-success-hover: var(--success-hover, oklch(0.75 0.15 162));
+  --lt-success-active: var(--success-active, oklch(0.8 0.15 162));
+  --lt-info-hover: var(--info-hover, oklch(0.75 0.14 240));
+  --lt-info-active: var(--info-active, oklch(0.8 0.14 240));
+  --lt-secondary-hover: var(--secondary-hover, oklch(0.32 0 0));
+  --lt-secondary-active: var(--secondary-active, oklch(0.36 0 0));
+  --lt-disabled: var(--disabled, oklch(0.32 0 0));
+  --lt-disabled-fg: var(--disabled-foreground, oklch(0.55 0 0));
+
   color-scheme: dark;
 }
 
@@ -97,16 +168,35 @@
   --color-lt-success-fg: var(--lt-success-fg);
   --color-lt-info: var(--lt-info);
   --color-lt-info-fg: var(--lt-info-fg);
+  --color-lt-primary-hover: var(--lt-primary-hover);
+  --color-lt-primary-active: var(--lt-primary-active);
+  --color-lt-danger-hover: var(--lt-danger-hover);
+  --color-lt-danger-active: var(--lt-danger-active);
+  --color-lt-success-hover: var(--lt-success-hover);
+  --color-lt-success-active: var(--lt-success-active);
+  --color-lt-info-hover: var(--lt-info-hover);
+  --color-lt-info-active: var(--lt-info-active);
+  --color-lt-secondary-hover: var(--lt-secondary-hover);
+  --color-lt-secondary-active: var(--lt-secondary-active);
+  --color-lt-disabled: var(--lt-disabled);
+  --color-lt-disabled-fg: var(--lt-disabled-fg);
   --radius-lt: var(--lt-radius);
   --radius-lt-sm: var(--lt-radius-sm);
   --radius-lt-xs: var(--lt-radius-xs);
+  --shadow-lt-xs: var(--lt-shadow-xs);
+  --shadow-lt-sm: var(--lt-shadow-sm);
+  --shadow-lt-md: var(--lt-shadow-md);
+  --shadow-lt-lg: var(--lt-shadow-lg);
   --spacing-lt-icon-xs: var(--lt-icon-xs);
   --spacing-lt-icon-sm: var(--lt-icon-sm);
   --spacing-lt-icon-md: var(--lt-icon-md);
   --spacing-lt-icon-lg: var(--lt-icon-lg);
   --spacing-lt-icon-xl: var(--lt-icon-xl);
-  --animate-lt-toast-in: lt-toast-in 160ms ease-out;
-  --animate-lt-toast-out: lt-toast-out 120ms ease-in;
+  --spacing-lt-control-sm: var(--lt-control-h-sm);
+  --spacing-lt-control-md: var(--lt-control-h-md);
+  --spacing-lt-control-lg: var(--lt-control-h-lg);
+  --animate-lt-toast-in: lt-toast-in var(--lt-duration-base) ease-out;
+  --animate-lt-toast-out: lt-toast-out var(--lt-duration-fast) ease-in;
 }
 
 @theme {
@@ -115,6 +205,9 @@
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
 
+  /* Base spacing unit */
+  --spacing: 0.25rem;
+
   --text-xs: 0.625rem;
   --text-xs--line-height: 1.6;
   --text-sm: 0.6875rem;

package/dist/layout/callouts.js

@@ -50,7 +50,7 @@ var Callouts = () => {
 					type: "button",
 					"aria-label": t("a11y.dismiss", "Dismiss"),
 					"data-test": "callout-dismiss",
-					className: "shrink-0 rounded-md p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
+					className: "shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
 					onClick: () => dismiss(callout.id),
 					children: /* @__PURE__ */ jsx(Icon, {
 						name: "x",

package/dist/layout/callouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"callouts.js","names":[],"sources":["../../resources/js/layout/callouts.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { Callout } from \"@lattice-php/lattice/types/generated\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { onCallout } from \"@lattice-php/lattice/toast/callout\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { variantStyles } from \"@lattice-php/lattice/toast/variant-styles\";\n\ntype CalloutItem = Callout & { id: number };\n\nlet nextId = 0;\n\nconst Callouts: RendererComponent<\"callouts\"> = () => {\n  const { t } = useT(\"lattice\");\n  const [callouts, setCallouts] = useState<CalloutItem[]>([]);\n\n  useEffect(\n    () =>\n      onCallout((callout) => {\n        setCallouts((current) => [...current, { ...callout, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  function dismiss(id: number): void {\n    setCallouts((current) => current.filter((callout) => callout.id !== id));\n  }\n\n  if (callouts.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      {callouts.map((callout) => (\n        <div\n          key={callout.id}\n          role=\"status\"\n          data-test={`callout-${callout.variant}`}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg\",\n            variantStyles[callout.variant].accent,\n          )}\n        >\n          {variantStyles[callout.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            {callout.title ? (\n              <p className=\"text-sm font-medium text-lt-fg\">{callout.title}</p>\n            ) : null}\n            <p className=\"text-sm text-lt-fg\">{callout.message}</p>\n            {callout.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={callout.action} />\n              </div>\n            ) : null}\n          </div>\n          {callout.dismissible ? (\n            <button\n              type=\"button\"\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              data-test=\"callout-dismiss\"\n              className=\"shrink-0 rounded-md p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              onClick={() => dismiss(callout.id)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </button>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Callouts;\n"],"mappings":";;;;;;;;;AAYA,IAAI,SAAS;AAEb,IAAM,iBAAgD;CACpD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAwB,CAAC,CAAC;CAE1D,gBAEI,WAAW,YAAY;EACrB,aAAa,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAS,IAAI;EAAS,CAAC,CAAC;CACrE,CAAC,GACH,CAAC,CACH;CAEA,SAAS,QAAQ,IAAkB;EACjC,aAAa,YAAY,QAAQ,QAAQ,YAAY,QAAQ,OAAO,EAAE,CAAC;CACzE;CAEA,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,SAAS,KAAK,YACb,qBAAC,OAAD;GAEE,MAAK;GACL,aAAW,WAAW,QAAQ;GAC9B,WAAW,GACT,6GACA,cAAc,QAAQ,SAAS,MACjC;aAPF;IASG,cAAc,QAAQ,SAAS;IAChC,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,QACP,oBAAC,KAAD;OAAG,WAAU;iBAAkC,QAAQ;MAAS,CAAA,IAC9D;MACJ,oBAAC,KAAD;OAAG,WAAU;iBAAsB,QAAQ;MAAW,CAAA;MACrD,QAAQ,SACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD,EAAY,MAAM,QAAQ,OAAS,CAAA;MAChC,CAAA,IACH;KACD;;IACJ,QAAQ,cACP,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,gBAAgB,SAAS;KACvC,aAAU;KACV,WAAU;KACV,eAAe,QAAQ,QAAQ,EAAE;eAEjC,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACtC,CAAA,IACN;GACD;KA/BE,QAAQ,EA+BV,CACN;CACE,CAAA;AAET"}
+{"version":3,"file":"callouts.js","names":[],"sources":["../../resources/js/layout/callouts.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { Callout } from \"@lattice-php/lattice/types/generated\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { onCallout } from \"@lattice-php/lattice/toast/callout\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { variantStyles } from \"@lattice-php/lattice/toast/variant-styles\";\n\ntype CalloutItem = Callout & { id: number };\n\nlet nextId = 0;\n\nconst Callouts: RendererComponent<\"callouts\"> = () => {\n  const { t } = useT(\"lattice\");\n  const [callouts, setCallouts] = useState<CalloutItem[]>([]);\n\n  useEffect(\n    () =>\n      onCallout((callout) => {\n        setCallouts((current) => [...current, { ...callout, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  function dismiss(id: number): void {\n    setCallouts((current) => current.filter((callout) => callout.id !== id));\n  }\n\n  if (callouts.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      {callouts.map((callout) => (\n        <div\n          key={callout.id}\n          role=\"status\"\n          data-test={`callout-${callout.variant}`}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg\",\n            variantStyles[callout.variant].accent,\n          )}\n        >\n          {variantStyles[callout.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            {callout.title ? (\n              <p className=\"text-sm font-medium text-lt-fg\">{callout.title}</p>\n            ) : null}\n            <p className=\"text-sm text-lt-fg\">{callout.message}</p>\n            {callout.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={callout.action} />\n              </div>\n            ) : null}\n          </div>\n          {callout.dismissible ? (\n            <button\n              type=\"button\"\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              data-test=\"callout-dismiss\"\n              className=\"shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              onClick={() => dismiss(callout.id)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </button>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Callouts;\n"],"mappings":";;;;;;;;;AAYA,IAAI,SAAS;AAEb,IAAM,iBAAgD;CACpD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAwB,CAAC,CAAC;CAE1D,gBAEI,WAAW,YAAY;EACrB,aAAa,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAS,IAAI;EAAS,CAAC,CAAC;CACrE,CAAC,GACH,CAAC,CACH;CAEA,SAAS,QAAQ,IAAkB;EACjC,aAAa,YAAY,QAAQ,QAAQ,YAAY,QAAQ,OAAO,EAAE,CAAC;CACzE;CAEA,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,SAAS,KAAK,YACb,qBAAC,OAAD;GAEE,MAAK;GACL,aAAW,WAAW,QAAQ;GAC9B,WAAW,GACT,6GACA,cAAc,QAAQ,SAAS,MACjC;aAPF;IASG,cAAc,QAAQ,SAAS;IAChC,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,QACP,oBAAC,KAAD;OAAG,WAAU;iBAAkC,QAAQ;MAAS,CAAA,IAC9D;MACJ,oBAAC,KAAD;OAAG,WAAU;iBAAsB,QAAQ;MAAW,CAAA;MACrD,QAAQ,SACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD,EAAY,MAAM,QAAQ,OAAS,CAAA;MAChC,CAAA,IACH;KACD;;IACJ,QAAQ,cACP,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,gBAAgB,SAAS;KACvC,aAAU;KACV,WAAU;KACV,eAAe,QAAQ,QAAQ,EAAE;eAEjC,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACtC,CAAA,IACN;GACD;KA/BE,QAAQ,EA+BV,CACN;CACE,CAAA;AAET"}

package/dist/layout/components.js

@@ -6,6 +6,7 @@ import MenuComponent from "./menu.js";
 import MenuItemComponent from "./menu-item.js";
 import OutletComponent from "./outlet.js";
 import SidebarComponent from "./sidebar.js";
+import TopbarComponent from "./topbar.js";
 //#region resources/js/layout/components.ts
 var layoutComponents = createPlugin({
 	components: {
@@ -15,7 +16,8 @@ var layoutComponents = createPlugin({
 		menu: eagerComponent(MenuComponent),
 		"menu-item": eagerComponent(MenuItemComponent),
 		outlet: eagerComponent(OutletComponent),
-		sidebar: eagerComponent(SidebarComponent)
+		sidebar: eagerComponent(SidebarComponent),
+		topbar: eagerComponent(TopbarComponent)
 	},
 	name: "lattice/layout"
 });

package/dist/layout/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","names":[],"sources":["../../resources/js/layout/components.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport BreadcrumbsComponent from \"./breadcrumbs\";\nimport CalloutsComponent from \"./callouts\";\nimport DropdownComponent from \"./dropdown\";\nimport MenuComponent from \"./menu\";\nimport MenuItemComponent from \"./menu-item\";\nimport OutletComponent from \"./outlet\";\nimport SidebarComponent from \"./sidebar\";\n\nexport const layoutComponents = createPlugin({\n  components: {\n    breadcrumbs: eagerComponent(BreadcrumbsComponent),\n    callouts: eagerComponent(CalloutsComponent),\n    dropdown: eagerComponent(DropdownComponent),\n    menu: eagerComponent(MenuComponent),\n    \"menu-item\": eagerComponent(MenuItemComponent),\n    outlet: eagerComponent(OutletComponent),\n    sidebar: eagerComponent(SidebarComponent),\n  },\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;AASA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,aAAa,eAAe,oBAAoB;EAChD,UAAU,eAAe,QAAiB;EAC1C,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,aAAa,eAAe,iBAAiB;EAC7C,QAAQ,eAAe,eAAe;EACtC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"components.js","names":[],"sources":["../../resources/js/layout/components.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport BreadcrumbsComponent from \"./breadcrumbs\";\nimport CalloutsComponent from \"./callouts\";\nimport DropdownComponent from \"./dropdown\";\nimport MenuComponent from \"./menu\";\nimport MenuItemComponent from \"./menu-item\";\nimport OutletComponent from \"./outlet\";\nimport SidebarComponent from \"./sidebar\";\nimport TopbarComponent from \"./topbar\";\n\nexport const layoutComponents = createPlugin({\n  components: {\n    breadcrumbs: eagerComponent(BreadcrumbsComponent),\n    callouts: eagerComponent(CalloutsComponent),\n    dropdown: eagerComponent(DropdownComponent),\n    menu: eagerComponent(MenuComponent),\n    \"menu-item\": eagerComponent(MenuItemComponent),\n    outlet: eagerComponent(OutletComponent),\n    sidebar: eagerComponent(SidebarComponent),\n    topbar: eagerComponent(TopbarComponent),\n  },\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,aAAa,eAAe,oBAAoB;EAChD,UAAU,eAAe,QAAiB;EAC1C,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,aAAa,eAAe,iBAAiB;EAC7C,QAAQ,eAAe,eAAe;EACtC,SAAS,eAAe,gBAAgB;EACxC,QAAQ,eAAe,eAAe;CACxC;CACA,MAAM;AACR,CAAC"}

package/dist/layout/dropdown.js

@@ -7,8 +7,9 @@ var DropdownComponent = ({ children, node }) => {
 	return /* @__PURE__ */ jsx(Popover, {
 		placement: node.props.placement,
 		testId,
+		triggerClassName: "w-auto",
 		trigger: /* @__PURE__ */ jsx("span", {
-			className: "flex min-w-0 items-center rounded-md px-2 py-1.5 text-sm hover:bg-lt-muted",
+			className: "flex min-w-0 items-center rounded-lt-sm px-2 py-1.5 text-sm hover:bg-lt-muted",
 			children: node.props.trigger.map((triggerNode, index) => /* @__PURE__ */ jsx(RenderNode, { node: triggerNode }, triggerNode.key ?? `${triggerNode.type}-${index}`))
 		}),
 		children: /* @__PURE__ */ jsx("ul", {

package/dist/layout/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":[],"sources":["../../resources/js/layout/dropdown.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { Popover } from \"./popover\";\n\nconst DropdownComponent: RendererComponent<\"dropdown\"> = ({ children, node }) => {\n  const testId = node.key ?? \"dropdown\";\n\n  return (\n    <Popover\n      placement={node.props.placement}\n      testId={testId}\n      trigger={\n        <span className=\"flex min-w-0 items-center rounded-md px-2 py-1.5 text-sm hover:bg-lt-muted\">\n          {node.props.trigger.map((triggerNode, index) => (\n            <RenderNode\n              key={triggerNode.key ?? `${triggerNode.type}-${index}`}\n              node={triggerNode}\n            />\n          ))}\n        </span>\n      }\n    >\n      <ul className=\"flex flex-col gap-1\">{children}</ul>\n    </Popover>\n  );\n};\n\nexport default DropdownComponent;\n"],"mappings":";;;;AAIA,IAAM,qBAAoD,EAAE,UAAU,WAAW;CAC/E,MAAM,SAAS,KAAK,OAAO;CAE3B,OACE,oBAAC,SAAD;EACE,WAAW,KAAK,MAAM;EACd;EACR,SACE,oBAAC,QAAD;GAAM,WAAU;aACb,KAAK,MAAM,QAAQ,KAAK,aAAa,UACpC,oBAAC,YAAD,EAEE,MAAM,YACP,GAFM,YAAY,OAAO,GAAG,YAAY,KAAK,GAAG,OAEhD,CACF;EACG,CAAA;YAGR,oBAAC,MAAD;GAAI,WAAU;GAAuB;EAAa,CAAA;CAC3C,CAAA;AAEb"}
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../resources/js/layout/dropdown.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { Popover } from \"./popover\";\n\nconst DropdownComponent: RendererComponent<\"dropdown\"> = ({ children, node }) => {\n  const testId = node.key ?? \"dropdown\";\n\n  return (\n    <Popover\n      placement={node.props.placement}\n      testId={testId}\n      triggerClassName=\"w-auto\"\n      trigger={\n        <span className=\"flex min-w-0 items-center rounded-lt-sm px-2 py-1.5 text-sm hover:bg-lt-muted\">\n          {node.props.trigger.map((triggerNode, index) => (\n            <RenderNode\n              key={triggerNode.key ?? `${triggerNode.type}-${index}`}\n              node={triggerNode}\n            />\n          ))}\n        </span>\n      }\n    >\n      <ul className=\"flex flex-col gap-1\">{children}</ul>\n    </Popover>\n  );\n};\n\nexport default DropdownComponent;\n"],"mappings":";;;;AAIA,IAAM,qBAAoD,EAAE,UAAU,WAAW;CAC/E,MAAM,SAAS,KAAK,OAAO;CAE3B,OACE,oBAAC,SAAD;EACE,WAAW,KAAK,MAAM;EACd;EACR,kBAAiB;EACjB,SACE,oBAAC,QAAD;GAAM,WAAU;aACb,KAAK,MAAM,QAAQ,KAAK,aAAa,UACpC,oBAAC,YAAD,EAEE,MAAM,YACP,GAFM,YAAY,OAAO,GAAG,YAAY,KAAK,GAAG,OAEhD,CACF;EACG,CAAA;YAGR,oBAAC,MAAD;GAAI,WAAU;GAAuB;EAAa,CAAA;CAC3C,CAAA;AAEb"}

package/dist/layout/menu-item.js

@@ -8,7 +8,17 @@ import { useState } from "react";
 import { Link, usePage } from "@inertiajs/react";
 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));
 }
@@ -16,24 +26,35 @@ var MenuItemComponent = ({ children, node }) => {
 	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 testId = prefixedNodeTestId("menu", node);
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ? /* @__PURE__ */ jsx(IconRenderer, {
+	const content = icon ? /* @__PURE__ */ jsx(IconRenderer, {
 		className: "size-lt-icon-md shrink-0",
 		icon
-	}) : 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 })] });
+	}) : /* @__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,
 			children
@@ -49,9 +70,9 @@ var MenuItemComponent = ({ children, node }) => {
 	const method = node.props.method ?? "get";
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 		"aria-current": active ? "page" : void 0,
-		"aria-label": collapsed ? label : void 0,
+		"aria-label": collapsed || iconOnly ? 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"),
+		className: cn(rowClass, "w-full", collapsed && "group relative justify-center", iconOnly && "justify-center", active && "bg-lt-muted font-medium"),
 		"data-test": testId,
 		href,
 		method,

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 { 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"}
+{"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":";;;;;;;;;;AAWA,IAAM,WACJ;AAEF,SAAS,UAAU,EAAE,OAAO,aAAmD;CAC7E,IAAI,MAAM,MACR,OAAO,oBAAC,cAAD;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,MAAM,MAAM;CAAO,CAAA;CAGhG,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,qCAAqC,SAAS;YAAI,MAAM;CAAW,CAAA;AAChG;AAEA,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,SAAS,KAAK,MAAM;CAC1B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,WAAW,QAAQ,IAAI;CAC7B,MAAM,aAAa,QAAQ,QAAQ,QAAQ;CAC3C,MAAM,OAAO,KAAK,MAAM,QAAQ;CAChC,MAAM,cAAc,QAAQ,EAAE,IAAI,MAAM,GAAG,EAAE;CAC7C,MAAM,SAAS,mBAAmB,QAAQ,IAAI;CAE9C,MAAM,UAAU,OACd,oBAAC,cAAD;EAAc,WAAU;EAAiC;CAAO,CAAA,IAEhE,qBAAA,YAAA,EAAA,UAAA;EACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACxC,YACC,oBAAC,QAAD;GACE,WAAU;GACV,MAAK;aAEJ;EACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;EAEpB,SAAS,oBAAC,WAAD;GAAW,OAAO;GAAQ,WAAU;EAAW,CAAA,IAAI;CAC7D,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;GAAa,MAAM;GAAmB;GAAe;GAClD;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,aAAa,WAAW,QAAQ,KAAA;EAC5C,IAAI,WAAW,QAAQ,KAAA,IAAY;EACnC,WAAW,GACT,UACA,UACA,aAAa,iCACb,YAAY,kBACZ,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/sidebar.js

@@ -30,7 +30,7 @@ var SidebarComponent = ({ children, node }) => {
 				"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-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"}
+{"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,22 +1,27 @@
 import { cn } from "./lib/utils.js";
 import { Renderer } from "./core/renderer.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 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-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",
+	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-test": "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-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"}
+{"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/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;

package/dist/realtime/listeners.js

@@ -0,0 +1,31 @@
+import { Component, Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/realtime/listeners.tsx
+var Subscriptions = lazy(() => import("./subscriptions.js"));
+var EchoBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch() {
+		console.warn("[lattice] Real-time listeners are declared but Echo is unavailable. Install @laravel/echo-react and call configureEcho().");
+	}
+	render() {
+		return this.state.failed ? null : this.props.children;
+	}
+};
+/**
+* Renders nothing when a page declares no listeners, so the echo-react chunk
+* is only fetched where it is actually needed.
+*/
+function RealtimeListeners({ listeners }) {
+	if (listeners === void 0 || listeners.length === 0) return null;
+	return /* @__PURE__ */ jsx(EchoBoundary, { children: /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(Subscriptions, { listeners })
+	}) });
+}
+//#endregion
+export { RealtimeListeners };
+
+//# sourceMappingURL=listeners.js.map

package/dist/realtime/listeners.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listeners.js","names":[],"sources":["../../resources/js/realtime/listeners.tsx"],"sourcesContent":["import { Component, lazy, Suspense } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ListenerPayload } from \"@lattice-php/lattice/types/generated\";\n\nconst Subscriptions = lazy(() => import(\"./subscriptions\"));\n\nclass EchoBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {\n  state = { failed: false };\n\n  static getDerivedStateFromError(): { failed: boolean } {\n    return { failed: true };\n  }\n\n  componentDidCatch(): void {\n    console.warn(\n      \"[lattice] Real-time listeners are declared but Echo is unavailable. Install @laravel/echo-react and call configureEcho().\",\n    );\n  }\n\n  render(): ReactNode {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n\n/**\n * Renders nothing when a page declares no listeners, so the echo-react chunk\n * is only fetched where it is actually needed.\n */\nexport function RealtimeListeners({ listeners }: { listeners?: ListenerPayload[] }) {\n  if (listeners === undefined || listeners.length === 0) {\n    return null;\n  }\n\n  return (\n    <EchoBoundary>\n      <Suspense fallback={null}>\n        <Subscriptions listeners={listeners} />\n      </Suspense>\n    </EchoBoundary>\n  );\n}\n"],"mappings":";;;AAIA,IAAM,gBAAgB,WAAW,OAAO,qBAAkB;AAE1D,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,2HACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;;;;;AAMA,SAAgB,kBAAkB,EAAE,aAAgD;CAClF,IAAI,cAAc,KAAA,KAAa,UAAU,WAAW,GAClD,OAAO;CAGT,OACE,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,eAAD,EAA0B,UAAY,CAAA;CAC9B,CAAA,EACE,CAAA;AAElB"}

package/dist/realtime/subscriptions.d.ts

@@ -0,0 +1,4 @@
+import { ListenerPayload } from '../types/generated';
+export default function Subscriptions({ listeners }: {
+    listeners: ListenerPayload[];
+}): import("react").JSX.Element;

package/dist/realtime/subscriptions.js

@@ -0,0 +1,45 @@
+import { useT } from "../i18n/instance.js";
+import { useEffectDispatcher } from "../effects/use-effect-dispatcher.js";
+import { buildEffects } from "./build-effects.js";
+import { useCallback } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useEcho, useEchoPresence, useEchoPublic } from "@laravel/echo-react";
+//#region resources/js/realtime/subscriptions.tsx
+function useListenerHandler(listener) {
+	const { t } = useT("lattice");
+	const dispatch = useEffectDispatcher();
+	return useCallback((payload) => {
+		const data = typeof payload === "object" && payload !== null ? payload : {};
+		dispatch(buildEffects(listener.effects, data, t));
+	}, [
+		dispatch,
+		listener,
+		t
+	]);
+}
+function PublicListener({ listener }) {
+	useEchoPublic(listener.channel, listener.events, useListenerHandler(listener));
+	return null;
+}
+function PrivateListener({ listener }) {
+	useEcho(listener.channel, listener.events, useListenerHandler(listener));
+	return null;
+}
+function PresenceListener({ listener }) {
+	useEchoPresence(listener.channel, listener.events, useListenerHandler(listener));
+	return null;
+}
+function Listener({ listener }) {
+	switch (listener.visibility) {
+		case "private": return /* @__PURE__ */ jsx(PrivateListener, { listener });
+		case "presence": return /* @__PURE__ */ jsx(PresenceListener, { listener });
+		default: return /* @__PURE__ */ jsx(PublicListener, { listener });
+	}
+}
+function Subscriptions({ listeners }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: listeners.map((listener, index) => /* @__PURE__ */ jsx(Listener, { listener }, `${listener.visibility}:${listener.channel}:${index}`)) });
+}
+//#endregion
+export { Subscriptions as default };
+
+//# sourceMappingURL=subscriptions.js.map

package/dist/realtime/subscriptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscriptions.js","names":[],"sources":["../../resources/js/realtime/subscriptions.tsx"],"sourcesContent":["import { useEcho, useEchoPresence, useEchoPublic } from \"@laravel/echo-react\";\nimport { useCallback } from \"react\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { buildEffects } from \"./build-effects\";\nimport type { RawEffect } from \"./build-effects\";\nimport type { ListenerPayload } from \"@lattice-php/lattice/types/generated\";\n\nfunction useListenerHandler(listener: ListenerPayload): (payload: unknown) => void {\n  const { t } = useT(\"lattice\");\n  const dispatch = useEffectDispatcher();\n\n  return useCallback(\n    (payload: unknown) => {\n      const data = (typeof payload === \"object\" && payload !== null ? payload : {}) as Record<\n        string,\n        unknown\n      >;\n      dispatch(buildEffects(listener.effects as unknown as RawEffect[], data, t));\n    },\n    [dispatch, listener, t],\n  );\n}\n\nfunction PublicListener({ listener }: { listener: ListenerPayload }) {\n  useEchoPublic(listener.channel, listener.events, useListenerHandler(listener));\n  return null;\n}\n\nfunction PrivateListener({ listener }: { listener: ListenerPayload }) {\n  useEcho(listener.channel, listener.events, useListenerHandler(listener));\n  return null;\n}\n\nfunction PresenceListener({ listener }: { listener: ListenerPayload }) {\n  useEchoPresence(listener.channel, listener.events, useListenerHandler(listener));\n  return null;\n}\n\nfunction Listener({ listener }: { listener: ListenerPayload }) {\n  switch (listener.visibility) {\n    case \"private\":\n      return <PrivateListener listener={listener} />;\n    case \"presence\":\n      return <PresenceListener listener={listener} />;\n    default:\n      return <PublicListener listener={listener} />;\n  }\n}\n\nexport default function Subscriptions({ listeners }: { listeners: ListenerPayload[] }) {\n  return (\n    <>\n      {listeners.map((listener, index) => (\n        <Listener key={`${listener.visibility}:${listener.channel}:${index}`} listener={listener} />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAS,mBAAmB,UAAuD;CACjF,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,WAAW,oBAAoB;CAErC,OAAO,aACJ,YAAqB;EACpB,MAAM,OAAQ,OAAO,YAAY,YAAY,YAAY,OAAO,UAAU,CAAC;EAI3E,SAAS,aAAa,SAAS,SAAmC,MAAM,CAAC,CAAC;CAC5E,GACA;EAAC;EAAU;EAAU;CAAC,CACxB;AACF;AAEA,SAAS,eAAe,EAAE,YAA2C;CACnE,cAAc,SAAS,SAAS,SAAS,QAAQ,mBAAmB,QAAQ,CAAC;CAC7E,OAAO;AACT;AAEA,SAAS,gBAAgB,EAAE,YAA2C;CACpE,QAAQ,SAAS,SAAS,SAAS,QAAQ,mBAAmB,QAAQ,CAAC;CACvE,OAAO;AACT;AAEA,SAAS,iBAAiB,EAAE,YAA2C;CACrE,gBAAgB,SAAS,SAAS,SAAS,QAAQ,mBAAmB,QAAQ,CAAC;CAC/E,OAAO;AACT;AAEA,SAAS,SAAS,EAAE,YAA2C;CAC7D,QAAQ,SAAS,YAAjB;EACE,KAAK,WACH,OAAO,oBAAC,iBAAD,EAA2B,SAAW,CAAA;EAC/C,KAAK,YACH,OAAO,oBAAC,kBAAD,EAA4B,SAAW,CAAA;EAChD,SACE,OAAO,oBAAC,gBAAD,EAA0B,SAAW,CAAA;CAChD;AACF;AAEA,SAAwB,cAAc,EAAE,aAA+C;CACrF,OACE,oBAAA,YAAA,EAAA,UACG,UAAU,KAAK,UAAU,UACxB,oBAAC,UAAD,EAAgF,SAAW,GAA5E,GAAG,SAAS,WAAW,GAAG,SAAS,QAAQ,GAAG,OAA8B,CAC5F,EACD,CAAA;AAEN"}

package/dist/registry.js

@@ -3,10 +3,11 @@ 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 { remoteComponents } from "./remote/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, chatPlugin);
+var registry = createRegistry(coreComponents, actionComponents, formComponents, layoutComponents, tableComponents, chatPlugin, remoteComponents);
 //#endregion
 export { registry };