@lattice-php/lattice 0.2.0 → 0.3.0

package/dist/table/use-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.js","names":[],"sources":["../../resources/js/table/use-table.ts"],"sourcesContent":["import { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { getColumns, getPagination, getRows, getState } from \"./payload\";\nimport { buildEndpoint, nextSort } from \"./query\";\nimport type {\n  FilterClause,\n  TableColumn,\n  TableNode,\n  TableResponse,\n  TableSort,\n  TableState,\n} from \"./types\";\n\nexport function useTable(node: TableNode) {\n  const columns = useMemo(() => getColumns(node.props?.columns), [node.props?.columns]);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);\n  const [rows, setRows] = useState(() => getRows(node.props?.data));\n  const [pagination, setPagination] = useState(() => getPagination(node.props?.pagination));\n  const [state, setState] = useState(initialState);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? state.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextState: TableState, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const response = await fetch(buildEndpoint(endpoint, nextState), {\n          headers: {\n            Accept: \"application/json\",\n            ...withRefHeader(componentRef),\n          },\n        });\n        const result = (await response.json()) as TableResponse;\n        const resultState = getState(result.state);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setState(resultState);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: nextSort(state.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function applyFilters(next: FilterClause[]): void {\n    const nextState = { ...state, filters: next, page: 1 };\n\n    setState(nextState);\n    void load(nextState);\n  }\n\n  function addFilter(clause: FilterClause): void {\n    applyFilters([...state.filters, clause]);\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    applyFilters(state.filters.map((current, position) => (position === index ? clause : current)));\n  }\n\n  function removeFilter(index: number): void {\n    applyFilters(state.filters.filter((_, current) => current !== index));\n  }\n\n  function goToPage(page: number): void {\n    void load({\n      ...state,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...state,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, state]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(state);\n  }, [hasLoaded, isLazy, load, state]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load(state);\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id, state]);\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters: state.filters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-table.js","names":[],"sources":["../../resources/js/table/use-table.ts"],"sourcesContent":["import { apiFetch, apiJson } from \"@lattice-php/lattice/core/api\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isEmptyFilterValue } from \"./filter-values\";\nimport { getColumns, getPagination, getRows, getState } from \"./payload\";\nimport { buildEndpoint, nextSort } from \"./query\";\nimport type {\n  FilterClause,\n  TableColumn,\n  TableNode,\n  TableResponse,\n  TableSort,\n  TableState,\n} from \"./types\";\n\nexport function useTable(node: TableNode) {\n  const columns = useMemo(() => getColumns(node.props?.columns), [node.props?.columns]);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);\n  const initialRows = useMemo(() => getRows(node.props?.data), [node.props?.data]);\n  const initialPagination = useMemo(\n    () => getPagination(node.props?.pagination),\n    [node.props?.pagination],\n  );\n  const [rows, setRows] = useState(initialRows);\n  const [pagination, setPagination] = useState(initialPagination);\n  const [state, setState] = useState(initialState);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? state.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextState: TableState, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const result = await apiJson<TableResponse>(buildEndpoint(endpoint, nextState), {\n          ref: componentRef,\n        });\n        const resultState = getState(result.state);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setState(resultState);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: nextSort(state.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function applyFilters(next: FilterClause[]): void {\n    const nextState = { ...state, filters: next, page: 1 };\n\n    setState(nextState);\n    void load(nextState);\n  }\n\n  function addFilter(clause: FilterClause): void {\n    applyFilters([...state.filters, clause]);\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    applyFilters(state.filters.map((current, position) => (position === index ? clause : current)));\n  }\n\n  function removeFilter(index: number): void {\n    applyFilters(state.filters.filter((_, current) => current !== index));\n  }\n\n  function setTableFilter(key: string, value: unknown): void {\n    const next = { ...state.tableFilters };\n\n    if (isEmptyFilterValue(value)) {\n      delete next[key];\n    } else {\n      next[key] = value;\n    }\n\n    const nextState = { ...state, tableFilters: next, page: 1 };\n\n    setState(nextState);\n    void load(nextState);\n  }\n\n  function resetFilters(): void {\n    const nextState = { ...state, filters: [], tableFilters: {}, page: 1 };\n\n    setState(nextState);\n    void load(nextState);\n  }\n\n  const searchFilterOptions = useCallback(\n    async (filterKey: string, query: string): Promise<Option[]> => {\n      if (!endpoint) {\n        return [];\n      }\n\n      const url = new URL(endpoint, window.location.origin);\n      url.searchParams.set(\"_search\", filterKey);\n      url.searchParams.set(\"q\", query);\n\n      const response = await apiFetch(`${url.pathname}${url.search}`, {\n        ref: componentRef,\n        throwOnError: false,\n      });\n\n      if (!response.ok) {\n        return [];\n      }\n\n      const result = (await response.json()) as { options?: Option[] };\n\n      return result.options ?? [];\n    },\n    [endpoint, componentRef],\n  );\n\n  function goToPage(page: number): void {\n    void load({\n      ...state,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...state,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, state]);\n\n  useEffect(() => {\n    setRows(initialRows);\n    setPagination(initialPagination);\n    setState(initialState);\n    setProcessing(isLazy);\n    setHasLoaded(!isLazy);\n  }, [initialRows, initialPagination, initialState, isLazy]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(state);\n  }, [hasLoaded, isLazy, load, state]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load(state);\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id, state]);\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters: state.filters,\n    tableFilters: state.tableFilters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    setTableFilter,\n    resetFilters,\n    searchFilterOptions,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  };\n}\n"],"mappings":"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"}

