@lattice-php/lattice 0.19.0 → 0.21.0

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/api.d.ts

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

package/dist/notifications/api.js.map

@@ -1 +1 @@
-{"version":3,"file":"api.js","names":[],"sources":["../../resources/js/notifications/api.ts"],"sourcesContent":["import { apiJson } from \"@lattice-php/lattice/core/api\";\nimport type { NotificationsResponse, UnreadCountResponse } from \"./types\";\n\nexport function fetchNotifications(endpoint: string, page = 1): Promise<NotificationsResponse> {\n  return apiJson<NotificationsResponse>(`${endpoint}?page=${page}`);\n}\n\nexport function markRead(endpoint: string, id: string): Promise<UnreadCountResponse> {\n  return apiJson<UnreadCountResponse>(`${endpoint}/${id}/read`, { method: \"PATCH\" });\n}\n\nexport function markAllRead(endpoint: string): Promise<UnreadCountResponse> {\n  return apiJson<UnreadCountResponse>(`${endpoint}/read-all`, { method: \"POST\" });\n}\n\nexport function dismiss(endpoint: string, id: string): Promise<UnreadCountResponse> {\n  return apiJson<UnreadCountResponse>(`${endpoint}/${id}`, { method: \"DELETE\" });\n}\n\nexport function clearAll(endpoint: string): Promise<UnreadCountResponse> {\n  return apiJson<UnreadCountResponse>(endpoint, { method: \"DELETE\" });\n}\n"],"mappings":";;AAGA,SAAgB,mBAAmB,UAAkB,OAAO,GAAmC;CAC7F,OAAO,QAA+B,GAAG,SAAS,QAAQ,MAAM;AAClE;AAEA,SAAgB,SAAS,UAAkB,IAA0C;CACnF,OAAO,QAA6B,GAAG,SAAS,GAAG,GAAG,QAAQ,EAAE,QAAQ,QAAQ,CAAC;AACnF;AAEA,SAAgB,YAAY,UAAgD;CAC1E,OAAO,QAA6B,GAAG,SAAS,YAAY,EAAE,QAAQ,OAAO,CAAC;AAChF;AAEA,SAAgB,QAAQ,UAAkB,IAA0C;CAClF,OAAO,QAA6B,GAAG,SAAS,GAAG,MAAM,EAAE,QAAQ,SAAS,CAAC;AAC/E;AAEA,SAAgB,SAAS,UAAgD;CACvE,OAAO,QAA6B,UAAU,EAAE,QAAQ,SAAS,CAAC;AACpE"}
+{"version":3,"file":"api.js","names":[],"sources":["../../resources/js/notifications/api.ts"],"sourcesContent":["import { apiJson } from \"@lattice-php/lattice/core/api\";\nimport type { NotificationList, UnreadCount } from \"./types\";\n\nexport function fetchNotifications(endpoint: string, page = 1): Promise<NotificationList> {\n  return apiJson<NotificationList>(`${endpoint}?page=${page}`);\n}\n\nexport function markRead(endpoint: string, id: string): Promise<UnreadCount> {\n  return apiJson<UnreadCount>(`${endpoint}/${id}/read`, { method: \"PATCH\" });\n}\n\nexport function markAllRead(endpoint: string): Promise<UnreadCount> {\n  return apiJson<UnreadCount>(`${endpoint}/read-all`, { method: \"POST\" });\n}\n\nexport function dismiss(endpoint: string, id: string): Promise<UnreadCount> {\n  return apiJson<UnreadCount>(`${endpoint}/${id}`, { method: \"DELETE\" });\n}\n\nexport function clearAll(endpoint: string): Promise<UnreadCount> {\n  return apiJson<UnreadCount>(endpoint, { method: \"DELETE\" });\n}\n"],"mappings":";;AAGA,SAAgB,mBAAmB,UAAkB,OAAO,GAA8B;CACxF,OAAO,QAA0B,GAAG,SAAS,QAAQ,MAAM;AAC7D;AAEA,SAAgB,SAAS,UAAkB,IAAkC;CAC3E,OAAO,QAAqB,GAAG,SAAS,GAAG,GAAG,QAAQ,EAAE,QAAQ,QAAQ,CAAC;AAC3E;AAEA,SAAgB,YAAY,UAAwC;CAClE,OAAO,QAAqB,GAAG,SAAS,YAAY,EAAE,QAAQ,OAAO,CAAC;AACxE;AAEA,SAAgB,QAAQ,UAAkB,IAAkC;CAC1E,OAAO,QAAqB,GAAG,SAAS,GAAG,MAAM,EAAE,QAAQ,SAAS,CAAC;AACvE;AAEA,SAAgB,SAAS,UAAwC;CAC/D,OAAO,QAAqB,UAAU,EAAE,QAAQ,SAAS,CAAC;AAC5D"}

