@lattice-php/lattice 0.3.0 → 0.4.0

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\";\nimport { chatPlugin } from \"./chat\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { layoutComponents } from \"./layout/components\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatPlugin,\n);\n"],"mappings":";;;;;;;;AAQA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,kBACA,iBACA,UACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action\";\nimport { chatPlugin } from \"./chat\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { remoteComponents } from \"./remote\";\nimport { layoutComponents } from \"./layout/components\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatPlugin,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;AASA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,kBACA,iBACA,YACA,gBACF"}

package/dist/remote/components/chat-box.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../../core/types';
+export declare const RemoteChatBox: RendererComponent<"remote.chat-box">;
+export default RemoteChatBox;

package/dist/remote/components/chat-box.js

@@ -0,0 +1,65 @@
+import { cn } from "../../lib/utils.js";
+import { testIdentity } from "../../core/test-id.js";
+import { useT } from "../../i18n/instance.js";
+import { remoteJson } from "../../core/api.js";
+import { createRemoteNdjsonChatTransport, ndjsonChatTransport } from "../../chat/transport.js";
+import { useChat } from "../../chat/use-chat.js";
+import { MessageList } from "../../chat/components/message-list.js";
+import { PromptInput } from "../../chat/components/prompt-input.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/remote/components/chat-box.tsx
+var RemoteChatBox = ({ node }) => {
+	const props = node.props;
+	const { t } = useT("lattice");
+	const transport = useMemo(() => props.remote ? createRemoteNdjsonChatTransport(props.remote) : ndjsonChatTransport, [props.remote]);
+	const { messages, status, error, sendMessage, setMessages } = useChat({
+		endpoint: props.streamEndpoint ?? "",
+		transport
+	});
+	const seededRef = useRef(false);
+	const seedHistory = useCallback(async () => {
+		if (seededRef.current || !props.historyEndpoint || !props.remote) return;
+		seededRef.current = true;
+		setMessages((await remoteJson(props.historyEndpoint, { remote: props.remote })).messages);
+	}, [
+		props.historyEndpoint,
+		props.remote,
+		setMessages
+	]);
+	useEffect(() => {
+		seedHistory().catch(() => {});
+	}, [seedHistory]);
+	const disabled = status === "submitted" || status === "streaming" || !props.remote || !props.streamEndpoint;
+	const visibleError = error;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col overflow-hidden border border-lt-border bg-lt-bg", props.fill ? "sticky top-0 h-full min-h-[28rem] w-full" : "h-[28rem] w-80 rounded-lt shadow-lt-lg"),
+		"data-test": testIdentity("chat-box"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center border-b border-lt-border px-3 py-2",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-lt-fg",
+					children: props.title ?? t("chat.title", "Chat")
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ jsx(MessageList, { messages })
+			}),
+			visibleError ? /* @__PURE__ */ jsx("div", {
+				className: "border-t border-lt-danger/40 px-3 py-2 text-xs text-lt-danger",
+				children: visibleError
+			}) : null,
+			/* @__PURE__ */ jsx(PromptInput, {
+				disabled,
+				onSubmit: sendMessage,
+				placeholder: props.placeholder ?? void 0
+			})
+		]
+	});
+};
+//#endregion
+export { RemoteChatBox, RemoteChatBox as default };
+
+//# sourceMappingURL=chat-box.js.map

