@lattice-php/lattice 0.20.0 → 0.22.0

package/dist/index.js

@@ -1,17 +1,16 @@
 import { initializeTheme, updateAppearance, useAppearance } from "./appearance/index.js";
 import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
 import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
-import { LATTICE_EVENT } from "./events/event-names.js";
-import { onToast, showToast } from "./toast/toast.js";
-import { onCallout } from "./toast/callout.js";
+import { LATTICE_EVENT } from "./core/event-names.js";
+import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
+import { withHeaders } from "./core/headers.js";
 import { Icon, SpriteProvider } from "./icons/sprite.js";
 import { IconRenderer, IconRendererProvider } from "./icons/icon-renderer.js";
 import { CollapsedContext, useCollapsed } from "./core/collapsed-context.js";
 import { Renderer } from "./core/renderer.js";
+import { onToast } from "./toast/toast.js";
+import { onCallout } from "./toast/callout.js";
 import { Toaster } from "./toast/toaster.js";
-import { EventBridge } from "./event-bridge.js";
-import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
-import { withHeaders } from "./core/headers.js";
 import Callouts from "./layout/components/callouts.js";
 import { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from "./effects/registry.js";
 import { dispatchActionError, dispatchEffects, getActionEffects, isActionEffect } from "./effects/dispatch.js";
@@ -21,6 +20,7 @@ import { layoutComponents } from "./layout/plugin.js";
 import SchemaLayout from "./layout/components/schema-layout.js";
 import { RealtimeListeners } from "./realtime/listeners.js";
 import { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders } from "./inertia.js";
+import { EventBridge } from "./event-bridge.js";
 import { useChat } from "./chat/hooks/use-chat.js";
 import { chatComponents } from "./chat/plugin.js";
 import { copyToClipboard } from "./ui/copyable-text.js";
@@ -28,6 +28,5 @@ import { columnCell } from "./table/registry.js";
 import { registry } from "./registry.js";
 import { createLatticeApp } from "./create-app.js";
 import { registerRichEditorExtension } from "./form/rich-editor/registry.js";
-import { useClipboard } from "./clipboard/index.js";
 import { Provider } from "./provider.js";
-export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatComponents, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registerRichEditorExtension, registry, showToast, updateAppearance, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
+export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatComponents, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registerRichEditorExtension, registry, updateAppearance, useAppearance, useChat, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };

package/dist/lattice.css

@@ -85,6 +85,7 @@
 
   --lt-duration-fast: 120ms;
   --lt-duration-base: 160ms;
+  --lt-duration-slow: 240ms;
 
   --lt-sidebar-w: 16rem;
   --lt-sidebar-w-collapsed: 4rem;
@@ -96,6 +97,20 @@
   color-scheme: light;
 }
 