package/dist/notifications/components/notifications.js

@@ -79,7 +79,9 @@ 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",
+			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 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,WAAU;GAAM,WAAU;GAAM,OAAM;aAArD,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/notifications/types.d.ts

@@ -1,10 +1,2 @@
-import { NotificationItem } from '../types/generated.js';
-export type { NotificationItem };
-export type NotificationsResponse = {
-    notifications: NotificationItem[];
-    unreadCount: number;
-    hasMore: boolean;
-};
-export type UnreadCountResponse = {
-    unreadCount: number;
-};
+import { NotificationItem, NotificationList, UnreadCount } from '../types/generated.js';
+export type { NotificationItem, NotificationList, UnreadCount };

package/dist/provider-base.js

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

package/dist/realtime/build-effects.js

@@ -5,14 +5,14 @@ function buildEffects(effects, payload, t) {
 }
 function resolveEffect(effect, payload, t) {
 	if (effect.type !== "toast") return effect;
-	const toast = effect.toast;
-	if (typeof toast !== "object" || toast === null) return effect;
-	const message = toast.message;
+	const props = effect.props;
+	if (typeof props !== "object" || props === null) return effect;
+	const message = props.message;
 	if (!isTranslatable(message)) return effect;
 	return {
 		...effect,
-		toast: {
-			...toast,
+		props: {
+			...props,
 			message: resolveTranslatable(message, payload, t)
 		}
 	};

package/dist/realtime/build-effects.js.map

@@ -1 +1 @@
-{"version":3,"file":"build-effects.js","names":[],"sources":["../../resources/js/realtime/build-effects.ts"],"sourcesContent":["import type { Effect } from \"@lattice-php/lattice/types/generated\";\nimport { isTranslatable, resolveTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\nimport type { Translate } from \"@lattice-php/lattice/i18n/translatable\";\n\ntype RawEffect = Record<string, unknown>;\n\nexport function buildEffects(\n  effects: readonly RawEffect[],\n  payload: Record<string, unknown>,\n  t: Translate,\n): Effect[] {\n  return effects.map((effect) => resolveEffect(effect, payload, t)) as Effect[];\n}\n\nfunction resolveEffect(\n  effect: RawEffect,\n  payload: Record<string, unknown>,\n  t: Translate,\n): RawEffect {\n  if (effect.type !== \"toast\") {\n    return effect;\n  }\n\n  const toast = effect.toast;\n\n  if (typeof toast !== \"object\" || toast === null) {\n    return effect;\n  }\n\n  const message = (toast as Record<string, unknown>).message;\n\n  if (!isTranslatable(message)) {\n    return effect;\n  }\n\n  return {\n    ...effect,\n    toast: {\n      ...(toast as Record<string, unknown>),\n      message: resolveTranslatable(message, payload, t),\n    },\n  };\n}\n"],"mappings":";;AAMA,SAAgB,aACd,SACA,SACA,GACU;CACV,OAAO,QAAQ,KAAK,WAAW,cAAc,QAAQ,SAAS,CAAC,CAAC;AAClE;AAEA,SAAS,cACP,QACA,SACA,GACW;CACX,IAAI,OAAO,SAAS,SAClB,OAAO;CAGT,MAAM,QAAQ,OAAO;CAErB,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,UAAW,MAAkC;CAEnD,IAAI,CAAC,eAAe,OAAO,GACzB,OAAO;CAGT,OAAO;EACL,GAAG;EACH,OAAO;GACL,GAAI;GACJ,SAAS,oBAAoB,SAAS,SAAS,CAAC;EAClD;CACF;AACF"}
+{"version":3,"file":"build-effects.js","names":[],"sources":["../../resources/js/realtime/build-effects.ts"],"sourcesContent":["import type { Effect } from \"@lattice-php/lattice/types/generated\";\nimport { isTranslatable, resolveTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\nimport type { Translate } from \"@lattice-php/lattice/i18n/translatable\";\n\ntype RawEffect = Record<string, unknown>;\n\nexport function buildEffects(\n  effects: readonly RawEffect[],\n  payload: Record<string, unknown>,\n  t: Translate,\n): Effect[] {\n  return effects.map((effect) => resolveEffect(effect, payload, t)) as Effect[];\n}\n\nfunction resolveEffect(\n  effect: RawEffect,\n  payload: Record<string, unknown>,\n  t: Translate,\n): RawEffect {\n  if (effect.type !== \"toast\") {\n    return effect;\n  }\n\n  const props = effect.props;\n\n  if (typeof props !== \"object\" || props === null) {\n    return effect;\n  }\n\n  const message = (props as Record<string, unknown>).message;\n\n  if (!isTranslatable(message)) {\n    return effect;\n  }\n\n  return {\n    ...effect,\n    props: {\n      ...(props as Record<string, unknown>),\n      message: resolveTranslatable(message, payload, t),\n    },\n  };\n}\n"],"mappings":";;AAMA,SAAgB,aACd,SACA,SACA,GACU;CACV,OAAO,QAAQ,KAAK,WAAW,cAAc,QAAQ,SAAS,CAAC,CAAC;AAClE;AAEA,SAAS,cACP,QACA,SACA,GACW;CACX,IAAI,OAAO,SAAS,SAClB,OAAO;CAGT,MAAM,QAAQ,OAAO;CAErB,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,UAAW,MAAkC;CAEnD,IAAI,CAAC,eAAe,OAAO,GACzB,OAAO;CAGT,OAAO;EACL,GAAG;EACH,OAAO;GACL,GAAI;GACJ,SAAS,oBAAoB,SAAS,SAAS,CAAC;EAClD;CACF;AACF"}

package/dist/realtime/listeners.d.ts

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

package/dist/realtime/subscriptions.d.ts

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

package/dist/realtime/subscriptions.js.map

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

package/dist/registry.d.ts

@@ -1 +1,6 @@
+import { ActionNodeType, ChatNodeType, FormNodeType, FragmentNodeType, LayoutNodeType, NodeType, NotificationNodeType, RemoteNodeType, TableNodeType, UiNodeType } from './types/generated.js';
+type RegisteredNodeType = ActionNodeType | ChatNodeType | FormNodeType | FragmentNodeType | LayoutNodeType | NotificationNodeType | RemoteNodeType | TableNodeType | UiNodeType;
+type Assert<T extends true> = T;
+export type AllNodeTypesRegistered = Assert<Exclude<NodeType, RegisteredNodeType> extends never ? true : false>;
 export declare const registry: import('./core/registry.js').Registry;
+export {};

package/dist/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action/plugin\";\nimport { chatComponents } from \"./chat/plugin\";\nimport { uiComponents } from \"./ui/plugin\";\nimport { formComponents } from \"./form/plugin\";\nimport { layoutComponents } from \"./layout/plugin\";\nimport { notificationsComponents } from \"./notifications/plugin\";\nimport { remoteComponents } from \"./remote/plugin\";\nimport { tableComponents } from \"./table/plugin\";\n\nexport const registry = createRegistry(\n  uiComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatComponents,\n  notificationsComponents,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;;AAUA,IAAa,WAAW,eACtB,cACA,kBACA,gBACA,kBACA,iBACA,gBACA,yBACA,gBACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport type {\n  ActionNodeType,\n  ChatNodeType,\n  FormNodeType,\n  FragmentNodeType,\n  LayoutNodeType,\n  NodeType,\n  NotificationNodeType,\n  RemoteNodeType,\n  TableNodeType,\n  UiNodeType,\n} from \"@lattice-php/lattice/types/generated\";\nimport { actionComponents } from \"./action/plugin\";\nimport { chatComponents } from \"./chat/plugin\";\nimport { uiComponents } from \"./ui/plugin\";\nimport { formComponents } from \"./form/plugin\";\nimport { layoutComponents } from \"./layout/plugin\";\nimport { notificationsComponents } from \"./notifications/plugin\";\nimport { remoteComponents } from \"./remote/plugin\";\nimport { tableComponents } from \"./table/plugin\";\n\n// Compile-time totality: every generated NodeType must belong to a registered\n// plugin's union. A new PHP domain fails here until its plugin exists.\ntype RegisteredNodeType =\n  | ActionNodeType\n  | ChatNodeType\n  | FormNodeType\n  | FragmentNodeType\n  | LayoutNodeType\n  | NotificationNodeType\n  | RemoteNodeType\n  | TableNodeType\n  | UiNodeType;\ntype Assert<T extends true> = T;\nexport type AllNodeTypesRegistered = Assert<\n  Exclude<NodeType, RegisteredNodeType> extends never ? true : false\n>;\n\nexport const registry = createRegistry(\n  uiComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatComponents,\n  notificationsComponents,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;;AAuCA,IAAa,WAAW,eACtB,cACA,kBACA,gBACA,kBACA,iBACA,gBACA,yBACA,gBACF"}

package/dist/remote/components/data-list.js

@@ -1,7 +1,7 @@
+import { materializeSchema } from "../../core/materialize.js";
 import { Renderer } from "../../core/renderer.js";
 import { useT } from "../../i18n/instance.js";
 import { remoteJson } from "../../core/api.js";
-import { materializeSchema } from "../../core/materialize.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/remote/components/data-list.tsx

package/dist/remote/plugin.d.ts

@@ -1,2 +1 @@
-export type RemoteComponentType = "remote.data-list";
 export declare const remoteComponents: import('../core/registry.js').Plugin;

package/dist/remote/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/remote/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport DataListComponent from \"./components/data-list\";\n\nexport type RemoteComponentType = \"remote.data-list\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n  } satisfies ComponentRegistryFor<RemoteComponentType>,\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;AASA,IAAa,mBAAmB,aAAa;CAC3C,YAAY,EACV,oBAAoB,eAAe,QAAiB,EACtD;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/remote/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { RemoteNodeType } from \"@lattice-php/lattice/types/generated\";\nimport DataListComponent from \"./components/data-list\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n  } satisfies ComponentRegistryFor<RemoteNodeType>,\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;AAQA,IAAa,mBAAmB,aAAa;CAC3C,YAAY,EACV,oBAAoB,eAAe,QAAiB,EACtD;CACA,MAAM;AACR,CAAC"}

