@lattice-php/lattice 0.56.3 → 0.58.0

package/dist/notifications/components/notifications.js

@@ -1,11 +1,13 @@
 import { useNotifications } from "../store.js";
+import { NotificationsBridgeProvider, createNotificationsBridge } from "../context.js";
 import { NotificationList } from "./notification-list.js";
-import { Component, Suspense, lazy } from "react";
+import { NotificationsSheet } from "./notifications-sheet.js";
+import { Component, Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
 import { Icon } from "@lattice-php/ui/icons";
 import { useT } from "@lattice-php/ui/i18n";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverContent, PopoverTrigger } from "@lattice-php/ui/popover";
-import { Dialog, DialogContent, DialogTitle } from "@lattice-php/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@lattice-php/ui/primitives/popover";
+import { useModal } from "@lattice-php/ui/modal";
 //#region resources/js/notifications/components/notifications.tsx
 var NotificationsEcho = lazy(() => import("./notifications-echo.js").then((m) => ({ default: m.NotificationsEcho })));
 var EchoBoundary = class extends Component {
@@ -26,7 +28,22 @@ var NotificationsComponent = ({ node }) => {
 		endpoint: node.props.endpoint,
 		pollingInterval: node.props.pollingInterval
 	});
+	const host = useModal();
+	const handleRef = useRef(null);
+	const [bridge] = useState(() => createNotificationsBridge(store));
+	useEffect(() => {
+		bridge.publish(store);
+	}, [bridge, store]);
 	const label = t("notifications.label", "Notifications");
+	const openSheet = useCallback(() => {
+		if (handleRef.current) return;
+		handleRef.current = host.open(/* @__PURE__ */ jsx(NotificationsBridgeProvider, {
+			value: bridge,
+			children: /* @__PURE__ */ jsx(NotificationsSheet, { onClosed: () => {
+				handleRef.current = null;
+			} })
+		}));
+	}, [bridge, host]);
 	const trigger = /* @__PURE__ */ jsxs("span", {
 		className: "relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted",
 		children: [/* @__PURE__ */ jsx(Icon, {
@@ -67,26 +84,13 @@ var NotificationsComponent = ({ node }) => {
 			channel: node.props.channel,
 			onReceive: (item) => store.receive(item)
 		})
-	}) }) : null, node.props.slideOut ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+	}) }) : null, node.props.slideOut ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": label,
 		"data-test": "notifications-trigger",
-		onClick: () => store.setOpen(true),
+		onClick: openSheet,
 		children: trigger
