@lattice-php/lattice 0.3.0 → 0.5.0

package/dist/layout/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../resources/js/layout/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav aria-label=\"Breadcrumb\" data-lattice-component={node.id}>\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;AAIA,IAAM,wBAA0D,EAAE,WAAW;CAE3E,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,0BAAwB,KAAK;YACxD,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../resources/js/layout/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav aria-label=\"Breadcrumb\" data-lattice-component={nodeIdentity(node)}>\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;;AAKA,IAAM,wBAA0D,EAAE,WAAW;CAE3E,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,0BAAwB,aAAa,IAAI;YACpE,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/dist/layout/callouts.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
-import { useT } from "../i18n/instance.js";
 import { RenderNode } from "../core/renderer.js";
 import { onCallout } from "../toast/callout.js";
+import { useT } from "../i18n/instance.js";
 import { variantStyles } from "../toast/variant-styles.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -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

@@ -1,11 +1,12 @@
+import Callouts from "./callouts.js";
 import { createPlugin, eagerComponent } from "../core/registry.js";
 import BreadcrumbsComponent from "./breadcrumbs.js";
-import Callouts from "./callouts.js";
 import DropdownComponent from "./dropdown.js";
 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

@@ -1,14 +1,24 @@
 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 { useCollapsed } from "../core/collapsed-context.js";
+import { prefixedNodeTestId } from "../core/test-id.js";
 import { Popover } from "./popover.js";
-import { useState } from "react";
 import { Link, usePage } from "@inertiajs/react";
+import { useState } from "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/menu.js