package/dist/table/components/bulk-bar.js

@@ -49,14 +49,14 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "font-medium",
-				children: allMatching ? t("table.bulk.allSelected", "All {{count}} selected", { count }) : t("table.bulk.selected", "{{count}} selected", { count })
+				children: allMatching ? t("table.bulk.all-selected", "All {{count}} selected", { count }) : t("table.bulk.selected", "{{count}} selected", { count })
 			}),
 			canSelectAllMatching && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-test": "bulk-select-all-matching",
 				className: "font-medium text-lt-primary underline underline-offset-2",
 				onClick: onSelectAllMatching,
-				children: t("table.bulk.selectAllMatching", "Select all {{total}} matching", { total })
+				children: t("table.bulk.select-all-matching", "Select all {{total}} matching", { total })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-wrap items-center gap-2",
@@ -73,14 +73,14 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				title: confirming.confirmation.title ?? confirming.label,
 				description: confirming.confirmation.description ?? void 0,
 				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
-				cancelLabel: confirming.confirmation.cancelLabel ?? "Cancel",
+				cancelLabel: confirming.confirmation.cancelLabel ?? t("common.cancel", "Cancel"),
 				confirmVariant: confirming.variant,
 				processing: http.processing,
 				onConfirm: () => void submit(confirming),
 				onCancel: () => setConfirming(null)
 			}),
 			filling?.form && /* @__PURE__ */ jsx(ActionForm, {
-				cancelLabel: filling.confirmation?.cancelLabel ?? "Cancel",
+				cancelLabel: filling.confirmation?.cancelLabel ?? t("common.cancel", "Cancel"),
 				componentRef: filling.ref,
 				description: filling.confirmation?.description ?? void 0,
 				endpoint: filling.endpoint,
@@ -93,8 +93,10 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 					setFilling(null);
 					onCompleted();
 				},
+				placement: filling.modalSide ?? "center",
 				submitLabel: filling.confirmation?.confirmLabel ?? filling.label,
-				title: filling.confirmation?.title ?? filling.label
+				title: filling.confirmation?.title ?? filling.label,
+				width: filling.modalWidth ?? void 0
 			})
 		]
 	});