-	}), /* @__PURE__ */ jsx(Dialog, {
-		open: store.open,
-		onOpenChange: store.setOpen,
-		children: /* @__PURE__ */ jsxs(DialogContent, {
-			"aria-describedby": void 0,
-			className: "p-0",
-			placement: "end",
-			width: "sm",
-			children: [/* @__PURE__ */ jsx(DialogTitle, {
-				className: "sr-only",
-				children: label
-			}), panel]
-		})
-	})] }) : /* @__PURE__ */ jsxs(Popover, {
+	}) : /* @__PURE__ */ jsxs(Popover, {
 		open: store.open,
 		onOpenChange: store.setOpen,
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {

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 { Dialog, DialogContent, DialogTitle } from \"@lattice-php/ui/dialog\";\nimport { Popover as PopoverRoot, PopoverContent, PopoverTrigger } from \"@lattice-php/ui/popover\";\nimport { Icon } from \"@lattice-php/ui/icons\";\nimport { useT } from \"@lattice-php/ui/i18n\";\nimport type { RendererComponent } from \"@lattice-php/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        <span\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-lt-full bg-lt-danger px-1 py-0 text-[10px] font-medium text-lt-danger-fg\"\n        >\n          {store.unreadCount}\n        </span>\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":";;;;;;;;;AAUA,IAAM,oBAAoB,WACxB,OAAO,0BAAuB,CAAC,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;EAAhB,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA,MAAM;EACH,CAAA,IACJ,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;EAAhC,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAAuB,UAAA,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;IAEd,UAAA,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;EACL,CAAA,GAAA,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;EAClB,UAAA,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;EAEhC,UAAA;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;EAC5C,UAAA,qBAAC,eAAD;GAAe,oBAAkB,KAAA;GAAW,WAAU;GAAM,WAAU;GAAM,OAAM;GAAlF,UAAA,CACE,oBAAC,aAAD;IAAa,WAAU;IAAW,UAAA;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;EAAnD,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;IAChD,UAAA;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;GACnC,UAAA;EACa,CAAA,CACL;CAEf,CAAA,CAAA,EAAA,CAAA;AAEN"}
+{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import {\n  Component,\n  lazy,\n  Suspense,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/ui/primitives/popover\";\nimport { Icon } from \"@lattice-php/ui/icons\";\nimport { useT } from \"@lattice-php/ui/i18n\";\nimport { type ModalHandle, useModal } from \"@lattice-php/ui/modal\";\nimport type { RendererComponent } from \"@lattice-php/core/types\";\nimport { useNotifications } from \"@lattice-php/lattice/notifications/store\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport { createNotificationsBridge, NotificationsBridgeProvider } from \"../context\";\nimport { NotificationList } from \"./notification-list\";\nimport { NotificationsSheet } from \"./notifications-sheet\";\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  const host = useModal();\n  const handleRef = useRef<ModalHandle | null>(null);\n  const [bridge] = useState(() => createNotificationsBridge(store));\n\n  useEffect(() => {\n    bridge.publish(store);\n  }, [bridge, store]);\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const openSheet = useCallback((): void => {\n    if (handleRef.current) {\n      return;\n    }\n\n    handleRef.current = host.open(\n      <NotificationsBridgeProvider value={bridge}>\n        <NotificationsSheet\n          onClosed={() => {\n            handleRef.current = null;\n          }}\n        />\n      </NotificationsBridgeProvider>,\n    );\n  }, [bridge, host]);\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        <span\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-lt-full bg-lt-danger px-1 py-0 text-[10px] font-medium text-lt-danger-fg\"\n        >\n          {store.unreadCount}\n        </span>\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        <button\n          type=\"button\"\n          aria-label={label}\n          data-test=\"notifications-trigger\"\n          onClick={openSheet}\n        >\n          {trigger}\n        </button>\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":";;;;;;;;;;;AAyBA,IAAM,oBAAoB,WACxB,OAAO,0BAAuB,CAAC,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;CACD,MAAM,OAAO,SAAS;CACtB,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,CAAC,UAAU,eAAe,0BAA0B,KAAK,CAAC;CAEhE,gBAAgB;EACd,OAAO,QAAQ,KAAK;CACtB,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,YAAY,kBAAwB;EACxC,IAAI,UAAU,SACZ;EAGF,UAAU,UAAU,KAAK,KACvB,oBAAC,6BAAD;GAA6B,OAAO;GAClC,UAAA,oBAAC,oBAAD,EACE,gBAAgB;IACd,UAAU,UAAU;GACtB,EACD,CAAA;EAC0B,CAAA,CAC/B;CACF,GAAG,CAAC,QAAQ,IAAI,CAAC;CAEjB,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA,MAAM;EACH,CAAA,IACJ,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;EAAhC,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAAuB,UAAA,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;IAEd,UAAA,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;EACL,CAAA,GAAA,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;EAClB,UAAA,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,SAAS;EAER,UAAA;CACK,CAAA,IAER,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;EAAnD,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;IAChD,UAAA;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;GACnC,UAAA;EACa,CAAA,CACL;CAEf,CAAA,CAAA,EAAA,CAAA;AAEN"}

package/dist/notifications/context.d.ts

@@ -0,0 +1,17 @@
+import { UseNotificationsReturn } from './store.js';
+export type NotificationsBridge = {
+    publish: (next: UseNotificationsReturn) => void;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => UseNotificationsReturn;
+};
+export declare function createNotificationsBridge(initial: UseNotificationsReturn): NotificationsBridge;
+export declare const NotificationsBridgeProvider: import('react').Provider<NotificationsBridge | null>;
+/**
+ * Returns the notifications store, kept live for a component mounted outside
+ * the tree that owns the `useNotifications` call (the modal host renders
+ * host-opened content as a sibling of the page, not a descendant) — the
+ * bridge is a stable object the owner publishes fresh snapshots into, so
+ * subscribers here re-render on every publish rather than reading whatever
+ * props were frozen when the element was handed to `host.open()`.
+ */
+export declare function useLiveNotifications(): UseNotificationsReturn;

package/dist/notifications/context.js

@@ -0,0 +1,36 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+//#region resources/js/notifications/context.tsx
+function createNotificationsBridge(initial) {
+	let snapshot = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		publish(next) {
+			snapshot = next;
+			listeners.forEach((listener) => listener());
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		getSnapshot: () => snapshot
+	};
+}
+var NotificationsContext = createContext(null);
+var NotificationsBridgeProvider = NotificationsContext.Provider;
+/**
+* Returns the notifications store, kept live for a component mounted outside
+* the tree that owns the `useNotifications` call (the modal host renders
+* host-opened content as a sibling of the page, not a descendant) — the
+* bridge is a stable object the owner publishes fresh snapshots into, so
+* subscribers here re-render on every publish rather than reading whatever
+* props were frozen when the element was handed to `host.open()`.
+*/
+function useLiveNotifications() {
+	const bridge = useContext(NotificationsContext);
+	if (!bridge) throw new Error("useLiveNotifications must be used within a NotificationsBridgeProvider.");
+	return useSyncExternalStore(bridge.subscribe, bridge.getSnapshot);
+}
+//#endregion
+export { NotificationsBridgeProvider, createNotificationsBridge, useLiveNotifications };
+
+//# sourceMappingURL=context.js.map

package/dist/notifications/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../resources/js/notifications/context.tsx"],"sourcesContent":["import { createContext, useContext, useSyncExternalStore } from \"react\";\nimport type { UseNotificationsReturn } from \"./store\";\n\nexport type NotificationsBridge = {\n  publish: (next: UseNotificationsReturn) => void;\n  subscribe: (listener: () => void) => () => void;\n  getSnapshot: () => UseNotificationsReturn;\n};\n\nexport function createNotificationsBridge(initial: UseNotificationsReturn): NotificationsBridge {\n  let snapshot = initial;\n  const listeners = new Set<() => void>();\n\n  return {\n    publish(next) {\n      snapshot = next;\n      listeners.forEach((listener) => listener());\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    getSnapshot: () => snapshot,\n  };\n}\n\nconst NotificationsContext = createContext<NotificationsBridge | null>(null);\n\nexport const NotificationsBridgeProvider = NotificationsContext.Provider;\n\n/**\n * Returns the notifications store, kept live for a component mounted outside\n * the tree that owns the `useNotifications` call (the modal host renders\n * host-opened content as a sibling of the page, not a descendant) — the\n * bridge is a stable object the owner publishes fresh snapshots into, so\n * subscribers here re-render on every publish rather than reading whatever\n * props were frozen when the element was handed to `host.open()`.\n */\nexport function useLiveNotifications(): UseNotificationsReturn {\n  const bridge = useContext(NotificationsContext);\n\n  if (!bridge) {\n    throw new Error(\"useLiveNotifications must be used within a NotificationsBridgeProvider.\");\n  }\n\n  return useSyncExternalStore(bridge.subscribe, bridge.getSnapshot);\n}\n"],"mappings":";;AASA,SAAgB,0BAA0B,SAAsD;CAC9F,IAAI,WAAW;CACf,MAAM,4BAAY,IAAI,IAAgB;CAEtC,OAAO;EACL,QAAQ,MAAM;GACZ,WAAW;GACX,UAAU,SAAS,aAAa,SAAS,CAAC;EAC5C;EACA,UAAU,UAAU;GAClB,UAAU,IAAI,QAAQ;GACtB,aAAa,UAAU,OAAO,QAAQ;EACxC;EACA,mBAAmB;CACrB;AACF;AAEA,IAAM,uBAAuB,cAA0C,IAAI;AAE3E,IAAa,8BAA8B,qBAAqB;;;;;;;;;AAUhE,SAAgB,uBAA+C;CAC7D,MAAM,SAAS,WAAW,oBAAoB;CAE9C,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,yEAAyE;CAG3F,OAAO,qBAAqB,OAAO,WAAW,OAAO,WAAW;AAClE"}

package/dist/notifications/store.d.ts

@@ -7,7 +7,7 @@ type UseNotificationsOptions = {
     endpoint: string;
     pollingInterval?: number | null;
 };
-type UseNotificationsReturn = {
+export type UseNotificationsReturn = {
     notifications: NotificationItem[];
     unreadCount: number;
     status: NotificationsStatus;

package/dist/notifications/store.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.js","names":[],"sources":["../../resources/js/notifications/store.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  clearAll as apiClearAll,\n  dismiss as apiDismiss,\n  fetchNotifications,\n  markAllRead as apiMarkAllRead,\n  markRead as apiMarkRead,\n} from \"./api\";\nimport type { NotificationItem } from \"./types\";\n\nexport function prependIncoming(\n  list: NotificationItem[],\n  item: NotificationItem,\n): NotificationItem[] {\n  if (list.some((n) => n.id === item.id)) {\n    return list;\n  }\n\n  return [item, ...list];\n}\n\nexport function markReadIn(list: NotificationItem[], id: string): NotificationItem[] {\n  return list.map((n) => (n.id === id ? { ...n, isRead: true } : n));\n}\n\nexport function removeIn(list: NotificationItem[], id: string): NotificationItem[] {\n  return list.filter((n) => n.id !== id);\n}\n\nexport type NotificationsStatus = \"loading\" | \"idle\" | \"error\";\n\ntype UseNotificationsOptions = {\n  endpoint: string;\n  pollingInterval?: number | null;\n};\n\ntype UseNotificationsReturn = {\n  notifications: NotificationItem[];\n  unreadCount: number;\n  status: NotificationsStatus;\n  hasMore: boolean;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  loadMore: () => void;\n  markRead: (id: string) => void;\n  markAllRead: () => void;\n  dismiss: (id: string) => void;\n  clearAll: () => void;\n  receive: (item: NotificationItem) => void;\n};\n\nexport function useNotifications({\n  endpoint,\n  pollingInterval,\n}: UseNotificationsOptions): UseNotificationsReturn {\n  const [notifications, setNotifications] = useState<NotificationItem[]>([]);\n  const [unreadCount, setUnreadCount] = useState(0);\n  const [status, setStatus] = useState<NotificationsStatus>(\"loading\");\n  const [hasMore, setHasMore] = useState(false);\n  const [open, setOpen] = useState(false);\n  const pageRef = useRef(1);\n  const hasMoreRef = useRef(hasMore);\n  hasMoreRef.current = hasMore;\n  const loadingMoreRef = useRef(false);\n\n  const hydrate = useCallback(async (): Promise<void> => {\n    try {\n      const result = await fetchNotifications(endpoint, 1);\n      pageRef.current = 1;\n      setNotifications(result.notifications);\n      setUnreadCount(result.unreadCount);\n      setHasMore(result.hasMore);\n      setStatus(\"idle\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }, [endpoint]);\n\n  useEffect(() => {\n    void hydrate();\n  }, [hydrate]);\n\n  useEffect(() => {\n    if (!pollingInterval || pollingInterval <= 0) {\n      return;\n    }\n\n    const timer = setInterval(() => void hydrate(), pollingInterval * 1000);\n\n    return () => clearInterval(timer);\n  }, [hydrate, pollingInterval]);\n\n  const loadMore = useCallback((): void => {\n    if (loadingMoreRef.current || !hasMoreRef.current) {\n      return;\n    }\n\n    loadingMoreRef.current = true;\n    const next = pageRef.current + 1;\n    void fetchNotifications(endpoint, next)\n      .then((result) => {\n        pageRef.current = next;\n        setNotifications((current) => [...current, ...result.notifications]);\n        setHasMore(result.hasMore);\n      })\n      .catch(() => void hydrate())\n      .finally(() => {\n        loadingMoreRef.current = false;\n      });\n  }, [endpoint, hydrate]);\n\n  const markRead = useCallback(\n    (id: string): void => {\n      setNotifications((current) => markReadIn(current, id));\n      setUnreadCount((count) => Math.max(0, count - 1));\n      void apiMarkRead(endpoint, id)\n        .then((r) => setUnreadCount(r.unreadCount))\n        .catch(() => void hydrate());\n    },\n    [endpoint, hydrate],\n  );\n\n  const markAllRead = useCallback((): void => {\n    setNotifications((current) => current.map((n) => ({ ...n, isRead: true })));\n    setUnreadCount(0);\n    void apiMarkAllRead(endpoint)\n      .then((r) => setUnreadCount(r.unreadCount))\n      .catch(() => void hydrate());\n  }, [endpoint, hydrate]);\n\n  const dismiss = useCallback(\n    (id: string): void => {\n      setNotifications((current) => removeIn(current, id));\n      void apiDismiss(endpoint, id)\n        .then((r) => setUnreadCount(r.unreadCount))\n        .catch(() => void hydrate());\n    },\n    [endpoint, hydrate],\n  );\n\n  const clearAll = useCallback((): void => {\n    setNotifications([]);\n    setUnreadCount(0);\n    void apiClearAll(endpoint)\n      .then((r) => setUnreadCount(r.unreadCount))\n      .catch(() => void hydrate());\n  }, [endpoint, hydrate]);\n\n  const receive = useCallback((item: NotificationItem): void => {\n    setNotifications((current) => {\n      const next = prependIncoming(current, item);\n      if (next !== current) {\n        setUnreadCount((count) => count + 1);\n      }\n      return next;\n    });\n  }, []);\n\n  return {\n    notifications,\n    unreadCount,\n    status,\n    hasMore,\n    open,\n    setOpen,\n    loadMore,\n    markRead,\n    markAllRead,\n    dismiss,\n    clearAll,\n    receive,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"store.js","names":[],"sources":["../../resources/js/notifications/store.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  clearAll as apiClearAll,\n  dismiss as apiDismiss,\n  fetchNotifications,\n  markAllRead as apiMarkAllRead,\n  markRead as apiMarkRead,\n} from \"./api\";\nimport type { NotificationItem } from \"./types\";\n\nexport function prependIncoming(\n  list: NotificationItem[],\n  item: NotificationItem,\n): NotificationItem[] {\n  if (list.some((n) => n.id === item.id)) {\n    return list;\n  }\n\n  return [item, ...list];\n}\n\nexport function markReadIn(list: NotificationItem[], id: string): NotificationItem[] {\n  return list.map((n) => (n.id === id ? { ...n, isRead: true } : n));\n}\n\nexport function removeIn(list: NotificationItem[], id: string): NotificationItem[] {\n  return list.filter((n) => n.id !== id);\n}\n\nexport type NotificationsStatus = \"loading\" | \"idle\" | \"error\";\n\ntype UseNotificationsOptions = {\n  endpoint: string;\n  pollingInterval?: number | null;\n};\n\nexport type UseNotificationsReturn = {\n  notifications: NotificationItem[];\n  unreadCount: number;\n  status: NotificationsStatus;\n  hasMore: boolean;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  loadMore: () => void;\n  markRead: (id: string) => void;\n  markAllRead: () => void;\n  dismiss: (id: string) => void;\n  clearAll: () => void;\n  receive: (item: NotificationItem) => void;\n};\n\nexport function useNotifications({\n  endpoint,\n  pollingInterval,\n}: UseNotificationsOptions): UseNotificationsReturn {\n  const [notifications, setNotifications] = useState<NotificationItem[]>([]);\n  const [unreadCount, setUnreadCount] = useState(0);\n  const [status, setStatus] = useState<NotificationsStatus>(\"loading\");\n  const [hasMore, setHasMore] = useState(false);\n  const [open, setOpen] = useState(false);\n  const pageRef = useRef(1);\n  const hasMoreRef = useRef(hasMore);\n  hasMoreRef.current = hasMore;\n  const loadingMoreRef = useRef(false);\n\n  const hydrate = useCallback(async (): Promise<void> => {\n    try {\n      const result = await fetchNotifications(endpoint, 1);\n      pageRef.current = 1;\n      setNotifications(result.notifications);\n      setUnreadCount(result.unreadCount);\n      setHasMore(result.hasMore);\n      setStatus(\"idle\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }, [endpoint]);\n\n  useEffect(() => {\n    void hydrate();\n  }, [hydrate]);\n\n  useEffect(() => {\n    if (!pollingInterval || pollingInterval <= 0) {\n      return;\n    }\n\n    const timer = setInterval(() => void hydrate(), pollingInterval * 1000);\n\n    return () => clearInterval(timer);\n  }, [hydrate, pollingInterval]);\n\n  const loadMore = useCallback((): void => {\n    if (loadingMoreRef.current || !hasMoreRef.current) {\n      return;\n    }\n\n    loadingMoreRef.current = true;\n    const next = pageRef.current + 1;\n    void fetchNotifications(endpoint, next)\n      .then((result) => {\n        pageRef.current = next;\n        setNotifications((current) => [...current, ...result.notifications]);\n        setHasMore(result.hasMore);\n      })\n      .catch(() => void hydrate())\n      .finally(() => {\n        loadingMoreRef.current = false;\n      });\n  }, [endpoint, hydrate]);\n\n  const markRead = useCallback(\n    (id: string): void => {\n      setNotifications((current) => markReadIn(current, id));\n      setUnreadCount((count) => Math.max(0, count - 1));\n      void apiMarkRead(endpoint, id)\n        .then((r) => setUnreadCount(r.unreadCount))\n        .catch(() => void hydrate());\n    },\n    [endpoint, hydrate],\n  );\n\n  const markAllRead = useCallback((): void => {\n    setNotifications((current) => current.map((n) => ({ ...n, isRead: true })));\n    setUnreadCount(0);\n    void apiMarkAllRead(endpoint)\n      .then((r) => setUnreadCount(r.unreadCount))\n      .catch(() => void hydrate());\n  }, [endpoint, hydrate]);\n\n  const dismiss = useCallback(\n    (id: string): void => {\n      setNotifications((current) => removeIn(current, id));\n      void apiDismiss(endpoint, id)\n        .then((r) => setUnreadCount(r.unreadCount))\n        .catch(() => void hydrate());\n    },\n    [endpoint, hydrate],\n  );\n\n  const clearAll = useCallback((): void => {\n    setNotifications([]);\n    setUnreadCount(0);\n    void apiClearAll(endpoint)\n      .then((r) => setUnreadCount(r.unreadCount))\n      .catch(() => void hydrate());\n  }, [endpoint, hydrate]);\n\n  const receive = useCallback((item: NotificationItem): void => {\n    setNotifications((current) => {\n      const next = prependIncoming(current, item);\n      if (next !== current) {\n        setUnreadCount((count) => count + 1);\n      }\n      return next;\n    });\n  }, []);\n\n  return {\n    notifications,\n    unreadCount,\n    status,\n    hasMore,\n    open,\n    setOpen,\n    loadMore,\n    markRead,\n    markAllRead,\n    dismiss,\n    clearAll,\n    receive,\n  };\n}\n"],"mappings":"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"}