+/*
+ * Radix keeps dialogs mounted until their exit animation ends, so reduced
+ * motion zeroes the durations instead of removing the animations — the
+ * animation events still fire and close stays instant.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme="light"] {
+    --lt-duration-fast: 0ms;
+    --lt-duration-base: 0ms;
+    --lt-duration-slow: 0ms;
+  }
+}
+
 [data-theme="dark"],
 .dark {
   --lt-bg: var(--background, oklch(0.145 0 0));
@@ -205,6 +220,14 @@
   --font-weight-lt-bold: var(--lt-font-weight-bold);
   --animate-lt-toast-in: lt-toast-in var(--lt-duration-base) ease-out;
   --animate-lt-toast-out: lt-toast-out var(--lt-duration-fast) ease-in;
+  --animate-lt-fade-in: lt-fade-in var(--lt-duration-base) ease-out;
+  --animate-lt-fade-out: lt-fade-out var(--lt-duration-fast) ease-in;
+  --animate-lt-dialog-in: lt-dialog-in var(--lt-duration-base) ease-out;
+  --animate-lt-dialog-out: lt-dialog-out var(--lt-duration-fast) ease-in;
+  --animate-lt-sheet-in-start: lt-sheet-in-start var(--lt-duration-slow) ease-out;
+  --animate-lt-sheet-out-start: lt-sheet-out-start var(--lt-duration-fast) ease-in;
+  --animate-lt-sheet-in-end: lt-sheet-in-end var(--lt-duration-slow) ease-out;
+  --animate-lt-sheet-out-end: lt-sheet-out-end var(--lt-duration-fast) ease-in;
 }
 
 @theme {
@@ -285,6 +308,88 @@
   }
 }
 
+@keyframes lt-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lt-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Centering uses Tailwind's standalone translate property, which composes
+   with transform — so these keyframes may only animate opacity and scale,
+   never a translate of their own. */
+@keyframes lt-dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes lt-dialog-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+/* Sheet slides are physical (translateX): under RTL a sheet docks to the
+   correct logical edge but enters from the mirrored side. Shipped locales
+   are LTR. */
+@keyframes lt-sheet-in-start {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes lt-sheet-out-start {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes lt-sheet-in-end {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes lt-sheet-out-end {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 /*
  * Named colours. Semantic names alias the theme tokens; hue names carry their
  * own oklch values with `.dark` overrides. Renderers resolve a named colour to

package/dist/layout/components/callouts.js

@@ -1,7 +1,7 @@
-import { onCallout } from "../../toast/callout.js";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.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";

package/dist/layout/components/sidebar.js

@@ -1,70 +1,37 @@
-import { LATTICE_EVENT } from "../../events/event-names.js";
+import { LATTICE_EVENT } from "../../core/event-names.js";
+import { useWindowEvent } from "../../core/hooks/use-window-event.js";
 import { cn } from "../../lib/utils.js";
 import { CollapsedContext } from "../../core/collapsed-context.js";
 import { nodeIdentity } from "../../core/test-id.js";
+import { useMediaQuery } from "../../lib/use-media-query.js";
+import { useCollapsibleState } from "../../ui/use-collapsible-state.js";
 import { router } from "@inertiajs/react";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/components/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 identity = nodeIdentity(node);
 	const storageKey = `lattice:sidebar:${identity ?? "default"}`;
-	const isDesktop = useIsDesktop();
-	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState));
+	const isDesktop = useMediaQuery(DESKTOP_QUERY, true);
+	const [collapsed, toggleCollapsed] = useCollapsibleState(storageKey, false, collapsible && rememberState);
 	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
-	]);
+	useWindowEvent(LATTICE_EVENT.toggleSidebar, (event) => {
+		if (!matchesTarget(event, identity)) return;
+		if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {
+			if (collapsible) toggleCollapsed();
+		} else setMobileOpen((open) => !open);
+	});
 	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]);
+	useWindowEvent("keydown", (event) => {
+		if (event.key === "Escape") setMobileOpen(false);
+	}, { enabled: mobileOpen });
 	const isCollapsed = collapsible && collapsed && isDesktop;
 	return /* @__PURE__ */ jsxs(CollapsedContext.Provider, {
 		value: isCollapsed,

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

@@ -1 +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"}
+{"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/core/event-names\";\nimport { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useMediaQuery } from \"@lattice-php/lattice/lib/use-media-query\";\nimport { useCollapsibleState } from \"@lattice-php/lattice/ui/use-collapsible-state\";\n\nconst DESKTOP_QUERY = \"(min-width: 768px)\";\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\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 = useMediaQuery(DESKTOP_QUERY, true);\n\n  const [collapsed, toggleCollapsed] = useCollapsibleState(\n    storageKey,\n    false,\n    collapsible && rememberState,\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  useWindowEvent(LATTICE_EVENT.toggleSidebar, (event) => {\n    if (!matchesTarget(event, identity)) {\n      return;\n    }\n\n    if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {\n      if (collapsible) {\n        toggleCollapsed();\n      }\n    } else {\n      setMobileOpen((open) => !open);\n    }\n  });\n\n  useEffect(() => router.on(\"navigate\", () => setMobileOpen(false)), []);\n\n  useWindowEvent(\n    \"keydown\",\n    (event) => {\n      if ((event as KeyboardEvent).key === \"Escape\") {\n        setMobileOpen(false);\n      }\n    },\n    { enabled: mobileOpen },\n  );\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":";;;;;;;;;;;AAWA,IAAM,gBAAgB;AAEtB,SAAS,cAAc,OAAc,UAAuC;CAC1E,MAAM,SAAU,MAA2C,QAAQ;CAEnE,OAAO,UAAU,QAAQ,WAAW;AACtC;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,cAAc,eAAe,IAAI;CAEnD,MAAM,CAAC,WAAW,mBAAmB,oBACnC,YACA,OACA,eAAe,aACjB;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,eAAe,cAAc,gBAAgB,UAAU;EACrD,IAAI,CAAC,cAAc,OAAO,QAAQ,GAChC;EAGF,IAAI,OAAO,aAAa,aAAa,EAAE,WAAW;OAC5C,aACF,gBAAgB;EAAA,OAGlB,eAAe,SAAS,CAAC,IAAI;CAEjC,CAAC;CAED,gBAAgB,OAAO,GAAG,kBAAkB,cAAc,KAAK,CAAC,GAAG,CAAC,CAAC;CAErE,eACE,YACC,UAAU;EACT,IAAK,MAAwB,QAAQ,UACnC,cAAc,KAAK;CAEvB,GACA,EAAE,SAAS,WAAW,CACxB;CAEA,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/plugin.d.ts

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

package/dist/layout/plugin.js.map

@@ -1 +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"}
+{"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 type { LayoutNodeType } from \"@lattice-php/lattice/types/generated\";\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 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<LayoutNodeType>,\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;;AAeA,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/lib/is-truthy.d.ts

@@ -0,0 +1,2 @@
+/** Coerce a wire value (boolean, `1`/`0`, `"1"`/`"true"`) to a boolean. */
+export declare function isTruthy(value: unknown): boolean;

package/dist/lib/is-truthy.js

@@ -0,0 +1,9 @@
+//#region resources/js/lib/is-truthy.ts
+/** Coerce a wire value (boolean, `1`/`0`, `"1"`/`"true"`) to a boolean. */
+function isTruthy(value) {
+	return value === true || value === 1 || value === "1" || value === "true";
+}
+//#endregion
+export { isTruthy };
+
+//# sourceMappingURL=is-truthy.js.map

package/dist/lib/is-truthy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-truthy.js","names":[],"sources":["../../resources/js/lib/is-truthy.ts"],"sourcesContent":["/** Coerce a wire value (boolean, `1`/`0`, `\"1\"`/`\"true\"`) to a boolean. */\nexport function isTruthy(value: unknown): boolean {\n  return value === true || value === 1 || value === \"1\" || value === \"true\";\n}\n"],"mappings":";;AACA,SAAgB,SAAS,OAAyB;CAChD,OAAO,UAAU,QAAQ,UAAU,KAAK,UAAU,OAAO,UAAU;AACrE"}

package/dist/lib/use-debounced-callback.d.ts

@@ -0,0 +1,10 @@
+export type DebouncedCallback<A extends unknown[]> = {
+    (...args: A): void;
+    cancel: () => void;
+};
+/**
+ * A debounced wrapper around `callback` that is stable across renders (it reads
+ * the latest callback via a ref) and clears its pending timer on unmount, so a
+ * late fire can never run against a torn-down component.
+ */
+export declare function useDebouncedCallback<A extends unknown[]>(callback: (...args: A) => void, delayMs: number): DebouncedCallback<A>;

package/dist/lib/use-debounced-callback.js

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+//#region resources/js/lib/use-debounced-callback.ts
+/**
+* A debounced wrapper around `callback` that is stable across renders (it reads
+* the latest callback via a ref) and clears its pending timer on unmount, so a
+* late fire can never run against a torn-down component.
+*/
+function useDebouncedCallback(callback, delayMs) {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const timerRef = useRef(null);
+	const cancel = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+	useEffect(() => cancel, [cancel]);
+	return useMemo(() => {
+		const debounced = (...args) => {
+			cancel();
+			timerRef.current = setTimeout(() => {
+				timerRef.current = null;
+				callbackRef.current(...args);
+			}, delayMs);
+		};
+		debounced.cancel = cancel;
+		return debounced;
+	}, [cancel, delayMs]);
+}
+//#endregion
+export { useDebouncedCallback };
+
+//# sourceMappingURL=use-debounced-callback.js.map

package/dist/lib/use-debounced-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-callback.js","names":[],"sources":["../../resources/js/lib/use-debounced-callback.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\n\nexport type DebouncedCallback<A extends unknown[]> = {\n  (...args: A): void;\n  cancel: () => void;\n};\n\n/**\n * A debounced wrapper around `callback` that is stable across renders (it reads\n * the latest callback via a ref) and clears its pending timer on unmount, so a\n * late fire can never run against a torn-down component.\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n  callback: (...args: A) => void,\n  delayMs: number,\n): DebouncedCallback<A> {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancel = useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => cancel, [cancel]);\n\n  return useMemo(() => {\n    const debounced = (...args: A): void => {\n      cancel();\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        callbackRef.current(...args);\n      }, delayMs);\n    };\n\n    debounced.cancel = cancel;\n\n    return debounced;\n  }, [cancel, delayMs]);\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,qBACd,UACA,SACsB;CACtB,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,MAAM,WAAW,OAA6C,IAAI;CAElE,MAAM,SAAS,kBAAkB;EAC/B,IAAI,SAAS,YAAY,MAAM;GAC7B,aAAa,SAAS,OAAO;GAC7B,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB,QAAQ,CAAC,MAAM,CAAC;CAEhC,OAAO,cAAc;EACnB,MAAM,aAAa,GAAG,SAAkB;GACtC,OAAO;GACP,SAAS,UAAU,iBAAiB;IAClC,SAAS,UAAU;IACnB,YAAY,QAAQ,GAAG,IAAI;GAC7B,GAAG,OAAO;EACZ;EAEA,UAAU,SAAS;EAEnB,OAAO;CACT,GAAG,CAAC,QAAQ,OAAO,CAAC;AACtB"}

package/dist/lib/use-media-query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Track a CSS media query. `fallback` is the SSR / no-`matchMedia` value and the
+ * initial state before the effect subscribes.
+ */
+export declare function useMediaQuery(query: string, fallback?: boolean): boolean;

package/dist/lib/use-media-query.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+//#region resources/js/lib/use-media-query.ts
+function matches(query, fallback) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return fallback;
+	return window.matchMedia(query).matches;
+}
+/**
+* Track a CSS media query. `fallback` is the SSR / no-`matchMedia` value and the
+* initial state before the effect subscribes.
+*/
+function useMediaQuery(query, fallback = false) {
+	const [state, setState] = useState(() => matches(query, fallback));
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const media = window.matchMedia(query);
+		const update = () => setState(media.matches);
+		update();
+		media.addEventListener("change", update);
+		return () => media.removeEventListener("change", update);
+	}, [query]);
+	return state;
+}
+//#endregion
+export { useMediaQuery };
+
+//# sourceMappingURL=use-media-query.js.map

package/dist/lib/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","names":[],"sources":["../../resources/js/lib/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nfunction matches(query: string, fallback: boolean): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return fallback;\n  }\n\n  return window.matchMedia(query).matches;\n}\n\n/**\n * Track a CSS media query. `fallback` is the SSR / no-`matchMedia` value and the\n * initial state before the effect subscribes.\n */\nexport function useMediaQuery(query: string, fallback = false): boolean {\n  const [state, setState] = useState(() => matches(query, fallback));\n\n  useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const media = window.matchMedia(query);\n    const update = (): void => setState(media.matches);\n\n    update();\n    media.addEventListener(\"change\", update);\n\n    return () => media.removeEventListener(\"change\", update);\n  }, [query]);\n\n  return state;\n}\n"],"mappings":";;AAEA,SAAS,QAAQ,OAAe,UAA4B;CAC1D,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,OAAO;CAGT,OAAO,OAAO,WAAW,KAAK,EAAE;AAClC;;;;;AAMA,SAAgB,cAAc,OAAe,WAAW,OAAgB;CACtE,MAAM,CAAC,OAAO,YAAY,eAAe,QAAQ,OAAO,QAAQ,CAAC;CAEjE,gBAAgB;EACd,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE;EAGF,MAAM,QAAQ,OAAO,WAAW,KAAK;EACrC,MAAM,eAAqB,SAAS,MAAM,OAAO;EAEjD,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EAEvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;AACT"}

package/dist/lib/use-persistent-state.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+export type PersistentStateOptions<T> = {
+    enabled?: boolean;
+    parse?: (raw: string) => T;
+    serialize?: (value: T) => string | null;
+};
+/**
+ * `useState` backed by `localStorage`. The SSR guard and read/write `try/catch`
+ * live here once; `parse`/`serialize` default to JSON. Persistence happens in
+ * the setter (not inside the state updater), so a StrictMode double-invoke never
+ * double-writes, and a `serialize` returning `null` removes the key.
+ */
+export declare function usePersistentState<T>(key: string, fallback: T | (() => T), options?: PersistentStateOptions<T>): [T, Dispatch<SetStateAction<T>>];

package/dist/lib/use-persistent-state.js

@@ -0,0 +1,62 @@
+import { useCallback, useRef, useState } from "react";
+//#region resources/js/lib/use-persistent-state.ts
+/**
+* `useState` backed by `localStorage`. The SSR guard and read/write `try/catch`
+* live here once; `parse`/`serialize` default to JSON. Persistence happens in
+* the setter (not inside the state updater), so a StrictMode double-invoke never
+* double-writes, and a `serialize` returning `null` removes the key.
+*/
+function usePersistentState(key, fallback, options = {}) {
+	const { enabled = true, parse, serialize } = options;
+	const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
+	const [value, setValue] = useState(() => {
+		if (!enabled || typeof window === "undefined") return resolveFallback();
+		let raw;
+		try {
+			raw = window.localStorage.getItem(key);
+		} catch {
+			return resolveFallback();
+		}
+		if (raw === null) return resolveFallback();
+		try {
+			return parse ? parse(raw) : JSON.parse(raw);
+		} catch {
+			try {
+				window.localStorage.removeItem(key);
+			} catch {
+				return resolveFallback();
+			}
+			return resolveFallback();
+		}
+	});
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	const persistRef = useRef({
+		enabled,
+		key,
+		serialize
+	});
+	persistRef.current = {
+		enabled,
+		key,
+		serialize
+	};
+	return [value, useCallback((action) => {
+		const next = typeof action === "function" ? action(valueRef.current) : action;
+		valueRef.current = next;
+		setValue(next);
+		const { enabled: on, key: storageKey, serialize: encode } = persistRef.current;
+		if (!on || typeof window === "undefined") return;
+		try {
+			const encoded = encode ? encode(next) : JSON.stringify(next);
+			if (encoded === null) window.localStorage.removeItem(storageKey);
+			else window.localStorage.setItem(storageKey, encoded);
+		} catch {
+			return;
+		}
+	}, [])];
+}
+//#endregion
+export { usePersistentState };
+
+//# sourceMappingURL=use-persistent-state.js.map

package/dist/lib/use-persistent-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-persistent-state.js","names":[],"sources":["../../resources/js/lib/use-persistent-state.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nexport type PersistentStateOptions<T> = {\n  enabled?: boolean;\n  parse?: (raw: string) => T;\n  serialize?: (value: T) => string | null;\n};\n\n/**\n * `useState` backed by `localStorage`. The SSR guard and read/write `try/catch`\n * live here once; `parse`/`serialize` default to JSON. Persistence happens in\n * the setter (not inside the state updater), so a StrictMode double-invoke never\n * double-writes, and a `serialize` returning `null` removes the key.\n */\nexport function usePersistentState<T>(\n  key: string,\n  fallback: T | (() => T),\n  options: PersistentStateOptions<T> = {},\n): [T, Dispatch<SetStateAction<T>>] {\n  const { enabled = true, parse, serialize } = options;\n\n  const resolveFallback = (): T =>\n    typeof fallback === \"function\" ? (fallback as () => T)() : fallback;\n\n  const [value, setValue] = useState<T>(() => {\n    if (!enabled || typeof window === \"undefined\") {\n      return resolveFallback();\n    }\n\n    let raw: string | null;\n    try {\n      raw = window.localStorage.getItem(key);\n    } catch {\n      return resolveFallback();\n    }\n\n    if (raw === null) {\n      return resolveFallback();\n    }\n\n    try {\n      return parse ? parse(raw) : (JSON.parse(raw) as T);\n    } catch {\n      // Drop corrupt data so it cannot resurface on the next read.\n      try {\n        window.localStorage.removeItem(key);\n      } catch {\n        return resolveFallback();\n      }\n\n      return resolveFallback();\n    }\n  });\n\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  const persistRef = useRef({ enabled, key, serialize });\n  persistRef.current = { enabled, key, serialize };\n\n  const setPersistentValue = useCallback<Dispatch<SetStateAction<T>>>((action) => {\n    const next =\n      typeof action === \"function\" ? (action as (prev: T) => T)(valueRef.current) : action;\n\n    valueRef.current = next;\n    setValue(next);\n\n    const { enabled: on, key: storageKey, serialize: encode } = persistRef.current;\n\n    if (!on || typeof window === \"undefined\") {\n      return;\n    }\n\n    try {\n      const encoded = encode ? encode(next) : JSON.stringify(next);\n\n      if (encoded === null) {\n        window.localStorage.removeItem(storageKey);\n      } else {\n        window.localStorage.setItem(storageKey, encoded);\n      }\n    } catch {\n      return;\n    }\n  }, []);\n\n  return [value, setPersistentValue];\n}\n"],"mappings":";;;;;;;;AAeA,SAAgB,mBACd,KACA,UACA,UAAqC,CAAC,GACJ;CAClC,MAAM,EAAE,UAAU,MAAM,OAAO,cAAc;CAE7C,MAAM,wBACJ,OAAO,aAAa,aAAc,SAAqB,IAAI;CAE7D,MAAM,CAAC,OAAO,YAAY,eAAkB;EAC1C,IAAI,CAAC,WAAW,OAAO,WAAW,aAChC,OAAO,gBAAgB;EAGzB,IAAI;EACJ,IAAI;GACF,MAAM,OAAO,aAAa,QAAQ,GAAG;EACvC,QAAQ;GACN,OAAO,gBAAgB;EACzB;EAEA,IAAI,QAAQ,MACV,OAAO,gBAAgB;EAGzB,IAAI;GACF,OAAO,QAAQ,MAAM,GAAG,IAAK,KAAK,MAAM,GAAG;EAC7C,QAAQ;GAEN,IAAI;IACF,OAAO,aAAa,WAAW,GAAG;GACpC,QAAQ;IACN,OAAO,gBAAgB;GACzB;GAEA,OAAO,gBAAgB;EACzB;CACF,CAAC;CAED,MAAM,WAAW,OAAO,KAAK;CAC7B,SAAS,UAAU;CAEnB,MAAM,aAAa,OAAO;EAAE;EAAS;EAAK;CAAU,CAAC;CACrD,WAAW,UAAU;EAAE;EAAS;EAAK;CAAU;CA4B/C,OAAO,CAAC,OA1BmB,aAA0C,WAAW;EAC9E,MAAM,OACJ,OAAO,WAAW,aAAc,OAA0B,SAAS,OAAO,IAAI;EAEhF,SAAS,UAAU;EACnB,SAAS,IAAI;EAEb,MAAM,EAAE,SAAS,IAAI,KAAK,YAAY,WAAW,WAAW,WAAW;EAEvE,IAAI,CAAC,MAAM,OAAO,WAAW,aAC3B;EAGF,IAAI;GACF,MAAM,UAAU,SAAS,OAAO,IAAI,IAAI,KAAK,UAAU,IAAI;GAE3D,IAAI,YAAY,MACd,OAAO,aAAa,WAAW,UAAU;QAEzC,OAAO,aAAa,QAAQ,YAAY,OAAO;EAEnD,QAAQ;GACN;EACF;CACF,GAAG,CAAC,CAEW,CAAkB;AACnC"}

package/dist/notifications/components/notifications.js

@@ -79,7 +79,10 @@ var NotificationsComponent = ({ node }) => {
 		open: store.open,
 		onOpenChange: store.setOpen,
 		children: /* @__PURE__ */ jsxs(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",
+			"aria-describedby": void 0,
+			className: "p-0",
+			placement: "end",
+			width: "sm",
 			children: [/* @__PURE__ */ jsx(DialogTitle, {
 				className: "sr-only",
 				children: label

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/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"}
+{"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 aria-describedby={undefined} className=\"p-0\" placement=\"end\" width=\"sm\">\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,oBAAkB,KAAA;GAAW,WAAU;GAAM,WAAU;GAAM,OAAM;aAAlF,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/plugin.d.ts

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

package/dist/notifications/plugin.js.map

@@ -1 +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"}
+{"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 type { NotificationNodeType } from \"@lattice-php/lattice/types/generated\";\nimport NotificationsComponent from \"./components/notifications\";\n\nexport const notificationsComponents = createPlugin({\n  name: \"lattice/notifications\",\n  components: {\n    notifications: eagerComponent(NotificationsComponent),\n  } satisfies ComponentRegistryFor<NotificationNodeType>,\n});\n"],"mappings":";;;AAQA,IAAa,0BAA0B,aAAa;CAClD,MAAM;CACN,YAAY,EACV,eAAe,eAAe,sBAAsB,EACtD;AACF,CAAC"}

package/dist/provider-base.js

@@ -2,9 +2,9 @@ import { updateAppearance } from "./appearance/index.js";
 import { RegistryContext } from "./core/registry-context.js";
 import { SpriteProvider } from "./icons/sprite.js";
 import { Toaster } from "./toast/toaster.js";
-import { EventBridge } from "./event-bridge.js";
 import { ActionInteractionProvider } from "./action/components/action-trigger-provider.js";
 import { useFlashEffects } from "./effects/use-flash-effects.js";
+import { EventBridge } from "./event-bridge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/provider-base.tsx
 var defaultSprite = { href: "" };

package/dist/realtime/listeners.d.ts

@@ -4,5 +4,5 @@ import { Listen } from '../types/generated.js';
  * is only fetched where it is actually needed.
  */
 export declare function RealtimeListeners({ listeners }: {
-    listeners?: Listen[];
+    listeners: Listen[];
 }): import("react").JSX.Element | null;

package/dist/realtime/listeners.js

@@ -19,7 +19,7 @@ var EchoBoundary = class extends Component {
 * is only fetched where it is actually needed.
 */
 function RealtimeListeners({ listeners }) {
-	if (listeners === void 0 || listeners.length === 0) return null;
+	if (listeners.length === 0) return null;
 	return /* @__PURE__ */ jsx(EchoBoundary, { children: /* @__PURE__ */ jsx(Suspense, {
 		fallback: null,
 		children: /* @__PURE__ */ jsx(Subscriptions, { listeners })

package/dist/realtime/listeners.js.map

@@ -1 +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 { Listen } 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?: Listen[] }) {\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,aAAuC;CACzE,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"}
+{"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 { Listen } 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: Listen[] }) {\n  if (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,aAAsC;CACxE,IAAI,UAAU,WAAW,GACvB,OAAO;CAGT,OACE,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,eAAD,EAA0B,UAAY,CAAA;CAC9B,CAAA,EACE,CAAA;AAElB"}