@@ -1,7 +1,8 @@
+import { nodeIdentity } from "../core/test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/layout/menu.tsx
 var MenuComponent = ({ children, node }) => /* @__PURE__ */ jsx("nav", {
-	"data-lattice-component": node.id,
+	"data-lattice-component": nodeIdentity(node),
 	children: /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-col gap-1",
 		children

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

package/dist/layout/popover.js

@@ -1,8 +1,8 @@
 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 { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/popover.tsx
 /**

package/dist/layout/sidebar.js

@@ -1,45 +1,85 @@
+import { LATTICE_EVENT } from "../events/event-names.js";
 import { cn } from "../lib/utils.js";
-import { Icon } from "../icons/sprite.js";
 import { CollapsedContext } from "../core/collapsed-context.js";
-import { useState } from "react";
+import { nodeIdentity } from "../core/test-id.js";
+import { router } from "@inertiajs/react";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/sidebar.tsx
+var DESKTOP_QUERY = "(min-width: 768px)";
 function readStored(key, remember) {
 	if (!remember || typeof window === "undefined") return false;
 	return window.localStorage.getItem(key) === "true";
 }
+function matchesTarget(event, identity) {
+	const target = event.detail?.target;
+	return target == null || target === identity;
+}
+function useIsDesktop() {
+	const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+	const [isDesktop, setIsDesktop] = useState(() => supported() ? window.matchMedia(DESKTOP_QUERY).matches : true);
+	useEffect(() => {
+		if (!supported()) return;
+		const query = window.matchMedia(DESKTOP_QUERY);
+		const update = () => setIsDesktop(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+	return isDesktop;
+}
 var SidebarComponent = ({ children, node }) => {
 	const collapsible = node.props.collapsible;
 	const rememberState = node.props.rememberState;
-	const storageKey = `lattice:sidebar:${node.id ?? "default"}`;
+	const identity = nodeIdentity(node);
+	const storageKey = `lattice:sidebar:${identity ?? "default"}`;
+	const isDesktop = useIsDesktop();
 	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState));
-	function toggle() {
-		setCollapsed((value) => {
-			const next = !value;
-			if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
-			return next;
-		});
-	}
-	const isCollapsed = collapsible && collapsed;
-	return /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+	const [mobileOpen, setMobileOpen] = useState(false);
+	useEffect(() => {
+		function toggle(event) {
+			if (!matchesTarget(event, identity)) return;
+			if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {
+				if (!collapsible) return;
+				setCollapsed((value) => {
+					const next = !value;
+					if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
+					return next;
+				});
+			} else setMobileOpen((open) => !open);
+		}
+		window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);
+		return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);
+	}, [
+		identity,
+		collapsible,
+		rememberState,
+		storageKey
+	]);
+	useEffect(() => router.on("navigate", () => setMobileOpen(false)), []);
+	useEffect(() => {
+		if (!mobileOpen) return;
+		function close(event) {
+			if (event.key === "Escape") setMobileOpen(false);
+		}
+		window.addEventListener("keydown", close);
+		return () => window.removeEventListener("keydown", close);
+	}, [mobileOpen]);
+	const isCollapsed = collapsible && collapsed && isDesktop;
+	return /* @__PURE__ */ jsxs(CollapsedContext.Provider, {
 		value: isCollapsed,
-		children: /* @__PURE__ */ jsxs("aside", {
-			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"),
-				onClick: toggle,
-				type: "button",
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: "panel-left",
-					"aria-hidden": "true",
-					className: "size-lt-icon-md shrink-0"
-				})
-			}) : null, children]
-		})
+		children: [mobileOpen ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "fixed inset-0 z-30 bg-black/50 md:hidden",
+			"data-test": "sidebar-backdrop",
+			onClick: () => setMobileOpen(false)
+		}) : null, /* @__PURE__ */ jsx("aside", {
+			className: cn("fixed inset-y-0 left-0 z-40 flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform", "md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]", mobileOpen ? "translate-x-0" : "-translate-x-full", isCollapsed ? "md:w-16 md:overflow-visible" : "md:w-64 md:overflow-x-hidden md:overflow-y-auto"),
+			"data-collapsed": isCollapsed ? "true" : "false",
+			"data-lattice-component": identity,
+			"data-test": "sidebar",
+			children
+		})]
 	});
 };
 //#endregion

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 { router } from \"@inertiajs/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst DESKTOP_QUERY = \"(min-width: 768px)\";\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\nfunction matchesTarget(event: Event, identity: string | undefined): boolean {\n  const target = (event as CustomEvent<{ target?: string }>).detail?.target;\n\n  return target == null || target === identity;\n}\n\nfunction useIsDesktop(): boolean {\n  const supported = () => typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n  const [isDesktop, setIsDesktop] = useState(() =>\n    supported() ? window.matchMedia(DESKTOP_QUERY).matches : true,\n  );\n\n  useEffect(() => {\n    if (!supported()) {\n      return;\n    }\n\n    const query = window.matchMedia(DESKTOP_QUERY);\n    const update = (): void => setIsDesktop(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return isDesktop;\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:sidebar:${identity ?? \"default\"}`;\n  const isDesktop = useIsDesktop();\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  useEffect(() => {\n    function toggle(event: Event): void {\n      if (!matchesTarget(event, identity)) {\n        return;\n      }\n\n      if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {\n        if (!collapsible) {\n          return;\n        }\n\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      } else {\n        setMobileOpen((open) => !open);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n\n    return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n  }, [identity, collapsible, rememberState, storageKey]);\n\n  useEffect(() => router.on(\"navigate\", () => setMobileOpen(false)), []);\n\n  useEffect(() => {\n    if (!mobileOpen) {\n      return;\n    }\n\n    function close(event: KeyboardEvent): void {\n      if (event.key === \"Escape\") {\n        setMobileOpen(false);\n      }\n    }\n\n    window.addEventListener(\"keydown\", close);\n\n    return () => window.removeEventListener(\"keydown\", close);\n  }, [mobileOpen]);\n\n  const isCollapsed = collapsible && collapsed && isDesktop;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      {mobileOpen ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"fixed inset-0 z-30 bg-black/50 md:hidden\"\n          data-test=\"sidebar-backdrop\"\n          onClick={() => setMobileOpen(false)}\n        />\n      ) : null}\n      <aside\n        className={cn(\n          \"fixed inset-y-0 left-0 z-40 flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform\",\n          \"md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]\",\n          mobileOpen ? \"translate-x-0\" : \"-translate-x-full\",\n          isCollapsed\n            ? \"md:w-16 md:overflow-visible\"\n            : \"md:w-64 md:overflow-x-hidden md:overflow-y-auto\",\n        )}\n        data-collapsed={isCollapsed ? \"true\" : \"false\"}\n        data-lattice-component={identity}\n        data-test=\"sidebar\"\n      >\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;;;AAQA,IAAM,gBAAgB;AAEtB,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,SAAS,cAAc,OAAc,UAAuC;CAC1E,MAAM,SAAU,MAA2C,QAAQ;CAEnE,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,SAAS,eAAwB;CAC/B,MAAM,kBAAkB,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe;CACtF,MAAM,CAAC,WAAW,gBAAgB,eAChC,UAAU,IAAI,OAAO,WAAW,aAAa,EAAE,UAAU,IAC3D;CAEA,gBAAgB;EACd,IAAI,CAAC,UAAU,GACb;EAGF,MAAM,QAAQ,OAAO,WAAW,aAAa;EAC7C,MAAM,eAAqB,aAAa,MAAM,OAAO;EAErD,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EAEvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAClD,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAClC,IAAI,CAAC,cAAc,OAAO,QAAQ,GAChC;GAGF,IAAI,OAAO,aAAa,aAAa,EAAE,WAAW,MAAM;IACtD,IAAI,CAAC,aACH;IAGF,cAAc,UAAU;KACtB,MAAM,OAAO,CAAC;KAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;KAGtD,OAAO;IACT,CAAC;GACH,OACE,eAAe,SAAS,CAAC,IAAI;EAEjC;EAEA,OAAO,iBAAiB,cAAc,eAAe,MAAM;EAE3D,aAAa,OAAO,oBAAoB,cAAc,eAAe,MAAM;CAC7E,GAAG;EAAC;EAAU;EAAa;EAAe;CAAU,CAAC;CAErD,gBAAgB,OAAO,GAAG,kBAAkB,cAAc,KAAK,CAAC,GAAG,CAAC,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,SAAS,MAAM,OAA4B;GACzC,IAAI,MAAM,QAAQ,UAChB,cAAc,KAAK;EAEvB;EAEA,OAAO,iBAAiB,WAAW,KAAK;EAExC,aAAa,OAAO,oBAAoB,WAAW,KAAK;CAC1D,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,cAAc,eAAe,aAAa;CAEhD,OACE,qBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAAlC,CACG,aACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,aAAU;GACV,eAAe,cAAc,KAAK;EACnC,CAAA,IACC,MACJ,oBAAC,SAAD;GACE,WAAW,GACT,gJACA,qFACA,aAAa,kBAAkB,qBAC/B,cACI,gCACA,iDACN;GACA,kBAAgB,cAAc,SAAS;GACvC,0BAAwB;GACxB,aAAU;GAET;EACI,CAAA,CACkB;;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,16 @@
+import { cn } from "../lib/utils.js";
+import { nodeIdentity } from "../core/test-id.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": nodeIdentity(node),
+		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 { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\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={nodeIdentity(node)}\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":";;;;AAIA,IAAM,mBAAgD,EAAE,UAAU,WAAW;CAC3E,MAAM,SAAS,KAAK,MAAM;CAE1B,OACE,oBAAC,UAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,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;