package/dist/remote/components/chat-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-box.js","names":[],"sources":["../../../resources/js/remote/components/chat-box.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { remoteJson } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { RemoteChatBox as RemoteChatBoxProps } from \"@lattice-php/lattice/types/generated\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport {\n  createRemoteNdjsonChatTransport,\n  ndjsonChatTransport,\n} from \"@lattice-php/lattice/chat/transport\";\nimport { useChat } from \"@lattice-php/lattice/chat/use-chat\";\nimport type { ChatMessage } from \"@lattice-php/lattice/chat/types\";\nimport { MessageList } from \"@lattice-php/lattice/chat/components/message-list\";\nimport { PromptInput } from \"@lattice-php/lattice/chat/components/prompt-input\";\n\ntype ChatHistoryResponse = { messages: ChatMessage[] };\n\nexport const RemoteChatBox: RendererComponent<\"remote.chat-box\"> = ({ node }) => {\n  const props: RemoteChatBoxProps = node.props;\n  const { t } = useT(\"lattice\");\n  const transport = useMemo(\n    () => (props.remote ? createRemoteNdjsonChatTransport(props.remote) : ndjsonChatTransport),\n    [props.remote],\n  );\n  const { messages, status, error, sendMessage, setMessages } = useChat({\n    endpoint: props.streamEndpoint ?? \"\",\n    transport,\n  });\n\n  const seededRef = useRef(false);\n\n  const seedHistory = useCallback(async (): Promise<void> => {\n    if (seededRef.current || !props.historyEndpoint || !props.remote) {\n      return;\n    }\n\n    seededRef.current = true;\n\n    const payload = await remoteJson<ChatHistoryResponse>(props.historyEndpoint, {\n      remote: props.remote,\n    });\n\n    setMessages(payload.messages);\n  }, [props.historyEndpoint, props.remote, setMessages]);\n\n  useEffect(() => {\n    void seedHistory().catch(() => {});\n  }, [seedHistory]);\n\n  const busy = status === \"submitted\" || status === \"streaming\";\n  const disabled = busy || !props.remote || !props.streamEndpoint;\n  const visibleError = error;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col overflow-hidden border border-lt-border bg-lt-bg\",\n        props.fill\n          ? \"sticky top-0 h-full min-h-[28rem] w-full\"\n          : \"h-[28rem] w-80 rounded-lt shadow-lt-lg\",\n      )}\n      data-test={testIdentity(\"chat-box\")}\n    >\n      <div className=\"flex items-center border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium text-lt-fg\">\n          {props.title ?? t(\"chat.title\", \"Chat\")}\n        </span>\n      </div>\n      <div className=\"flex-1 overflow-y-auto\">\n        <MessageList messages={messages} />\n      </div>\n      {visibleError ? (\n        <div className=\"border-t border-lt-danger/40 px-3 py-2 text-xs text-lt-danger\">\n          {visibleError}\n        </div>\n      ) : null}\n      <PromptInput\n        disabled={disabled}\n        onSubmit={sendMessage}\n        placeholder={props.placeholder ?? undefined}\n      />\n    </div>\n  );\n};\n\nexport default RemoteChatBox;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,iBAAuD,EAAE,WAAW;CAC/E,MAAM,QAA4B,KAAK;CACvC,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,YAAY,cACT,MAAM,SAAS,gCAAgC,MAAM,MAAM,IAAI,qBACtE,CAAC,MAAM,MAAM,CACf;CACA,MAAM,EAAE,UAAU,QAAQ,OAAO,aAAa,gBAAgB,QAAQ;EACpE,UAAU,MAAM,kBAAkB;EAClC;CACF,CAAC;CAED,MAAM,YAAY,OAAO,KAAK;CAE9B,MAAM,cAAc,YAAY,YAA2B;EACzD,IAAI,UAAU,WAAW,CAAC,MAAM,mBAAmB,CAAC,MAAM,QACxD;EAGF,UAAU,UAAU;EAMpB,aAAY,MAJU,WAAgC,MAAM,iBAAiB,EAC3E,QAAQ,MAAM,OAChB,CAAC,GAEmB,QAAQ;CAC9B,GAAG;EAAC,MAAM;EAAiB,MAAM;EAAQ;CAAW,CAAC;CAErD,gBAAgB;EACd,YAAiB,EAAE,YAAY,CAAC,CAAC;CACnC,GAAG,CAAC,WAAW,CAAC;CAGhB,MAAM,WADO,WAAW,eAAe,WAAW,eACzB,CAAC,MAAM,UAAU,CAAC,MAAM;CACjD,MAAM,eAAe;CAErB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,kEACA,MAAM,OACF,6CACA,wCACN;EACA,aAAW,aAAa,UAAU;YAPpC;GASE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD;KAAM,WAAU;eACb,MAAM,SAAS,EAAE,cAAc,MAAM;IAClC,CAAA;GACH,CAAA;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,aAAD,EAAuB,SAAW,CAAA;GAC/B,CAAA;GACJ,eACC,oBAAC,OAAD;IAAK,WAAU;cACZ;GACE,CAAA,IACH;GACJ,oBAAC,aAAD;IACY;IACV,UAAU;IACV,aAAa,MAAM,eAAe,KAAA;GACnC,CAAA;EACE;;AAET"}

