@lattice-php/lattice 0.17.2 → 0.18.0

package/dist/layout/{dropdown.d.ts → components/dropdown.d.ts}

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

package/dist/layout/{dropdown.js → components/dropdown.js}

@@ -1,7 +1,7 @@
-import { RenderNode } from "../core/renderer.js";
+import { RenderNode } from "../../core/renderer.js";
 import { Popover } from "./popover.js";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/layout/dropdown.tsx
+//#region resources/js/layout/components/dropdown.tsx
 var DropdownComponent = ({ children, node }) => {
 	const testId = node.key ?? "dropdown";
 	return /* @__PURE__ */ jsx(Popover, {

package/dist/layout/components/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../resources/js/layout/components/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.d.ts → components/menu-item.d.ts}

@@ -1,3 +1,3 @@
-import { RendererComponent } from '../core/types';
+import { RendererComponent } from '../../core/types.js';
 declare const MenuItemComponent: RendererComponent<"menu-item">;
 export default MenuItemComponent;

package/dist/layout/{menu-item.js → components/menu-item.js}

@@ -1,14 +1,14 @@
-import { cn } from "../lib/utils.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 { cn } from "../../lib/utils.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 { ActionTrigger, useClickBehavior } from "../core/use-click-behavior.js";
+import { ActionTrigger, useClickBehavior } from "../../ui/click-behavior.js";
 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
+//#region resources/js/layout/components/menu-item.tsx
 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, {
@@ -25,7 +25,8 @@ function schemaContainsPath(schema, path) {
 }
 var MenuItemComponent = ({ children, node }) => {
 	const collapsed = useCollapsed();
-	const { icon, label, prefix, suffix } = node.props;
+	const { icon, label: rawLabel, prefix, suffix } = node.props;
+	const label = rawLabel ?? "";
 	const iconOnly = Boolean(icon);
 	const flyoutIcon = icon ?? prefix?.icon ?? null;
 	const currentPath = usePage().url.split("?")[0];

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../../resources/js/layout/components/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 {\n  ActionTrigger,\n  type TriggerState,\n  useClickBehavior,\n} from \"@lattice-php/lattice/ui/click-behavior\";\nimport { useSidebarCollapsed } from \"@lattice-php/lattice/layout/hooks/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, label: rawLabel, prefix, suffix } = node.props;\n  const label = rawLabel ?? \"\";\n  const iconOnly = Boolean(icon);\n  const flyoutIcon = icon ?? prefix?.icon ?? null;\n  const currentPath = usePage().url.split(\"?\")[0];\n  const testId = prefixedNodeTestId(\"menu\", node);\n  const behavior = useClickBehavior(node.props);\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-lt-popover 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  const rowClassName = cn(\n    rowClass,\n    \"w-full\",\n    collapsed && \"group relative justify-center\",\n    iconOnly && \"justify-center\",\n  );\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <button\n      aria-label={collapsed || iconOnly ? label : undefined}\n      className={rowClassName}\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      type=\"button\"\n    >\n      {content}\n    </button>\n  );\n\n  if (behavior.kind === \"action\") {\n    return (\n      <li>\n        <ActionTrigger action={behavior.action}>{triggerButton}</ActionTrigger>\n      </li>\n    );\n  }\n\n  if (behavior.kind === \"effects\") {\n    return <li>{triggerButton({ onClick: behavior.onClick, processing: false })}</li>;\n  }\n\n  if (behavior.kind === \"navigate\") {\n    const active = currentPath === behavior.href;\n\n    return (\n      <li>\n        <Link\n          aria-current={active ? \"page\" : undefined}\n          aria-label={collapsed || iconOnly ? label : undefined}\n          as={behavior.method === \"get\" ? undefined : \"button\"}\n          className={cn(rowClassName, active && \"bg-lt-muted font-medium\")}\n          data-test={testId}\n          href={behavior.href}\n          method={behavior.method}\n        >\n          {content}\n        </Link>\n      </li>\n    );\n  }\n\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\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":";;;;;;;;;;;AAgBA,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,EAAE,MAAM,OAAO,UAAU,QAAQ,WAAW,KAAK;CACvD,MAAM,QAAQ,YAAY;CAC1B,MAAM,WAAW,QAAQ,IAAI;CAC7B,MAAM,aAAa,QAAQ,QAAQ,QAAQ;CAC3C,MAAM,cAAc,QAAQ,EAAE,IAAI,MAAM,GAAG,EAAE;CAC7C,MAAM,SAAS,mBAAmB,QAAQ,IAAI;CAC9C,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAE5C,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,MAAM,eAAe,GACnB,UACA,UACA,aAAa,iCACb,YAAY,gBACd;CAEA,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,UAAD;EACE,cAAY,aAAa,WAAW,QAAQ,KAAA;EAC5C,WAAW;EACX,aAAW;EACX,UAAU;EACD;EACT,MAAK;YAEJ;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,UACpB,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,eAAD;EAAe,QAAQ,SAAS;YAAS;CAA6B,CAAA,EACpE,CAAA;CAIR,IAAI,SAAS,SAAS,WACpB,OAAO,oBAAC,MAAD,EAAA,UAAK,cAAc;EAAE,SAAS,SAAS;EAAS,YAAY;CAAM,CAAC,EAAM,CAAA;CAGlF,IAAI,SAAS,SAAS,YAAY;EAChC,MAAM,SAAS,gBAAgB,SAAS;EAExC,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;GACE,gBAAc,SAAS,SAAS,KAAA;GAChC,cAAY,aAAa,WAAW,QAAQ,KAAA;GAC5C,IAAI,SAAS,WAAW,QAAQ,KAAA,IAAY;GAC5C,WAAW,GAAG,cAAc,UAAU,yBAAyB;GAC/D,aAAW;GACX,MAAM,SAAS;GACf,QAAQ,SAAS;aAEhB;EACG,CAAA,EACJ,CAAA;CAER;CAEA,IAAI,CAAC,UACH,OAAO,YAAY,OACjB,oBAAC,MAAD,EAAA,UACE,oBAAC,QAAD;EAAM,WAAU;YACb;CACG,CAAA,EACJ,CAAA;CAIR,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,MAAM;EAAmB;EAAe;EAClD;CACU,CAAA;CAIjB,OACE,oBAAC,iBAAD;EACW;EACT,aAAa,mBAAmB,KAAK,QAAQ,WAAW;EAChD;EAEP;CACc,CAAA;AAErB;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.d.ts → components/menu.d.ts}

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

package/dist/layout/{menu.js → components/menu.js}

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

package/dist/layout/components/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../../../resources/js/layout/components/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/{outlet.d.ts → components/outlet.d.ts}

@@ -1,4 +1,4 @@
-import { RendererComponent } from '../core/types';
+import { RendererComponent } from '../../core/types.js';
 /**
  * Renders the active page at the position the layout schema places it.
  */

package/dist/layout/{outlet.js → components/outlet.js}

@@ -1,7 +1,7 @@
-import { OutletContext } from "./context.js";
+import { OutletContext } from "../hooks/context.js";
 import { useContext } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-//#region resources/js/layout/outlet.tsx
+//#region resources/js/layout/components/outlet.tsx
 /**
 * Renders the active page at the position the layout schema places it.
 */

package/dist/layout/components/outlet.js.map

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

package/dist/layout/{popover.js → components/popover.js}

@@ -1,10 +1,10 @@
-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 { cn } from "../../lib/utils.js";
+import { CollapsedContext } from "../../core/collapsed-context.js";
+import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
 import { usePage } from "@inertiajs/react";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/layout/popover.tsx
+//#region resources/js/layout/components/popover.tsx
 /**
 * A navigation-aware popover for the sidebar: it wraps the shared popover
 * primitive (so positioning and dismissal stay consistent with the rest of the

package/dist/layout/components/popover.js.map

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

package/dist/layout/{schema-layout.js → components/schema-layout.js}

@@ -1,8 +1,8 @@
-import { Renderer } from "../core/renderer.js";
-import { OutletContext } from "./context.js";
+import { Renderer } from "../../core/renderer.js";
+import { OutletContext } from "../hooks/context.js";
 import { usePage } from "@inertiajs/react";
 import { Fragment, jsx } from "react/jsx-runtime";
-//#region resources/js/layout/schema-layout.tsx
+//#region resources/js/layout/components/schema-layout.tsx
 /**
 * Persistent Inertia layout that renders a server-composed layout schema and
 * exposes the active page (`children`) to the Outlet via context. The same

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

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

package/dist/layout/{sidebar.d.ts → components/sidebar.d.ts}

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

package/dist/layout/{sidebar.js → components/sidebar.js}

@@ -1,11 +1,11 @@
-import { LATTICE_EVENT } from "../events/event-names.js";
-import { cn } from "../lib/utils.js";
-import { CollapsedContext } from "../core/collapsed-context.js";
-import { nodeIdentity } from "../core/test-id.js";
+import { LATTICE_EVENT } from "../../events/event-names.js";
+import { cn } from "../../lib/utils.js";
+import { CollapsedContext } from "../../core/collapsed-context.js";
+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
+//#region resources/js/layout/components/sidebar.tsx
 var DESKTOP_QUERY = "(min-width: 768px)";
 function readStored(key, remember) {
 	if (!remember || typeof window === "undefined") return false;

package/dist/layout/components/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../resources/js/layout/components/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 \"@lattice-php/lattice/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-lt-overlay bg-lt-overlay 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-lt-modal 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,sJACA,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 → components/topbar.d.ts}

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

package/dist/layout/{topbar.js → components/topbar.js}

@@ -1,7 +1,7 @@
-import { cn } from "../lib/utils.js";
-import { nodeIdentity } from "../core/test-id.js";
+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
+//#region resources/js/layout/components/topbar.tsx
 var TopbarComponent = ({ children, node }) => {
 	const sticky = node.props.sticky;
 	return /* @__PURE__ */ jsx("header", {

package/dist/layout/components/topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.js","names":[],"sources":["../../../resources/js/layout/components/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-lt-sticky\",\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,0BACZ;EAEC;CACK,CAAA;AAEZ"}

package/dist/layout/{context.d.ts → hooks/context.d.ts}

@@ -1,4 +1,4 @@
 import { ReactNode } from 'react';
-import { CollapsedContext as SidebarCollapsedContext, useCollapsed as useSidebarCollapsed } from '../core/collapsed-context';
+import { CollapsedContext as SidebarCollapsedContext, useCollapsed as useSidebarCollapsed } from '../../core/collapsed-context.js';
 export declare const OutletContext: import('react').Context<ReactNode>;
 export { SidebarCollapsedContext, useSidebarCollapsed };

package/dist/layout/{context.js → hooks/context.js}

@@ -1,6 +1,6 @@
-import { CollapsedContext, useCollapsed } from "../core/collapsed-context.js";
+import { CollapsedContext, useCollapsed } from "../../core/collapsed-context.js";
 import { createContext } from "react";
-//#region resources/js/layout/context.ts
+//#region resources/js/layout/hooks/context.ts
 var OutletContext = createContext(null);
 //#endregion
 export { OutletContext, CollapsedContext as SidebarCollapsedContext, useCollapsed as useSidebarCollapsed };

package/dist/layout/hooks/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../resources/js/layout/hooks/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  CollapsedContext as SidebarCollapsedContext,\n  useCollapsed as useSidebarCollapsed,\n} from \"@lattice-php/lattice/core/collapsed-context\";\n\nexport const OutletContext = createContext<ReactNode>(null);\n\nexport { SidebarCollapsedContext, useSidebarCollapsed };\n"],"mappings":";;;AAOA,IAAa,gBAAgB,cAAyB,IAAI"}

package/dist/layout/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Callouts } from './callouts';
-export { layoutComponents } from './components';
-export { OutletContext, SidebarCollapsedContext, useSidebarCollapsed } from './context';
-export { default as SchemaLayout } from './schema-layout';
+export { default as Callouts } from './components/callouts.js';
+export { layoutComponents } from './plugin.js';
+export { OutletContext, SidebarCollapsedContext, useSidebarCollapsed } from './hooks/context.js';
+export { default as SchemaLayout } from './components/schema-layout.js';

package/dist/layout/index.js

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

package/dist/layout/plugin.d.ts

@@ -0,0 +1,2 @@
+export type LayoutComponentType = "breadcrumbs" | "callouts" | "dropdown" | "menu" | "menu-item" | "outlet" | "sidebar" | "topbar";
+export declare const layoutComponents: import('../core/registry.js').Plugin;

package/dist/layout/{components.js → plugin.js}

@@ -1,13 +1,13 @@
 import { createPlugin, eagerComponent } from "../core/registry.js";
-import Callouts from "./callouts.js";
-import BreadcrumbsComponent from "./breadcrumbs.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
+import Callouts from "./components/callouts.js";
+import BreadcrumbsComponent from "./components/breadcrumbs.js";
+import DropdownComponent from "./components/dropdown.js";
+import MenuComponent from "./components/menu.js";
+import MenuItemComponent from "./components/menu-item.js";
+import OutletComponent from "./components/outlet.js";
+import SidebarComponent from "./components/sidebar.js";
+import TopbarComponent from "./components/topbar.js";
+//#region resources/js/layout/plugin.ts
 var layoutComponents = createPlugin({
 	components: {
 		breadcrumbs: eagerComponent(BreadcrumbsComponent),
@@ -24,4 +24,4 @@ var layoutComponents = createPlugin({
 //#endregion
 export { layoutComponents };
 
-//# sourceMappingURL=components.js.map
+//# sourceMappingURL=plugin.js.map

package/dist/layout/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/layout/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport BreadcrumbsComponent from \"./components/breadcrumbs\";\nimport CalloutsComponent from \"./components/callouts\";\nimport DropdownComponent from \"./components/dropdown\";\nimport MenuComponent from \"./components/menu\";\nimport MenuItemComponent from \"./components/menu-item\";\nimport OutletComponent from \"./components/outlet\";\nimport SidebarComponent from \"./components/sidebar\";\nimport TopbarComponent from \"./components/topbar\";\n\nexport type LayoutComponentType =\n  | \"breadcrumbs\"\n  | \"callouts\"\n  | \"dropdown\"\n  | \"menu\"\n  | \"menu-item\"\n  | \"outlet\"\n  | \"sidebar\"\n  | \"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  } satisfies ComponentRegistryFor<LayoutComponentType>,\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;;AAwBA,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/notifications/api.d.ts

@@ -1,4 +1,4 @@
-import { NotificationsResponse, UnreadCountResponse } from './types';
+import { NotificationsResponse, UnreadCountResponse } from './types.js';
 export declare function fetchNotifications(endpoint: string, page?: number): Promise<NotificationsResponse>;
 export declare function markRead(endpoint: string, id: string): Promise<UnreadCountResponse>;
 export declare function markAllRead(endpoint: string): Promise<UnreadCountResponse>;

package/dist/notifications/components/notification-item.d.ts

@@ -1,4 +1,4 @@
-import { NotificationItem } from '../types';
+import { NotificationItem } from '../types.js';
 export declare function NotificationItemRow({ notification, onMarkRead, onDismiss, }: {
     notification: NotificationItem;
     onMarkRead: (id: string) => void;

package/dist/notifications/components/notification-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-item.js","names":[],"sources":["../../../resources/js/notifications/components/notification-item.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { NotificationItem } from \"../types\";\n\nconst variantIconClass: Record<NonNullable<NotificationItem[\"variant\"]>, string> = {\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  error: \"text-lt-danger\",\n};\n\nexport function NotificationItemRow({\n  notification,\n  onMarkRead,\n  onDismiss,\n}: {\n  notification: NotificationItem;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  const content = (\n    <>\n      {notification.title ? (\n        <p className=\"truncate text-sm font-medium text-lt-fg\">{notification.title}</p>\n      ) : null}\n      {notification.body ? <p className=\"text-sm text-lt-muted-fg\">{notification.body}</p> : null}\n    </>\n  );\n\n  return (\n    <li\n      className={cn(\"flex gap-3 px-3 py-3\", !notification.isRead && \"bg-lt-muted/40\")}\n      data-test=\"notification\"\n    >\n      {notification.icon ? (\n        <IconRenderer\n          icon={notification.icon}\n          className={cn(\n            \"mt-0.5 size-lt-icon-md\",\n            notification.variant ? variantIconClass[notification.variant] : undefined,\n          )}\n        />\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {notification.href ? (\n          <Link\n            href={notification.href}\n            className=\"block\"\n            data-test=\"notification-link\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {content}\n          </Link>\n        ) : (\n          content\n        )}\n        {notification.actions.length > 0 ? (\n          <div className=\"mt-2 flex flex-wrap gap-2\">\n            {notification.actions.map((node, index) => (\n              <RenderNode key={node.key ?? node.id ?? `action-${index}`} node={node} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex shrink-0 flex-col gap-1\">\n        {!notification.isRead ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {t(\"notifications.mark-read\", \"Mark read\")}\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          aria-label={t(\"notifications.dismiss\", \"Dismiss\")}\n          className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n          onClick={() => onDismiss(notification.id)}\n        >\n          {t(\"notifications.dismiss\", \"Dismiss\")}\n        </button>\n      </div>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,mBAA6E;CACjF,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT;AAEA,SAAgB,oBAAoB,EAClC,cACA,YACA,aAKC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,QACZ,oBAAC,KAAD;EAAG,WAAU;YAA2C,aAAa;CAAS,CAAA,IAC5E,MACH,aAAa,OAAO,oBAAC,KAAD;EAAG,WAAU;YAA4B,aAAa;CAAQ,CAAA,IAAI,IACvF,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,wBAAwB,CAAC,aAAa,UAAU,gBAAgB;EAC9E,aAAU;YAFZ;GAIG,aAAa,OACZ,oBAAC,cAAD;IACE,MAAM,aAAa;IACnB,WAAW,GACT,0BACA,aAAa,UAAU,iBAAiB,aAAa,WAAW,KAAA,CAClE;GACD,CAAA,IACC;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,aAAa,OACZ,oBAAC,MAAD;KACE,MAAM,aAAa;KACnB,WAAU;KACV,aAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC;IACG,CAAA,IAEN,SAED,aAAa,QAAQ,SAAS,IAC7B,oBAAC,OAAD;KAAK,WAAU;eACZ,aAAa,QAAQ,KAAK,MAAM,UAC/B,oBAAC,YAAD,EAAiE,KAAO,GAAvD,KAAK,OAAO,KAAK,MAAM,UAAU,OAAsB,CACzE;IACE,CAAA,IACH,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,aAAa,SACb,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC,EAAE,2BAA2B,WAAW;IACnC,CAAA,IACN,MACJ,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,yBAAyB,SAAS;KAChD,WAAU;KACV,eAAe,UAAU,aAAa,EAAE;eAEvC,EAAE,yBAAyB,SAAS;IAC/B,CAAA,CACL;;EACH;;AAER"}
+{"version":3,"file":"notification-item.js","names":[],"sources":["../../../resources/js/notifications/components/notification-item.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\n\nconst variantIconClass: Record<NonNullable<NotificationItem[\"variant\"]>, string> = {\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  error: \"text-lt-danger\",\n};\n\nexport function NotificationItemRow({\n  notification,\n  onMarkRead,\n  onDismiss,\n}: {\n  notification: NotificationItem;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  const content = (\n    <>\n      {notification.title ? (\n        <p className=\"truncate text-sm font-medium text-lt-fg\">{notification.title}</p>\n      ) : null}\n      {notification.body ? <p className=\"text-sm text-lt-muted-fg\">{notification.body}</p> : null}\n    </>\n  );\n\n  return (\n    <li\n      className={cn(\"flex gap-3 px-3 py-3\", !notification.isRead && \"bg-lt-muted/40\")}\n      data-test=\"notification\"\n    >\n      {notification.icon ? (\n        <IconRenderer\n          icon={notification.icon}\n          className={cn(\n            \"mt-0.5 size-lt-icon-md\",\n            notification.variant ? variantIconClass[notification.variant] : undefined,\n          )}\n        />\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {notification.href ? (\n          <Link\n            href={notification.href}\n            className=\"block\"\n            data-test=\"notification-link\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {content}\n          </Link>\n        ) : (\n          content\n        )}\n        {notification.actions.length > 0 ? (\n          <div className=\"mt-2 flex flex-wrap gap-2\">\n            {notification.actions.map((node, index) => (\n              <RenderNode key={node.key ?? node.id ?? `action-${index}`} node={node} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex shrink-0 flex-col gap-1\">\n        {!notification.isRead ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {t(\"notifications.mark-read\", \"Mark read\")}\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          aria-label={t(\"notifications.dismiss\", \"Dismiss\")}\n          className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n          onClick={() => onDismiss(notification.id)}\n        >\n          {t(\"notifications.dismiss\", \"Dismiss\")}\n        </button>\n      </div>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,mBAA6E;CACjF,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT;AAEA,SAAgB,oBAAoB,EAClC,cACA,YACA,aAKC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,QACZ,oBAAC,KAAD;EAAG,WAAU;YAA2C,aAAa;CAAS,CAAA,IAC5E,MACH,aAAa,OAAO,oBAAC,KAAD;EAAG,WAAU;YAA4B,aAAa;CAAQ,CAAA,IAAI,IACvF,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,wBAAwB,CAAC,aAAa,UAAU,gBAAgB;EAC9E,aAAU;YAFZ;GAIG,aAAa,OACZ,oBAAC,cAAD;IACE,MAAM,aAAa;IACnB,WAAW,GACT,0BACA,aAAa,UAAU,iBAAiB,aAAa,WAAW,KAAA,CAClE;GACD,CAAA,IACC;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,aAAa,OACZ,oBAAC,MAAD;KACE,MAAM,aAAa;KACnB,WAAU;KACV,aAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC;IACG,CAAA,IAEN,SAED,aAAa,QAAQ,SAAS,IAC7B,oBAAC,OAAD;KAAK,WAAU;eACZ,aAAa,QAAQ,KAAK,MAAM,UAC/B,oBAAC,YAAD,EAAiE,KAAO,GAAvD,KAAK,OAAO,KAAK,MAAM,UAAU,OAAsB,CACzE;IACE,CAAA,IACH,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,aAAa,SACb,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC,EAAE,2BAA2B,WAAW;IACnC,CAAA,IACN,MACJ,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,yBAAyB,SAAS;KAChD,WAAU;KACV,eAAe,UAAU,aAAa,EAAE;eAEvC,EAAE,yBAAyB,SAAS;IAC/B,CAAA,CACL;;EACH;;AAER"}

package/dist/notifications/components/notification-list.d.ts

@@ -1,5 +1,5 @@
-import { NotificationItem } from '../types';
-import { NotificationsStatus } from '../store';
+import { NotificationItem } from '../types.js';
+import { NotificationsStatus } from '../store.js';
 export declare function NotificationList({ notifications, status, hasMore, onMarkRead, onDismiss, onLoadMore, }: {
     notifications: NotificationItem[];
     status: NotificationsStatus;

package/dist/notifications/components/notification-list.js

@@ -1,5 +1,5 @@
 import { useT } from "../../i18n/instance.js";
-import { Skeleton } from "../../core/components/skeleton.js";
+import { Skeleton } from "../../ui/skeleton.js";
 import { EmptyState } from "./empty-state.js";
 import { NotificationItemRow } from "./notification-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/notifications/components/notification-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-list.js","names":[],"sources":["../../../resources/js/notifications/components/notification-list.tsx"],"sourcesContent":["import { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { NotificationItem } from \"../types\";\nimport type { NotificationsStatus } from \"../store\";\nimport { EmptyState } from \"./empty-state\";\nimport { NotificationItemRow } from \"./notification-item\";\n\nexport function NotificationList({\n  notifications,\n  status,\n  hasMore,\n  onMarkRead,\n  onDismiss,\n  onLoadMore,\n}: {\n  notifications: NotificationItem[];\n  status: NotificationsStatus;\n  hasMore: boolean;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n  onLoadMore: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (status === \"loading\" && notifications.length === 0) {\n    return (\n      <div className=\"space-y-2 p-3\">\n        <Skeleton className=\"h-12 w-full\" />\n        <Skeleton className=\"h-12 w-full\" />\n        <Skeleton className=\"h-12 w-full\" />\n      </div>\n    );\n  }\n\n  if (notifications.length === 0) {\n    return <EmptyState />;\n  }\n\n  return (\n    <div className=\"max-h-96 overflow-y-auto\">\n      <ul className=\"divide-y divide-lt-border\">\n        {notifications.map((notification) => (\n          <NotificationItemRow\n            key={notification.id}\n            notification={notification}\n            onMarkRead={onMarkRead}\n            onDismiss={onDismiss}\n          />\n        ))}\n      </ul>\n      {hasMore ? (\n        <button\n          type=\"button\"\n          className=\"w-full py-2 text-sm text-lt-muted-fg hover:text-lt-fg\"\n          onClick={onLoadMore}\n        >\n          {t(\"notifications.load-more\", \"Load more\")}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,iBAAiB,EAC/B,eACA,QACA,SACA,YACA,WACA,cAQC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,WAAW,aAAa,cAAc,WAAW,GACnD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;GACnC,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;GACnC,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;EAChC;;CAIT,IAAI,cAAc,WAAW,GAC3B,OAAO,oBAAC,YAAD,CAAa,CAAA;CAGtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,MAAD;GAAI,WAAU;aACX,cAAc,KAAK,iBAClB,oBAAC,qBAAD;IAEgB;IACF;IACD;GACZ,GAJM,aAAa,EAInB,CACF;EACC,CAAA,GACH,UACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;aAER,EAAE,2BAA2B,WAAW;EACnC,CAAA,IACN,IACD;;AAET"}
+{"version":3,"file":"notification-list.js","names":[],"sources":["../../../resources/js/notifications/components/notification-list.tsx"],"sourcesContent":["import { Skeleton } from \"@lattice-php/lattice/ui/skeleton\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport type { NotificationsStatus } from \"@lattice-php/lattice/notifications/store\";\nimport { EmptyState } from \"./empty-state\";\nimport { NotificationItemRow } from \"./notification-item\";\n\nexport function NotificationList({\n  notifications,\n  status,\n  hasMore,\n  onMarkRead,\n  onDismiss,\n  onLoadMore,\n}: {\n  notifications: NotificationItem[];\n  status: NotificationsStatus;\n  hasMore: boolean;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n  onLoadMore: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (status === \"loading\" && notifications.length === 0) {\n    return (\n      <div className=\"space-y-2 p-3\">\n        <Skeleton className=\"h-12 w-full\" />\n        <Skeleton className=\"h-12 w-full\" />\n        <Skeleton className=\"h-12 w-full\" />\n      </div>\n    );\n  }\n\n  if (notifications.length === 0) {\n    return <EmptyState />;\n  }\n\n  return (\n    <div className=\"max-h-96 overflow-y-auto\">\n      <ul className=\"divide-y divide-lt-border\">\n        {notifications.map((notification) => (\n          <NotificationItemRow\n            key={notification.id}\n            notification={notification}\n            onMarkRead={onMarkRead}\n            onDismiss={onDismiss}\n          />\n        ))}\n      </ul>\n      {hasMore ? (\n        <button\n          type=\"button\"\n          className=\"w-full py-2 text-sm text-lt-muted-fg hover:text-lt-fg\"\n          onClick={onLoadMore}\n        >\n          {t(\"notifications.load-more\", \"Load more\")}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,iBAAiB,EAC/B,eACA,QACA,SACA,YACA,WACA,cAQC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,WAAW,aAAa,cAAc,WAAW,GACnD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;GACnC,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;GACnC,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;EAChC;;CAIT,IAAI,cAAc,WAAW,GAC3B,OAAO,oBAAC,YAAD,CAAa,CAAA;CAGtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,MAAD;GAAI,WAAU;aACX,cAAc,KAAK,iBAClB,oBAAC,qBAAD;IAEgB;IACF;IACD;GACZ,GAJM,aAAa,EAInB,CACF;EACC,CAAA,GACH,UACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;aAER,EAAE,2BAA2B,WAAW;EACnC,CAAA,IACN,IACD;;AAET"}

package/dist/notifications/components/notifications-echo.d.ts

@@ -1,4 +1,4 @@
-import { NotificationItem } from '../types';
+import { NotificationItem } from '../types.js';
 export declare function NotificationsEcho({ channel, onReceive, }: {
     channel: string;
     onReceive: (item: NotificationItem) => void;

package/dist/notifications/components/notifications-echo.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications-echo.js","names":[],"sources":["../../../resources/js/notifications/components/notifications-echo.tsx"],"sourcesContent":["import { useEchoNotification } from \"@laravel/echo-react\";\nimport type { NotificationItem } from \"../types\";\n\nexport function NotificationsEcho({\n  channel,\n  onReceive,\n}: {\n  channel: string;\n  onReceive: (item: NotificationItem) => void;\n}) {\n  useEchoNotification<Partial<NotificationItem>>(channel, (payload) => {\n    onReceive({\n      id: payload.id,\n      title: payload.title ?? null,\n      body: payload.body ?? null,\n      icon: payload.icon ?? null,\n      variant: payload.variant ?? null,\n      href: payload.href ?? null,\n      isRead: false,\n      createdAt: null,\n      actions: [],\n    });\n  });\n\n  return null;\n}\n"],"mappings":";;AAGA,SAAgB,kBAAkB,EAChC,SACA,aAIC;CACD,oBAA+C,UAAU,YAAY;EACnE,UAAU;GACR,IAAI,QAAQ;GACZ,OAAO,QAAQ,SAAS;GACxB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ,QAAQ;GACtB,SAAS,QAAQ,WAAW;GAC5B,MAAM,QAAQ,QAAQ;GACtB,QAAQ;GACR,WAAW;GACX,SAAS,CAAC;EACZ,CAAC;CACH,CAAC;CAED,OAAO;AACT"}
+{"version":3,"file":"notifications-echo.js","names":[],"sources":["../../../resources/js/notifications/components/notifications-echo.tsx"],"sourcesContent":["import { useEchoNotification } from \"@laravel/echo-react\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\n\nexport function NotificationsEcho({\n  channel,\n  onReceive,\n}: {\n  channel: string;\n  onReceive: (item: NotificationItem) => void;\n}) {\n  useEchoNotification<Partial<NotificationItem>>(channel, (payload) => {\n    onReceive({\n      id: payload.id,\n      title: payload.title ?? null,\n      body: payload.body ?? null,\n      icon: payload.icon ?? null,\n      variant: payload.variant ?? null,\n      href: payload.href ?? null,\n      isRead: false,\n      createdAt: null,\n      actions: [],\n    });\n  });\n\n  return null;\n}\n"],"mappings":";;AAGA,SAAgB,kBAAkB,EAChC,SACA,aAIC;CACD,oBAA+C,UAAU,YAAY;EACnE,UAAU;GACR,IAAI,QAAQ;GACZ,OAAO,QAAQ,SAAS;GACxB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ,QAAQ;GACtB,SAAS,QAAQ,WAAW;GAC5B,MAAM,QAAQ,QAAQ;GACtB,QAAQ;GACR,WAAW;GACX,SAAS,CAAC;EACZ,CAAC;CACH,CAAC;CAED,OAAO;AACT"}

package/dist/notifications/components/notifications.d.ts

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

package/dist/notifications/components/notifications.js

@@ -1,8 +1,8 @@
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../core/components/popover.js";
-import { Dialog, DialogContent, DialogTitle } from "../../core/components/dialog.js";
-import { Badge } from "../../core/components/badge.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { Dialog, DialogContent, DialogTitle } from "../../ui/dialog.js";
+import { Badge } from "../../ui/badge.js";
 import { useNotifications } from "../store.js";
 import { NotificationList } from "./notification-list.js";
 import { Component, Suspense, lazy } from "react";

package/dist/notifications/components/notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import { Component, lazy, Suspense, type ReactNode } from \"react\";\nimport { Badge } from \"@lattice-php/lattice/core/components/badge\";\nimport { Dialog, DialogContent, DialogTitle } from \"@lattice-php/lattice/core/components/dialog\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useNotifications } from \"../store\";\nimport type { NotificationItem } from \"../types\";\nimport { NotificationList } from \"./notification-list\";\n\nconst NotificationsEcho = lazy(() =>\n  import(\"./notifications-echo\").then((m) => ({ default: m.NotificationsEcho })),\n);\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] The notifications bell declares a realtime channel 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\nconst NotificationsComponent: RendererComponent<\"notifications\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const store = useNotifications({\n    endpoint: node.props.endpoint,\n    pollingInterval: node.props.pollingInterval,\n  });\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const trigger = (\n    <span className=\"relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted\">\n      <Icon name=\"bell\" className=\"size-lt-icon-md\" />\n      {store.unreadCount > 0 ? (\n        <Badge\n          variant=\"destructive\"\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 min-w-4 px-1 py-0 text-[10px]\"\n        >\n          {store.unreadCount}\n        </Badge>\n      ) : null}\n    </span>\n  );\n\n  const panel = (\n    <div className=\"w-80\" data-test=\"notifications-panel\">\n      <div className=\"flex items-center justify-between border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium\">{t(\"notifications.heading\", \"Notifications\")}</span>\n        {store.unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={store.markAllRead}\n          >\n            {t(\"notifications.mark-all-read\", \"Mark all read\")}\n          </button>\n        ) : null}\n      </div>\n      <NotificationList\n        notifications={store.notifications}\n        status={store.status}\n        hasMore={store.hasMore}\n        onMarkRead={store.markRead}\n        onDismiss={store.dismiss}\n        onLoadMore={store.loadMore}\n      />\n    </div>\n  );\n\n  return (\n    <>\n      {node.props.channel ? (\n        <EchoBoundary>\n          <Suspense fallback={null}>\n            <NotificationsEcho\n              channel={node.props.channel}\n              onReceive={(item: NotificationItem) => store.receive(item)}\n            />\n          </Suspense>\n        </EchoBoundary>\n      ) : null}\n\n      {node.props.slideOut ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label={label}\n            data-test=\"notifications-trigger\"\n            onClick={() => store.setOpen(true)}\n          >\n            {trigger}\n          </button>\n          <Dialog open={store.open} onOpenChange={store.setOpen}>\n            <DialogContent className=\"fixed left-auto right-0 top-0 h-full w-96 max-w-full translate-x-0 translate-y-0 overflow-y-auto p-0\">\n              <DialogTitle className=\"sr-only\">{label}</DialogTitle>\n              {panel}\n            </DialogContent>\n          </Dialog>\n        </>\n      ) : (\n        <PopoverRoot open={store.open} onOpenChange={store.setOpen}>\n          <PopoverTrigger asChild>\n            <button type=\"button\" aria-label={label} data-test=\"notifications-trigger\">\n              {trigger}\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"p-0\">\n            {panel}\n          </PopoverContent>\n        </PopoverRoot>\n      )}\n    </>\n  );\n};\n\nexport default NotificationsComponent;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,oBAAoB,WACxB,OAAO,2BAAwB,MAAM,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAC/E;AAEA,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,6IACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;AAEA,IAAM,0BAA8D,EAAE,WAAW;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,iBAAiB;EAC7B,UAAU,KAAK,MAAM;EACrB,iBAAiB,KAAK,MAAM;CAC9B,CAAC;CAED,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,OAAD;GACE,SAAQ;GACR,aAAU;GACV,WAAU;aAET,MAAM;EACF,CAAA,IACL,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;YAAhC,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuB,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;cAEd,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;MACL,oBAAC,kBAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;EACnB,CAAA,CACE;;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,MAAM,UACV,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,eAAe,MAAM,QAAQ,IAAI;YAEhC;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;YAC5C,qBAAC,eAAD;GAAe,WAAU;aAAzB,CACE,oBAAC,aAAD;IAAa,WAAU;cAAW;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;YAAnD,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;cAChD;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;aACnC;EACa,CAAA,CACL;GAEf,EAAA,CAAA;AAEN"}
+{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import { Component, lazy, Suspense, type ReactNode } from \"react\";\nimport { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport { Dialog, DialogContent, DialogTitle } from \"@lattice-php/lattice/ui/dialog\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useNotifications } from \"@lattice-php/lattice/notifications/store\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport { NotificationList } from \"./notification-list\";\n\nconst NotificationsEcho = lazy(() =>\n  import(\"./notifications-echo\").then((m) => ({ default: m.NotificationsEcho })),\n);\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] The notifications bell declares a realtime channel 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\nconst NotificationsComponent: RendererComponent<\"notifications\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const store = useNotifications({\n    endpoint: node.props.endpoint,\n    pollingInterval: node.props.pollingInterval,\n  });\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const trigger = (\n    <span className=\"relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted\">\n      <Icon name=\"bell\" className=\"size-lt-icon-md\" />\n      {store.unreadCount > 0 ? (\n        <Badge\n          variant=\"destructive\"\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 min-w-4 px-1 py-0 text-[10px]\"\n        >\n          {store.unreadCount}\n        </Badge>\n      ) : null}\n    </span>\n  );\n\n  const panel = (\n    <div className=\"w-80\" data-test=\"notifications-panel\">\n      <div className=\"flex items-center justify-between border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium\">{t(\"notifications.heading\", \"Notifications\")}</span>\n        {store.unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={store.markAllRead}\n          >\n            {t(\"notifications.mark-all-read\", \"Mark all read\")}\n          </button>\n        ) : null}\n      </div>\n      <NotificationList\n        notifications={store.notifications}\n        status={store.status}\n        hasMore={store.hasMore}\n        onMarkRead={store.markRead}\n        onDismiss={store.dismiss}\n        onLoadMore={store.loadMore}\n      />\n    </div>\n  );\n\n  return (\n    <>\n      {node.props.channel ? (\n        <EchoBoundary>\n          <Suspense fallback={null}>\n            <NotificationsEcho\n              channel={node.props.channel}\n              onReceive={(item: NotificationItem) => store.receive(item)}\n            />\n          </Suspense>\n        </EchoBoundary>\n      ) : null}\n\n      {node.props.slideOut ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label={label}\n            data-test=\"notifications-trigger\"\n            onClick={() => store.setOpen(true)}\n          >\n            {trigger}\n          </button>\n          <Dialog open={store.open} onOpenChange={store.setOpen}>\n            <DialogContent className=\"fixed left-auto right-0 top-0 h-full w-96 max-w-full translate-x-0 translate-y-0 overflow-y-auto p-0\">\n              <DialogTitle className=\"sr-only\">{label}</DialogTitle>\n              {panel}\n            </DialogContent>\n          </Dialog>\n        </>\n      ) : (\n        <PopoverRoot open={store.open} onOpenChange={store.setOpen}>\n          <PopoverTrigger asChild>\n            <button type=\"button\" aria-label={label} data-test=\"notifications-trigger\">\n              {trigger}\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"p-0\">\n            {panel}\n          </PopoverContent>\n        </PopoverRoot>\n      )}\n    </>\n  );\n};\n\nexport default NotificationsComponent;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,oBAAoB,WACxB,OAAO,2BAAwB,MAAM,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAC/E;AAEA,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,6IACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;AAEA,IAAM,0BAA8D,EAAE,WAAW;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,iBAAiB;EAC7B,UAAU,KAAK,MAAM;EACrB,iBAAiB,KAAK,MAAM;CAC9B,CAAC;CAED,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,OAAD;GACE,SAAQ;GACR,aAAU;GACV,WAAU;aAET,MAAM;EACF,CAAA,IACL,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;YAAhC,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuB,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;cAEd,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;MACL,oBAAC,kBAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;EACnB,CAAA,CACE;;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,MAAM,UACV,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,eAAe,MAAM,QAAQ,IAAI;YAEhC;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;YAC5C,qBAAC,eAAD;GAAe,WAAU;aAAzB,CACE,oBAAC,aAAD;IAAa,WAAU;cAAW;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;YAAnD,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;cAChD;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;aACnC;EACa,CAAA,CACL;GAEf,EAAA,CAAA;AAEN"}

package/dist/notifications/index.d.ts

@@ -1 +1,2 @@
-export declare const notificationsComponents: import('../core/registry').Plugin;
+export { notificationsComponents } from './plugin.js';
+export type * from './types.js';

package/dist/notifications/index.js

@@ -1,11 +1,2 @@
-import { createPlugin, eagerComponent } from "../core/registry.js";
-import NotificationsComponent from "./components/notifications.js";
-//#region resources/js/notifications/index.ts
-var notificationsComponents = createPlugin({
-	name: "lattice/notifications",
-	components: { notifications: eagerComponent(NotificationsComponent) }
-});
-//#endregion
+import { notificationsComponents } from "./plugin.js";
 export { notificationsComponents };
-
-//# sourceMappingURL=index.js.map

package/dist/notifications/plugin.d.ts

@@ -0,0 +1,2 @@
+export type NotificationsComponentType = "notifications";
+export declare const notificationsComponents: import('../core/registry.js').Plugin;

package/dist/notifications/plugin.js

@@ -0,0 +1,11 @@
+import { createPlugin, eagerComponent } from "../core/registry.js";
+import NotificationsComponent from "./components/notifications.js";
+//#region resources/js/notifications/plugin.ts
+var notificationsComponents = createPlugin({
+	name: "lattice/notifications",
+	components: { notifications: eagerComponent(NotificationsComponent) }
+});
+//#endregion
+export { notificationsComponents };
+
+//# sourceMappingURL=plugin.js.map

package/dist/notifications/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/notifications/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport NotificationsComponent from \"./components/notifications\";\n\nexport type NotificationsComponentType = \"notifications\";\n\nexport const notificationsComponents = createPlugin({\n  name: \"lattice/notifications\",\n  components: {\n    notifications: eagerComponent(NotificationsComponent),\n  } satisfies ComponentRegistryFor<NotificationsComponentType>,\n});\n"],"mappings":";;;AASA,IAAa,0BAA0B,aAAa;CAClD,MAAM;CACN,YAAY,EACV,eAAe,eAAe,sBAAsB,EACtD;AACF,CAAC"}

package/dist/notifications/store.d.ts

@@ -1,4 +1,4 @@
-import { NotificationItem } from './types';
+import { NotificationItem } from './types.js';
 export declare function prependIncoming(list: NotificationItem[], item: NotificationItem): NotificationItem[];
 export declare function markReadIn(list: NotificationItem[], id: string): NotificationItem[];
 export declare function removeIn(list: NotificationItem[], id: string): NotificationItem[];

package/dist/notifications/types.d.ts

@@ -1,4 +1,4 @@
-import { NotificationItem } from '../types/generated';
+import { NotificationItem } from '../types/generated.js';
 export type { NotificationItem };
 export type NotificationsResponse = {
     notifications: NotificationItem[];

package/dist/page.d.ts

@@ -1,4 +1,4 @@
-import { PagePayload } from '.';
+import { PagePayload } from './index.js';
 type Props = {
     lattice: PagePayload;
 };

package/dist/provider-base.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Registry } from './core/registry';
-import { SpriteValue } from './icons/sprite';
+import { Registry } from './core/registry.js';
+import { SpriteValue } from './icons/sprite.js';
 export type ProviderBaseProps = {
     children: ReactNode;
     registry: Registry;

package/dist/provider-base.js

@@ -1,9 +1,10 @@
 import { updateAppearance } from "./appearance/index.js";
 import { RegistryContext } from "./core/registry-context.js";
 import { SpriteProvider } from "./icons/sprite.js";
-import { EventBridge } from "./events/event-bridge.js";
-import { useFlashEffects } from "./effects/use-flash-effects.js";
+import { EventBridge } from "./event-bridge.js";
 import { Toaster } from "./toast/toaster.js";
+import { ActionInteractionProvider } from "./action/components/action-trigger-provider.js";
+import { useFlashEffects } from "./effects/use-flash-effects.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/provider-base.tsx
 var defaultSprite = { href: "" };
@@ -11,14 +12,14 @@ function ProviderBase({ children, registry, sprite = defaultSprite, toaster = tr
 	useFlashEffects();
 	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
 		value: registry,
-		children: /* @__PURE__ */ jsxs(SpriteProvider, {
+		children: /* @__PURE__ */ jsx(ActionInteractionProvider, { children: /* @__PURE__ */ jsxs(SpriteProvider, {
 			sprite,
 			children: [
 				children,
 				/* @__PURE__ */ jsx(EventBridge, { onAppearanceChange: updateAppearance }),
 				toaster ? /* @__PURE__ */ jsx(Toaster, {}) : null
 			]
-		})
+		}) })
 	});
 }
 //#endregion