package/dist/toast/callout.d.ts

@@ -0,0 +1,6 @@
+import { Callout } from '../types/generated';
+export type { Callout };
+/** Coerce a raw callout value (effect detail `{ callout: {...} }`) into a Callout. */
+export declare function normalizeCallout(detail: unknown): Callout | null;
+/** Subscribe to the `lattice:callout` bus. Returns an unsubscribe function. */
+export declare function onCallout(callback: (callout: Callout) => void): () => void;

package/dist/toast/callout.js

@@ -0,0 +1,31 @@
+import { LATTICE_EVENT } from "../events/event-names.js";
+import { isVariant } from "./toast.js";
+//#region resources/js/toast/callout.ts
+/** Coerce a raw callout value (effect detail `{ callout: {...} }`) into a Callout. */
+function normalizeCallout(detail) {
+	if (typeof detail !== "object" || detail === null) return null;
+	const value = detail.callout;
+	if (typeof value !== "object" || value === null) return null;
+	const callout = value;
+	if (typeof callout.message !== "string" || callout.message === "") return null;
+	return {
+		action: callout.action ?? null,
+		dismissible: callout.dismissible !== false,
+		message: callout.message,
+		title: typeof callout.title === "string" ? callout.title : null,
+		variant: isVariant(callout.variant) ? callout.variant : "info"
+	};
+}
+/** Subscribe to the `lattice:callout` bus. Returns an unsubscribe function. */
+function onCallout(callback) {
+	const listener = (event) => {
+		const callout = normalizeCallout(event.detail);
+		if (callout) callback(callout);
+	};
+	window.addEventListener(LATTICE_EVENT.callout, listener);
+	return () => window.removeEventListener(LATTICE_EVENT.callout, listener);
+}
+//#endregion
+export { normalizeCallout, onCallout };
+
+//# sourceMappingURL=callout.js.map