package/dist/remote/components/data-list.d.ts

@@ -0,0 +1,10 @@
+import { RendererComponent, Schema } from '../../core/types';
+import { DataList as DataListProps } from '../../types/generated';
+type RemoteDataListProps = DataListProps & {
+    schema?: Schema;
+};
+export declare function RemoteDataList({ props }: {
+    props: RemoteDataListProps;
+}): import("react").JSX.Element;
+export declare const DataList: RendererComponent<"remote.data-list">;
+export default DataList;

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

@@ -0,0 +1,106 @@
+import { useT } from "../../i18n/instance.js";
+import { remoteJson } from "../../core/api.js";
+import { Renderer } from "../../core/renderer.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/remote/components/data-list.tsx
+function label(value) {
+	if (value === null || value === void 0) return "";
+	return String(value);
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function dataBindings(value) {
+	if (!isRecord(value)) return {};
+	return Object.fromEntries(Object.entries(value).filter((entry) => {
+		return typeof entry[1] === "string";
+	}));
+}
+function rowValue(row, key) {
+	if (key in row) return row[key];
+	return key.split(".").reduce((value, segment) => {
+		return isRecord(value) ? value[segment] : void 0;
+	}, row);
+}
+function materializeProps(props, row) {
+	if (!isRecord(props)) return {};
+	const { dataBindings: bindings, ...materialized } = props;
+	for (const [prop, key] of Object.entries(dataBindings(bindings))) {
+		const value = rowValue(row, key);
+		if (value !== void 0) materialized[prop] = value;
+	}
+	return materialized;
+}
+function materializeNode(node, row) {
+	return {
+		...node,
+		props: materializeProps(node.props, row),
+		schema: node.schema?.map((child) => materializeNode(child, row))
+	};
+}
+function materializeSchema(schema, row) {
+	return schema?.map((node) => materializeNode(node, row)) ?? [];
+}
+function RemoteDataList({ props }) {
+	const { t } = useT("lattice");
+	const [rows, setRows] = useState([]);
+	const [error, setError] = useState(null);
+	const [loading, setLoading] = useState(false);
+	useEffect(() => {
+		if (!props.remote || !props.dataEndpoint) {
+			setRows([]);
+			setLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setError(null);
+		setLoading(true);
+		remoteJson(props.dataEndpoint, { remote: props.remote }).then((payload) => {
+			if (!cancelled) setRows(payload.data ?? []);
+		}).catch((caught) => {
+			if (!cancelled) setError(caught instanceof Error ? caught.message : String(caught));
+		}).finally(() => {
+			if (!cancelled) setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [props.dataEndpoint, props.remote]);
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lt border border-lt-danger/40 p-3 text-sm",
+		children: error
+	});
+	if (loading || !props.remote) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lt border border-lt-border p-3 text-sm",
+		children: t("remote.data-list.loading", "Loading...")
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lt border border-lt-border bg-lt-bg",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-b border-lt-border px-3 py-2 text-sm font-medium",
+			children: t("remote.data-list.title", "Remote data")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "divide-y divide-lt-border",
+			children: [rows.map((row, index) => {
+				return /* @__PURE__ */ jsx("div", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsx(Renderer, { nodes: materializeSchema(props.schema, row) })
+				}, label(row.id) || index);
+			}), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-2 text-sm text-lt-muted-fg",
+				children: props.emptyLabel ?? t("remote.data-list.empty", "No data")
+			}) : null]
+		})]
+	});
+}
+var DataList = ({ node }) => {
+	return /* @__PURE__ */ jsx(RemoteDataList, { props: {
+		...node.props,
+		schema: node.schema
+	} });
+};
+//#endregion
+export { DataList, DataList as default, RemoteDataList };
+
+//# sourceMappingURL=data-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-list.js","names":[],"sources":["../../../resources/js/remote/components/data-list.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, NodeProps, RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { remoteJson } from \"@lattice-php/lattice/core/api\";\nimport type { DataList as DataListProps } from \"@lattice-php/lattice/types/generated\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype RemotePayload = {\n  data?: Array<Record<string, unknown>>;\n};\n\ntype RemoteRow = Record<string, unknown>;\n\ntype DataBindings = Record<string, string>;\n\ntype RemoteDataListProps = DataListProps & {\n  schema?: Schema;\n};\n\nfunction label(value: unknown): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  return String(value);\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction dataBindings(value: unknown): DataBindings {\n  if (!isRecord(value)) {\n    return {};\n  }\n\n  return Object.fromEntries(\n    Object.entries(value).filter((entry): entry is [string, string] => {\n      return typeof entry[1] === \"string\";\n    }),\n  );\n}\n\nfunction rowValue(row: RemoteRow, key: string): unknown {\n  if (key in row) {\n    return row[key];\n  }\n\n  return key.split(\".\").reduce<unknown>((value, segment) => {\n    return isRecord(value) ? value[segment] : undefined;\n  }, row);\n}\n\nfunction materializeProps(props: unknown, row: RemoteRow): NodeProps {\n  if (!isRecord(props)) {\n    return {};\n  }\n\n  const { dataBindings: bindings, ...materialized } = props;\n\n  for (const [prop, key] of Object.entries(dataBindings(bindings))) {\n    const value = rowValue(row, key);\n\n    if (value !== undefined) {\n      materialized[prop] = value;\n    }\n  }\n\n  return materialized;\n}\n\nfunction materializeNode(node: Node, row: RemoteRow): Node {\n  return {\n    ...node,\n    props: materializeProps(node.props, row),\n    schema: node.schema?.map((child) => materializeNode(child, row)),\n  } as Node;\n}\n\nfunction materializeSchema(schema: Schema | undefined, row: RemoteRow): Schema {\n  return schema?.map((node) => materializeNode(node, row)) ?? [];\n}\n\nexport function RemoteDataList({ props }: { props: RemoteDataListProps }) {\n  const { t } = useT(\"lattice\");\n  const [rows, setRows] = useState<RemoteRow[]>([]);\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (!props.remote || !props.dataEndpoint) {\n      setRows([]);\n      setLoading(false);\n\n      return;\n    }\n\n    let cancelled = false;\n    setError(null);\n    setLoading(true);\n\n    void remoteJson<RemotePayload>(props.dataEndpoint, { remote: props.remote })\n      .then((payload) => {\n        if (!cancelled) {\n          setRows(payload.data ?? []);\n        }\n      })\n      .catch((caught: unknown) => {\n        if (!cancelled) {\n          setError(caught instanceof Error ? caught.message : String(caught));\n        }\n      })\n      .finally(() => {\n        if (!cancelled) {\n          setLoading(false);\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [props.dataEndpoint, props.remote]);\n\n  if (error) {\n    return <div className=\"rounded-lt border border-lt-danger/40 p-3 text-sm\">{error}</div>;\n  }\n\n  if (loading || !props.remote) {\n    return (\n      <div className=\"rounded-lt border border-lt-border p-3 text-sm\">\n        {t(\"remote.data-list.loading\", \"Loading...\")}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"rounded-lt border border-lt-border bg-lt-bg\">\n      <div className=\"border-b border-lt-border px-3 py-2 text-sm font-medium\">\n        {t(\"remote.data-list.title\", \"Remote data\")}\n      </div>\n      <div className=\"divide-y divide-lt-border\">\n        {rows.map((row, index) => {\n          return (\n            <div className=\"px-3 py-2\" key={label(row.id) || index}>\n              <Renderer nodes={materializeSchema(props.schema, row)} />\n            </div>\n          );\n        })}\n        {rows.length === 0 ? (\n          <div className=\"px-3 py-2 text-sm text-lt-muted-fg\">\n            {props.emptyLabel ?? t(\"remote.data-list.empty\", \"No data\")}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport const DataList: RendererComponent<\"remote.data-list\"> = ({ node }) => {\n  return <RemoteDataList props={{ ...node.props, schema: node.schema }} />;\n};\n\nexport default DataList;\n"],"mappings":"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"}