package/dist/table/components/bulk-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"@lattice-php/lattice/table/lib/bulk\";\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const http = useHttp<BulkData, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    http.transform((data) => ({ ...data, ...selectionPayload() }));\n\n    const ok = await runAction(\n      () => http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? \"\") }),\n      dispatch,\n    );\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"table.bulk.allSelected\", \"All {{count}} selected\", { count })\n          : t(\"table.bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"table.bulk.selectAllMatching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? \"Cancel\"}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setFilling(null);\n            onCompleted();\n          }}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,OAAO,QAAkC,CAAC,CAAC;CACjD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,KAAK,WAAW,UAAU;GAAE,GAAG;GAAM,GAAG,iBAAiB;EAAE,EAAE;EAO7D,IAAI,MALa,gBACT,KAAK,OAAO,QAAQ,OAAO,UAAU,EAAE,SAAS,YAAY,OAAO,OAAO,EAAE,EAAE,CAAC,GACrF,QACF,GAEQ;GACN,cAAc,IAAI;GAClB,YAAY;EACd;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,0BAA0B,0BAA0B,EAAE,MAAM,CAAC,IAC/D,EAAE,uBAAuB,sBAAsB,EAAE,MAAM,CAAC;GACxD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,gCAAgC,iCAAiC,EAAE,MAAM,CAAC;GACvE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAN3B,CAQG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe;IAClD,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,YAAY,aAAa;KACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;KAC3C,WAAW,IAAI;KACf,YAAY;IACd;IACA,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;GAC/C,CAAA;EAEA;;AAET"}
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"@lattice-php/lattice/table/lib/bulk\";\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const http = useHttp<BulkData, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    http.transform((data) => ({ ...data, ...selectionPayload() }));\n\n    const ok = await runAction(\n      () => http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? \"\") }),\n      dispatch,\n    );\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"table.bulk.all-selected\", \"All {{count}} selected\", { count })\n          : t(\"table.bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"table.bulk.select-all-matching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? t(\"common.cancel\", \"Cancel\")}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? t(\"common.cancel\", \"Cancel\")}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setFilling(null);\n            onCompleted();\n          }}\n          placement={filling.modalSide ?? \"center\"}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n          width={filling.modalWidth ?? undefined}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,OAAO,QAAkC,CAAC,CAAC;CACjD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,KAAK,WAAW,UAAU;GAAE,GAAG;GAAM,GAAG,iBAAiB;EAAE,EAAE;EAO7D,IAAI,MALa,gBACT,KAAK,OAAO,QAAQ,OAAO,UAAU,EAAE,SAAS,YAAY,OAAO,OAAO,EAAE,EAAE,CAAC,GACrF,QACF,GAEQ;GACN,cAAc,IAAI;GAClB,YAAY;EACd;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,2BAA2B,0BAA0B,EAAE,MAAM,CAAC,IAChE,EAAE,uBAAuB,sBAAsB,EAAE,MAAM,CAAC;GACxD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,kCAAkC,iCAAiC,EAAE,MAAM,CAAC;GACzE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAN3B,CAQG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe,EAAE,iBAAiB,QAAQ;IAC/E,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe,EAAE,iBAAiB,QAAQ;IAC7E,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,YAAY,aAAa;KACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;KAC3C,WAAW,IAAI;KACf,YAAY;IACd;IACA,WAAW,QAAQ,aAAa;IAChC,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;IAC9C,OAAO,QAAQ,cAAc,KAAA;GAC9B,CAAA;EAEA;;AAET"}

