@lattice-php/lattice 0.20.0 → 0.22.0

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

@@ -1,20 +1,18 @@
 import { useT } from "../../i18n/instance.js";
-import { withHeaders } from "../../core/headers.js";
 import { prefixedTestId } from "../../core/test-id.js";
-import { getActionEffects } from "../../effects/dispatch.js";
 import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
 import { Button } from "../../ui/button.js";
 import { Spinner } from "../../ui/spinner.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog.js";
+import { apiFetch } from "../../core/api.js";
 import { runAction } from "../../action/lib/run-action.js";
 import { ActionForm } from "../../action/components/action-form.js";
-import { useHttp } from "@inertiajs/react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/bulk-bar.tsx
 function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
 	const { t } = useT("lattice");
-	const http = useHttp({});
+	const [processing, setProcessing] = useState(false);
 	const dispatch = useEffectDispatcher();
 	const [confirming, setConfirming] = useState(null);
 	const [filling, setFilling] = useState(null);
@@ -23,11 +21,15 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		...query
 	} : { selected: selectedKeys };
 	async function submit(action) {
-		http.transform((data) => ({
-			...data,
-			...selectionPayload()
-		}));
-		if (await runAction(() => http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") }), dispatch)) {
+		setProcessing(true);
+		const ok = await runAction(() => apiFetch(action.endpoint, {
+			method: action.method,
+			ref: action.ref,
+			body: JSON.stringify(selectionPayload()),
+			throwOnError: false
+		}), dispatch);
+		setProcessing(false);
+		if (ok) {
 			setConfirming(null);
 			onCompleted();
 		}
@@ -64,9 +66,9 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 					type: "button",
 					"data-test": prefixedTestId("bulk-action", action.id),
 					variant: action.variant,
-					disabled: http.processing,
+					disabled: processing,
 					onClick: () => run(action),
-					children: [http.processing && /* @__PURE__ */ jsx(Spinner, {}), action.label]
+					children: [processing && /* @__PURE__ */ jsx(Spinner, {}), action.label]
 				}, action.id))
 			}),
 			confirming?.confirmation && /* @__PURE__ */ jsx(ConfirmDialog, {
@@ -75,7 +77,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
 				cancelLabel: confirming.confirmation.cancelLabel ?? t("common.cancel", "Cancel"),
 				confirmVariant: confirming.variant,
-				processing: http.processing,
+				processing,
 				onConfirm: () => void submit(confirming),
 				onCancel: () => setConfirming(null)
 			}),
@@ -88,13 +90,14 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				formNode: filling.form,
 				method: filling.method,
 				onClose: () => setFilling(null),