package/dist/remote/index.d.ts

@@ -0,0 +1 @@
+export declare const remoteComponents: import('../core/registry').Plugin;

package/dist/remote/index.js

@@ -0,0 +1,15 @@
+import { createPlugin, eagerComponent } from "../core/registry.js";
+import { DataList } from "./components/data-list.js";
+import { RemoteChatBox } from "./components/chat-box.js";
+//#region resources/js/remote/index.ts
+var remoteComponents = createPlugin({
+	components: {
+		"remote.data-list": eagerComponent(DataList),
+		"remote.chat-box": eagerComponent(RemoteChatBox)
+	},
+	name: "lattice/remote"
+});
+//#endregion
+export { remoteComponents };
+
+//# sourceMappingURL=index.js.map

package/dist/remote/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/remote/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport DataListComponent from \"./components/data-list\";\nimport RemoteChatBoxComponent from \"./components/chat-box\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n    \"remote.chat-box\": eagerComponent(RemoteChatBoxComponent),\n  },\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;;AAIA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,oBAAoB,eAAe,QAAiB;EACpD,mBAAmB,eAAe,aAAsB;CAC1D;CACA,MAAM;AACR,CAAC"}

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

@@ -30,7 +30,7 @@ var TextCell = ({ column, props, row, value }) => {
 		children: [/* @__PURE__ */ jsx("span", { children: content }), /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-test": `copy-${column.key}`,
-			className: "inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs",
+			className: "inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs",
 			"aria-label": `${copied ? "Copied" : "Copy"} ${column.label}`,
 			onClick: handleCopy,
 			children: [copied ? /* @__PURE__ */ jsx(Icon, {

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 { copyToClipboard } from \"@lattice-php/lattice/clipboard\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = ({ column, props, row, value }) => {\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\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  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        data-test={`copy-${column.key}`}\n        className=\"inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Icon name=\"check\" className=\"size-lt-icon-xs\" />\n        ) : (\n          <Icon name=\"copy\" className=\"size-lt-icon-xs\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,YAAgD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC7F,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,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,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,aAAW,QAAQ,OAAO;GAC1B,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aALX,CAOG,SACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA,IAEhD,oBAAC,MAAD;IAAM,MAAK;IAAO,WAAU;GAAmB,CAAA,GAEhD,SAAS,WAAW,MACf;IACJ;;AAEV"}
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice-php/lattice/clipboard\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = ({ column, props, row, value }) => {\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\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  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        data-test={`copy-${column.key}`}\n        className=\"inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Icon name=\"check\" className=\"size-lt-icon-xs\" />\n        ) : (\n          <Icon name=\"copy\" className=\"size-lt-icon-xs\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,YAAgD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC7F,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,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,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,aAAW,QAAQ,OAAO;GAC1B,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aALX,CAOG,SACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA,IAEhD,oBAAC,MAAD;IAAM,MAAK;IAAO,WAAU;GAAmB,CAAA,GAEhD,SAAS,WAAW,MACf;IACJ;;AAEV"}

package/dist/table/components/column-filter-control.d.ts

@@ -4,13 +4,14 @@ type ColumnClause = {
     clause: FilterClause;
     index: number;
 };
-export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch, }: {
+export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onReplace, onSearch, }: {
     column: TableColumn;
     clauses: ColumnClause[];
     processing: boolean;
     onAdd: (clause: FilterClause) => void;
     onUpdate: (index: number, clause: FilterClause) => void;
     onRemove: (index: number) => void;
+    onReplace: (field: string, clauses: FilterClause[]) => void;
     onSearch?: FilterOptionSearch;
 }): import("react").JSX.Element | null;
 export {};

package/dist/table/components/column-filter-control.js

@@ -8,7 +8,7 @@ import { TableFilterControl } from "./filter-controls.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/column-filter-control.tsx
-function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch }) {
+function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onReplace, onSearch }) {
 	const { t } = useT("lattice");
 	const filter = column.filter;
 	if (!filter) return null;
@@ -16,9 +16,7 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 		column,
 		clauses,
 		processing,
-		onAdd,
-		onUpdate,
-		onRemove,
+		onReplace,
 		onSearch
 	});
 	const type = filter.type ?? "text";