package/dist/table/components/cells/badge-cell.js

@@ -1,12 +1,15 @@
 import { cn } from "../../../lib/utils.js";
+import { coerceColor, namedColor, toneProps } from "../../../lib/color.js";
 import { formatCell } from "../../lib/format.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/badge-cell.tsx
 var BadgeCell = ({ column, props, value }) => {
 	const label = formatCell(value, column);
 	if (label === "") return null;
+	const tone = toneProps(coerceColor(props.colors?.[String(value)]) ?? namedColor("gray"));
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("lt-cell-badge", `lt-cell-tone-${props.colors?.[String(value)] ?? "gray"}`),
+		className: cn("lt-cell-badge", tone.className),
+		style: tone.style,
 		children: label
 	});
 };

package/dist/table/components/cells/badge-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/badge-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const BadgeCell: ColumnCellComponent<\"column.badge\"> = ({ column, props, value }) => {\n  const label = formatCell(value, column);\n\n  if (label === \"\") {\n    return null;\n  }\n\n  const color = props.colors?.[String(value)] ?? \"gray\";\n\n  return <span className={cn(\"lt-cell-badge\", `lt-cell-tone-${color}`)}>{label}</span>;\n};\n"],"mappings":";;;;AAIA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAKT,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,gBAF9B,MAAM,SAAS,OAAO,KAAK,MAAM,QAEoB;YAAI;CAAY,CAAA;AACrF"}
+{"version":3,"file":"badge-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/badge-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { coerceColor, namedColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const BadgeCell: ColumnCellComponent<\"column.badge\"> = ({ column, props, value }) => {\n  const label = formatCell(value, column);\n\n  if (label === \"\") {\n    return null;\n  }\n\n  const tone = toneProps(coerceColor(props.colors?.[String(value)]) ?? namedColor(\"gray\"));\n\n  return (\n    <span className={cn(\"lt-cell-badge\", tone.className)} style={tone.style}>\n      {label}\n    </span>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAGT,MAAM,OAAO,UAAU,YAAY,MAAM,SAAS,OAAO,KAAK,EAAE,KAAK,WAAW,MAAM,CAAC;CAEvF,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,KAAK,SAAS;EAAG,OAAO,KAAK;YAC/D;CACG,CAAA;AAEV"}