package/dist/toast/callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.js","names":[],"sources":["../../resources/js/toast/callout.ts"],"sourcesContent":["import type { Callout } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { isVariant } from \"@lattice-php/lattice/toast/toast\";\n\nexport type { Callout };\n\n/** Coerce a raw callout value (effect detail `{ callout: {...} }`) into a Callout. */\nexport function normalizeCallout(detail: unknown): Callout | null {\n  if (typeof detail !== \"object\" || detail === null) {\n    return null;\n  }\n\n  const value = (detail as { callout?: unknown }).callout;\n\n  if (typeof value !== \"object\" || value === null) {\n    return null;\n  }\n\n  const callout = value as Record<string, unknown>;\n\n  if (typeof callout.message !== \"string\" || callout.message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (callout.action as Callout[\"action\"]) ?? null,\n    dismissible: callout.dismissible !== false,\n    message: callout.message,\n    title: typeof callout.title === \"string\" ? callout.title : null,\n    variant: isVariant(callout.variant) ? callout.variant : \"info\",\n  };\n}\n\n/** Subscribe to the `lattice:callout` bus. Returns an unsubscribe function. */\nexport function onCallout(callback: (callout: Callout) => void): () => void {\n  const listener = (event: Event): void => {\n    const callout = normalizeCallout((event as CustomEvent).detail);\n\n    if (callout) {\n      callback(callout);\n    }\n  };\n\n  window.addEventListener(LATTICE_EVENT.callout, listener);\n\n  return () => window.removeEventListener(LATTICE_EVENT.callout, listener);\n}\n"],"mappings":";;;;AAOA,SAAgB,iBAAiB,QAAiC;CAChE,IAAI,OAAO,WAAW,YAAY,WAAW,MAC3C,OAAO;CAGT,MAAM,QAAS,OAAiC;CAEhD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,UAAU;CAEhB,IAAI,OAAO,QAAQ,YAAY,YAAY,QAAQ,YAAY,IAC7D,OAAO;CAGT,OAAO;EACL,QAAS,QAAQ,UAAgC;EACjD,aAAa,QAAQ,gBAAgB;EACrC,SAAS,QAAQ;EACjB,OAAO,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ;EAC3D,SAAS,UAAU,QAAQ,OAAO,IAAI,QAAQ,UAAU;CAC1D;AACF;;AAGA,SAAgB,UAAU,UAAkD;CAC1E,MAAM,YAAY,UAAuB;EACvC,MAAM,UAAU,iBAAkB,MAAsB,MAAM;EAE9D,IAAI,SACF,SAAS,OAAO;CAEpB;CAEA,OAAO,iBAAiB,cAAc,SAAS,QAAQ;CAEvD,aAAa,OAAO,oBAAoB,cAAc,SAAS,QAAQ;AACzE"}

package/dist/toast/index.d.ts

@@ -1 +1,5 @@
+export { normalizeCallout, onCallout } from './callout';
+export type { Callout } from './callout';
 export { Toaster } from './toaster';
+export { isVariant, normalizeToast, normalizeToastMessage, onToast, showToast } from './toast';
+export type { ToastMessage, Variant } from './toast';

package/dist/toast/index.js

@@ -1,2 +1,4 @@
+import { isVariant, normalizeToast, normalizeToastMessage, onToast, showToast } from "./toast.js";
+import { normalizeCallout, onCallout } from "./callout.js";
 import { Toaster } from "./toaster.js";
-export { Toaster };
+export { Toaster, isVariant, normalizeCallout, normalizeToast, normalizeToastMessage, onCallout, onToast, showToast };

package/dist/toast/toast.d.ts

@@ -0,0 +1,14 @@
+import { ToastMessage, Variant } from '../types/generated';
+export type { ToastMessage, Variant };
+export declare function isVariant(value: unknown): value is Variant;
+/**
+ * Coerce a raw toast value (server flash payload or event detail) into a
+ * ToastMessage, defaulting optional fields, or null when it is malformed.
+ */
+export declare function normalizeToastMessage(value: unknown): ToastMessage | null;
+/** Coerce a `lattice:toast` event detail (`{ toast: {...} }`) into a ToastMessage. */
+export declare function normalizeToast(detail: unknown): ToastMessage | null;
+/** Emit a toast onto the shared `lattice:toast` bus. */
+export declare function showToast(toast: ToastMessage): void;
+/** Subscribe to the shared toast bus. Returns an unsubscribe function. */
+export declare function onToast(callback: (toast: ToastMessage) => void): () => void;

package/dist/toast/toast.js