@@ -92,18 +90,15 @@ function serializeColumnValue(value) {
 	if (Array.isArray(value)) return value.join(",");
 	return typeof value === "string" ? value : "";
 }
-/**
-* Renders a column's option dropdown by reusing the shared table-filter select
-* control, mapping its value to/from a single `eq` clause (or an `in` clause
-* carrying a comma-joined value when the column is `multiple`).
-*/
-function ColumnSelectFilter({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch }) {
+function ColumnSelectFilter({ column, clauses, processing, onReplace, onSearch }) {
 	const filter = column.filter;
 	if (!filter) return null;
 	const multiple = filter.multiple;
 	const operator = filter.defaultOperator;
+	const clauseOptions = filter.clauseOptions ?? [];
+	const activeClauseOption = findActiveClauseOption(clauses.map((entry) => entry.clause), clauseOptions);
 	const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];
-	const value = multiple ? active?.clause.value ? active.clause.value.split(",") : [] : active?.clause.value ?? "";
+	const value = activeClauseOption ? activeClauseOption.value : multiple ? active?.clause.value ? active.clause.value.split(",") : [] : active?.clause.value ?? "";
 	const data = {
 		key: column.key,
 		label: column.label,
@@ -118,19 +113,19 @@ function ColumnSelectFilter({ column, clauses, processing, onAdd, onUpdate, onRe
 	function change(next) {
 		const serialized = serializeColumnValue(next);
 		if (serialized === "") {
-			if (active) onRemove(active.index);
+			onReplace(column.key, []);
 			return;
 		}
-		if (active) onUpdate(active.index, {
-			...active.clause,
-			operator,
-			value: serialized
-		});
-		else onAdd({
+		const clauseOption = clauseOptions.find((option) => option.value === serialized);
+		if (clauseOption) {
+			onReplace(column.key, clausesForOption(column.key, clauseOption));
+			return;
+		}
+		onReplace(column.key, [{
 			field: column.key,
 			operator,
 			value: serialized
-		});
+		}]);
 	}
 	return /* @__PURE__ */ jsx(TableFilterControl, {
 		filter: data,
@@ -140,6 +135,20 @@ function ColumnSelectFilter({ column, clauses, processing, onAdd, onUpdate, onRe
 		onSearch
 	});
 }
+function clausesForOption(field, option) {
+	return option.clauses.map((clause) => ({
+		field,
+		operator: clause.operator,
+		value: clause.value
+	}));
+}
+function findActiveClauseOption(clauses, options) {
+	return options.find((option) => clausesMatch(clauses, clausesForOption("", option)));
+}
+function clausesMatch(active, expected) {
+	if (active.length !== expected.length) return false;
+	return expected.every((clause) => active.some((current) => current.operator === clause.operator && current.value === clause.value));
+}
 function FilterClauseList({ column, clauses, operators, defaultOperator, processing, onAdd, onUpdate, onRemove }) {
 	const { t } = useT("lattice");
 	const type = column.filter?.type ?? "text";

package/dist/table/components/column-filter-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { FilterData, FilterType, Op } from \"@lattice-php/lattice/types/generated\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\nimport { type FilterOptionSearch, TableFilterControl } from \"./filter-controls\";\nimport { fieldClass, FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onAdd={onAdd}\n        onUpdate={onUpdate}\n        onRemove={onRemove}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            aria-label={t(\"filter.columnFilters\", \"{{label}} filters\", { label: column.label })}\n            data-test={`filter-${column.key}`}\n            className=\"relative -ml-px inline-flex size-9 shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary\"\n            disabled={processing}\n          >\n            <Icon name=\"filter\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n            {clauses.length > 0 && (\n              <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\n/**\n * Renders a column's option dropdown by reusing the shared table-filter select\n * control, mapping its value to/from a single `eq` clause (or an `in` clause\n * carrying a comma-joined value when the column is `multiple`).\n */\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = multiple\n    ? active?.clause.value\n      ? active.clause.value.split(\",\")\n      : []\n    : (active?.clause.value ?? \"\");\n\n  const data: FilterData = {\n    key: column.key,\n    label: column.label,\n    type: \"select\",\n    props: { options: filter.options, multiple, searchable: filter.searchable, placeholder: null },\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(next);\n\n    if (serialized === \"\") {\n      if (active) {\n        onRemove(active.index);\n      }\n\n      return;\n    }\n\n    if (active) {\n      onUpdate(active.index, { ...active.clause, operator, value: serialized });\n    } else {\n      onAdd({ field: column.key, operator, value: serialized });\n    }\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={value}\n      processing={processing}\n      onChange={change}\n      onSearch={onSearch}\n    />\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <button\n          type=\"button\"\n          data-test={`filter-${column.key}-add`}\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Icon name=\"plus\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          {t(\"filter.add\", \"Add filter\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <select\n            aria-label={t(\"filter.operator\", \"{{label}} operator\", { label: column.label })}\n            data-test={`filter-${column.key}-operator`}\n            className={cn(fieldClass, \"flex-1\")}\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label: column.label })}\n          data-test={`filter-${column.key}-remove`}\n          className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Icon name=\"trash-2\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          ariaLabel={t(\"filter.value\", \"{{label}} filter value\", { label: column.label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type {\n  ColumnFilterOption,\n  FilterData,\n  FilterType,\n  Op,\n} from \"@lattice-php/lattice/types/generated\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\nimport { type FilterOptionSearch, TableFilterControl } from \"./filter-controls\";\nimport { fieldClass, FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onReplace={onReplace}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            aria-label={t(\"filter.columnFilters\", \"{{label}} filters\", { label: column.label })}\n            data-test={`filter-${column.key}`}\n            className=\"relative -ml-px inline-flex size-9 shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary\"\n            disabled={processing}\n          >\n            <Icon name=\"filter\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n            {clauses.length > 0 && (\n              <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const clauseOptions = filter.clauseOptions ?? [];\n  const activeClauseOption = findActiveClauseOption(\n    clauses.map((entry) => entry.clause),\n    clauseOptions,\n  );\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = activeClauseOption\n    ? activeClauseOption.value\n    : multiple\n      ? active?.clause.value\n        ? active.clause.value.split(\",\")\n        : []\n      : (active?.clause.value ?? \"\");\n\n  const data: FilterData = {\n    key: column.key,\n    label: column.label,\n    type: \"select\",\n    props: { options: filter.options, multiple, searchable: filter.searchable, placeholder: null },\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(next);\n\n    if (serialized === \"\") {\n      onReplace(column.key, []);\n\n      return;\n    }\n\n    const clauseOption = clauseOptions.find((option) => option.value === serialized);\n\n    if (clauseOption) {\n      onReplace(column.key, clausesForOption(column.key, clauseOption));\n\n      return;\n    }\n\n    onReplace(column.key, [{ field: column.key, operator, value: serialized }]);\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={value}\n      processing={processing}\n      onChange={change}\n      onSearch={onSearch}\n    />\n  );\n}\n\nfunction clausesForOption(field: string, option: ColumnFilterOption): FilterClause[] {\n  return option.clauses.map((clause) => ({\n    field,\n    operator: clause.operator,\n    value: clause.value,\n  }));\n}\n\nfunction findActiveClauseOption(\n  clauses: FilterClause[],\n  options: ColumnFilterOption[],\n): ColumnFilterOption | undefined {\n  return options.find((option) => clausesMatch(clauses, clausesForOption(\"\", option)));\n}\n\nfunction clausesMatch(active: FilterClause[], expected: FilterClause[]): boolean {\n  if (active.length !== expected.length) {\n    return false;\n  }\n\n  return expected.every((clause) =>\n    active.some(\n      (current) => current.operator === clause.operator && current.value === clause.value,\n    ),\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <button\n          type=\"button\"\n          data-test={`filter-${column.key}-add`}\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Icon name=\"plus\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          {t(\"filter.add\", \"Add filter\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <select\n            aria-label={t(\"filter.operator\", \"{{label}} operator\", { label: column.label })}\n            data-test={`filter-${column.key}-operator`}\n            className={cn(fieldClass, \"flex-1\")}\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label: column.label })}\n          data-test={`filter-${column.key}-remove`}\n          className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Icon name=\"trash-2\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          ariaLabel={t(\"filter.value\", \"{{label}} filter value\", { label: column.label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/column-header.js

@@ -26,12 +26,12 @@ function ColumnHeader({ column, processing, resizeHandleProps, sort, state }) {
 	const align = column.align;
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-sort": getColumnAriaSort(columnSort),
-		className: cn("relative min-w-0 px-4 py-3 pr-5 align-middle font-medium text-lt-muted-fg", alignText(align)),
+		className: cn("relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg", alignText(align)),
 		role: "columnheader",
 		children: [column.sortable ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-label": `Sort ${column.label}`,
-			className: cn("flex w-full items-center gap-1.5 font-medium", alignJustify(align)),
+			className: cn("flex w-full items-center gap-1.5 font-semibold", alignJustify(align)),
 			"data-test": `sort-${column.key}`,
 			disabled: processing,
 			onClick: () => sort(column),

package/dist/table/components/column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"../align\";\nimport { getColumnAriaSort, getColumnSort } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n  const align = column.align;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-medium text-lt-muted-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {column.sortable ? (\n        <button\n          type=\"button\"\n          aria-label={`Sort ${column.label}`}\n          className={cn(\"flex w-full items-center gap-1.5 font-medium\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{column.label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{column.label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,QAAQ,OAAO;CAErB,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,6EACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,OAAO,WACN,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,QAAQ,OAAO;GAC3B,WAAW,GAAG,gDAAgD,aAAa,KAAK,CAAC;GACjF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI,OAAO;GAAY,CAAA,GACtF,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI,OAAO;EAAY,CAAA,GAE9E,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}
+{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"../align\";\nimport { getColumnAriaSort, getColumnSort } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n  const align = column.align;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {column.sortable ? (\n        <button\n          type=\"button\"\n          aria-label={`Sort ${column.label}`}\n          className={cn(\"flex w-full items-center gap-1.5 font-semibold\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{column.label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{column.label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,QAAQ,OAAO;CAErB,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,yEACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,OAAO,WACN,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,QAAQ,OAAO;GAC3B,WAAW,GAAG,kDAAkD,aAAa,KAAK,CAAC;GACnF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI,OAAO;GAAY,CAAA,GACtF,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI,OAAO;EAAY,CAAA,GAE9E,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}

package/dist/table/components/filter-bar.d.ts

@@ -1,15 +1,16 @@
 import { FilterData, Option } from '../../types/generated';
-/**
- * The dedicated-filter toolbar above the table: a control per declared filter
- * plus a row of active-value indicator chips with individual remove and a
- * "Reset all" that clears every filter (column and dedicated alike).
- */
-export declare function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset, onSearch, }: {
+export declare function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset, }: {
     filters: FilterData[];
     values: Record<string, unknown>;
     processing: boolean;
     hasActiveFilters: boolean;
     onChange: (key: string, value: unknown) => void;
     onReset: () => void;
+}): import("react").JSX.Element | null;
+export declare function FilterMenu({ filters, values, processing, onChange, onSearch, }: {
+    filters: FilterData[];
+    values: Record<string, unknown>;
+    processing: boolean;
+    onChange: (key: string, value: unknown) => void;
     onSearch?: (filterKey: string, query: string) => Promise<Option[]>;
 }): import("react").JSX.Element;