package/dist/table/components/cells/boolean-cell.js

@@ -1,14 +1,14 @@
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { isTruthy } from "../../../lib/is-truthy.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/boolean-cell.tsx
-function isTruthy(value) {
-	return value === true || value === 1 || value === "1" || value === "true";
-}
 var BooleanCell = ({ value }) => {
+	const { t } = useT("lattice");
 	const truthy = isTruthy(value);
 	return /* @__PURE__ */ jsx("span", {
-		"aria-label": String(truthy),
+		"aria-label": truthy ? t("common.yes", "Yes") : t("common.no", "No"),
 		role: "img",
 		children: /* @__PURE__ */ jsx(Icon, {
 			name: truthy ? "check" : "x",

package/dist/table/components/cells/boolean-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/boolean-cell.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nfunction isTruthy(value: unknown): boolean {\n  return value === true || value === 1 || value === \"1\" || value === \"true\";\n}\n\nexport const BooleanCell: ColumnCellComponent<\"column.boolean\"> = ({ value }) => {\n  const truthy = isTruthy(value);\n\n  return (\n    <span aria-label={String(truthy)} role=\"img\">\n      <Icon\n        name={truthy ? \"check\" : \"x\"}\n        className={cn(\"size-lt-icon-md\", truthy ? \"text-lt-success\" : \"text-lt-muted-fg\")}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,SAAS,SAAS,OAAyB;CACzC,OAAO,UAAU,QAAQ,UAAU,KAAK,UAAU,OAAO,UAAU;AACrE;AAEA,IAAa,eAAsD,EAAE,YAAY;CAC/E,MAAM,SAAS,SAAS,KAAK;CAE7B,OACE,oBAAC,QAAD;EAAM,cAAY,OAAO,MAAM;EAAG,MAAK;YACrC,oBAAC,MAAD;GACE,MAAM,SAAS,UAAU;GACzB,WAAW,GAAG,mBAAmB,SAAS,oBAAoB,kBAAkB;EACjF,CAAA;CACG,CAAA;AAEV"}
+{"version":3,"file":"boolean-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/boolean-cell.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { isTruthy } from \"@lattice-php/lattice/lib/is-truthy\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const BooleanCell: ColumnCellComponent<\"column.boolean\"> = ({ value }) => {\n  const { t } = useT(\"lattice\");\n  const truthy = isTruthy(value);\n\n  return (\n    <span aria-label={truthy ? t(\"common.yes\", \"Yes\") : t(\"common.no\", \"No\")} role=\"img\">\n      <Icon\n        name={truthy ? \"check\" : \"x\"}\n        className={cn(\"size-lt-icon-md\", truthy ? \"text-lt-success\" : \"text-lt-muted-fg\")}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,eAAsD,EAAE,YAAY;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,SAAS,SAAS,KAAK;CAE7B,OACE,oBAAC,QAAD;EAAM,cAAY,SAAS,EAAE,cAAc,KAAK,IAAI,EAAE,aAAa,IAAI;EAAG,MAAK;YAC7E,oBAAC,MAAD;GACE,MAAM,SAAS,UAAU;GACzB,WAAW,GAAG,mBAAmB,SAAS,oBAAoB,kBAAkB;EACjF,CAAA;CACG,CAAA;AAEV"}

package/dist/table/components/cells/copyable-cell.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TableColumn } from '../../types.js';
+/** Wrap cell content in a copy-to-clipboard affordance when `copyable` is set. */
+export declare function CopyableCell({ children, column, copyable, value, }: {
+    children: ReactNode;
+    column: TableColumn;
+    copyable?: boolean | null;
+    value: string;
+}): ReactNode;

package/dist/table/components/cells/copyable-cell.js

@@ -0,0 +1,17 @@
+import { CopyableText } from "../../../ui/copyable-text.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/copyable-cell.tsx
+/** Wrap cell content in a copy-to-clipboard affordance when `copyable` is set. */
+function CopyableCell({ children, column, copyable, value }) {
+	if (!copyable) return children;
+	return /* @__PURE__ */ jsx(CopyableText, {
+		value,
+		label: column.props.label ?? column.key,
+		testId: `copy-${column.key}`,
+		children
+	});
+}
+//#endregion
+export { CopyableCell };
+
+//# sourceMappingURL=copyable-cell.js.map

package/dist/table/components/cells/copyable-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyable-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/copyable-cell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { CopyableText } from \"@lattice-php/lattice/ui/copyable-text\";\nimport type { TableColumn } from \"@lattice-php/lattice/table/types\";\n\n/** Wrap cell content in a copy-to-clipboard affordance when `copyable` is set. */\nexport function CopyableCell({\n  children,\n  column,\n  copyable,\n  value,\n}: {\n  children: ReactNode;\n  column: TableColumn;\n  copyable?: boolean | null;\n  value: string;\n}): ReactNode {\n  if (!copyable) {\n    return children;\n  }\n\n  return (\n    <CopyableText\n      value={value}\n      label={column.props.label ?? column.key}\n      testId={`copy-${column.key}`}\n    >\n      {children}\n    </CopyableText>\n  );\n}\n"],"mappings":";;;;AAKA,SAAgB,aAAa,EAC3B,UACA,QACA,UACA,SAMY;CACZ,IAAI,CAAC,UACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACS;EACP,OAAO,OAAO,MAAM,SAAS,OAAO;EACpC,QAAQ,QAAQ,OAAO;EAEtB;CACW,CAAA;AAElB"}

package/dist/table/components/cells/icon-cell.js

@@ -1,14 +1,17 @@
 import { cn } from "../../../lib/utils.js";
 import { IconRenderer } from "../../../icons/icon-renderer.js";
+import { coerceColor, toneProps } from "../../../lib/color.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/icon-cell.tsx
 var IconCell = ({ props, value }) => {
 	const icon = props.icons?.[String(value)] ?? props.icon ?? void 0;
 	if (!icon) return null;
-	const color = props.colors?.[String(value)];
+	const color = coerceColor(props.colors?.[String(value)]);
+	const tone = color ? toneProps(color) : void 0;
 	return /* @__PURE__ */ jsx("span", {
 		"aria-label": String(value),
-		className: cn("lt-cell-icon", color && `lt-cell-tone-${color}`),
+		className: cn("lt-cell-icon", tone?.className),
+		style: tone?.style,
 		children: /* @__PURE__ */ jsx(IconRenderer, {
 			className: "size-lt-icon-md",
 			icon

package/dist/table/components/cells/icon-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/icon-cell.tsx"],"sourcesContent":["import { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const IconCell: ColumnCellComponent<\"column.icon\"> = ({ props, value }) => {\n  const icon = props.icons?.[String(value)] ?? props.icon ?? undefined;\n\n  if (!icon) {\n    return null;\n  }\n\n  const color = props.colors?.[String(value)];\n\n  return (\n    <span\n      aria-label={String(value)}\n      className={cn(\"lt-cell-icon\", color && `lt-cell-tone-${color}`)}\n    >\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,YAAgD,EAAE,OAAO,YAAY;CAChF,MAAM,OAAO,MAAM,QAAQ,OAAO,KAAK,MAAM,MAAM,QAAQ,KAAA;CAE3D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,MAAM,SAAS,OAAO,KAAK;CAEzC,OACE,oBAAC,QAAD;EACE,cAAY,OAAO,KAAK;EACxB,WAAW,GAAG,gBAAgB,SAAS,gBAAgB,OAAO;YAE9D,oBAAC,cAAD;GAAc,WAAU;GAAwB;EAAO,CAAA;CACnD,CAAA;AAEV"}
+{"version":3,"file":"icon-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/icon-cell.tsx"],"sourcesContent":["import { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { coerceColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const IconCell: ColumnCellComponent<\"column.icon\"> = ({ props, value }) => {\n  const icon = props.icons?.[String(value)] ?? props.icon ?? undefined;\n\n  if (!icon) {\n    return null;\n  }\n\n  const color = coerceColor(props.colors?.[String(value)]);\n  const tone = color ? toneProps(color) : undefined;\n\n  return (\n    <span\n      aria-label={String(value)}\n      className={cn(\"lt-cell-icon\", tone?.className)}\n      style={tone?.style}\n    >\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n    </span>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,YAAgD,EAAE,OAAO,YAAY;CAChF,MAAM,OAAO,MAAM,QAAQ,OAAO,KAAK,MAAM,MAAM,QAAQ,KAAA;CAE3D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,YAAY,MAAM,SAAS,OAAO,KAAK,EAAE;CACvD,MAAM,OAAO,QAAQ,UAAU,KAAK,IAAI,KAAA;CAExC,OACE,oBAAC,QAAD;EACE,cAAY,OAAO,KAAK;EACxB,WAAW,GAAG,gBAAgB,MAAM,SAAS;EAC7C,OAAO,MAAM;YAEb,oBAAC,cAAD;GAAc,WAAU;GAAwB;EAAO,CAAA;CACnD,CAAA;AAEV"}

package/dist/table/components/cells/image-cell.js

@@ -1,20 +1,19 @@
 import { cn } from "../../../lib/utils.js";
+import { PreviewableImage } from "../../../ui/image-preview.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/image-cell.tsx
 var ImageCell = ({ column, props, value }) => {
 	const url = typeof value === "string" ? value : "";
 	if (url === "") return null;
 	const size = props.size ?? 32;
-	return /* @__PURE__ */ jsx("img", {
-		alt: column.props.label ?? void 0,
-		src: url,
-		width: size,
-		height: size,
+	return /* @__PURE__ */ jsx(PreviewableImage, {
+		alt: column.props.label ?? "",
 		className: cn("object-cover", props.circular ? "rounded-full" : "rounded-lt-sm"),
-		style: {
-			width: size,
-			height: size
-		}
+		height: size,
+		previewable: props.previewable,
+		src: url,
+		testId: `preview-${column.key}`,
+		width: size
 	});
 };
 //#endregion

package/dist/table/components/cells/image-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/image-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const ImageCell: ColumnCellComponent<\"column.image\"> = ({ column, props, value }) => {\n  const url = typeof value === \"string\" ? value : \"\";\n\n  if (url === \"\") {\n    return null;\n  }\n\n  const size = props.size ?? 32;\n\n  return (\n    <img\n      alt={column.props.label ?? undefined}\n      src={url}\n      width={size}\n      height={size}\n      className={cn(\"object-cover\", props.circular ? \"rounded-full\" : \"rounded-lt-sm\")}\n      style={{ width: size, height: size }}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ;CAEhD,IAAI,QAAQ,IACV,OAAO;CAGT,MAAM,OAAO,MAAM,QAAQ;CAE3B,OACE,oBAAC,OAAD;EACE,KAAK,OAAO,MAAM,SAAS,KAAA;EAC3B,KAAK;EACL,OAAO;EACP,QAAQ;EACR,WAAW,GAAG,gBAAgB,MAAM,WAAW,iBAAiB,eAAe;EAC/E,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CACpC,CAAA;AAEL"}
+{"version":3,"file":"image-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/image-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { PreviewableImage } from \"@lattice-php/lattice/ui/image-preview\";\n\nexport const ImageCell: ColumnCellComponent<\"column.image\"> = ({ column, props, value }) => {\n  const url = typeof value === \"string\" ? value : \"\";\n\n  if (url === \"\") {\n    return null;\n  }\n\n  const size = props.size ?? 32;\n\n  return (\n    <PreviewableImage\n      alt={column.props.label ?? \"\"}\n      className={cn(\"object-cover\", props.circular ? \"rounded-full\" : \"rounded-lt-sm\")}\n      height={size}\n      previewable={props.previewable}\n      src={url}\n      testId={`preview-${column.key}`}\n      width={size}\n    />\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ;CAEhD,IAAI,QAAQ,IACV,OAAO;CAGT,MAAM,OAAO,MAAM,QAAQ;CAE3B,OACE,oBAAC,kBAAD;EACE,KAAK,OAAO,MAAM,SAAS;EAC3B,WAAW,GAAG,gBAAgB,MAAM,WAAW,iBAAiB,eAAe;EAC/E,QAAQ;EACR,aAAa,MAAM;EACnB,KAAK;EACL,QAAQ,WAAW,OAAO;EAC1B,OAAO;CACR,CAAA;AAEL"}