@@ -0,0 +1,51 @@
+import { LATTICE_EVENT } from "../events/event-names.js";
+//#region resources/js/toast/toast.ts
+var variants = [
+	"success",
+	"info",
+	"warning",
+	"error"
+];
+function isVariant(value) {
+	return variants.some((variant) => variant === value);
+}
+/**
+* Coerce a raw toast value (server flash payload or event detail) into a
+* ToastMessage, defaulting optional fields, or null when it is malformed.
+*/
+function normalizeToastMessage(value) {
+	if (typeof value !== "object" || value === null) return null;
+	const toast = value;
+	if (typeof toast.message !== "string" || toast.message === "") return null;
+	return {
+		action: toast.action ?? null,
+		dismissible: toast.dismissible !== false,
+		duration: typeof toast.duration === "number" ? toast.duration : null,
+		message: toast.message,
+		persistent: toast.persistent === true,
+		variant: isVariant(toast.variant) ? toast.variant : "success"
+	};
+}
+/** Coerce a `lattice:toast` event detail (`{ toast: {...} }`) into a ToastMessage. */
+function normalizeToast(detail) {
+	if (typeof detail !== "object" || detail === null) return null;
+	return normalizeToastMessage(detail.toast);
+}
+/** Emit a toast onto the shared `lattice:toast` bus. */
+function showToast(toast) {
+	if (typeof window === "undefined") return;
+	window.dispatchEvent(new CustomEvent(LATTICE_EVENT.toast, { detail: { toast } }));
+}
+/** Subscribe to the shared toast bus. Returns an unsubscribe function. */
+function onToast(callback) {
+	const listener = (event) => {
+		const toast = normalizeToast(event.detail);
+		if (toast) callback(toast);
+	};
+	window.addEventListener(LATTICE_EVENT.toast, listener);
+	return () => window.removeEventListener(LATTICE_EVENT.toast, listener);
+}
+//#endregion
+export { isVariant, normalizeToast, normalizeToastMessage, onToast, showToast };
+
+//# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../resources/js/toast/toast.ts"],"sourcesContent":["import type { ToastMessage, Variant } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\n\nexport type { ToastMessage, Variant };\n\nconst variants = [\"success\", \"info\", \"warning\", \"error\"] as const satisfies readonly Variant[];\n\nexport function isVariant(value: unknown): value is Variant {\n  return variants.some((variant) => variant === value);\n}\n\n/**\n * Coerce a raw toast value (server flash payload or event detail) into a\n * ToastMessage, defaulting optional fields, or null when it is malformed.\n */\nexport function normalizeToastMessage(value: unknown): ToastMessage | null {\n  if (typeof value !== \"object\" || value === null) {\n    return null;\n  }\n\n  const toast = value as Record<string, unknown>;\n\n  if (typeof toast.message !== \"string\" || toast.message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (toast.action as ToastMessage[\"action\"]) ?? null,\n    dismissible: toast.dismissible !== false,\n    duration: typeof toast.duration === \"number\" ? toast.duration : null,\n    message: toast.message,\n    persistent: toast.persistent === true,\n    variant: isVariant(toast.variant) ? toast.variant : \"success\",\n  };\n}\n\n/** Coerce a `lattice:toast` event detail (`{ toast: {...} }`) into a ToastMessage. */\nexport function normalizeToast(detail: unknown): ToastMessage | null {\n  if (typeof detail !== \"object\" || detail === null) {\n    return null;\n  }\n\n  return normalizeToastMessage((detail as { toast?: unknown }).toast);\n}\n\n/** Emit a toast onto the shared `lattice:toast` bus. */\nexport function showToast(toast: ToastMessage): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  window.dispatchEvent(new CustomEvent(LATTICE_EVENT.toast, { detail: { toast } }));\n}\n\n/** Subscribe to the shared toast bus. Returns an unsubscribe function. */\nexport function onToast(callback: (toast: ToastMessage) => void): () => void {\n  const listener = (event: Event): void => {\n    const toast = normalizeToast((event as CustomEvent).detail);\n\n    if (toast) {\n      callback(toast);\n    }\n  };\n\n  window.addEventListener(LATTICE_EVENT.toast, listener);\n\n  return () => window.removeEventListener(LATTICE_EVENT.toast, listener);\n}\n"],"mappings":";;AAKA,IAAM,WAAW;CAAC;CAAW;CAAQ;CAAW;AAAO;AAEvD,SAAgB,UAAU,OAAkC;CAC1D,OAAO,SAAS,MAAM,YAAY,YAAY,KAAK;AACrD;;;;;AAMA,SAAgB,sBAAsB,OAAqC;CACzE,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,QAAQ;CAEd,IAAI,OAAO,MAAM,YAAY,YAAY,MAAM,YAAY,IACzD,OAAO;CAGT,OAAO;EACL,QAAS,MAAM,UAAqC;EACpD,aAAa,MAAM,gBAAgB;EACnC,UAAU,OAAO,MAAM,aAAa,WAAW,MAAM,WAAW;EAChE,SAAS,MAAM;EACf,YAAY,MAAM,eAAe;EACjC,SAAS,UAAU,MAAM,OAAO,IAAI,MAAM,UAAU;CACtD;AACF;;AAGA,SAAgB,eAAe,QAAsC;CACnE,IAAI,OAAO,WAAW,YAAY,WAAW,MAC3C,OAAO;CAGT,OAAO,sBAAuB,OAA+B,KAAK;AACpE;;AAGA,SAAgB,UAAU,OAA2B;CACnD,IAAI,OAAO,WAAW,aACpB;CAGF,OAAO,cAAc,IAAI,YAAY,cAAc,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AAClF;;AAGA,SAAgB,QAAQ,UAAqD;CAC3E,MAAM,YAAY,UAAuB;EACvC,MAAM,QAAQ,eAAgB,MAAsB,MAAM;EAE1D,IAAI,OACF,SAAS,KAAK;CAElB;CAEA,OAAO,iBAAiB,cAAc,OAAO,QAAQ;CAErD,aAAa,OAAO,oBAAoB,cAAc,OAAO,QAAQ;AACvE"}