package/dist/provider-base.js

@@ -2,27 +2,29 @@ import { updateAppearance } from "./appearance/index.js";
 import { Toaster } from "./toast/toaster.js";
 import { useFlashEffects } from "./effects/use-flash-effects.js";
 import { EventBridge } from "./event-bridge.js";
-import { inertiaNavigation } from "./inertia-navigation.js";
-import { RegistryContext } from "@lattice-php/core/registry-context";
+import { inertiaNavigation, useCloseModalsOnNavigate } from "./inertia-navigation.js";
+import { RegistryProvider } from "@lattice-php/core/registry-context";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionInteractionProvider } from "@lattice-php/action/components/action-trigger-provider";
 import { NavigationProvider } from "@lattice-php/ui/navigation";
+import { ModalProvider } from "@lattice-php/ui/modal";
 import { SpriteProvider } from "@lattice-php/ui/icons/sprite";
 //#region resources/js/provider-base.tsx
 var defaultSprite = { href: "" };
 function ProviderBase({ children, registry, sprite = defaultSprite, toaster = true }) {
 	useFlashEffects();
-	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
-		value: registry,
+	useCloseModalsOnNavigate();
+	return /* @__PURE__ */ jsx(RegistryProvider, {
+		registry,
 		children: /* @__PURE__ */ jsx(NavigationProvider, {
 			adapter: inertiaNavigation,
-			children: /* @__PURE__ */ jsx(ActionInteractionProvider, { children: /* @__PURE__ */ jsxs(SpriteProvider, {
+			children: /* @__PURE__ */ jsx(ActionInteractionProvider, { children: /* @__PURE__ */ jsx(SpriteProvider, {
 				sprite,
-				children: [
+				children: /* @__PURE__ */ jsxs(ModalProvider, { children: [
 					children,
 					/* @__PURE__ */ jsx(EventBridge, { onAppearanceChange: updateAppearance }),
 					toaster ? /* @__PURE__ */ jsx(Toaster, {}) : null
-				]
+				] })
 			}) })
 		})
 	});

package/dist/provider-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider-base.js","names":[],"sources":["../resources/js/provider-base.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { ActionInteractionProvider } from \"@lattice-php/action/components/action-trigger-provider\";\nimport type { Registry } from \"@lattice-php/core/registry\";\nimport { RegistryContext } from \"@lattice-php/core/registry-context\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\nimport { NavigationProvider } from \"@lattice-php/ui/navigation\";\nimport { EventBridge } from \"./event-bridge\";\nimport { inertiaNavigation } from \"./inertia-navigation\";\nimport type { SpriteValue } from \"@lattice-php/ui/icons/sprite\";\nimport { SpriteProvider } from \"@lattice-php/ui/icons/sprite\";\nimport { Toaster } from \"./toast\";\nimport { updateAppearance } from \"./appearance\";\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport type ProviderBaseProps = {\n  children: ReactNode;\n  registry: Registry;\n  sprite?: SpriteValue;\n  toaster?: boolean;\n};\n\nexport function ProviderBase({\n  children,\n  registry,\n  sprite = defaultSprite,\n  toaster = true,\n}: ProviderBaseProps) {\n  useFlashEffects();\n\n  return (\n    <RegistryContext.Provider value={registry}>\n      <NavigationProvider adapter={inertiaNavigation}>\n        <ActionInteractionProvider>\n          <SpriteProvider sprite={sprite}>\n            {children}\n            <EventBridge onAppearanceChange={updateAppearance} />\n            {toaster ? <Toaster /> : null}\n          </SpriteProvider>\n        </ActionInteractionProvider>\n      </NavigationProvider>\n    </RegistryContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAS9C,SAAgB,aAAa,EAC3B,UACA,UACA,SAAS,eACT,UAAU,QACU;CACpB,gBAAgB;CAEhB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC/B,UAAA,oBAAC,oBAAD;GAAoB,SAAS;GAC3B,UAAA,oBAAC,2BAAD,EAAA,UACE,qBAAC,gBAAD;IAAwB;IAAxB,UAAA;KACG;KACD,oBAAC,aAAD,EAAa,oBAAoB,iBAAmB,CAAA;KACnD,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI;IACX;GACS,CAAA,EAAA,CAAA;EACT,CAAA;CACI,CAAA;AAE9B"}
+{"version":3,"file":"provider-base.js","names":[],"sources":["../resources/js/provider-base.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { ActionInteractionProvider } from \"@lattice-php/action/components/action-trigger-provider\";\nimport type { Registry } from \"@lattice-php/core/registry\";\nimport { RegistryProvider } from \"@lattice-php/core/registry-context\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\nimport { NavigationProvider } from \"@lattice-php/ui/navigation\";\nimport { ModalProvider } from \"@lattice-php/ui/modal\";\nimport { EventBridge } from \"./event-bridge\";\nimport { inertiaNavigation, useCloseModalsOnNavigate } from \"./inertia-navigation\";\nimport type { SpriteValue } from \"@lattice-php/ui/icons/sprite\";\nimport { SpriteProvider } from \"@lattice-php/ui/icons/sprite\";\nimport { Toaster } from \"./toast\";\nimport { updateAppearance } from \"./appearance\";\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport type ProviderBaseProps = {\n  children: ReactNode;\n  registry: Registry;\n  sprite?: SpriteValue;\n  toaster?: boolean;\n};\n\nexport function ProviderBase({\n  children,\n  registry,\n  sprite = defaultSprite,\n  toaster = true,\n}: ProviderBaseProps) {\n  useFlashEffects();\n  useCloseModalsOnNavigate();\n\n  return (\n    <RegistryProvider registry={registry}>\n      <NavigationProvider adapter={inertiaNavigation}>\n        <ActionInteractionProvider>\n          <SpriteProvider sprite={sprite}>\n            <ModalProvider>\n              {children}\n              <EventBridge onAppearanceChange={updateAppearance} />\n              {toaster ? <Toaster /> : null}\n            </ModalProvider>\n          </SpriteProvider>\n        </ActionInteractionProvider>\n      </NavigationProvider>\n    </RegistryProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAS9C,SAAgB,aAAa,EAC3B,UACA,UACA,SAAS,eACT,UAAU,QACU;CACpB,gBAAgB;CAChB,yBAAyB;CAEzB,OACE,oBAAC,kBAAD;EAA4B;EAC1B,UAAA,oBAAC,oBAAD;GAAoB,SAAS;GAC3B,UAAA,oBAAC,2BAAD,EAAA,UACE,oBAAC,gBAAD;IAAwB;IACtB,UAAA,qBAAC,eAAD,EAAA,UAAA;KACG;KACD,oBAAC,aAAD,EAAa,oBAAoB,iBAAmB,CAAA;KACnD,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI;IACZ,EAAA,CAAA;GACD,CAAA,EACS,CAAA;EACT,CAAA;CACJ,CAAA;AAEtB"}

package/dist/runtime.d.ts

@@ -2,7 +2,9 @@ export * from './index.js';
 export { router } from '@inertiajs/react';
 export { inertiaNavigation, navigationPlugin } from './inertia-navigation.js';
 export { defaultNavigation, NavigationProvider, useNavigation } from '@lattice-php/ui/navigation';
-export { runAction } from '@lattice-php/action';
+export { callAction, runAction, useCallAction } from '@lattice-php/action';
+export type { CallActionResult } from '@lattice-php/action';
+export { ActionConfirmOverlay } from '@lattice-php/action/components/action-confirm-overlay';
 export { apiFetch, apiJson, setRefRefreshEndpoint, xsrfToken } from '@lattice-php/core/api';
 export { useExtensionRegistry } from '@lattice-php/core/registry-context';
 export { RenderNode } from '@lattice-php/core/renderer';
@@ -14,8 +16,10 @@ export { RICH_EDITOR_EXTENSION, ToolbarIconButton } from '@lattice-php/form/rich
 export * from '@lattice-php/form/toolkit';
 export { useTable } from '@lattice-php/table/hooks/use-table';
 export { useTableSelection } from '@lattice-php/table/hooks/use-table-selection';
-export { getBulkActions } from '@lattice-php/table/lib/bulk';
-export { Badge, Button, Checkbox, cn, CodeBlock, Combobox, ConfirmDialog, CopyButton, Dialog, DialogContent, DialogHeader, formatDateValue, IconButton, InfoTooltip, Input, Label, NativeSelect, PreviewableImage, SegmentedPills, Spinner, Textarea, useDebouncedCallback, useFormatContext, usePersistentState, } from '@lattice-php/ui';
+export { getBulkActionNodes } from '@lattice-php/table/lib/bulk';
+export { useAction } from '@lattice-php/action/hooks/use-action';
+export { MODAL_MISSING_ERROR, useEmbeddedModal, useModal } from '@lattice-php/ui/modal';
+export { Badge, Button, Checkbox, cn, CodeBlock, Combobox, ConfirmDialog, CopyButton, Dialog, DialogContent, DialogHeader, DialogTitle, formatDateValue, IconButton, InfoTooltip, Input, Label, NativeSelect, PreviewableImage, SegmentedControl, Spinner, Textarea, useDebouncedCallback, useFormatContext, usePersistentState, } from '@lattice-php/ui';
 export * from '@lattice-php/ui/i18n';
 export { announce, attachTreeItemInstruction, combine, draggable, dropTargetForElements, extractTreeItemInstruction, } from './dnd/index.js';
 export type { Variant } from './toast/index.js';

package/dist/runtime.js

@@ -3,7 +3,7 @@ import { onToast } from "./toast/toast.js";
 import { onCallout } from "./toast/callout.js";
 import { Toaster } from "./toast/toaster.js";
 import Callouts from "./layout/components/callouts.js";
-import { OutletContext, SidebarCollapsedContext, useSidebarCollapsed } from "./layout/hooks/context.js";
+import { OutletProvider, useOutlet } from "./layout/hooks/context.js";
 import { layoutComponents } from "./layout/plugin.js";
 import SchemaLayout from "./layout/components/schema-layout.js";
 import { RealtimeListeners } from "./realtime/listeners.js";
@@ -21,15 +21,18 @@ import { useExtensionRegistry } from "@lattice-php/core/registry-context";
 import { RenderNode } from "@lattice-php/core/renderer";
 import { nodeIdentity } from "@lattice-php/core/test-id";
 import { NavigationProvider, defaultNavigation, useNavigation } from "@lattice-php/ui/navigation";
-import { Badge, Button, Checkbox, CodeBlock, Combobox, ConfirmDialog, CopyButton, Dialog, DialogContent, DialogHeader, IconButton, InfoTooltip, Input, Label, NativeSelect, PreviewableImage, SegmentedPills, Spinner, Textarea, cn, formatDateValue, useDebouncedCallback, useFormatContext, usePersistentState } from "@lattice-php/ui";
-import { runAction } from "@lattice-php/action";
+import { MODAL_MISSING_ERROR, useEmbeddedModal, useModal } from "@lattice-php/ui/modal";
+import { Badge, Button, Checkbox, CodeBlock, Combobox, ConfirmDialog, CopyButton, Dialog, DialogContent, DialogHeader, DialogTitle, IconButton, InfoTooltip, Input, Label, NativeSelect, PreviewableImage, SegmentedControl, Spinner, Textarea, cn, formatDateValue, useDebouncedCallback, useFormatContext, usePersistentState } from "@lattice-php/ui";
+import { callAction, runAction, useCallAction } from "@lattice-php/action";
+import { ActionConfirmOverlay } from "@lattice-php/action/components/action-confirm-overlay";
 import { coerceColor, toneProps } from "@lattice-php/ui/lib/color";
 import { requestSignedUpload, xhrTransfer } from "@lattice-php/core/upload";
 import { SimpleField } from "@lattice-php/form/components/fields/simple-field";
 import { RICH_EDITOR_EXTENSION, ToolbarIconButton } from "@lattice-php/form/rich-editor";
 import { useTable } from "@lattice-php/table/hooks/use-table";
 import { useTableSelection } from "@lattice-php/table/hooks/use-table-selection";
-import { getBulkActions } from "@lattice-php/table/lib/bulk";
+import { getBulkActionNodes } from "@lattice-php/table/lib/bulk";
+import { useAction } from "@lattice-php/action/hooks/use-action";
 export * from "@lattice-php/ui/i18n";
 export * from "@lattice-php/form/toolkit";
-export { Badge, Button, Callouts, Checkbox, CodeBlock, Combobox, ConfirmDialog, CopyButton, Dialog, DialogContent, DialogHeader, EventBridge, Icon, IconButton, IconRenderer, IconRendererProvider, InfoTooltip, Input, LATTICE_EVENT, LATTICE_REF_HEADER, Label, NativeSelect, NavigationProvider, OutletContext, PreviewableImage, Provider, RICH_EDITOR_EXTENSION, RealtimeListeners, RenderNode, Renderer, SchemaLayout, SegmentedPills, SidebarCollapsedContext, SimpleField, Spinner, SpriteProvider, Textarea, Toaster, ToolbarIconButton, announce, apiFetch, apiJson, attachTreeItemInstruction, builtinEffectHandlers, cn, coerceColor, columnCell, combine, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createRegistry, defaultNavigation, dispatchActionError, dispatchEffects, draggable, dropTargetForElements, eagerComponent, effectHandler, extendRegistry, extractTreeItemInstruction, formatDateValue, getActionEffects, getBulkActions, inertiaNavigation, initializeAppearance, isActionEffect, layoutComponents, lazyComponent, loadPluginModules, mergeEffectHandlers, navigationPlugin, nodeIdentity, onCallout, onToast, pageComponentName, registry, requestSignedUpload, router, runAction, setRefRefreshEndpoint, toneProps, updateAppearance, useAppearance, useColumnRegistry, useComponentRegistry, useDebouncedCallback, useEffectDispatcher, useExtensionRegistry, useFormatContext, useNavigation, usePersistentState, useSidebarCollapsed, useTable, useTableSelection, withHeaders, withRefHeader, withVisitHeaders, xhrTransfer, xsrfToken };
+export { ActionConfirmOverlay, Badge, Button, Callouts, Checkbox, CodeBlock, Combobox, ConfirmDialog, CopyButton, Dialog, DialogContent, DialogHeader, DialogTitle, EventBridge, Icon, IconButton, IconRenderer, IconRendererProvider, InfoTooltip, Input, LATTICE_EVENT, LATTICE_REF_HEADER, Label, MODAL_MISSING_ERROR, NativeSelect, NavigationProvider, OutletProvider, PreviewableImage, Provider, RICH_EDITOR_EXTENSION, RealtimeListeners, RenderNode, Renderer, SchemaLayout, SegmentedControl, SimpleField, Spinner, SpriteProvider, Textarea, Toaster, ToolbarIconButton, announce, apiFetch, apiJson, attachTreeItemInstruction, builtinEffectHandlers, callAction, cn, coerceColor, columnCell, combine, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createRegistry, defaultNavigation, dispatchActionError, dispatchEffects, draggable, dropTargetForElements, eagerComponent, effectHandler, extendRegistry, extractTreeItemInstruction, formatDateValue, getActionEffects, getBulkActionNodes, inertiaNavigation, initializeAppearance, isActionEffect, layoutComponents, lazyComponent, loadPluginModules, mergeEffectHandlers, navigationPlugin, nodeIdentity, onCallout, onToast, pageComponentName, registry, requestSignedUpload, router, runAction, setRefRefreshEndpoint, toneProps, updateAppearance, useAction, useAppearance, useCallAction, useColumnRegistry, useComponentRegistry, useDebouncedCallback, useEffectDispatcher, useEmbeddedModal, useExtensionRegistry, useFormatContext, useModal, useNavigation, useOutlet, usePersistentState, useTable, useTableSelection, withHeaders, withRefHeader, withVisitHeaders, xhrTransfer, xsrfToken };

package/dist/types/generated.d.ts

@@ -32,8 +32,8 @@ export type Dropdown = {
     trigger: Node[];
 };
 export type FilterNodeType = "filter.date-range" | "filter.media-type" | "filter.select" | "filter.ternary" | "filter.toggle";
-export type FormFieldNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.media-picker" | "field.number-input" | "field.otp" | "field.password-input" | "field.pattern-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "wizard" | "wizard-step";
-export type FormNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.media-picker" | "field.number-input" | "field.otp" | "field.password-input" | "field.pattern-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "form" | "wizard" | "wizard-step";
+export type FormFieldNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.media-picker" | "field.number-input" | "field.otp" | "field.password-input" | "field.pattern-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "field.tree" | "wizard" | "wizard-step";
+export type FormNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.media-picker" | "field.number-input" | "field.otp" | "field.password-input" | "field.pattern-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "field.tree" | "form" | "wizard" | "wizard-step";
 export type Fragment = {
     endpoint: string | null;
     lazy: boolean;
@@ -68,10 +68,11 @@ export type MenuItem = {
     icon: string | null;
     label: string | null;
     method: HttpMethod | null;
+    modal: Node<"modal"> | null;
     prefix: Affix | null;
     suffix: Affix | null;
 };
-export type NodeType = "action" | "action.bulk" | "action.group" | "api-reference" | "avatar" | "badge" | "breadcrumbs" | "button" | "calendar" | "callouts" | "card" | "chart" | "chat.box" | "chat.part.text" | "chat.part.tool-call" | "code-block" | "collapsible" | "description-list" | "dropdown" | "entry.badge" | "entry.boolean" | "entry.component" | "entry.date" | "entry.text" | "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.media-picker" | "field.number-input" | "field.otp" | "field.password-input" | "field.pattern-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "floating-panel" | "form" | "fragment" | "grid" | "heading" | "icon" | "image" | "link" | "map" | "media.library" | "menu" | "menu-item" | "modal" | "notifications" | "outlet" | "pdf" | "progress" | "raw-block" | "remote.data-list" | "search.box" | "search.categories" | "search.input" | "search.preview" | "search.recent" | "search.results" | "section" | "segmented-control" | "separator" | "sidebar" | "sidebar.footer" | "signature" | "stack" | "tab" | "table" | "tabs" | "text" | "tooltip" | "topbar" | "tree" | "wizard" | "wizard-step";
+export type NodeType = "action" | "action.bulk" | "action.group" | "api-reference" | "avatar" | "badge" | "breadcrumbs" | "button" | "calendar" | "callouts" | "card" | "chart" | "chat.box" | "chat.part.text" | "chat.part.tool-call" | "code-block" | "collapsible" | "description-list" | "dropdown" | "entry.badge" | "entry.boolean" | "entry.component" | "entry.date" | "entry.text" | "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.media-picker" | "field.number-input" | "field.otp" | "field.password-input" | "field.pattern-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "field.tree" | "floating-panel" | "form" | "fragment" | "grid" | "heading" | "icon" | "image" | "link" | "map" | "media.library" | "menu" | "menu-item" | "modal" | "notifications" | "outlet" | "pdf" | "progress" | "raw-block" | "remote.data-list" | "search.box" | "search.categories" | "search.input" | "search.preview" | "search.recent" | "search.results" | "section" | "segmented-control" | "separator" | "sidebar" | "sidebar.footer" | "signature" | "stack" | "tab" | "table" | "tabs" | "text" | "tooltip" | "topbar" | "tree" | "wizard" | "wizard-step";
 export type NotificationItem = {
     readonly actions: Node[];
     readonly body: Translatable | string | null;