-				onSuccess: (response) => {
-					dispatch(getActionEffects(response.effects));
+				onSuccess: () => {
 					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.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          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,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,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 { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\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\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 [processing, setProcessing] = useState(false);\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    setProcessing(true);\n\n    const ok = await runAction(\n      () =>\n        apiFetch(action.endpoint, {\n          method: action.method,\n          ref: action.ref,\n          body: JSON.stringify(selectionPayload()),\n          throwOnError: false,\n        }),\n      dispatch,\n    );\n\n    setProcessing(false);\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={processing}\n            onClick={() => run(action)}\n          >\n            {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={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={() => {\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":";;;;;;;;;;;;AAWA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,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,cAAc,IAAI;EAElB,MAAM,KAAK,MAAM,gBAEb,SAAS,OAAO,UAAU;GACxB,QAAQ,OAAO;GACf,KAAK,OAAO;GACZ,MAAM,KAAK,UAAU,iBAAiB,CAAC;GACvC,cAAc;EAChB,CAAC,GACH,QACF;EAEA,cAAc,KAAK;EAEnB,IAAI,IAAI;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;KACV,eAAe,IAAI,MAAM;eAN3B,CAQG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,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;IACf;IACZ,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,iBAAiB;KACf,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/boolean-cell.js

@@ -1,11 +1,9 @@
 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);

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 { useT } from \"@lattice-php/lattice/i18n\";\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 { 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":";;;;;AAKA,SAAS,SAAS,OAAyB;CACzC,OAAO,UAAU,QAAQ,UAAU,KAAK,UAAU,OAAO,UAAU;AACrE;AAEA,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"}
+{"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/money-cell.js

@@ -1,32 +1,21 @@
-import { useLocale } from "../../../i18n/locale.js";
-import { CopyableText } from "../../../ui/copyable-text.js";
-import { formatCell } from "../../lib/format.js";
-import { numericValue } from "../../../format/numeric.js";
-import { formatNumber } from "../../../format/number.js";
+import { NumericCell } from "./numeric-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/money-cell.tsx
 var MoneyCell = ({ column, props, row, value }) => {
-	const { locale } = useLocale();
-	if (numericValue(value) === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
 	const rawCode = props.currencyField ? row[props.currencyField] : void 0;
 	const code = props.currency ?? (typeof rawCode === "string" ? rawCode : null);
-	const content = /* @__PURE__ */ jsx("span", {
-		className: "tabular-nums",
-		children: formatNumber(value, {
+	return /* @__PURE__ */ jsx(NumericCell, {
+		column,
+		copyable: props.copyable,
+		value,
+		format: {
 			kind: "number",
 			notation: "standard",
 			minimumFractionDigits: props.minimumFractionDigits,
 			maximumFractionDigits: props.maximumFractionDigits,
 			currency: code,
 			unit: null
-		}, locale)
-	});
-	if (!props.copyable) return content;
-	return /* @__PURE__ */ jsx(CopyableText, {
-		value: String(value),
-		label: column.props.label ?? column.key,
-		testId: `copy-${column.key}`,
-		children: content
+		}
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"money-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/money-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatNumber } from \"@lattice-php/lattice/format/number\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { CopyableText } from \"@lattice-php/lattice/ui/copyable-text\";\n\nexport const MoneyCell: ColumnCellComponent<\"column.money\"> = ({ column, props, row, value }) => {\n  const { locale } = useLocale();\n\n  if (numericValue(value) === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const rawCode = props.currencyField ? row[props.currencyField] : undefined;\n  const code = props.currency ?? (typeof rawCode === \"string\" ? rawCode : null);\n\n  const text = formatNumber(\n    value,\n    {\n      kind: \"number\",\n      notation: \"standard\",\n      minimumFractionDigits: props.minimumFractionDigits,\n      maximumFractionDigits: props.maximumFractionDigits,\n      currency: code,\n      unit: null,\n    },\n    locale,\n  );\n\n  const content = <span className=\"tabular-nums\">{text}</span>;\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <CopyableText\n      value={String(value)}\n      label={column.props.label ?? column.key}\n      testId={`copy-${column.key}`}\n    >\n      {content}\n    </CopyableText>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,aAAkD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC/F,MAAM,EAAE,WAAW,UAAU;CAE7B,IAAI,aAAa,KAAK,MAAM,MAC1B,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAGhD,MAAM,UAAU,MAAM,gBAAgB,IAAI,MAAM,iBAAiB,KAAA;CACjE,MAAM,OAAO,MAAM,aAAa,OAAO,YAAY,WAAW,UAAU;CAexE,MAAM,UAAU,oBAAC,QAAD;EAAM,WAAU;YAbnB,aACX,OACA;GACE,MAAM;GACN,UAAU;GACV,uBAAuB,MAAM;GAC7B,uBAAuB,MAAM;GAC7B,UAAU;GACV,MAAM;EACR,GACA,MAG8C;CAAW,CAAA;CAE3D,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OAAO,OAAO,KAAK;EACnB,OAAO,OAAO,MAAM,SAAS,OAAO;EACpC,QAAQ,QAAQ,OAAO;YAEtB;CACW,CAAA;AAElB"}
+{"version":3,"file":"money-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/money-cell.tsx"],"sourcesContent":["import type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { NumericCell } from \"./numeric-cell\";\n\nexport const MoneyCell: ColumnCellComponent<\"column.money\"> = ({ column, props, row, value }) => {\n  const rawCode = props.currencyField ? row[props.currencyField] : undefined;\n  const code = props.currency ?? (typeof rawCode === \"string\" ? rawCode : null);\n\n  return (\n    <NumericCell\n      column={column}\n      copyable={props.copyable}\n      value={value}\n      format={{\n        kind: \"number\",\n        notation: \"standard\",\n        minimumFractionDigits: props.minimumFractionDigits,\n        maximumFractionDigits: props.maximumFractionDigits,\n        currency: code,\n        unit: null,\n      }}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,aAAkD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC/F,MAAM,UAAU,MAAM,gBAAgB,IAAI,MAAM,iBAAiB,KAAA;CACjE,MAAM,OAAO,MAAM,aAAa,OAAO,YAAY,WAAW,UAAU;CAExE,OACE,oBAAC,aAAD;EACU;EACR,UAAU,MAAM;EACT;EACP,QAAQ;GACN,MAAM;GACN,UAAU;GACV,uBAAuB,MAAM;GAC7B,uBAAuB,MAAM;GAC7B,UAAU;GACV,MAAM;EACR;CACD,CAAA;AAEL"}

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

@@ -1,32 +1,19 @@
-import { useLocale } from "../../../i18n/locale.js";
-import { CopyableText } from "../../../ui/copyable-text.js";
-import { formatCell } from "../../lib/format.js";
-import { numericValue } from "../../../format/numeric.js";
-import { formatNumber } from "../../../format/number.js";
+import { NumericCell } from "./numeric-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/number-cell.tsx
-var NumberCell = ({ column, props, value }) => {
-	const { locale } = useLocale();
-	if (numericValue(value) === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
-	const content = /* @__PURE__ */ jsx("span", {
-		className: "tabular-nums",
-		children: formatNumber(value, {
-			kind: "number",
-			notation: props.compact ? "compact" : "standard",
-			minimumFractionDigits: props.minimumFractionDigits,
-			maximumFractionDigits: props.maximumFractionDigits,
-			currency: null,
-			unit: props.unit
-		}, locale)
-	});
-	if (!props.copyable) return content;
-	return /* @__PURE__ */ jsx(CopyableText, {
-		value: String(value),
-		label: column.props.label ?? column.key,
-		testId: `copy-${column.key}`,
-		children: content
-	});
-};
+var NumberCell = ({ column, props, value }) => /* @__PURE__ */ jsx(NumericCell, {
+	column,
+	copyable: props.copyable,
+	value,
+	format: {
+		kind: "number",
+		notation: props.compact ? "compact" : "standard",
+		minimumFractionDigits: props.minimumFractionDigits,
+		maximumFractionDigits: props.maximumFractionDigits,
+		currency: null,
+		unit: props.unit
+	}
+});
 //#endregion
 export { NumberCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"number-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/number-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatNumber } from \"@lattice-php/lattice/format/number\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { CopyableText } from \"@lattice-php/lattice/ui/copyable-text\";\n\nexport const NumberCell: ColumnCellComponent<\"column.number\"> = ({ column, props, value }) => {\n  const { locale } = useLocale();\n\n  if (numericValue(value) === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const text = formatNumber(\n    value,\n    {\n      kind: \"number\",\n      notation: props.compact ? \"compact\" : \"standard\",\n      minimumFractionDigits: props.minimumFractionDigits,\n      maximumFractionDigits: props.maximumFractionDigits,\n      currency: null,\n      unit: props.unit,\n    },\n    locale,\n  );\n\n  const content = <span className=\"tabular-nums\">{text}</span>;\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <CopyableText\n      value={String(value)}\n      label={column.props.label ?? column.key}\n      testId={`copy-${column.key}`}\n    >\n      {content}\n    </CopyableText>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,cAAoD,EAAE,QAAQ,OAAO,YAAY;CAC5F,MAAM,EAAE,WAAW,UAAU;CAE7B,IAAI,aAAa,KAAK,MAAM,MAC1B,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAgBhD,MAAM,UAAU,oBAAC,QAAD;EAAM,WAAU;YAbnB,aACX,OACA;GACE,MAAM;GACN,UAAU,MAAM,UAAU,YAAY;GACtC,uBAAuB,MAAM;GAC7B,uBAAuB,MAAM;GAC7B,UAAU;GACV,MAAM,MAAM;EACd,GACA,MAG8C;CAAW,CAAA;CAE3D,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OAAO,OAAO,KAAK;EACnB,OAAO,OAAO,MAAM,SAAS,OAAO;EACpC,QAAQ,QAAQ,OAAO;YAEtB;CACW,CAAA;AAElB"}
+{"version":3,"file":"number-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/number-cell.tsx"],"sourcesContent":["import type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { NumericCell } from \"./numeric-cell\";\n\nexport const NumberCell: ColumnCellComponent<\"column.number\"> = ({ column, props, value }) => (\n  <NumericCell\n    column={column}\n    copyable={props.copyable}\n    value={value}\n    format={{\n      kind: \"number\",\n      notation: props.compact ? \"compact\" : \"standard\",\n      minimumFractionDigits: props.minimumFractionDigits,\n      maximumFractionDigits: props.maximumFractionDigits,\n      currency: null,\n      unit: props.unit,\n    }}\n  />\n);\n"],"mappings":";;;AAGA,IAAa,cAAoD,EAAE,QAAQ,OAAO,YAChF,oBAAC,aAAD;CACU;CACR,UAAU,MAAM;CACT;CACP,QAAQ;EACN,MAAM;EACN,UAAU,MAAM,UAAU,YAAY;EACtC,uBAAuB,MAAM;EAC7B,uBAAuB,MAAM;EAC7B,UAAU;EACV,MAAM,MAAM;CACd;AACD,CAAA"}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { NumberFormat } from '../../../types/generated.js';
+import { TableColumn } from '../../types.js';
+/** Shared numeric cell body for the money and number columns. */
+export declare function NumericCell({ column, copyable, format, value, }: {
+    column: TableColumn;
+    copyable?: boolean | null;
+    format: NumberFormat;
+    value: unknown;
+}): ReactNode;

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

@@ -0,0 +1,25 @@
+import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../lib/format.js";
+import { numericValue } from "../../../format/numeric.js";
+import { formatNumber } from "../../../format/number.js";
+import { CopyableCell } from "./copyable-cell.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/numeric-cell.tsx
+/** Shared numeric cell body for the money and number columns. */
+function NumericCell({ column, copyable, format, value }) {
+	const { locale } = useLocale();
+	if (numericValue(value) === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
+	return /* @__PURE__ */ jsx(CopyableCell, {
+		column,
+		copyable,
+		value: String(value),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: formatNumber(value, format, locale)
+		})
+	});
+}
+//#endregion
+export { NumericCell };
+
+//# sourceMappingURL=numeric-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"numeric-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/numeric-cell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport type { NumberFormat } from \"@lattice-php/lattice/types/generated\";\nimport { formatNumber } from \"@lattice-php/lattice/format/number\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { TableColumn } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\n/** Shared numeric cell body for the money and number columns. */\nexport function NumericCell({\n  column,\n  copyable,\n  format,\n  value,\n}: {\n  column: TableColumn;\n  copyable?: boolean | null;\n  format: NumberFormat;\n  value: unknown;\n}): ReactNode {\n  const { locale } = useLocale();\n\n  if (numericValue(value) === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  return (\n    <CopyableCell column={column} copyable={copyable} value={String(value)}>\n      <span className=\"tabular-nums\">{formatNumber(value, format, locale)}</span>\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,YAAY,EAC1B,QACA,UACA,QACA,SAMY;CACZ,MAAM,EAAE,WAAW,UAAU;CAE7B,IAAI,aAAa,KAAK,MAAM,MAC1B,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAGhD,OACE,oBAAC,cAAD;EAAsB;EAAkB;EAAU,OAAO,OAAO,KAAK;YACnE,oBAAC,QAAD;GAAM,WAAU;aAAgB,aAAa,OAAO,QAAQ,MAAM;EAAQ,CAAA;CAC9D,CAAA;AAElB"}

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

@@ -1,5 +1,5 @@
-import { Renderer } from "../../../core/renderer.js";
 import { materializeSchema } from "../../../core/materialize.js";
+import { Renderer } from "../../../core/renderer.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/stack-cell.tsx
 var StackCell = ({ column, row }) => /* @__PURE__ */ jsx("div", {

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

@@ -1,8 +1,8 @@
 import { cn } from "../../../lib/utils.js";
 import { DateTime } from "../../../i18n/date-time.js";
-import { CopyableText } from "../../../ui/copyable-text.js";
 import { coerceColor, namedColor, toneProps } from "../../../lib/color.js";
 import { formatCell, resolveLink } from "../../lib/format.js";
+import { CopyableCell } from "./copyable-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/text-cell.tsx
 var TextCell = (args) => {
@@ -57,11 +57,10 @@ function PlainTextCell({ column, props, row, value }) {
 		dateStyle: dateProps.dateStyle,
 		timeStyle: dateProps.timeStyle
 	});
-	if (!props.copyable) return content;
-	return /* @__PURE__ */ jsx(CopyableText, {
+	return /* @__PURE__ */ jsx(CopyableCell, {
+		column,
+		copyable: props.copyable,
 		value: text,
-		label: column.props.label ?? column.key,
-		testId: `copy-${column.key}`,
 		children: content
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { coerceColor, namedColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport { CopyableText } from \"@lattice-php/lattice/ui/copyable-text\";\nimport type { ReactNode } from \"react\";\nimport { formatCell, resolveLink } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport type { ColumnPropsOf } from \"@lattice-php/lattice/table/types\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction Badge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  const tone = toneProps(coerceColor(color) ?? namedColor(\"gray\"));\n\n  return (\n    <span className={cn(\"lt-cell-badge\", tone.className)} style={tone.style}>\n      {label}\n    </span>\n  );\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <Badge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <Badge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\">).date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <CopyableText\n      value={text}\n      label={column.props.label ?? column.key}\n      testId={`copy-${column.key}`}\n    >\n      {content}\n    </CopyableText>\n  );\n}\n"],"mappings":";;;;;;;AAWA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,MAAM,EAAE,OAAO,SAA8D;CACpF,IAAI,UAAU,IACZ,OAAO;CAGT,MAAM,OAAO,UAAU,YAAY,KAAK,KAAK,WAAW,MAAM,CAAC;CAE/D,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,KAAK,SAAS;EAAG,OAAO,KAAK;YAC/D;CACG,CAAA;AAEV;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,OAAD;IAAmB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EACvF,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,OAAD;EAAO,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AACvF;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,MAAuC;CACjE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CAErC,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;CACA,CAAA,IAEH;CAGF,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OAAO;EACP,OAAO,OAAO,MAAM,SAAS,OAAO;EACpC,QAAQ,QAAQ,OAAO;YAEtB;CACW,CAAA;AAElB"}
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { coerceColor, namedColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport type { ReactNode } from \"react\";\nimport { formatCell, resolveLink } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport type { ColumnPropsOf } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction Badge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  const tone = toneProps(coerceColor(color) ?? namedColor(\"gray\"));\n\n  return (\n    <span className={cn(\"lt-cell-badge\", tone.className)} style={tone.style}>\n      {label}\n    </span>\n  );\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <Badge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <Badge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\">).date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  return (\n    <CopyableCell column={column} copyable={props.copyable} value={text}>\n      {content}\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;;AAWA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,MAAM,EAAE,OAAO,SAA8D;CACpF,IAAI,UAAU,IACZ,OAAO;CAGT,MAAM,OAAO,UAAU,YAAY,KAAK,KAAK,WAAW,MAAM,CAAC;CAE/D,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,KAAK,SAAS;EAAG,OAAO,KAAK;YAC/D;CACG,CAAA;AAEV;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,OAAD;IAAmB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EACvF,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,OAAD;EAAO,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AACvF;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,MAAuC;CACjE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CAErC,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;CACA,CAAA,IAEH;CAGF,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,OACE,oBAAC,cAAD;EAAsB;EAAQ,UAAU,MAAM;EAAU,OAAO;YAC5D;CACW,CAAA;AAElB"}

package/dist/table/components/filter-controls.js

@@ -11,6 +11,7 @@ import { TableCellProvider } from "../../form/hooks/row-layout-context.js";
 import { Checkbox } from "../../ui/checkbox.js";
 import { IconButton } from "../../ui/icon-button.js";
 import { filterValue, isActiveFilterValue } from "../lib/filter-values.js";
+import { isTruthy } from "../../lib/is-truthy.js";
 import { useCallback, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/filter-controls.tsx
@@ -120,9 +121,6 @@ function ToggleControl({ filter, value, processing, onChange }) {
 		}), /* @__PURE__ */ jsx("span", { children: filter.props.label })]
 	});
 }
-function isTruthy(value) {
-	return value === true || value === "1" || value === 1 || value === "true";
-}
 //#endregion
 export { TableFilterControl };
 

package/dist/table/components/filter-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, Option } from \"@lattice-php/lattice/core/types\";\nimport {\n  FieldCommitOverrideProvider,\n  FormProvider,\n  FormValuesProvider,\n  getPath,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  setPath,\n  TableCellProvider,\n  useFormValues,\n  useSetFormValue,\n} from \"@lattice-php/lattice/form/embed\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { filterValue, isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport type { FilterNode } from \"@lattice-php/lattice/table/types\";\n\nexport type FilterOptionSearch = (\n  field: string,\n  query: string,\n  signal: AbortSignal,\n) => Promise<Option[]>;\n\ntype FilterValue = Record<string, unknown>;\n\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  bare = false,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  bare?: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const schema = filter.schema ?? [];\n\n  if (schema.length === 0) {\n    return (\n      <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n    );\n  }\n\n  return (\n    <div className=\"flex items-end gap-2\">\n      <div className=\"min-w-0 flex-1\">\n        <SchemaControl\n          filter={filter}\n          schema={schema}\n          value={value}\n          processing={processing}\n          bare={bare}\n          onChange={onChange}\n          onSearch={onSearch}\n        />\n      </div>\n      {isActiveFilterValue(value) && (\n        <IconButton\n          size=\"md\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", {\n            label: filter.props.label ?? \"\",\n          })}\n          disabled={processing}\n          onClick={() => onChange(undefined)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SchemaControl({\n  filter,\n  schema,\n  value,\n  processing,\n  bare,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  schema: Node[];\n  value: unknown;\n  processing: boolean;\n  bare: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const initial = useMemo(() => filterValue(value), [value]);\n  const form = useMemo(\n    () => ({\n      action: \"#\",\n      clearErrors: () => {},\n      componentId: `table-filter-${filter.key}`,\n      componentRef: \"\",\n      errors: {},\n      fieldIdPrefix: `table-filter-${filter.key}`,\n      fieldLabels: {},\n      precognitive: false,\n      processing,\n      searchOptions: (\n        field: string,\n        query: string,\n        _values: Record<string, unknown>,\n        signal: AbortSignal,\n      ) => (onSearch ? onSearch(field, query, signal) : Promise.resolve([])),\n      validate: () => {},\n    }),\n    [filter.key, onSearch, processing],\n  );\n\n  const content = (\n    <div\n      aria-disabled={processing}\n      className={cn(\"grid gap-3\", processing && \"pointer-events-none opacity-60\")}\n    >\n      <Renderer nodes={schema} />\n    </div>\n  );\n\n  return (\n    <FormProvider value={form}>\n      <PrefillProvider value={{ markUserEdit: () => {} }}>\n        <ResolvedNodesProvider nodes={{}}>\n          <FormValuesProvider initial={initial}>\n            <TableFilterCommitBridge onChange={onChange}>\n              {bare ? <TableCellProvider>{content}</TableCellProvider> : content}\n            </TableFilterCommitBridge>\n          </FormValuesProvider>\n        </ResolvedNodesProvider>\n      </PrefillProvider>\n    </FormProvider>\n  );\n}\n\nfunction TableFilterCommitBridge({\n  children,\n  onChange,\n}: {\n  children: ReactNode;\n  onChange: (value: FilterValue) => void;\n}) {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const write = useCallback(\n    (name: string, value: unknown) => {\n      const nextValue =\n        typeof value === \"function\"\n          ? (value as (previous: unknown) => unknown)(getPath(valuesRef.current, name))\n          : value;\n      const next = setPath(valuesRef.current, name, nextValue);\n\n      valuesRef.current = next;\n      setValue(name, nextValue);\n      onChange(next);\n    },\n    [onChange, setValue],\n  );\n\n  const commit = useMemo(\n    () => ({\n      blur: () => {},\n      change: write,\n      commit: write,\n    }),\n    [write],\n  );\n\n  return <FieldCommitOverrideProvider value={commit}>{children}</FieldCommitOverrideProvider>;\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = isTruthy(filterValue(value).value);\n\n  return (\n    <label className=\"flex h-lt-control-md cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.props.label ?? undefined}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? { value: \"1\" } : undefined)}\n      />\n      <span>{filter.props.label}</span>\n    </label>\n  );\n}\n\nfunction isTruthy(value: unknown): boolean {\n  return value === true || value === \"1\" || value === 1 || value === \"true\";\n}\n"],"mappings":"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"}
+{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, Option } from \"@lattice-php/lattice/core/types\";\nimport {\n  FieldCommitOverrideProvider,\n  FormProvider,\n  FormValuesProvider,\n  getPath,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  setPath,\n  TableCellProvider,\n  useFormValues,\n  useSetFormValue,\n} from \"@lattice-php/lattice/form/embed\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { isTruthy } from \"@lattice-php/lattice/lib/is-truthy\";\nimport { filterValue, isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport type { FilterNode } from \"@lattice-php/lattice/table/types\";\n\nexport type FilterOptionSearch = (\n  field: string,\n  query: string,\n  signal: AbortSignal,\n) => Promise<Option[]>;\n\ntype FilterValue = Record<string, unknown>;\n\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  bare = false,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  bare?: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const schema = filter.schema ?? [];\n\n  if (schema.length === 0) {\n    return (\n      <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n    );\n  }\n\n  return (\n    <div className=\"flex items-end gap-2\">\n      <div className=\"min-w-0 flex-1\">\n        <SchemaControl\n          filter={filter}\n          schema={schema}\n          value={value}\n          processing={processing}\n          bare={bare}\n          onChange={onChange}\n          onSearch={onSearch}\n        />\n      </div>\n      {isActiveFilterValue(value) && (\n        <IconButton\n          size=\"md\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", {\n            label: filter.props.label ?? \"\",\n          })}\n          disabled={processing}\n          onClick={() => onChange(undefined)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SchemaControl({\n  filter,\n  schema,\n  value,\n  processing,\n  bare,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  schema: Node[];\n  value: unknown;\n  processing: boolean;\n  bare: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const initial = useMemo(() => filterValue(value), [value]);\n  const form = useMemo(\n    () => ({\n      action: \"#\",\n      clearErrors: () => {},\n      componentId: `table-filter-${filter.key}`,\n      componentRef: \"\",\n      errors: {},\n      fieldIdPrefix: `table-filter-${filter.key}`,\n      fieldLabels: {},\n      precognitive: false,\n      processing,\n      searchOptions: (\n        field: string,\n        query: string,\n        _values: Record<string, unknown>,\n        signal: AbortSignal,\n      ) => (onSearch ? onSearch(field, query, signal) : Promise.resolve([])),\n      validate: () => {},\n    }),\n    [filter.key, onSearch, processing],\n  );\n\n  const content = (\n    <div\n      aria-disabled={processing}\n      className={cn(\"grid gap-3\", processing && \"pointer-events-none opacity-60\")}\n    >\n      <Renderer nodes={schema} />\n    </div>\n  );\n\n  return (\n    <FormProvider value={form}>\n      <PrefillProvider value={{ markUserEdit: () => {} }}>\n        <ResolvedNodesProvider nodes={{}}>\n          <FormValuesProvider initial={initial}>\n            <TableFilterCommitBridge onChange={onChange}>\n              {bare ? <TableCellProvider>{content}</TableCellProvider> : content}\n            </TableFilterCommitBridge>\n          </FormValuesProvider>\n        </ResolvedNodesProvider>\n      </PrefillProvider>\n    </FormProvider>\n  );\n}\n\nfunction TableFilterCommitBridge({\n  children,\n  onChange,\n}: {\n  children: ReactNode;\n  onChange: (value: FilterValue) => void;\n}) {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const write = useCallback(\n    (name: string, value: unknown) => {\n      const nextValue =\n        typeof value === \"function\"\n          ? (value as (previous: unknown) => unknown)(getPath(valuesRef.current, name))\n          : value;\n      const next = setPath(valuesRef.current, name, nextValue);\n\n      valuesRef.current = next;\n      setValue(name, nextValue);\n      onChange(next);\n    },\n    [onChange, setValue],\n  );\n\n  const commit = useMemo(\n    () => ({\n      blur: () => {},\n      change: write,\n      commit: write,\n    }),\n    [write],\n  );\n\n  return <FieldCommitOverrideProvider value={commit}>{children}</FieldCommitOverrideProvider>;\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = isTruthy(filterValue(value).value);\n\n  return (\n    <label className=\"flex h-lt-control-md cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.props.label ?? undefined}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? { value: \"1\" } : undefined)}\n      />\n      <span>{filter.props.label}</span>\n    </label>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"@lattice-php/lattice/core/registry-context\";\nimport type { ColumnType } from \"@lattice-php/lattice/types/generated\";\nimport {\n  columnCell,\n  type ColumnRegistry,\n  type ColumnRegistryFor,\n} from \"@lattice-php/lattice/table/registry\";\nimport type { TableColumn, TableRow } from \"@lattice-php/lattice/table/types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { BooleanCell } from \"./cells/boolean-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { MoneyCell } from \"./cells/money-cell\";\nimport { NumberCell } from \"./cells/number-cell\";\nimport { StackCell } from \"./cells/stack-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\n// Built-in cells live with the (lazy-loaded) table feature rather than the\n// eager registry, so they stay code-split. Consumer-registered columns are\n// merged on top and win on type collisions.\nconst builtinColumnCells: ColumnRegistry = {\n  \"column.badge\": columnCell(BadgeCell),\n  \"column.boolean\": columnCell(BooleanCell),\n  \"column.icon\": columnCell(IconCell),\n  \"column.image\": columnCell(ImageCell),\n  \"column.money\": columnCell(MoneyCell),\n  \"column.number\": columnCell(NumberCell),\n  \"column.stack\": columnCell(StackCell),\n  \"column.text\": columnCell(TextCell),\n} satisfies ColumnRegistryFor<ColumnType>;\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const customCells = useColumnRegistry();\n  const Cell =\n    customCells[column.type] ??\n    builtinColumnCells[column.type] ??\n    builtinColumnCells[\"column.text\"];\n\n  return <Cell column={column} props={column.props} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,qBAAqC;CACzC,gBAAgB,WAAW,SAAS;CACpC,kBAAkB,WAAW,WAAW;CACxC,eAAe,WAAW,QAAQ;CAClC,gBAAgB,WAAW,SAAS;CACpC,gBAAgB,WAAW,SAAS;CACpC,iBAAiB,WAAW,UAAU;CACtC,gBAAgB,WAAW,SAAS;CACpC,eAAe,WAAW,QAAQ;AACpC;AAEA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAOlF,OAAO,oBANa,kBAElB,EAAY,OAAO,SACnB,mBAAmB,OAAO,SAC1B,mBAAmB,gBAEd;EAAc;EAAQ,OAAO,OAAO;EAAY;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACvF"}
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"@lattice-php/lattice/core/registry-context\";\nimport type { ColumnNodeType } from \"@lattice-php/lattice/types/generated\";\nimport {\n  columnCell,\n  type ColumnRegistry,\n  type ColumnRegistryFor,\n} from \"@lattice-php/lattice/table/registry\";\nimport type { TableColumn, TableRow } from \"@lattice-php/lattice/table/types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { BooleanCell } from \"./cells/boolean-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { MoneyCell } from \"./cells/money-cell\";\nimport { NumberCell } from \"./cells/number-cell\";\nimport { StackCell } from \"./cells/stack-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\n// Built-in cells live with the (lazy-loaded) table feature rather than the\n// eager registry, so they stay code-split. Consumer-registered columns are\n// merged on top and win on type collisions.\nconst builtinColumnCells: ColumnRegistry = {\n  \"column.badge\": columnCell(BadgeCell),\n  \"column.boolean\": columnCell(BooleanCell),\n  \"column.icon\": columnCell(IconCell),\n  \"column.image\": columnCell(ImageCell),\n  \"column.money\": columnCell(MoneyCell),\n  \"column.number\": columnCell(NumberCell),\n  \"column.stack\": columnCell(StackCell),\n  \"column.text\": columnCell(TextCell),\n} satisfies ColumnRegistryFor<ColumnNodeType>;\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const customCells = useColumnRegistry();\n  const Cell =\n    customCells[column.type] ??\n    builtinColumnCells[column.type] ??\n    builtinColumnCells[\"column.text\"];\n\n  return <Cell column={column} props={column.props} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,qBAAqC;CACzC,gBAAgB,WAAW,SAAS;CACpC,kBAAkB,WAAW,WAAW;CACxC,eAAe,WAAW,QAAQ;CAClC,gBAAgB,WAAW,SAAS;CACpC,gBAAgB,WAAW,SAAS;CACpC,iBAAiB,WAAW,UAAU;CACtC,gBAAgB,WAAW,SAAS;CACpC,eAAe,WAAW,QAAQ;AACpC;AAEA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAOlF,OAAO,oBANa,kBAElB,EAAY,OAAO,SACnB,mBAAmB,OAAO,SAC1B,mBAAmB,gBAEd;EAAc;EAAQ,OAAO,OAAO;EAAY;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACvF"}

package/dist/table/components/table-search.js

@@ -1,6 +1,7 @@
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { useDebouncedCallback } from "../../lib/use-debounced-callback.js";
 import { Input } from "../../ui/input.js";
 import { IconButton } from "../../ui/icon-button.js";
 import { useEffect, useRef, useState } from "react";
@@ -15,7 +16,6 @@ var DEBOUNCE_MS = 300;
 function TableSearch({ value, onSearch }) {
 	const { t } = useT("lattice");
 	const [term, setTerm] = useState(value);
-	const timer = useRef(null);
 	const committed = useRef(value);
 	useEffect(() => {
 		if (value !== committed.current) {
@@ -23,20 +23,17 @@ function TableSearch({ value, onSearch }) {
 			setTerm(value);
 		}
 	}, [value]);
-	useEffect(() => () => {
-		if (timer.current) clearTimeout(timer.current);
-	}, []);
 	function commit(next) {
 		committed.current = next;
 		onSearch(next);
 	}
+	const commitDebounced = useDebouncedCallback(commit, DEBOUNCE_MS);
 	function change(next) {
 		setTerm(next);
-		if (timer.current) clearTimeout(timer.current);
-		timer.current = setTimeout(() => commit(next), DEBOUNCE_MS);
+		commitDebounced(next);
 	}
 	function clear() {
-		if (timer.current) clearTimeout(timer.current);
+		commitDebounced.cancel();
 		setTerm("");
 		commit("");
 	}

package/dist/table/components/table-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-search.js","names":[],"sources":["../../../resources/js/table/components/table-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst DEBOUNCE_MS = 300;\n\n/**\n * The table-level quick-search box. Keystrokes update the input immediately and\n * commit the term to the server after a short debounce; an externally-changed\n * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.\n */\nexport function TableSearch({\n  value,\n  onSearch,\n}: {\n  value: string;\n  onSearch: (term: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [term, setTerm] = useState(value);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const committed = useRef(value);\n\n  useEffect(() => {\n    if (value !== committed.current) {\n      committed.current = value;\n      setTerm(value);\n    }\n  }, [value]);\n\n  useEffect(\n    () => () => {\n      if (timer.current) {\n        clearTimeout(timer.current);\n      }\n    },\n    [],\n  );\n\n  function commit(next: string): void {\n    committed.current = next;\n    onSearch(next);\n  }\n\n  function change(next: string): void {\n    setTerm(next);\n\n    if (timer.current) {\n      clearTimeout(timer.current);\n    }\n\n    timer.current = setTimeout(() => commit(next), DEBOUNCE_MS);\n  }\n\n  function clear(): void {\n    if (timer.current) {\n      clearTimeout(timer.current);\n    }\n\n    setTerm(\"\");\n    commit(\"\");\n  }\n\n  const label = t(\"table.search.placeholder\", \"Search\");\n\n  return (\n    <div className=\"relative w-full max-w-xs\">\n      <Icon\n        name=\"search\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg\"\n      />\n      <Input\n        type=\"search\"\n        data-test=\"table-search\"\n        value={term}\n        placeholder={label}\n        aria-label={label}\n        onChange={(event) => change(event.target.value)}\n        className={cn(\"px-8\", \"[&::-webkit-search-cancel-button]:hidden\")}\n      />\n      {term !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.search.clear\", \"Clear search\")}\n          data-test=\"table-search-clear\"\n          className=\"absolute right-1.5 top-1/2 -translate-y-1/2\"\n          onClick={clear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,cAAc;;;;;;AAOpB,SAAgB,YAAY,EAC1B,OACA,YAIC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,OAA6C,IAAI;CAC/D,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,UAAU,UAAU,SAAS;GAC/B,UAAU,UAAU;GACpB,QAAQ,KAAK;EACf;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,sBACc;EACV,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;CAE9B,GACA,CAAC,CACH;CAEA,SAAS,OAAO,MAAoB;EAClC,UAAU,UAAU;EACpB,SAAS,IAAI;CACf;CAEA,SAAS,OAAO,MAAoB;EAClC,QAAQ,IAAI;EAEZ,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;EAG5B,MAAM,UAAU,iBAAiB,OAAO,IAAI,GAAG,WAAW;CAC5D;CAEA,SAAS,QAAc;EACrB,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;EAG5B,QAAQ,EAAE;EACV,OAAO,EAAE;CACX;CAEA,MAAM,QAAQ,EAAE,4BAA4B,QAAQ;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GACD,oBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,OAAO;IACP,aAAa;IACb,cAAY;IACZ,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,WAAW,GAAG,QAAQ,0CAA0C;GACjE,CAAA;GACA,SAAS,MACR,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,cAAc;IAC7C,aAAU;IACV,WAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}
+{"version":3,"file":"table-search.js","names":[],"sources":["../../../resources/js/table/components/table-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useDebouncedCallback } from \"@lattice-php/lattice/lib/use-debounced-callback\";\n\nconst DEBOUNCE_MS = 300;\n\n/**\n * The table-level quick-search box. Keystrokes update the input immediately and\n * commit the term to the server after a short debounce; an externally-changed\n * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.\n */\nexport function TableSearch({\n  value,\n  onSearch,\n}: {\n  value: string;\n  onSearch: (term: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [term, setTerm] = useState(value);\n  const committed = useRef(value);\n\n  useEffect(() => {\n    if (value !== committed.current) {\n      committed.current = value;\n      setTerm(value);\n    }\n  }, [value]);\n\n  function commit(next: string): void {\n    committed.current = next;\n    onSearch(next);\n  }\n\n  const commitDebounced = useDebouncedCallback(commit, DEBOUNCE_MS);\n\n  function change(next: string): void {\n    setTerm(next);\n    commitDebounced(next);\n  }\n\n  function clear(): void {\n    commitDebounced.cancel();\n    setTerm(\"\");\n    commit(\"\");\n  }\n\n  const label = t(\"table.search.placeholder\", \"Search\");\n\n  return (\n    <div className=\"relative w-full max-w-xs\">\n      <Icon\n        name=\"search\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg\"\n      />\n      <Input\n        type=\"search\"\n        data-test=\"table-search\"\n        value={term}\n        placeholder={label}\n        aria-label={label}\n        onChange={(event) => change(event.target.value)}\n        className={cn(\"px-8\", \"[&::-webkit-search-cancel-button]:hidden\")}\n      />\n      {term !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.search.clear\", \"Clear search\")}\n          data-test=\"table-search-clear\"\n          className=\"absolute right-1.5 top-1/2 -translate-y-1/2\"\n          onClick={clear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,IAAM,cAAc;;;;;;AAOpB,SAAgB,YAAY,EAC1B,OACA,YAIC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,UAAU,UAAU,SAAS;GAC/B,UAAU,UAAU;GACpB,QAAQ,KAAK;EACf;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,SAAS,OAAO,MAAoB;EAClC,UAAU,UAAU;EACpB,SAAS,IAAI;CACf;CAEA,MAAM,kBAAkB,qBAAqB,QAAQ,WAAW;CAEhE,SAAS,OAAO,MAAoB;EAClC,QAAQ,IAAI;EACZ,gBAAgB,IAAI;CACtB;CAEA,SAAS,QAAc;EACrB,gBAAgB,OAAO;EACvB,QAAQ,EAAE;EACV,OAAO,EAAE;CACX;CAEA,MAAM,QAAQ,EAAE,4BAA4B,QAAQ;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GACD,oBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,OAAO;IACP,aAAa;IACb,cAAY;IACZ,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,WAAW,GAAG,QAAQ,0CAA0C;GACjE,CAAA;GACA,SAAS,MACR,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,cAAc;IAC7C,aAAU;IACV,WAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}