package/dist/toast/toaster.js

@@ -1,87 +1,26 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
 import { useT } from "../i18n/instance.js";
-import { LATTICE_EVENT } from "../events/event-names.js";
-import { Renderer } from "../core/renderer.js";
-import { useRegistry } from "../provider.js";
+import { onToast } from "./toast.js";
+import { RenderNode } from "../core/renderer.js";
+import { variantStyles } from "./variant-styles.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Toast from "@radix-ui/react-toast";
 //#region resources/js/toast/toaster.tsx
-var variants = [
-	"success",
-	"info",
-	"warning",
-	"error"
-];
-var variantStyles = {
-	success: {
-		accent: "border-l-lt-success",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "circle-check",
-			className: "size-lt-icon-lg shrink-0 text-lt-success"
-		})
-	},
-	info: {
-		accent: "border-l-lt-info",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "info",
-			className: "size-lt-icon-lg shrink-0 text-lt-info"
-		})
-	},
-	warning: {
-		accent: "border-l-lt-warning",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "circle-alert",
-			className: "size-lt-icon-lg shrink-0 text-lt-warning"
-		})
-	},
-	error: {
-		accent: "border-l-lt-danger",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "circle-x",
-			className: "size-lt-icon-lg shrink-0 text-lt-danger"
-		})
-	}
-};
-function isVariant(value) {
-	return variants.some((variant) => variant === value);
-}
 var nextId = 0;
