dishui 0.0.89 → 0.0.97

package/dist/components/ai/CodeView/index.js

@@ -0,0 +1,149 @@
+import { cn as e } from "../../../utils/cn.js";
+/* empty css         */
+import { useId as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Prism as a } from "react-syntax-highlighter";
+//#region src/components/ai/CodeView/index.tsx
+var o = {
+	"code[class*=\"language-\"]": {
+		color: "var(--dishui-text-primary)",
+		background: "transparent",
+		fontFamily: "var(--dishui-font-mono)",
+		fontSize: "var(--dishui-text-body-sm)",
+		lineHeight: 1.65,
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		overflowWrap: "normal",
+		tabSize: 2
+	},
+	"pre[class*=\"language-\"]": {
+		color: "var(--dishui-text-primary)",
+		background: "var(--dishui-surface-canvas)",
+		fontFamily: "var(--dishui-font-mono)",
+		fontSize: "var(--dishui-text-body-sm)",
+		lineHeight: 1.65,
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		overflowWrap: "normal",
+		tabSize: 2
+	},
+	comment: {
+		color: "var(--dishui-text-tertiary)",
+		fontStyle: "italic"
+	},
+	prolog: { color: "var(--dishui-text-tertiary)" },
+	doctype: { color: "var(--dishui-text-tertiary)" },
+	cdata: { color: "var(--dishui-text-tertiary)" },
+	punctuation: { color: "var(--dishui-text-secondary)" },
+	property: { color: "var(--dishui-status-danger-fg)" },
+	tag: { color: "var(--dishui-status-danger-fg)" },
+	boolean: { color: "var(--dishui-status-alt-fg)" },
+	number: { color: "var(--dishui-status-alt-fg)" },
+	constant: { color: "var(--dishui-status-alt-fg)" },
+	symbol: { color: "var(--dishui-status-alt-fg)" },
+	deleted: { color: "var(--dishui-status-danger-fg)" },
+	selector: { color: "var(--dishui-status-success-fg)" },
+	"attr-name": { color: "var(--dishui-status-warning-fg)" },
+	string: { color: "var(--dishui-status-success-fg)" },
+	char: { color: "var(--dishui-status-success-fg)" },
+	builtin: { color: "var(--dishui-status-info-fg)" },
+	inserted: { color: "var(--dishui-status-success-fg)" },
+	operator: { color: "var(--dishui-status-info-fg)" },
+	entity: { color: "var(--dishui-status-warning-fg)" },
+	url: { color: "var(--dishui-status-info-fg)" },
+	atrule: { color: "var(--dishui-status-alt-fg)" },
+	"attr-value": { color: "var(--dishui-status-success-fg)" },
+	keyword: {
+		color: "var(--dishui-status-alt-fg)",
+		fontWeight: 600
+	},
+	function: { color: "var(--dishui-status-info-fg)" },
+	"class-name": { color: "var(--dishui-status-warning-fg)" },
+	regex: { color: "var(--dishui-status-warning-fg)" },
+	important: {
+		color: "var(--dishui-status-danger-fg)",
+		fontWeight: 600
+	},
+	variable: { color: "var(--dishui-text-primary)" }
+};
+function s({ code: s, language: c = "text", title: l, showLineNumbers: u = !0, startingLineNumber: d = 1, wrap: f = !1, defaultCollapsed: p = !1, collapsible: m = !1, maxHeight: h, onCopy: g, labels: _, className: v, ...y }) {
+	let b = t(), [x, S] = n(p), [C, w] = n("idle"), T = async () => {
+		try {
+			g ? await g(s) : await navigator.clipboard.writeText(s), w("copied");
+		} catch {
+			w("failed");
+		}
+	};
+	return /* @__PURE__ */ i("div", {
+		...y,
+		className: e("dishui-ai-code-view", f && "dishui-ai-code-view--wrap", v),
+		children: [/* @__PURE__ */ i("div", {
+			className: "dishui-ai-code-view__header",
+			children: [
+				/* @__PURE__ */ r("span", {
+					className: "dishui-ai-code-view__title",
+					children: l ?? c
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "dishui-ai-code-view__language",
+					children: c
+				}),
+				/* @__PURE__ */ r("span", {
+					role: "status",
+					className: "dishui-ai-code-view__copy-state",
+					children: C === "copied" ? _?.copied ?? "Copied" : C === "failed" ? _?.copyFailed ?? "Copy failed" : ""
+				}),
+				m && /* @__PURE__ */ r("button", {
+					type: "button",
+					"aria-expanded": !x,
+					"aria-controls": b,
+					onClick: () => S((e) => !e),
+					children: x ? _?.expand ?? "Expand" : _?.collapse ?? "Collapse"
+				}),
+				/* @__PURE__ */ r("button", {
+					type: "button",
+					onClick: () => void T(),
+					children: _?.copy ?? "Copy"
+				})
+			]
+		}), /* @__PURE__ */ r("div", {
+			id: b,
+			hidden: x,
+			className: "dishui-ai-code-view__scroll",
+			style: { maxHeight: h },
+			children: /* @__PURE__ */ r(a, {
+				language: c,
+				style: o,
+				showLineNumbers: u,
+				startingLineNumber: d,
+				wrapLines: !0,
+				wrapLongLines: f,
+				lineNumberStyle: {
+					minWidth: "3.5em",
+					paddingInlineEnd: "12px",
+					marginInlineEnd: "12px",
+					borderInlineEnd: "1px solid var(--dishui-border-hairline)",
+					color: "var(--dishui-text-tertiary)",
+					fontVariantNumeric: "tabular-nums",
+					userSelect: "none"
+				},
+				customStyle: {
+					margin: 0,
+					padding: "12px 14px",
+					background: "var(--dishui-surface-canvas)",
+					overflow: "visible"
+				},
+				codeTagProps: { "aria-label": `${c} code` },
+				children: s
+			})
+		})]
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/ai/CodeView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/CodeView/index.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { cn } from '../../../utils/cn';\nimport './CodeView.css';\n\nexport type CodeViewLabels = {\n  copy?: string;\n  copied?: string;\n  copyFailed?: string;\n  expand?: string;\n  collapse?: string;\n};\n\nexport type CodeViewProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n  code: string;\n  /** Prism language name, for example `typescript`, `tsx`, `python` or `json`. */\n  language?: string;\n  title?: React.ReactNode;\n  /** Show a non-selectable line-number gutter. */\n  showLineNumbers?: boolean;\n  /** Starting value for the first visible line number. */\n  startingLineNumber?: number;\n  /** Wrap long source lines instead of scrolling horizontally. */\n  wrap?: boolean;\n  defaultCollapsed?: boolean;\n  collapsible?: boolean;\n  maxHeight?: string | number;\n  onCopy?: (code: string) => void | Promise<void>;\n  labels?: CodeViewLabels;\n};\n\nconst syntaxTheme: Record<string, React.CSSProperties> = {\n  'code[class*=\"language-\"]': {\n    color: 'var(--dishui-text-primary)',\n    background: 'transparent',\n    fontFamily: 'var(--dishui-font-mono)',\n    fontSize: 'var(--dishui-text-body-sm)',\n    lineHeight: 1.65,\n    textAlign: 'left',\n    whiteSpace: 'pre',\n    wordSpacing: 'normal',\n    wordBreak: 'normal',\n    overflowWrap: 'normal',\n    tabSize: 2,\n  },\n  'pre[class*=\"language-\"]': {\n    color: 'var(--dishui-text-primary)',\n    background: 'var(--dishui-surface-canvas)',\n    fontFamily: 'var(--dishui-font-mono)',\n    fontSize: 'var(--dishui-text-body-sm)',\n    lineHeight: 1.65,\n    textAlign: 'left',\n    whiteSpace: 'pre',\n    wordSpacing: 'normal',\n    wordBreak: 'normal',\n    overflowWrap: 'normal',\n    tabSize: 2,\n  },\n  comment: { color: 'var(--dishui-text-tertiary)', fontStyle: 'italic' },\n  prolog: { color: 'var(--dishui-text-tertiary)' },\n  doctype: { color: 'var(--dishui-text-tertiary)' },\n  cdata: { color: 'var(--dishui-text-tertiary)' },\n  punctuation: { color: 'var(--dishui-text-secondary)' },\n  property: { color: 'var(--dishui-status-danger-fg)' },\n  tag: { color: 'var(--dishui-status-danger-fg)' },\n  boolean: { color: 'var(--dishui-status-alt-fg)' },\n  number: { color: 'var(--dishui-status-alt-fg)' },\n  constant: { color: 'var(--dishui-status-alt-fg)' },\n  symbol: { color: 'var(--dishui-status-alt-fg)' },\n  deleted: { color: 'var(--dishui-status-danger-fg)' },\n  selector: { color: 'var(--dishui-status-success-fg)' },\n  'attr-name': { color: 'var(--dishui-status-warning-fg)' },\n  string: { color: 'var(--dishui-status-success-fg)' },\n  char: { color: 'var(--dishui-status-success-fg)' },\n  builtin: { color: 'var(--dishui-status-info-fg)' },\n  inserted: { color: 'var(--dishui-status-success-fg)' },\n  operator: { color: 'var(--dishui-status-info-fg)' },\n  entity: { color: 'var(--dishui-status-warning-fg)' },\n  url: { color: 'var(--dishui-status-info-fg)' },\n  atrule: { color: 'var(--dishui-status-alt-fg)' },\n  'attr-value': { color: 'var(--dishui-status-success-fg)' },\n  keyword: { color: 'var(--dishui-status-alt-fg)', fontWeight: 600 },\n  function: { color: 'var(--dishui-status-info-fg)' },\n  'class-name': { color: 'var(--dishui-status-warning-fg)' },\n  regex: { color: 'var(--dishui-status-warning-fg)' },\n  important: { color: 'var(--dishui-status-danger-fg)', fontWeight: 600 },\n  variable: { color: 'var(--dishui-text-primary)' },\n};\n\n/**\n * Read-only highlighted source view. It follows CodeEditor's read-only visual\n * contract while remaining focused on display, copy, collapse and line numbers.\n */\nexport default function CodeView({\n  code,\n  language = 'text',\n  title,\n  showLineNumbers = true,\n  startingLineNumber = 1,\n  wrap = false,\n  defaultCollapsed = false,\n  collapsible = false,\n  maxHeight,\n  onCopy,\n  labels,\n  className,\n  ...rest\n}: CodeViewProps) {\n  const id = useId();\n  const [collapsed, setCollapsed] = useState(defaultCollapsed);\n  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');\n\n  const copy = async () => {\n    try {\n      if (onCopy) await onCopy(code);\n      else await navigator.clipboard.writeText(code);\n      setCopyState('copied');\n    } catch {\n      setCopyState('failed');\n    }\n  };\n\n  return (\n    <div {...rest} className={cn('dishui-ai-code-view', wrap && 'dishui-ai-code-view--wrap', className)}>\n      <div className=\"dishui-ai-code-view__header\">\n        <span className=\"dishui-ai-code-view__title\">{title ?? language}</span>\n        <span className=\"dishui-ai-code-view__language\">{language}</span>\n        <span role=\"status\" className=\"dishui-ai-code-view__copy-state\">\n          {copyState === 'copied' ? labels?.copied ?? 'Copied' : copyState === 'failed' ? labels?.copyFailed ?? 'Copy failed' : ''}\n        </span>\n        {collapsible && (\n          <button type=\"button\" aria-expanded={!collapsed} aria-controls={id} onClick={() => setCollapsed(value => !value)}>\n            {collapsed ? labels?.expand ?? 'Expand' : labels?.collapse ?? 'Collapse'}\n          </button>\n        )}\n        <button type=\"button\" onClick={() => void copy()}>{labels?.copy ?? 'Copy'}</button>\n      </div>\n      <div id={id} hidden={collapsed} className=\"dishui-ai-code-view__scroll\" style={{ maxHeight }}>\n        <SyntaxHighlighter\n          language={language}\n          style={syntaxTheme}\n          showLineNumbers={showLineNumbers}\n          startingLineNumber={startingLineNumber}\n          wrapLines\n          wrapLongLines={wrap}\n          lineNumberStyle={{\n            minWidth: '3.5em',\n            paddingInlineEnd: '12px',\n            marginInlineEnd: '12px',\n            borderInlineEnd: '1px solid var(--dishui-border-hairline)',\n            color: 'var(--dishui-text-tertiary)',\n            fontVariantNumeric: 'tabular-nums',\n            userSelect: 'none',\n          }}\n          customStyle={{ margin: 0, padding: '12px 14px', background: 'var(--dishui-surface-canvas)', overflow: 'visible' }}\n          codeTagProps={{ 'aria-label': `${language} code` }}\n        >\n          {code}\n        </SyntaxHighlighter>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai/CommandSearch/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export type CommandSearchItem = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    group?: string;
+    keywords?: string[];
+    shortcut?: string;
+    onSelect?: () => void;
+};
+export type CommandSearchProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onSubmit' | 'children'> & {
+    items: CommandSearchItem[];
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    onSelect?: (item: CommandSearchItem) => void;
+    /** Enter with nothing highlighted, or on an empty result set. */
+    onSubmit?: (query: string) => void;
+    placeholder?: string;
+    /** Custom predicate; default is a case-insensitive match on label / description / keywords. */
+    filter?: (item: CommandSearchItem, query: string) => boolean;
+    /** Wrap matched substrings in `<mark>`. */
+    highlightMatches?: boolean;
+    emptyState?: React.ReactNode | ((query: string) => React.ReactNode);
+    maxVisible?: number;
+    autoFocus?: boolean;
+    /** Renders as an in-page panel (not a modal). */
+    inline?: boolean;
+    /** Show a small indeterminate indicator in the input. */
+    loading?: boolean;
+    /** Accessible name for the input. */
+    label?: string;
+};
+/**
+ * Command search: an input over a filtered, grouped listbox with keyboard
+ * navigation and an empty state that hands the query to the agent.
+ */
+export default function CommandSearch({ items, query, defaultQuery, onQueryChange, onSelect, onSubmit, placeholder, filter, highlightMatches, emptyState, maxVisible, autoFocus, inline, loading, label, className, ...rest }: CommandSearchProps): React.JSX.Element;

package/dist/components/ai/CommandSearch/index.js

@@ -0,0 +1,217 @@
+import { cn as e } from "../../../utils/cn.js";
+/* empty css              */
+import t, { useEffect as n, useId as r, useMemo as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/ai/CommandSearch/index.tsx
+var u = () => /* @__PURE__ */ l("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ c("circle", {
+		cx: "11",
+		cy: "11",
+		r: "8"
+	}), /* @__PURE__ */ c("path", { d: "m21 21-4.3-4.3" })]
+}), d = () => /* @__PURE__ */ l("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ c("path", { d: "M5 12h14" }), /* @__PURE__ */ c("path", { d: "m12 5 7 7-7 7" })]
+});
+function f(e, t) {
+	let n = t.trim().toLowerCase();
+	return !n || [
+		e.label,
+		e.description ?? "",
+		...e.keywords ?? []
+	].join(" ").toLowerCase().includes(n);
+}
+function p(e, t) {
+	let n = t.trim();
+	if (!n) return e;
+	let r = e.toLowerCase().indexOf(n.toLowerCase());
+	return r < 0 ? e : /* @__PURE__ */ l(s, { children: [
+		e.slice(0, r),
+		/* @__PURE__ */ c("mark", {
+			className: "dishui-ai-command-search__mark",
+			children: e.slice(r, r + n.length)
+		}),
+		e.slice(r + n.length)
+	] });
+}
+function m({ items: m, query: h, defaultQuery: g = "", onQueryChange: _, onSelect: v, onSubmit: y, placeholder: b = "Search or ask…", filter: x = f, highlightMatches: S = !0, emptyState: C, maxVisible: w, autoFocus: T, inline: E = !0, loading: D = !1, label: O = "Search", className: k, ...A }) {
+	let j = r(), M = `${j}-list`, N = a(null), [P, F] = o(g), I = h ?? P, [L, R] = o(-1), z = (e) => {
+		h === void 0 && F(e), _?.(e), R(-1);
+	}, B = i(() => {
+		let e = m.filter((e) => x(e, I));
+		return w === void 0 ? e : e.slice(0, w);
+	}, [
+		m,
+		x,
+		I,
+		w
+	]), V = L < B.length ? L : -1;
+	n(() => {
+		V < 0 || document.getElementById(`${j}-opt-${V}`)?.scrollIntoView({ block: "nearest" });
+	}, [V, j]);
+	let H = (e) => {
+		e.onSelect?.(), v?.(e);
+	}, U = (e) => {
+		let t = B.length;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), t && R((e) => (e + 1) % t);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), t && R((e) => e <= 0 ? t - 1 : e - 1);
+				break;
+			case "Home":
+				t && (e.preventDefault(), R(0));
+				break;
+			case "End":
+				t && (e.preventDefault(), R(t - 1));
+				break;
+			case "Enter":
+				e.preventDefault(), V >= 0 && B[V] ? H(B[V]) : y?.(I);
+				break;
+			case "Escape": I && (e.preventDefault(), z("")), R(-1);
+		}
+	}, W = i(() => {
+		let e = [], t = /* @__PURE__ */ new Map();
+		return B.forEach((n, r) => {
+			let i = n.group ?? "";
+			t.has(i) || (t.set(i, []), e.push(i)), t.get(i).push({
+				item: n,
+				index: r
+			});
+		}), e.map((e) => ({
+			key: e,
+			entries: t.get(e)
+		}));
+	}, [B]), G = B.length === 0, K = V >= 0 ? `${j}-opt-${V}` : void 0;
+	return /* @__PURE__ */ l("div", {
+		...A,
+		className: e("dishui-ai-command-search", E && "dishui-ai-command-search--inline", k),
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: e("dishui-ai-command-search__field", D && "dishui-ai-command-search__field--loading"),
+				children: [
+					/* @__PURE__ */ c("span", {
+						className: "dishui-ai-command-search__glyph",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ c(u, {})
+					}),
+					/* @__PURE__ */ c("input", {
+						ref: N,
+						className: "dishui-ai-command-search__input",
+						type: "text",
+						role: "combobox",
+						"aria-label": O,
+						"aria-expanded": !G,
+						"aria-controls": M,
+						"aria-activedescendant": K,
+						"aria-autocomplete": "list",
+						"aria-busy": D || void 0,
+						autoComplete: "off",
+						spellCheck: !1,
+						autoFocus: T,
+						placeholder: b,
+						value: I,
+						onChange: (e) => z(e.target.value),
+						onKeyDown: U
+					}),
+					D && /* @__PURE__ */ c("span", {
+						className: "dishui-ai-command-search__spinner",
+						role: "status",
+						"aria-label": "Searching"
+					}),
+					I && !D && /* @__PURE__ */ c("button", {
+						type: "button",
+						className: "dishui-ai-command-search__clear",
+						"aria-label": "Clear search",
+						onClick: () => {
+							z(""), N.current?.focus();
+						},
+						children: "×"
+					})
+				]
+			}),
+			/* @__PURE__ */ c("ul", {
+				id: M,
+				role: "listbox",
+				"aria-label": O,
+				className: "dishui-ai-command-search__list",
+				children: W.map((n) => /* @__PURE__ */ l(t.Fragment, { children: [n.key && /* @__PURE__ */ c("li", {
+					role: "presentation",
+					className: "dishui-ai-command-search__group",
+					children: n.key
+				}), n.entries.map(({ item: t, index: n }) => {
+					let r = n === V;
+					return /* @__PURE__ */ l("li", {
+						id: `${j}-opt-${n}`,
+						role: "option",
+						"aria-selected": r,
+						className: e("dishui-ai-command-search__option", r && "dishui-ai-command-search__option--active"),
+						onMouseMove: () => {
+							r || R(n);
+						},
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => H(t),
+						children: [
+							/* @__PURE__ */ c("span", {
+								className: "dishui-ai-command-search__icon",
+								"aria-hidden": "true",
+								children: t.icon ?? /* @__PURE__ */ c(d, {})
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "dishui-ai-command-search__text",
+								children: [/* @__PURE__ */ c("span", {
+									className: "dishui-ai-command-search__label",
+									children: S ? p(t.label, I) : t.label
+								}), t.description && /* @__PURE__ */ c("span", {
+									className: "dishui-ai-command-search__description",
+									children: S ? p(t.description, I) : t.description
+								})]
+							}),
+							t.shortcut && /* @__PURE__ */ c("kbd", {
+								className: "dishui-ai-command-search__shortcut",
+								children: t.shortcut
+							})
+						]
+					}, t.id);
+				})] }, n.key || "__default"))
+			}),
+			G && /* @__PURE__ */ c("div", {
+				className: "dishui-ai-command-search__empty",
+				role: "status",
+				children: typeof C == "function" ? C(I) : C ?? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("p", {
+					className: "dishui-ai-command-search__empty-title",
+					children: I.trim() ? /* @__PURE__ */ l(s, { children: [
+						"No results for “",
+						I.trim(),
+						"”"
+					] }) : "Nothing to show"
+				}), /* @__PURE__ */ c("p", {
+					className: "dishui-ai-command-search__empty-hint",
+					children: y ? "Try a different phrase or press Enter to ask the agent" : "Try a different phrase"
+				})] })
+			})
+		]
+	});
+}
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/ai/CommandSearch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/CommandSearch/index.tsx"],"sourcesContent":["import React, { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../utils/cn';\nimport './CommandSearch.css';\n\nexport type CommandSearchItem = {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: React.ReactNode;\n  group?: string;\n  keywords?: string[];\n  shortcut?: string;\n  onSelect?: () => void;\n};\n\nexport type CommandSearchProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onSubmit' | 'children'> & {\n  items: CommandSearchItem[];\n  query?: string;\n  defaultQuery?: string;\n  onQueryChange?: (query: string) => void;\n  onSelect?: (item: CommandSearchItem) => void;\n  /** Enter with nothing highlighted, or on an empty result set. */\n  onSubmit?: (query: string) => void;\n  placeholder?: string;\n  /** Custom predicate; default is a case-insensitive match on label / description / keywords. */\n  filter?: (item: CommandSearchItem, query: string) => boolean;\n  /** Wrap matched substrings in `<mark>`. */\n  highlightMatches?: boolean;\n  emptyState?: React.ReactNode | ((query: string) => React.ReactNode);\n  maxVisible?: number;\n  autoFocus?: boolean;\n  /** Renders as an in-page panel (not a modal). */\n  inline?: boolean;\n  /** Show a small indeterminate indicator in the input. */\n  loading?: boolean;\n  /** Accessible name for the input. */\n  label?: string;\n};\n\nconst SearchIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.3-4.3\" />\n  </svg>\n);\nconst ArrowRight = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M5 12h14\" />\n    <path d=\"m12 5 7 7-7 7\" />\n  </svg>\n);\n\nfunction defaultFilter(item: CommandSearchItem, query: string): boolean {\n  const q = query.trim().toLowerCase();\n  if (!q) return true;\n  const hay = [item.label, item.description ?? '', ...(item.keywords ?? [])].join(' ').toLowerCase();\n  return hay.includes(q);\n}\n\nfunction highlight(text: string, query: string): React.ReactNode {\n  const q = query.trim();\n  if (!q) return text;\n  const idx = text.toLowerCase().indexOf(q.toLowerCase());\n  if (idx < 0) return text;\n  return (\n    <>\n      {text.slice(0, idx)}\n      <mark className=\"dishui-ai-command-search__mark\">{text.slice(idx, idx + q.length)}</mark>\n      {text.slice(idx + q.length)}\n    </>\n  );\n}\n\n/**\n * Command search: an input over a filtered, grouped listbox with keyboard\n * navigation and an empty state that hands the query to the agent.\n */\nexport default function CommandSearch({\n  items,\n  query,\n  defaultQuery = '',\n  onQueryChange,\n  onSelect,\n  onSubmit,\n  placeholder = 'Search or ask…',\n  filter = defaultFilter,\n  highlightMatches = true,\n  emptyState,\n  maxVisible,\n  autoFocus,\n  inline = true,\n  loading = false,\n  label = 'Search',\n  className,\n  ...rest\n}: CommandSearchProps) {\n  const uid = useId();\n  const listId = `${uid}-list`;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [internalQuery, setInternalQuery] = useState(defaultQuery);\n  const q = query ?? internalQuery;\n  const [highlighted, setHighlighted] = useState<number>(-1);\n  const setQuery = (next: string) => {\n    if (query === undefined) setInternalQuery(next);\n    onQueryChange?.(next);\n    setHighlighted(-1);\n  };\n\n  const visible = useMemo(() => {\n    const matched = items.filter(item => filter(item, q));\n    return maxVisible !== undefined ? matched.slice(0, maxVisible) : matched;\n  }, [items, filter, q, maxVisible]);\n\n  // -1 means \"nothing highlighted\"; clamp in case the result set shrank.\n  const activeIndex = highlighted < visible.length ? highlighted : -1;\n\n  // Keep the highlighted option in view.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const el = document.getElementById(`${uid}-opt-${activeIndex}`);\n    el?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, uid]);\n\n  const select = (item: CommandSearchItem) => {\n    item.onSelect?.();\n    onSelect?.(item);\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const n = visible.length;\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (n) setHighlighted(i => (i + 1) % n);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (n) setHighlighted(i => (i <= 0 ? n - 1 : i - 1));\n        break;\n      case 'Home':\n        if (n) { e.preventDefault(); setHighlighted(0); }\n        break;\n      case 'End':\n        if (n) { e.preventDefault(); setHighlighted(n - 1); }\n        break;\n      case 'Enter':\n        e.preventDefault();\n        if (activeIndex >= 0 && visible[activeIndex]) select(visible[activeIndex]);\n        else onSubmit?.(q);\n        break;\n      case 'Escape':\n        if (q) { e.preventDefault(); setQuery(''); }\n        setHighlighted(-1);\n        break;\n      default:\n    }\n  };\n\n  // Group while preserving first-seen order.\n  const groups = useMemo(() => {\n    const order: string[] = [];\n    const map = new Map<string, { item: CommandSearchItem; index: number }[]>();\n    visible.forEach((item, index) => {\n      const key = item.group ?? '';\n      if (!map.has(key)) { map.set(key, []); order.push(key); }\n      map.get(key)!.push({ item, index });\n    });\n    return order.map(key => ({ key, entries: map.get(key)! }));\n  }, [visible]);\n\n  const empty = visible.length === 0;\n  const activeId = activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined;\n\n  return (\n    <div {...rest} className={cn('dishui-ai-command-search', inline && 'dishui-ai-command-search--inline', className)}>\n      <div className={cn('dishui-ai-command-search__field', loading && 'dishui-ai-command-search__field--loading')}>\n        <span className=\"dishui-ai-command-search__glyph\" aria-hidden=\"true\"><SearchIcon /></span>\n        <input\n          ref={inputRef}\n          className=\"dishui-ai-command-search__input\"\n          type=\"text\"\n          role=\"combobox\"\n          aria-label={label}\n          aria-expanded={!empty}\n          aria-controls={listId}\n          aria-activedescendant={activeId}\n          aria-autocomplete=\"list\"\n          aria-busy={loading || undefined}\n          autoComplete=\"off\"\n          spellCheck={false}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          value={q}\n          onChange={e => setQuery(e.target.value)}\n          onKeyDown={onKeyDown}\n        />\n        {loading && <span className=\"dishui-ai-command-search__spinner\" role=\"status\" aria-label=\"Searching\" />}\n        {q && !loading && (\n          <button\n            type=\"button\"\n            className=\"dishui-ai-command-search__clear\"\n            aria-label=\"Clear search\"\n            onClick={() => { setQuery(''); inputRef.current?.focus(); }}\n          >\n            ×\n          </button>\n        )}\n      </div>\n\n      <ul id={listId} role=\"listbox\" aria-label={label} className=\"dishui-ai-command-search__list\">\n        {groups.map(group => (\n          <React.Fragment key={group.key || '__default'}>\n            {group.key && (\n              <li role=\"presentation\" className=\"dishui-ai-command-search__group\">{group.key}</li>\n            )}\n            {group.entries.map(({ item, index }) => {\n              const isActive = index === activeIndex;\n              return (\n                <li\n                  key={item.id}\n                  id={`${uid}-opt-${index}`}\n                  role=\"option\"\n                  aria-selected={isActive}\n                  className={cn('dishui-ai-command-search__option', isActive && 'dishui-ai-command-search__option--active')}\n                  onMouseMove={() => { if (!isActive) setHighlighted(index); }}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={() => select(item)}\n                >\n                  <span className=\"dishui-ai-command-search__icon\" aria-hidden=\"true\">{item.icon ?? <ArrowRight />}</span>\n                  <span className=\"dishui-ai-command-search__text\">\n                    <span className=\"dishui-ai-command-search__label\">{highlightMatches ? highlight(item.label, q) : item.label}</span>\n                    {item.description && (\n                      <span className=\"dishui-ai-command-search__description\">\n                        {highlightMatches ? highlight(item.description, q) : item.description}\n                      </span>\n                    )}\n                  </span>\n                  {item.shortcut && <kbd className=\"dishui-ai-command-search__shortcut\">{item.shortcut}</kbd>}\n                </li>\n              );\n            })}\n          </React.Fragment>\n        ))}\n      </ul>\n\n      {empty && (\n        <div className=\"dishui-ai-command-search__empty\" role=\"status\">\n          {typeof emptyState === 'function' ? emptyState(q) : emptyState ?? (\n            <>\n              <p className=\"dishui-ai-command-search__empty-title\">\n                {q.trim() ? <>No results for “{q.trim()}”</> : 'Nothing to show'}\n              </p>\n              <p className=\"dishui-ai-command-search__empty-hint\">\n                {onSubmit ? 'Try a different phrase or press Enter to ask the agent' : 'Try a different phrase'}\n              </p>\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAuCA,IAAM,UACJ,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,QAAO;CAAe,aAAY;CAAI,eAAc;CAAQ,gBAAe;CAAQ,eAAY;CAA3J,UAAA,CACE,kBAAC,UAAD;EAAQ,IAAG;EAAK,IAAG;EAAK,GAAE;CAAK,CAAA,GAC/B,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA,CACvB;IAED,UACJ,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,QAAO;CAAe,aAAY;CAAI,eAAc;CAAQ,gBAAe;CAAQ,eAAY;CAA3J,UAAA,CACE,kBAAC,QAAD,EAAM,GAAE,WAAY,CAAA,GACpB,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA,CACtB;;AAGP,SAAS,EAAc,GAAyB,GAAwB;CACtE,IAAM,IAAI,EAAM,KAAK,CAAC,CAAC,YAAY;CAGnC,OAFA,CAAK,KACO;EAAC,EAAK;EAAO,EAAK,eAAe;EAAI,GAAI,EAAK,YAAY,CAAC;CAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,YAC9E,CAAA,CAAI,SAAS,CAAC;AACvB;AAEA,SAAS,EAAU,GAAc,GAAgC;CAC/D,IAAM,IAAI,EAAM,KAAK;CACrB,IAAI,CAAC,GAAG,OAAO;CACf,IAAM,IAAM,EAAK,YAAY,CAAC,CAAC,QAAQ,EAAE,YAAY,CAAC;CAEtD,OADI,IAAM,IAAU,IAElB,kBAAA,GAAA,EAAA,UAAA;EACG,EAAK,MAAM,GAAG,CAAG;EAClB,kBAAC,QAAD;GAAM,WAAU;GAAkC,UAAA,EAAK,MAAM,GAAK,IAAM,EAAE,MAAM;EAAQ,CAAA;EACvF,EAAK,MAAM,IAAM,EAAE,MAAM;CAC1B,EAAA,CAAA;AAEN;AAMA,SAAwB,EAAc,EACpC,UACA,UACA,kBAAe,IACf,kBACA,aACA,aACA,iBAAc,kBACd,YAAS,GACT,sBAAmB,IACnB,eACA,eACA,cACA,YAAS,IACT,aAAU,IACV,WAAQ,UACR,cACA,GAAG,KACkB;CACrB,IAAM,IAAM,EAAM,GACZ,IAAS,GAAG,EAAI,QAChB,IAAW,EAAyB,IAAI,GAExC,CAAC,GAAe,KAAoB,EAAS,CAAY,GACzD,IAAI,KAAS,GACb,CAAC,GAAa,KAAkB,EAAiB,EAAE,GACnD,KAAY,MAAiB;EAGjC,AAFI,MAAU,KAAA,KAAW,EAAiB,CAAI,GAC9C,IAAgB,CAAI,GACpB,EAAe,EAAE;CACnB,GAEM,IAAU,QAAc;EAC5B,IAAM,IAAU,EAAM,QAAO,MAAQ,EAAO,GAAM,CAAC,CAAC;EACpD,OAAO,MAAe,KAAA,IAA2C,IAA/B,EAAQ,MAAM,GAAG,CAAU;CAC/D,GAAG;EAAC;EAAO;EAAQ;EAAG;CAAU,CAAC,GAG3B,IAAc,IAAc,EAAQ,SAAS,IAAc;CAGjE,QAAgB;EACV,IAAc,KAElB,SADoB,eAAe,GAAG,EAAI,OAAO,GACjD,CAAA,EAAI,eAAe,EAAE,OAAO,UAAU,CAAC;CACzC,GAAG,CAAC,GAAa,CAAG,CAAC;CAErB,IAAM,KAAU,MAA4B;EAE1C,AADA,EAAK,WAAW,GAChB,IAAW,CAAI;CACjB,GAEM,KAAa,MAA6C;EAC9D,IAAM,IAAI,EAAQ;EAClB,QAAQ,EAAE,KAAV;GACE,KAAK;IAEH,AADA,EAAE,eAAe,GACb,KAAG,GAAe,OAAM,IAAI,KAAK,CAAC;IACtC;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACb,KAAG,GAAe,MAAM,KAAK,IAAI,IAAI,IAAI,IAAI,CAAE;IACnD;GACF,KAAK;IACH,AAAI,MAAK,EAAE,eAAe,GAAG,EAAe,CAAC;IAC7C;GACF,KAAK;IACH,AAAI,MAAK,EAAE,eAAe,GAAG,EAAe,IAAI,CAAC;IACjD;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACb,KAAe,KAAK,EAAQ,KAAc,EAAO,EAAQ,EAAY,IACpE,IAAW,CAAC;IACjB;GACF,KAAK,UAEH,AADI,MAAK,EAAE,eAAe,GAAG,EAAS,EAAE,IACxC,EAAe,EAAE;EAGrB;CACF,GAGM,IAAS,QAAc;EAC3B,IAAM,IAAkB,CAAC,GACnB,oBAAM,IAAI,IAA0D;EAM1E,OALA,EAAQ,SAAS,GAAM,MAAU;GAC/B,IAAM,IAAM,EAAK,SAAS;GAE1B,AADK,EAAI,IAAI,CAAG,MAAK,EAAI,IAAI,GAAK,CAAC,CAAC,GAAG,EAAM,KAAK,CAAG,IACrD,EAAI,IAAI,CAAG,CAAC,CAAE,KAAK;IAAE;IAAM;GAAM,CAAC;EACpC,CAAC,GACM,EAAM,KAAI,OAAQ;GAAE;GAAK,SAAS,EAAI,IAAI,CAAG;EAAG,EAAE;CAC3D,GAAG,CAAC,CAAO,CAAC,GAEN,IAAQ,EAAQ,WAAW,GAC3B,IAAW,KAAe,IAAI,GAAG,EAAI,OAAO,MAAgB,KAAA;CAElE,OACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAG,4BAA4B,KAAU,oCAAoC,CAAS;EAAhH,UAAA;GACE,kBAAC,OAAD;IAAK,WAAW,EAAG,mCAAmC,KAAW,0CAA0C;IAA3G,UAAA;KACE,kBAAC,QAAD;MAAM,WAAU;MAAkC,eAAY;MAAO,UAAA,kBAAC,GAAD,CAAa,CAAA;KAAO,CAAA;KACzF,kBAAC,SAAD;MACE,KAAK;MACL,WAAU;MACV,MAAK;MACL,MAAK;MACL,cAAY;MACZ,iBAAe,CAAC;MAChB,iBAAe;MACf,yBAAuB;MACvB,qBAAkB;MAClB,aAAW,KAAW,KAAA;MACtB,cAAa;MACb,YAAY;MACD;MACE;MACb,OAAO;MACP,WAAU,MAAK,EAAS,EAAE,OAAO,KAAK;MAC3B;KACZ,CAAA;KACA,KAAW,kBAAC,QAAD;MAAM,WAAU;MAAoC,MAAK;MAAS,cAAW;KAAa,CAAA;KACrG,KAAK,CAAC,KACL,kBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,cAAW;MACX,eAAe;OAAgB,AAAd,EAAS,EAAE,GAAG,EAAS,SAAS,MAAM;MAAG;MAC3D,UAAA;KAEO,CAAA;IAEP;;GAEL,kBAAC,MAAD;IAAI,IAAI;IAAQ,MAAK;IAAU,cAAY;IAAO,WAAU;IACzD,UAAA,EAAO,KAAI,MACV,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,EAAM,OACL,kBAAC,MAAD;KAAI,MAAK;KAAe,WAAU;KAAmC,UAAA,EAAM;IAAQ,CAAA,GAEpF,EAAM,QAAQ,KAAK,EAAE,SAAM,eAAY;KACtC,IAAM,IAAW,MAAU;KAC3B,OACE,kBAAC,MAAD;MAEE,IAAI,GAAG,EAAI,OAAO;MAClB,MAAK;MACL,iBAAe;MACf,WAAW,EAAG,oCAAoC,KAAY,0CAA0C;MACxG,mBAAmB;OAAE,AAAK,KAAU,EAAe,CAAK;MAAG;MAC3D,cAAa,MAAK,EAAE,eAAe;MACnC,eAAe,EAAO,CAAI;MAR5B,UAAA;OAUE,kBAAC,QAAD;QAAM,WAAU;QAAiC,eAAY;QAAQ,UAAA,EAAK,QAAQ,kBAAC,GAAD,CAAa,CAAA;OAAQ,CAAA;OACvG,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA,CACE,kBAAC,QAAD;SAAM,WAAU;SAAmC,UAAA,IAAmB,EAAU,EAAK,OAAO,CAAC,IAAI,EAAK;QAAY,CAAA,GACjH,EAAK,eACJ,kBAAC,QAAD;SAAM,WAAU;SACb,UAAA,IAAmB,EAAU,EAAK,aAAa,CAAC,IAAI,EAAK;QACtD,CAAA,CAEJ;;OACL,EAAK,YAAY,kBAAC,OAAD;QAAK,WAAU;QAAsC,UAAA,EAAK;OAAc,CAAA;MACxF;KAnBG,GAAA,EAAK,EAmBR;IAER,CAAC,CACa,EAAA,GA9BK,EAAM,OAAO,WA8BlB,CACjB;GACC,CAAA;GAEH,KACC,kBAAC,OAAD;IAAK,WAAU;IAAkC,MAAK;IACnD,UAAA,OAAO,KAAe,aAAa,EAAW,CAAC,IAAI,KAClD,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KACV,UAAA,EAAE,KAAK,IAAI,kBAAA,GAAA,EAAA,UAAA;MAAE;MAAiB,EAAE,KAAK;MAAE;KAAG,EAAA,CAAA,IAAI;IAC9C,CAAA,GACH,kBAAC,KAAD;KAAG,WAAU;KACV,UAAA,IAAW,2DAA2D;IACtE,CAAA,CACH,EAAA,CAAA;GAED,CAAA;EAEJ;;AAET"}

