@ai-matrx/design-system 0.20.2 → 0.20.6

package/dist/data-table/index.cjs

@@ -2825,7 +2825,7 @@ var useContentTransferCapabilities = () => React14.useContext(CapabilityContext)
 var SurfaceContext = React14.createContext(null);
 function MenuPresentation({ label, hint, icon: Icon3 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon3, { className: "matrx-alchemy-menu-icon" }) : null,
+    Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon3, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { file: true }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
       label,
       hint ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: hint }) : null
@@ -2847,8 +2847,11 @@ function DestinationPresentation({ action }) {
   };
   const path2 = paths[action.id.replace(/^matrx:/, "")];
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    !action.icon ? path2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: path2 }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { file: true }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuPresentation, { ...action })
+    action.icon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(action.icon, { className: "matrx-alchemy-menu-icon" }) : path2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: path2 }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { file: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
+      action.label,
+      action.hint ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: action.hint }) : null
+    ] })
   ] });
 }
 function ReceiptLink({ target }) {
@@ -2858,6 +2861,11 @@ function ReceiptLink({ target }) {
   ] }) : null;
 }
 function PaletteGlyph({ format, ai = false, file = false, kind }) {
+  if (kind === "link") return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2" }) });
+  if (kind === "surface") return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M3 9h18M9 9v12" })
+  ] });
   if (kind === "ai-copy") return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { x: "5", y: "5", width: "11", height: "14", rx: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M9 3h6a2 2 0 0 1 2 2v10" }),
@@ -3338,7 +3346,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
     const presentation = options.action;
     const Icon3 = presentation?.icon;
     const fallbackLabel = options.file && !/^download\b/i.test(label2) ? `Download ${label2}` : label2;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-tile", "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-tile", title: id === "table-data" ? "JSON using column display names" : id === "table-schema" ? "Table schema and rows" : label2, "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
       closePalette();
       onClick();
     }, children: [
@@ -3400,7 +3408,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "ai-copy" }),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
               "Copy with AI context",
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Content, source and capture details" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Include source context" })
             ] })
           ] }) : null, items: quickVariants("ai"), onRun: (variant) => {
             closePalette();
@@ -3413,32 +3421,44 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "sliders" }),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
               "Prepare for AI",
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Review and edit before copying" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Trim, edit or summarize" })
             ] })
           ] }) })
         ] }) : null,
         prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteRows, { title: "Other sources", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
             closePalette();
             void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Prepare this surface" }) }) : null,
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "surface" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Prepare this page" })
+          ] }) : null,
           variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": variant.ariaLabel, onClick: () => {
             closePalette();
             void openWorkspace(variantWorkspaceKeys.get(variant.id), variant);
           }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}` }) }, variant.id))
         ] }) }) : null,
         references.length || referenceActions.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { className: "matrx-alchemy-palette-section", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { children: "Live references" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "matrx-alchemy-menu-hint", children: "Pointers to saved data, independent of filters and edits." }),
-          references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void copyReference(reference), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: reference.label }) }, reference.id)),
-          referenceActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: action.label }) }, action.id))
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { children: "References" }),
+          referenceActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: action.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m6 4 4 4-4 4" }) })
+          ] }, action.id)),
+          references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", title: "Copies a reference to saved data", onClick: () => void copyReference(reference), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: reference.label })
+          ] }, reference.id))
         ] }) : null,
         ["save", "chat", "email", "other"].map((group) => {
           const entries = ordinaryActions.filter((action) => (action.group ?? "other") === group);
           return entries.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("details", { className: "matrx-alchemy-palette-destinations", children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("summary", { children: [
               group === "save" ? "Save to Matrx" : group === "chat" ? "Continue with AI" : group === "email" ? "Email to me" : "Actions",
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: entries.length })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "matrx-alchemy-disclosure-meta", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: entries.length }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m6 4 4 4-4 4" }) })
+              ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: entries.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
               closePalette();
@@ -6850,6 +6870,17 @@ function tokenFromColumnName(name) {
   return name.endsWith("_id") ? name.slice(0, -3) : null;
 }
 
+// src/data-table/display-value.ts
+function formatTableDisplayValue(value) {
+  if (typeof value === "number") return value.toLocaleString(void 0, { maximumFractionDigits: 12 });
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(value) && !Number.isNaN(Date.parse(value))) {
+    return new Date(value).toLocaleString();
+  }
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return stringifyCellValue(value) || "\u2014";
+}
+
 // src/data-table/DataRowInspector.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var noFieldToken = () => null;
@@ -6922,7 +6953,7 @@ function DataRowInspector({
               key
             );
           }
-          const formatted = formatValue(value);
+          const formatted = value !== null && typeof value === "object" && !(value instanceof Date) ? formatValue(value) : formatTableDisplayValue(value);
           const multiline = formatted.includes("\n") || formatted.length > 80;
           return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "div",
@@ -7051,6 +7082,22 @@ function TabButton({
   );
 }
 
+// src/data-table/row-title.ts
+function defaultRowTitle(row, columns) {
+  const values = columns.map((column) => ({
+    id: columnId(column),
+    value: getCellValue(row, column)
+  })).filter(
+    (entry) => typeof entry.value === "string" && entry.value.trim().length > 0
+  );
+  const named = values.find(
+    ({ id, value: value2 }) => inferTableSearchRole(id) === "name" && !isUuidValue(value2)
+  );
+  const identity = values.find(({ id }) => id === "id" || id === "uuid") ?? values.find(({ id }) => inferTableSearchRole(id) === "id");
+  const value = (named ?? identity ?? values[0])?.value.trim();
+  return value ? isUuidValue(value) ? value.slice(0, 8) : value : "Details";
+}
+
 // src/data-table/DirtySavePill.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function DirtySavePill({
@@ -8544,25 +8591,6 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
   const rootRef = (0, import_react17.useRef)(null);
-  const setDiagnosticBoundaryRef = (0, import_react17.useCallback)((node) => {
-    rootRef.current = node;
-    if (!node) return;
-    node.style.setProperty("outline", "2px solid #2563eb", "important");
-    node.style.setProperty("outline-offset", "-2px", "important");
-    node.style.setProperty("isolation", "isolate", "important");
-    const position = window.getComputedStyle(node).position;
-    if (position === "" || position === "static") {
-      node.style.setProperty("position", "relative", "important");
-    }
-    const boundary = node.querySelector(":scope > [data-matrx-table-boundary]");
-    if (!boundary) return;
-    boundary.style.setProperty("position", "absolute", "important");
-    boundary.style.setProperty("inset", "0", "important");
-    boundary.style.setProperty("pointer-events", "none", "important");
-    boundary.style.setProperty("z-index", "2147483647", "important");
-    boundary.style.setProperty("box-sizing", "border-box", "important");
-    boundary.style.setProperty("border", "2px solid #2563eb", "important");
-  }, []);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -9603,7 +9631,7 @@ function MatrxDataTableCore({
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           "div",
           {
-            ref: setDiagnosticBoundaryRef,
+            ref: rootRef,
             "data-matrx-table": true,
             "data-matrx-table-density": resolvedDensity,
             "data-url-state-table": urlState?.id,
@@ -9612,7 +9640,6 @@ function MatrxDataTableCore({
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": "true", "data-matrx-table-boundary": true }),
               notice,
               savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
               toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
@@ -10691,7 +10718,7 @@ function MatrxDataTableCore({
                 {
                   title: resolveStringTitle(
                     detail?.title?.(selectedRow),
-                    defaultRowTitle(selectedRow, visibleColumns)
+                    defaultRowTitle(selectedRow, columns)
                   ),
                   titleNode: detail?.title?.(selectedRow),
                   description: detail?.description?.(selectedRow),
@@ -10758,7 +10785,7 @@ function MatrxDataTableCore({
                 {
                   isOpen: true,
                   onClose: closeWindow,
-                  title: windowConfig?.title?.(windowRow) ?? defaultRowTitle(windowRow, visibleColumns),
+                  title: windowConfig?.title?.(windowRow) ?? defaultRowTitle(windowRow, columns),
                   row: windowRow,
                   width: windowConfig?.width,
                   height: windowConfig?.height,
@@ -11090,7 +11117,8 @@ function normalizeColumnWidthsForColumns(widths, columns) {
 }
 function columnWidthVar(width, resizedWidth, id, resizable) {
   if (width === void 0 && resizedWidth === void 0 && !resizable) return void 0;
-  const fallback = resizedWidth === void 0 ? width === void 0 ? "auto" : typeof width === "number" ? `${width}px` : width : `${resizedWidth}px`;
+  const inferredWidth = resizable && inferTableSearchRole(id) === "name" ? "12rem" : "auto";
+  const fallback = resizedWidth === void 0 ? width === void 0 ? inferredWidth : typeof width === "number" ? `${width}px` : width : `${resizedWidth}px`;
   return {
     "--matrx-col-w": resizable ? `var(${columnResizeCssVar(id)}, ${fallback})` : fallback
   };
@@ -11140,19 +11168,12 @@ function renderCell(row, col, index) {
   if (typeof raw === "boolean") {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: raw ? "rounded bg-emerald-500/10 px-1.5 py-0.5 text-xs text-emerald-600" : "rounded bg-slate-500/10 px-1.5 py-0.5 text-xs text-muted-foreground", children: raw ? "Yes" : "No" });
   }
-  const formatted = typeof raw === "number" ? raw.toLocaleString(void 0, { maximumFractionDigits: 12 }) : raw instanceof Date ? raw.toLocaleString() : typeof raw === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(raw) && !Number.isNaN(Date.parse(raw)) ? new Date(raw).toLocaleString() : stringifyCellValue(raw) || "\u2014";
+  const formatted = formatTableDisplayValue(raw);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "block text-sm text-foreground", style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", overflowWrap: "anywhere" }, children: formatted }) }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { className: "max-w-md whitespace-pre-wrap break-words max-h-80 overflow-auto", children: typeof raw === "object" && raw !== null ? JSON.stringify(raw, null, 2) : formatted })
   ] });
 }
-function defaultRowTitle(row, columns) {
-  for (const col of columns) {
-    const v = getCellValue(row, col);
-    if (typeof v === "string" && v.trim()) return v;
-  }
-  return "Details";
-}
 function resolveStringTitle(title, fallback) {
   if (typeof title === "string" && title.trim()) return title;
   if (typeof title === "number") return String(title);