-function normalize(detail) {
-	if (typeof detail !== "object" || detail === null) return null;
-	const data = detail.toast;
-	if (typeof data !== "object" || data === null) return null;
-	const toast = data;
-	if (typeof toast.message !== "string" || toast.message === "") return null;
-	return {
-		action: toast.action ?? null,
-		dismissible: toast.dismissible !== false,
-		duration: typeof toast.duration === "number" ? toast.duration : null,
-		message: toast.message,
-		persistent: toast.persistent === true,
-		variant: isVariant(toast.variant) ? toast.variant : "success"
-	};
-}
 function Toaster({ duration = 4e3 }) {
 	const { t } = useT("lattice");
-	const registry = useRegistry();
 	const [toasts, setToasts] = useState([]);
-	function push(detail) {
-		const item = normalize(detail);
-		if (item) setToasts((current) => [...current, {
-			...item,
-			id: nextId++
-		}]);
-	}
 	function dismiss(id) {
 		setToasts((current) => current.filter((toast) => toast.id !== id));
 	}
-	useEffect(() => {
-		const listener = (event) => push(event.detail);
-		window.addEventListener(LATTICE_EVENT.toast, listener);
-		return () => window.removeEventListener(LATTICE_EVENT.toast, listener);
-	}, []);
+	useEffect(() => onToast((toast) => {
+		setToasts((current) => [...current, {
+			...toast,
+			id: nextId++
+		}]);
+	}), []);
 	return /* @__PURE__ */ jsxs(Toast.Provider, {
 		duration,
 		swipeDirection: "down",
@@ -101,10 +40,7 @@ function Toaster({ duration = 4e3 }) {
 						children: toast.message
 					}), toast.action ? /* @__PURE__ */ jsx("div", {
 						className: "flex flex-wrap gap-2",
-						children: /* @__PURE__ */ jsx(Renderer, {
-							nodes: [toast.action],
-							registry
-						})
+						children: /* @__PURE__ */ jsx(RenderNode, { node: toast.action })
 					}) : null]
 				}),
 				toast.dismissible ? /* @__PURE__ */ jsx(Toast.Close, {

package/dist/toast/toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","names":[],"sources":["../../resources/js/toast/toaster.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Toast from \"@radix-ui/react-toast\";\nimport { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Renderer } from \"@lattice/lattice/core/renderer\";\nimport type { ToastMessage, ToastVariant } from \"@lattice/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice/lattice/events/event-names\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport { useRegistry } from \"@lattice/lattice/provider\";\n\nconst variants = [\"success\", \"info\", \"warning\", \"error\"] as const satisfies readonly ToastVariant[];\n\ntype ToastItem = ToastMessage & { id: number };\n\nconst variantStyles: Record<ToastVariant, { accent: string; icon: ReactNode }> = {\n  success: {\n    accent: \"border-l-lt-success\",\n    icon: <Icon name=\"circle-check\" className=\"size-lt-icon-lg shrink-0 text-lt-success\" />,\n  },\n  info: {\n    accent: \"border-l-lt-info\",\n    icon: <Icon name=\"info\" className=\"size-lt-icon-lg shrink-0 text-lt-info\" />,\n  },\n  warning: {\n    accent: \"border-l-lt-warning\",\n    icon: <Icon name=\"circle-alert\" className=\"size-lt-icon-lg shrink-0 text-lt-warning\" />,\n  },\n  error: {\n    accent: \"border-l-lt-danger\",\n    icon: <Icon name=\"circle-x\" className=\"size-lt-icon-lg shrink-0 text-lt-danger\" />,\n  },\n};\n\nfunction isVariant(value: unknown): value is ToastVariant {\n  return variants.some((variant) => variant === value);\n}\n\nlet nextId = 0;\n\nfunction normalize(detail: unknown): ToastMessage | null {\n  if (typeof detail !== \"object\" || detail === null) {\n    return null;\n  }\n\n  const data = (detail as { toast?: unknown }).toast;\n\n  if (typeof data !== \"object\" || data === null) {\n    return null;\n  }\n\n  const toast = data as Record<string, unknown>;\n\n  if (typeof toast.message !== \"string\" || toast.message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (toast.action as ToastMessage[\"action\"]) ?? null,\n    dismissible: toast.dismissible !== false,\n    duration: typeof toast.duration === \"number\" ? toast.duration : null,\n    message: toast.message,\n    persistent: toast.persistent === true,\n    variant: isVariant(toast.variant) ? toast.variant : \"success\",\n  };\n}\n\nexport function Toaster({ duration = 4000 }: { duration?: number }) {\n  const { t } = useT(\"lattice\");\n  const registry = useRegistry();\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  function push(detail: unknown): void {\n    const item = normalize(detail);\n\n    if (item) {\n      setToasts((current) => [...current, { ...item, id: nextId++ }]);\n    }\n  }\n\n  function dismiss(id: number): void {\n    setToasts((current) => current.filter((toast) => toast.id !== id));\n  }\n\n  useEffect(() => {\n    const listener = (event: Event): void => push((event as CustomEvent).detail);\n\n    window.addEventListener(LATTICE_EVENT.toast, listener);\n\n    return () => window.removeEventListener(LATTICE_EVENT.toast, listener);\n  }, []);\n\n  return (\n    <Toast.Provider duration={duration} swipeDirection=\"down\">\n      {toasts.map((toast) => (\n        <Toast.Root\n          key={toast.id}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg shadow-lg\",\n            variantStyles[toast.variant].accent,\n            \"data-[state=open]:animate-lt-toast-in data-[state=closed]:animate-lt-toast-out\",\n            \"data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform\",\n          )}\n          data-test={`toast-${toast.variant}`}\n          duration={toast.persistent ? Infinity : (toast.duration ?? duration)}\n          onOpenChange={(open) => {\n            if (!open) {\n              dismiss(toast.id);\n            }\n          }}\n        >\n          {variantStyles[toast.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <Toast.Title className=\"text-sm text-lt-fg\">{toast.message}</Toast.Title>\n            {toast.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <Renderer nodes={[toast.action]} registry={registry} />\n              </div>\n            ) : null}\n          </div>\n          {toast.dismissible ? (\n            <Toast.Close\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              className=\"shrink-0 rounded-md p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              data-test=\"toast-dismiss\"\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </Toast.Close>\n          ) : null}\n        </Toast.Root>\n      ))}\n      <Toast.Viewport className=\"fixed inset-x-0 bottom-0 z-[100] mx-auto flex w-full max-w-sm flex-col gap-2 p-4 outline-none\" />\n    </Toast.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"toaster.js","names":[],"sources":["../../resources/js/toast/toaster.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as Toast from \"@radix-ui/react-toast\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { ToastMessage } from \"@lattice-php/lattice/types/generated\";\nimport { onToast } from \"@lattice-php/lattice/toast/toast\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { variantStyles } from \"@lattice-php/lattice/toast/variant-styles\";\n\ntype ToastItem = ToastMessage & { id: number };\n\nlet nextId = 0;\n\nexport function Toaster({ duration = 4000 }: { duration?: number }) {\n  const { t } = useT(\"lattice\");\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  function dismiss(id: number): void {\n    setToasts((current) => current.filter((toast) => toast.id !== id));\n  }\n\n  useEffect(\n    () =>\n      onToast((toast) => {\n        setToasts((current) => [...current, { ...toast, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  return (\n    <Toast.Provider duration={duration} swipeDirection=\"down\">\n      {toasts.map((toast) => (\n        <Toast.Root\n          key={toast.id}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg shadow-lg\",\n            variantStyles[toast.variant].accent,\n            \"data-[state=open]:animate-lt-toast-in data-[state=closed]:animate-lt-toast-out\",\n            \"data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform\",\n          )}\n          data-test={`toast-${toast.variant}`}\n          duration={toast.persistent ? Infinity : (toast.duration ?? duration)}\n          onOpenChange={(open) => {\n            if (!open) {\n              dismiss(toast.id);\n            }\n          }}\n        >\n          {variantStyles[toast.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <Toast.Title className=\"text-sm text-lt-fg\">{toast.message}</Toast.Title>\n            {toast.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={toast.action} />\n              </div>\n            ) : null}\n          </div>\n          {toast.dismissible ? (\n            <Toast.Close\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              className=\"shrink-0 rounded-md p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              data-test=\"toast-dismiss\"\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </Toast.Close>\n          ) : null}\n        </Toast.Root>\n      ))}\n      <Toast.Viewport className=\"fixed inset-x-0 bottom-0 z-[100] mx-auto flex w-full max-w-sm flex-col gap-2 p-4 outline-none\" />\n    </Toast.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAI,SAAS;AAEb,SAAgB,QAAQ,EAAE,WAAW,OAA+B;CAClE,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAsB,CAAC,CAAC;CAEpD,SAAS,QAAQ,IAAkB;EACjC,WAAW,YAAY,QAAQ,QAAQ,UAAU,MAAM,OAAO,EAAE,CAAC;CACnE;CAEA,gBAEI,SAAS,UAAU;EACjB,WAAW,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAO,IAAI;EAAS,CAAC,CAAC;CACjE,CAAC,GACH,CAAC,CACH;CAEA,OACE,qBAAC,MAAM,UAAP;EAA0B;EAAU,gBAAe;YAAnD,CACG,OAAO,KAAK,UACX,qBAAC,MAAM,MAAP;GAEE,WAAW,GACT,uHACA,cAAc,MAAM,SAAS,QAC7B,kFACA,4IACF;GACA,aAAW,SAAS,MAAM;GAC1B,UAAU,MAAM,aAAa,WAAY,MAAM,YAAY;GAC3D,eAAe,SAAS;IACtB,IAAI,CAAC,MACH,QAAQ,MAAM,EAAE;GAEpB;aAdF;IAgBG,cAAc,MAAM,SAAS;IAC9B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,MAAM,OAAP;MAAa,WAAU;gBAAsB,MAAM;KAAqB,CAAA,GACvE,MAAM,SACL,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,YAAD,EAAY,MAAM,MAAM,OAAS,CAAA;KAC9B,CAAA,IACH,IACD;;IACJ,MAAM,cACL,oBAAC,MAAM,OAAP;KACE,cAAY,EAAE,gBAAgB,SAAS;KACvC,WAAU;KACV,aAAU;eAEV,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACjC,CAAA,IACX;GACM;KAjCL,MAAM,EAiCD,CACb,GACD,oBAAC,MAAM,UAAP,EAAgB,WAAU,gGAAiG,CAAA,CAC7G;;AAEpB"}

package/dist/toast/variant-styles.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { Variant } from '../types/generated';
+export declare const variantStyles: Record<Variant, {
+    accent: string;
+    icon: ReactNode;
+}>;

package/dist/toast/variant-styles.js

@@ -0,0 +1,37 @@
+import { Icon } from "../icons/sprite.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/toast/variant-styles.tsx
+var variantStyles = {
+	success: {
+		accent: "border-l-lt-success",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-check",
+			className: "size-lt-icon-lg shrink-0 text-lt-success"
+		})
+	},
+	info: {
+		accent: "border-l-lt-info",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			className: "size-lt-icon-lg shrink-0 text-lt-info"
+		})
+	},
+	warning: {
+		accent: "border-l-lt-warning",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-alert",
+			className: "size-lt-icon-lg shrink-0 text-lt-warning"
+		})
+	},
+	error: {
+		accent: "border-l-lt-danger",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-x",
+			className: "size-lt-icon-lg shrink-0 text-lt-danger"
+		})
+	}
+};
+//#endregion
+export { variantStyles };
+
+//# sourceMappingURL=variant-styles.js.map