package/dist/components/ai/ContextCards/index.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export type ContextSourceKind = 'pdf' | 'csv' | 'doc' | 'web' | 'db' | 'code' | (string & {});
+export type ContextSource = {
+    kind: ContextSourceKind;
+    name: string;
+    url?: string;
+    page?: number;
+};
+export type ContextChunk = {
+    id: string;
+    title: React.ReactNode;
+    excerpt: string;
+    /** Defaults to `excerpt.length`. */
+    characters?: number;
+    /** Relevance 0–1, shown as a percentage. */
+    score?: number;
+    source: ContextSource;
+};
+export type ContextCardsLabels = {
+    characters?: string;
+    page?: string;
+};
+export type ContextCardsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'onSelect'> & {
+    chunks: ContextChunk[];
+    /** Total count when only a subset is passed; defaults to `chunks.length`. */
+    total?: number;
+    title?: React.ReactNode;
+    /** Grid columns on wide containers; collapses to 1 below 560px. */
+    columns?: 1 | 2;
+    /** Makes each card a button. */
+    onSelect?: (chunk: ContextChunk) => void;
+    selectedId?: string;
+    /** Excerpt line clamp. */
+    maxExcerptLines?: number;
+    emptyText?: React.ReactNode;
+    labels?: ContextCardsLabels;
+};
+/**
+ * Retrieved knowledge chunks with their sources: a header count, then
+ * cards with title, character count, clamped excerpt and a source pill.
+ */
+export default function ContextCards({ chunks, total, title, columns, onSelect, selectedId, maxExcerptLines, emptyText, labels, className, ...rest }: ContextCardsProps): React.JSX.Element;