package/dist/toast/variant-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-styles.js","names":[],"sources":["../../resources/js/toast/variant-styles.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ReactNode } from \"react\";\nimport type { Variant } from \"@lattice-php/lattice/types/generated\";\n\nexport const variantStyles: Record<Variant, { accent: string; icon: ReactNode }> = {\n  success: {\n    accent: \"border-l-lt-success\",\n    icon: <Icon name=\"circle-check\" className=\"size-lt-icon-lg shrink-0 text-lt-success\" />,\n  },\n  info: {\n    accent: \"border-l-lt-info\",\n    icon: <Icon name=\"info\" className=\"size-lt-icon-lg shrink-0 text-lt-info\" />,\n  },\n  warning: {\n    accent: \"border-l-lt-warning\",\n    icon: <Icon name=\"circle-alert\" className=\"size-lt-icon-lg shrink-0 text-lt-warning\" />,\n  },\n  error: {\n    accent: \"border-l-lt-danger\",\n    icon: <Icon name=\"circle-x\" className=\"size-lt-icon-lg shrink-0 text-lt-danger\" />,\n  },\n};\n"],"mappings":";;;AAIA,IAAa,gBAAsE;CACjF,SAAS;EACP,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;EAA4C,CAAA;CACxF;CACA,MAAM;EACJ,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAyC,CAAA;CAC7E;CACA,SAAS;EACP,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;EAA4C,CAAA;CACxF;CACA,OAAO;EACL,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAW,WAAU;EAA2C,CAAA;CACnF;AACF"}