package/dist/components/ai/ContextCards/index.js

@@ -0,0 +1,106 @@
+import { cn as e } from "../../../utils/cn.js";
+/* empty css             */
+import "react";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ai/ContextCards/index.tsx
+var i = {
+	characters: "characters",
+	page: "p."
+}, a = new Intl.NumberFormat("en-US");
+function o({ chunks: o, total: s, title: c = "All chunks", columns: l = 2, onSelect: u, selectedId: d, maxExcerptLines: f = 3, emptyText: p = "No context retrieved", labels: m, className: h, ...g }) {
+	let _ = {
+		...i,
+		...m
+	}, v = s ?? o.length, y = {
+		WebkitLineClamp: f,
+		lineClamp: f
+	};
+	return /* @__PURE__ */ r("div", {
+		...g,
+		className: e("dishui-ai-context-cards", `dishui-ai-context-cards--cols-${l}`, h),
+		children: [/* @__PURE__ */ r("div", {
+			className: "dishui-ai-context-cards__header",
+			children: [/* @__PURE__ */ n("span", {
+				className: "dishui-ai-context-cards__title",
+				children: c
+			}), /* @__PURE__ */ n("span", {
+				className: "dishui-ai-context-cards__count",
+				children: a.format(v)
+			})]
+		}), o.length === 0 ? /* @__PURE__ */ n("div", {
+			className: "dishui-ai-context-cards__empty",
+			children: p
+		}) : /* @__PURE__ */ n("ul", {
+			className: "dishui-ai-context-cards__grid",
+			children: o.map((i) => {
+				let o = i.characters ?? i.excerpt.length, s = i.id === d, c = /* @__PURE__ */ r(t, { children: [
+					/* @__PURE__ */ r("div", {
+						className: "dishui-ai-context-cards__card-header",
+						children: [
+							/* @__PURE__ */ n("span", {
+								className: "dishui-ai-context-cards__card-title",
+								children: i.title
+							}),
+							/* @__PURE__ */ r("span", {
+								className: "dishui-ai-context-cards__chars",
+								children: [
+									a.format(o),
+									" ",
+									_.characters
+								]
+							}),
+							i.score !== void 0 && /* @__PURE__ */ r("span", {
+								className: "dishui-ai-context-cards__score",
+								children: [Math.round(i.score * 100), "%"]
+							})
+						]
+					}),
+					/* @__PURE__ */ n("p", {
+						className: "dishui-ai-context-cards__excerpt",
+						style: y,
+						children: i.excerpt
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "dishui-ai-context-cards__source",
+						children: [
+							/* @__PURE__ */ n("span", {
+								className: "dishui-ai-context-cards__kind",
+								children: i.source.kind
+							}),
+							/* @__PURE__ */ n("span", {
+								className: "dishui-ai-context-cards__source-name",
+								title: i.source.name,
+								children: i.source.name
+							}),
+							i.source.page !== void 0 && /* @__PURE__ */ r("span", {
+								className: "dishui-ai-context-cards__page",
+								children: [
+									_.page,
+									" ",
+									i.source.page
+								]
+							})
+						]
+					})
+				] }), l = e("dishui-ai-context-cards__card", u && "dishui-ai-context-cards__card--interactive", s && "dishui-ai-context-cards__card--selected");
+				return /* @__PURE__ */ n("li", {
+					className: "dishui-ai-context-cards__item",
+					children: u ? /* @__PURE__ */ n("button", {
+						type: "button",
+						className: l,
+						"aria-pressed": s,
+						onClick: () => u(i),
+						children: c
+					}) : /* @__PURE__ */ n("div", {
+						className: l,
+						children: c
+					})
+				}, i.id);
+			})
+		})]
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/ai/ContextCards/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/ContextCards/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../utils/cn';\nimport './ContextCards.css';\n\nexport type ContextSourceKind = 'pdf' | 'csv' | 'doc' | 'web' | 'db' | 'code' | (string & {});\n\nexport type ContextSource = {\n  kind: ContextSourceKind;\n  name: string;\n  url?: string;\n  page?: number;\n};\n\nexport type ContextChunk = {\n  id: string;\n  title: React.ReactNode;\n  excerpt: string;\n  /** Defaults to `excerpt.length`. */\n  characters?: number;\n  /** Relevance 0–1, shown as a percentage. */\n  score?: number;\n  source: ContextSource;\n};\n\nexport type ContextCardsLabels = {\n  characters?: string;\n  page?: string;\n};\n\nexport type ContextCardsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'onSelect'> & {\n  chunks: ContextChunk[];\n  /** Total count when only a subset is passed; defaults to `chunks.length`. */\n  total?: number;\n  title?: React.ReactNode;\n  /** Grid columns on wide containers; collapses to 1 below 560px. */\n  columns?: 1 | 2;\n  /** Makes each card a button. */\n  onSelect?: (chunk: ContextChunk) => void;\n  selectedId?: string;\n  /** Excerpt line clamp. */\n  maxExcerptLines?: number;\n  emptyText?: React.ReactNode;\n  labels?: ContextCardsLabels;\n};\n\nconst DEFAULT_LABELS: Required<ContextCardsLabels> = { characters: 'characters', page: 'p.' };\n\nconst numberFormat = new Intl.NumberFormat('en-US');\n\n/**\n * Retrieved knowledge chunks with their sources: a header count, then\n * cards with title, character count, clamped excerpt and a source pill.\n */\nexport default function ContextCards({\n  chunks,\n  total,\n  title = 'All chunks',\n  columns = 2,\n  onSelect,\n  selectedId,\n  maxExcerptLines = 3,\n  emptyText = 'No context retrieved',\n  labels,\n  className,\n  ...rest\n}: ContextCardsProps) {\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const count = total ?? chunks.length;\n  const excerptStyle: React.CSSProperties = { WebkitLineClamp: maxExcerptLines, lineClamp: maxExcerptLines };\n\n  return (\n    <div {...rest} className={cn('dishui-ai-context-cards', `dishui-ai-context-cards--cols-${columns}`, className)}>\n      <div className=\"dishui-ai-context-cards__header\">\n        <span className=\"dishui-ai-context-cards__title\">{title}</span>\n        <span className=\"dishui-ai-context-cards__count\">{numberFormat.format(count)}</span>\n      </div>\n\n      {chunks.length === 0 ? (\n        <div className=\"dishui-ai-context-cards__empty\">{emptyText}</div>\n      ) : (\n        <ul className=\"dishui-ai-context-cards__grid\">\n          {chunks.map(chunk => {\n            const characters = chunk.characters ?? chunk.excerpt.length;\n            const selected = chunk.id === selectedId;\n            const inner = (\n              <>\n                <div className=\"dishui-ai-context-cards__card-header\">\n                  <span className=\"dishui-ai-context-cards__card-title\">{chunk.title}</span>\n                  <span className=\"dishui-ai-context-cards__chars\">\n                    {numberFormat.format(characters)} {text.characters}\n                  </span>\n                  {chunk.score !== undefined && (\n                    <span className=\"dishui-ai-context-cards__score\">{Math.round(chunk.score * 100)}%</span>\n                  )}\n                </div>\n                <p className=\"dishui-ai-context-cards__excerpt\" style={excerptStyle}>{chunk.excerpt}</p>\n                <span className=\"dishui-ai-context-cards__source\">\n                  <span className=\"dishui-ai-context-cards__kind\">{chunk.source.kind}</span>\n                  <span className=\"dishui-ai-context-cards__source-name\" title={chunk.source.name}>\n                    {chunk.source.name}\n                  </span>\n                  {chunk.source.page !== undefined && (\n                    <span className=\"dishui-ai-context-cards__page\">{text.page} {chunk.source.page}</span>\n                  )}\n                </span>\n              </>\n            );\n            const cardClass = cn(\n              'dishui-ai-context-cards__card',\n              onSelect && 'dishui-ai-context-cards__card--interactive',\n              selected && 'dishui-ai-context-cards__card--selected',\n            );\n            return (\n              <li key={chunk.id} className=\"dishui-ai-context-cards__item\">\n                {onSelect ? (\n                  <button type=\"button\" className={cardClass} aria-pressed={selected} onClick={() => onSelect(chunk)}>\n                    {inner}\n                  </button>\n                ) : (\n                  <div className={cardClass}>{inner}</div>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA6CA,IAAM,IAA+C;CAAE,YAAY;CAAc,MAAM;AAAK,GAEtF,IAAe,IAAI,KAAK,aAAa,OAAO;AAMlD,SAAwB,EAAa,EACnC,WACA,UACA,WAAQ,cACR,aAAU,GACV,aACA,eACA,qBAAkB,GAClB,eAAY,wBACZ,WACA,cACA,GAAG,KACiB;CACpB,IAAM,IAAO;EAAE,GAAG;EAAgB,GAAG;CAAO,GACtC,IAAQ,KAAS,EAAO,QACxB,IAAoC;EAAE,iBAAiB;EAAiB,WAAW;CAAgB;CAEzG,OACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAG,2BAA2B,iCAAiC,KAAW,CAAS;EAA7G,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAkC,UAAA;GAAY,CAAA,GAC9D,kBAAC,QAAD;IAAM,WAAU;IAAkC,UAAA,EAAa,OAAO,CAAK;GAAQ,CAAA,CAChF;EAEJ,CAAA,GAAA,EAAO,WAAW,IACjB,kBAAC,OAAD;GAAK,WAAU;GAAkC,UAAA;EAAe,CAAA,IAEhE,kBAAC,MAAD;GAAI,WAAU;GACX,UAAA,EAAO,KAAI,MAAS;IACnB,IAAM,IAAa,EAAM,cAAc,EAAM,QAAQ,QAC/C,IAAW,EAAM,OAAO,GACxB,IACJ,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,kBAAC,QAAD;QAAM,WAAU;QAAuC,UAAA,EAAM;OAAY,CAAA;OACzE,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA;SACG,EAAa,OAAO,CAAU;SAAE;SAAE,EAAK;QACpC;;OACL,EAAM,UAAU,KAAA,KACf,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA,CAAkD,KAAK,MAAM,EAAM,QAAQ,GAAG,GAAE,GAAO;;MAEtF;;KACL,kBAAC,KAAD;MAAG,WAAU;MAAmC,OAAO;MAAe,UAAA,EAAM;KAAW,CAAA;KACvF,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACE,kBAAC,QAAD;QAAM,WAAU;QAAiC,UAAA,EAAM,OAAO;OAAW,CAAA;OACzE,kBAAC,QAAD;QAAM,WAAU;QAAuC,OAAO,EAAM,OAAO;QACxE,UAAA,EAAM,OAAO;OACV,CAAA;OACL,EAAM,OAAO,SAAS,KAAA,KACrB,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA;SAAiD,EAAK;SAAK;SAAE,EAAM,OAAO;QAAW;;MAEnF;;IACN,EAAA,CAAA,GAEE,IAAY,EAChB,iCACA,KAAY,8CACZ,KAAY,yCACd;IACA,OACE,kBAAC,MAAD;KAAmB,WAAU;KAC1B,UAAA,IACC,kBAAC,UAAD;MAAQ,MAAK;MAAS,WAAW;MAAW,gBAAc;MAAU,eAAe,EAAS,CAAK;MAC9F,UAAA;KACK,CAAA,IAER,kBAAC,OAAD;MAAK,WAAW;MAAY,UAAA;KAAW,CAAA;IAEvC,GARK,EAAM,EAQX;GAER,CAAC;EACC,CAAA,CAEH;;AAET"}