@arbidocs/blocks 0.5.75 → 0.5.76

package/dist/{chunk-5PKIDR2Q.js → chunk-ZHJVABQ6.js}

@@ -1,13 +1,14 @@
 "use client";
 import { page, minuteUtc, cell, paragraph, documentXml, docxPackage, TABLE_DOCUMENT_STYLES, groupDefinitions, compareDefinitions } from './chunk-IYUKJESY.js';
-import { RowNavigatorControls, LabelPickerList } from './chunk-JMQLTMJ7.js';
-import { DetailLoading, DetailBody, DetailSection, DetailFields, DetailField, DetailLinkList, DetailLinkItem, DetailEmpty } from './chunk-ZCOVDK2E.js';
-import { taskActivityHeadline, DEFAULT_TASK_ACTIVITY_LABELS } from './chunk-57S2PLCM.js';
+import { RowNavigatorControls } from './chunk-B3BD5IJR.js';
+import { DetailLoading, DetailBody, DetailSection, DetailLinkList, DetailLinkItem, DetailEmpty, DetailFields, DetailField } from './chunk-ZCOVDK2E.js';
+import { taskActivityHeadline, DEFAULT_TASK_ACTIVITY_LABELS } from './chunk-V2QWATXQ.js';
+import { GridView } from './chunk-7F5Z4K5W.js';
 import { DocumentPicker } from './chunk-WNDIVNPT.js';
 import { ModalHeader } from './chunk-TX2ZICS7.js';
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { Sparkle, Search, Pencil, ArrowUp, ArrowDown, X, Plus, Loader2, ArrowUpRight, ChevronDown, SlidersHorizontal, Download, FileDown, FileText, Lightbulb, MessagesSquare, Workflow, MessageSquare, Activity } from 'lucide-react';
-import { cn, Input, Textarea, Button, Checkbox, getEntityLabel, tagKindNouns, tagKindTitle, Popover, PopoverTrigger, PopoverContent, getEntityColor, isImageDocument, getDocumentTitle, Dialog, DialogContent, DialogTitle, DialogDescription } from '@arbidocs/react/ui';
+import { Sparkle, Search, Pencil, ArrowUp, ArrowDown, X, Plus, Loader2, ArrowUpRight, ChevronDown, MoreHorizontal, SlidersHorizontal, FileDown, Download, FileText, Lightbulb, MessagesSquare, Workflow, MessageSquare, Activity } from 'lucide-react';
+import { cn, Input, Textarea, Button, Checkbox, TagEntity, Popover, PopoverTrigger, PopoverContent, getEntityLabel, tagKindNouns, tagKindTitle, isImageDocument, getDocumentTitle, Dialog, DialogContent, DialogTitle, DialogDescription } from '@arbidocs/react/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function useTipsPlacement({
@@ -49,17 +50,6 @@ function useTipsPlacement({
     onHoverChange: setPaused
   };
 }
-
-// src/tips/visibility.ts
-var TIPS_VISIBILITY_OVERRIDE = "tips:visibility";
-function setHintsSessionOverride(layout, value) {
-  layout.setTransientView(TIPS_VISIBILITY_OVERRIDE, value ?? void 0);
-}
-var WELCOME_REPLAY_VIEW = "tips:welcomeReplay";
-function startWelcomeReplay(layout) {
-  setHintsSessionOverride(layout, true);
-  layout.setTransientView(WELCOME_REPLAY_VIEW, true);
-}
 var SPARKLE_DELAYS = ["0s", "0.1s", "0.2s"];
 var SPLASH_CLASS = "fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-background bg-opacity-50 z-50";
 function useShowAfter(delayMs) {
@@ -802,7 +792,7 @@ var DEFAULT_TAG_TABLE_LABELS = {
   addRow: "Add row",
   addRowPlaceholder: "Name of the new row",
   add: "Add",
-  export: "Export as Word document",
+  export: "Save as Word document",
   download: "Download .docx",
   exporting: "Exporting\u2026",
   empty: "No rows yet.",
@@ -810,10 +800,9 @@ var DEFAULT_TAG_TABLE_LABELS = {
   noColumns: "No columns yet: add one to give each row a value.",
   choose: "\u2014",
   yes: "Yes",
-  editColumns: "Columns"
+  editColumns: "Columns",
+  moreActions: "More"
 };
-var ROW_LABEL_WIDTH = "w-[11rem]";
-var EVIDENCE_WIDTH = "w-[14rem]";
 var ROW_LABEL = "line-clamp-3 whitespace-normal break-words";
 function TagTableCell({
   row,
@@ -921,17 +910,17 @@ function TagLinkCell({
       {
         type: "button",
         onClick: () => onOpenTag(id),
-        className: "inline-flex min-w-0 max-w-full items-center truncate rounded-md border border-border px-1.5 py-0.5 text-xs hover:border-primary/40 hover:text-primary",
+        className: "inline-flex min-w-0 max-w-full items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-testid": `${testId}-link-${id}`,
-        children: label(id)
+        children: /* @__PURE__ */ jsx(TagEntity, { tag: { external_id: id, name: label(id) }, showTooltip: false, wrap: true })
       },
       id
     ) : /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex min-w-0 max-w-full truncate rounded-md border border-border px-1.5 py-0.5 text-xs",
+        className: "inline-flex min-w-0 max-w-full",
         "data-testid": `${testId}-link-${id}`,
-        children: label(id)
+        children: /* @__PURE__ */ jsx(TagEntity, { tag: { external_id: id, name: label(id) }, showTooltip: false, wrap: true })
       },
       id
     )
@@ -952,11 +941,25 @@ function TagLinkCell({
           title: `Open ${label(current)}`,
           "data-testid": `${testId}-open`,
           children: [
-            label(current),
+            /* @__PURE__ */ jsx(
+              TagEntity,
+              {
+                tag: { external_id: current, name: label(current) },
+                showTooltip: false,
+                wrap: true
+              }
+            ),
             /* @__PURE__ */ jsx(ArrowUpRight, { className: "ml-0.5 inline size-3.5 align-[-2px] text-muted-foreground" })
           ]
         }
-      ) : /* @__PURE__ */ jsx("span", { className: "max-w-full px-1 text-sm break-words", children: label(current) })),
+      ) : /* @__PURE__ */ jsx(
+        TagEntity,
+        {
+          tag: { external_id: current, name: label(current) },
+          showTooltip: false,
+          wrap: true
+        }
+      )),
       /* @__PURE__ */ jsxs(
         "span",
         {
@@ -990,87 +993,55 @@ function TagLinkCell({
   );
 }
 var countText = (count2, one, many) => count2 === 1 ? one : count2 ? many.replace("{count}", String(count2)) : null;
-function Evidence({
+function TagContentCounts({
   row,
   l,
-  onOpenDocument,
-  onOpenFact,
-  onOpenThread,
+  onOpenTaggedItems,
   onOpenRow,
   testId
 }) {
   if (isGap(row)) return null;
   const links = rowLinks(row);
-  const docs = links.docs ?? [];
-  const facts = links.facts ?? [];
-  const threads = links.threads ?? [];
-  const more = links.doc_count - docs.length + (links.fact_count - facts.length) + (links.thread_count - threads.length);
-  const chip = "inline-flex min-w-0 max-w-full items-center gap-1 truncate rounded-md border border-border px-1.5 py-0.5 text-xs hover:border-primary/40 hover:text-primary disabled:hover:border-border disabled:hover:text-inherit";
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", "data-testid": testId, children: [
-    /* @__PURE__ */ jsx("span", { className: "mr-1 w-full text-xs text-muted-foreground", children: [
-      countText(links.doc_count, l.document, l.documents),
-      countText(links.fact_count, l.fact, l.facts),
-      countText(links.thread_count, l.thread, l.threads)
-    ].filter(Boolean).join(" \xB7 ") }),
-    docs.map((d) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: chip,
-        title: d.note ? `${d.file_name}: ${d.note}` : d.file_name,
-        disabled: !onOpenDocument,
-        onClick: () => onOpenDocument?.(d.doc_ext_id),
-        "data-testid": `${testId}-doc-${d.doc_ext_id}`,
-        children: [
-          /* @__PURE__ */ jsx(FileText, { className: "size-3 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: d.file_name })
-        ]
-      },
-      d.doc_ext_id
-    )),
-    facts.map((f) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: chip,
-        title: f.text,
-        disabled: !onOpenFact,
-        onClick: () => onOpenFact?.(f.fact_ext_id),
-        "data-testid": `${testId}-fact-${f.fact_ext_id}`,
-        children: [
-          /* @__PURE__ */ jsx(Lightbulb, { className: "size-3 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: f.text })
-        ]
-      },
-      f.fact_ext_id
-    )),
-    threads.map((t) => /* @__PURE__ */ jsxs(
+  const groups = [
+    {
+      kind: "documents",
+      count: links.doc_count,
+      label: countText(links.doc_count, l.document, l.documents),
+      Icon: FileText
+    },
+    {
+      kind: "facts",
+      count: links.fact_count,
+      label: countText(links.fact_count, l.fact, l.facts),
+      Icon: Lightbulb
+    },
+    {
+      kind: "threads",
+      count: links.thread_count,
+      label: countText(links.thread_count, l.thread, l.threads),
+      Icon: MessagesSquare
+    }
+  ].filter((group) => group.count > 0);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", "data-testid": testId, children: groups.map(({ kind, label, Icon }, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+    index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: " \xB7 " }),
+    onOpenTaggedItems || onOpenRow ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        className: chip,
-        title: t.title || l.untitledThread,
-        disabled: !onOpenThread,
-        onClick: () => onOpenThread?.(t.conversation_ext_id),
-        "data-testid": `${testId}-thread-${t.conversation_ext_id}`,
+        className: "inline-flex items-center gap-1 text-sm text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-testid": `${testId}-${kind}`,
+        title: `Show ${label} tagged \u201C${row.name}\u201D`,
+        onClick: () => onOpenTaggedItems ? onOpenTaggedItems(row.external_id, kind) : onOpenRow?.(row.external_id),
         children: [
-          /* @__PURE__ */ jsx(MessagesSquare, { className: "size-3 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: t.title || l.untitledThread })
+          /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }),
+          label
         ]
-      },
-      t.conversation_ext_id
-    )),
-    more > 0 && (onOpenRow ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "text-xs text-primary hover:underline",
-        onClick: () => onOpenRow(row.external_id),
-        "data-testid": `${testId}-more`,
-        children: l.more.replace("{count}", String(more))
       }
-    ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", "data-testid": `${testId}-more`, children: l.more.replace("{count}", String(more)) }))
-  ] });
+    ) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }),
+      label
+    ] })
+  ] }, kind)) });
 }
 function TagTable({
   table,
@@ -1078,21 +1049,20 @@ function TagTable({
   onChangeValue,
   onAddRow,
   onChangeColumns,
-  onOpenDocument,
-  onOpenFact,
-  onOpenThread,
   onOpenRow,
+  onOpenTaggedItems,
   onExport,
   onDownload,
   people,
   tags,
   onOpenTag,
   actions,
+  secondaryActions,
   labels,
   className,
   testId = "tag-table"
 }) {
-  const l = { ...DEFAULT_TAG_TABLE_LABELS, ...labels };
+  const l = useMemo(() => ({ ...DEFAULT_TAG_TABLE_LABELS, ...labels }), [labels]);
   const columns = useMemo(() => table?.columns ?? [], [table]);
   const rows = table?.rows ?? [];
   const [editingColumns, setEditingColumns] = useState(false);
@@ -1110,58 +1080,185 @@ function TagTable({
       setAdding(false);
     }
   };
+  const columnDefs = useMemo(
+    () => [
+      {
+        colId: "name",
+        headerName: l.row,
+        field: "name",
+        width: 176,
+        minWidth: 160,
+        pinned: "left",
+        sortable: true,
+        filter: false,
+        autoHeight: true,
+        cellClass: "px-3! py-2! leading-normal!",
+        cellRenderer: ({ data: row }) => row ? onOpenRow ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              ROW_LABEL,
+              "text-left font-medium hover:text-primary hover:underline"
+            ),
+            title: row.name,
+            onClick: () => onOpenRow(row.external_id),
+            "data-testid": `${testId}-row-${row.external_id}-label`,
+            children: /* @__PURE__ */ jsx(TagEntity, { tag: row, showTooltip: false, wrap: true })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(ROW_LABEL, "font-medium"),
+            title: row.name,
+            "data-testid": `${testId}-row-${row.external_id}-label`,
+            children: /* @__PURE__ */ jsx(TagEntity, { tag: row, showTooltip: false, wrap: true })
+          }
+        ) : null
+      },
+      {
+        colId: "evidence",
+        headerName: l.evidence,
+        width: 250,
+        minWidth: 224,
+        flex: 1,
+        sortable: true,
+        filter: false,
+        autoHeight: true,
+        cellClass: "px-3! py-2! leading-normal!",
+        valueGetter: ({ data }) => {
+          if (!data) return 0;
+          const links = rowLinks(data);
+          return links.doc_count + links.fact_count + links.thread_count;
+        },
+        cellRenderer: ({ data: row }) => row ? /* @__PURE__ */ jsx(
+          TagContentCounts,
+          {
+            row,
+            l,
+            onOpenRow,
+            onOpenTaggedItems,
+            testId: `${testId}-evidence-${row.external_id}`
+          }
+        ) : null
+      },
+      ...columns.map((column) => ({
+        colId: column.id,
+        headerName: column.name,
+        flex: 1,
+        minWidth: 150,
+        sortable: true,
+        filter: false,
+        // These are native inline editors: let their caret, select and checkbox keys work.
+        suppressKeyboardEvent: ({ event }) => event.target instanceof HTMLElement && Boolean(
+          event.target.closest(
+            'input, select, textarea, button, [role="checkbox"], [role="combobox"]'
+          )
+        ),
+        cellClass: "px-1.5! py-1! leading-normal!",
+        valueGetter: ({ data }) => {
+          if (!data) return null;
+          const value = cellValue(data, column);
+          if (value == null || value === "") return null;
+          if (column.type === "number") return Number(value);
+          if (column.type === "checkbox") return value ? 1 : 0;
+          return cellText(
+            value,
+            column,
+            (id) => people?.find((p) => p.value === id)?.label ?? tags?.find((t) => t.value === id)?.label
+          );
+        },
+        cellRenderer: ({ data: row }) => row ? /* @__PURE__ */ jsx(
+          TagTableCell,
+          {
+            row,
+            column,
+            people,
+            tags,
+            onOpenTag,
+            onChange: onChangeValue,
+            l,
+            testId: `${testId}-cell-${row.external_id}-${column.id}`
+          }
+        ) : null
+      }))
+    ],
+    [columns, l, people, tags, onOpenRow, onOpenTaggedItems, onOpenTag, onChangeValue, testId]
+  );
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), "data-testid": testId, children: [
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
       actions,
-      onChangeColumns && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          "aria-pressed": editingColumns,
-          onClick: () => setEditingColumns((v) => !v),
-          "data-testid": `${testId}-edit-columns`,
-          children: [
-            /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4" }),
-            l.editColumns
-          ]
-        }
-      ),
-      onDownload && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          disabled: rows.length === 0,
-          onClick: () => void onDownload(),
-          "data-testid": `${testId}-download`,
-          children: [
-            /* @__PURE__ */ jsx(Download, { className: "size-4" }),
-            l.download
-          ]
-        }
-      ),
-      onExport && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          disabled: exporting || rows.length === 0,
-          onClick: async () => {
-            setExporting(true);
-            try {
-              await onExport();
-            } finally {
-              setExporting(false);
-            }
-          },
-          "data-testid": `${testId}-export`,
-          children: [
-            exporting ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(FileDown, { className: "size-4" }),
-            exporting ? l.exporting : l.export
-          ]
-        }
-      )
+      (secondaryActions || onChangeColumns || onDownload || onExport) && /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            "aria-label": l.moreActions,
+            "data-testid": `${testId}-more`,
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            align: "end",
+            className: "flex w-auto min-w-48 flex-col items-stretch gap-1 p-2",
+            children: [
+              secondaryActions,
+              onChangeColumns && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "justify-start",
+                  onClick: () => setEditingColumns((v) => !v),
+                  "data-testid": `${testId}-edit-columns`,
+                  children: [
+                    /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4" }),
+                    " ",
+                    l.editColumns
+                  ]
+                }
+              ),
+              onExport && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  disabled: exporting || rows.length === 0,
+                  variant: "ghost",
+                  size: "sm",
+                  className: "justify-start",
+                  onClick: () => {
+                    setExporting(true);
+                    void Promise.resolve().then(() => onExport()).finally(() => setExporting(false));
+                  },
+                  "data-testid": `${testId}-export`,
+                  children: [
+                    exporting ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(FileDown, { className: "size-4" }),
+                    exporting ? l.exporting : l.export
+                  ]
+                }
+              ),
+              onDownload && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  disabled: rows.length === 0,
+                  variant: "ghost",
+                  size: "sm",
+                  className: "justify-start",
+                  onClick: () => void onDownload(),
+                  "data-testid": `${testId}-download`,
+                  children: [
+                    /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+                    " ",
+                    l.download
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
     ] }) }),
     editingColumns && onChangeColumns && /* @__PURE__ */ jsx(
       TagColumnsEditor,
@@ -1218,113 +1315,20 @@ function TagTable({
       " ",
       l.loading
     ] }) : /* @__PURE__ */ jsxs("div", { className: "overflow-x-auto rounded-lg border border-border", children: [
-      /* @__PURE__ */ jsxs(
-        "table",
+      /* @__PURE__ */ jsx(
+        GridView,
         {
-          className: "w-full min-w-[36rem] table-fixed border-collapse text-sm",
-          "data-testid": `${testId}-table`,
-          children: [
-            /* @__PURE__ */ jsx("thead", { className: "bg-muted/40", children: /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: cn(
-                    ROW_LABEL_WIDTH,
-                    "sticky left-0 z-10 bg-muted/40 px-3 py-2 text-left font-medium"
-                  ),
-                  children: l.row
-                }
-              ),
-              columns.map((c) => /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: "truncate px-3 py-2 text-left font-medium",
-                  title: c.name,
-                  "data-testid": `${testId}-column-${c.id}`,
-                  children: c.name
-                },
-                c.id
-              )),
-              /* @__PURE__ */ jsx("th", { className: cn(EVIDENCE_WIDTH, "px-3 py-2 text-left font-medium"), children: l.evidence })
-            ] }) }),
-            /* @__PURE__ */ jsxs("tbody", { children: [
-              rows.map((row) => {
-                const id = row.external_id;
-                return /* @__PURE__ */ jsxs(
-                  "tr",
-                  {
-                    className: "border-t border-border align-top",
-                    "data-testid": `${testId}-row-${id}`,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "th",
-                        {
-                          scope: "row",
-                          className: cn(
-                            ROW_LABEL_WIDTH,
-                            "sticky left-0 z-10 bg-background px-3 py-2 text-left font-medium"
-                          ),
-                          children: onOpenRow ? /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: cn(ROW_LABEL, "text-left hover:text-primary hover:underline"),
-                              title: row.name,
-                              onClick: () => onOpenRow(id),
-                              "data-testid": `${testId}-row-${id}-label`,
-                              children: row.name
-                            }
-                          ) : /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: ROW_LABEL,
-                              title: row.name,
-                              "data-testid": `${testId}-row-${id}-label`,
-                              children: row.name
-                            }
-                          )
-                        }
-                      ),
-                      columns.map((c) => /* @__PURE__ */ jsx("td", { className: "px-1.5 py-1", children: /* @__PURE__ */ jsx(
-                        TagTableCell,
-                        {
-                          row,
-                          column: c,
-                          people,
-                          tags,
-                          onOpenTag,
-                          onChange: onChangeValue,
-                          l,
-                          testId: `${testId}-cell-${id}-${c.id}`
-                        }
-                      ) }, c.id)),
-                      /* @__PURE__ */ jsx("td", { className: "min-w-0 px-3 py-2", children: /* @__PURE__ */ jsx(
-                        Evidence,
-                        {
-                          row,
-                          l,
-                          onOpenDocument,
-                          onOpenFact,
-                          onOpenThread,
-                          onOpenRow,
-                          testId: `${testId}-evidence-${id}`
-                        }
-                      ) })
-                    ]
-                  },
-                  id
-                );
-              }),
-              rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: columns.length + 2,
-                  className: "px-3 py-6 text-center text-sm text-muted-foreground",
-                  children: l.empty
-                }
-              ) })
-            ] })
-          ]
+          items: rows,
+          columnDefs,
+          getItemId: (row) => row.external_id,
+          height: "auto",
+          emptyState: { title: l.empty },
+          gridOptions: {
+            ensureDomOrder: true,
+            domLayout: "autoHeight"
+          },
+          getRowTestId: (row) => `${testId}-row-${row.external_id}`,
+          testId: `${testId}-table`
         }
       ),
       columns.length === 0 && rows.length > 0 && /* @__PURE__ */ jsx("p", { className: "border-t border-border px-3 py-2 text-xs text-muted-foreground", children: l.noColumns })
@@ -1362,6 +1366,7 @@ function TagDetail({
   onOpenDocument,
   onOpenFact,
   onOpenThread,
+  onOpenTaggedItems,
   noteLabel,
   noteIsValue = false,
   renderPassages,
@@ -1379,6 +1384,105 @@ function TagDetail({
   const threads = links.threads ?? [];
   const passages = (n) => n === 1 ? l.passage : l.passages.replace("{count}", String(n));
   return /* @__PURE__ */ jsxs(DetailBody, { className, testId, children: [
+    onOpenTaggedItems ? /* @__PURE__ */ jsx(
+      TagContentCounts,
+      {
+        row,
+        l: cellLabels,
+        onOpenTaggedItems,
+        testId: `${testId}-counts`
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        DetailSection,
+        {
+          title: l.documents,
+          count: links.doc_count,
+          shown: docs.length,
+          showingLabel: l.showing,
+          testId: `${testId}-documents`,
+          children: docs.length ? /* @__PURE__ */ jsx(DetailLinkList, { children: docs.map((d) => /* @__PURE__ */ jsx(
+            DetailLinkItem,
+            {
+              icon: /* @__PURE__ */ jsx(FileText, { className: "size-4" }),
+              onClick: onOpenDocument ? () => onOpenDocument(d.doc_ext_id) : void 0,
+              testId: `${testId}-doc-${d.doc_ext_id}`,
+              trailing: d.citations_count > 0 && !renderPassages && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: passages(d.citations_count) }),
+              after: d.citations_count > 0 && renderPassages && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-3 py-2 text-xs", children: renderPassages(d, passages(d.citations_count)) }),
+              children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: d.file_name }),
+                (d.note || noteIsValue) && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "mt-0.5 flex min-w-0 items-baseline gap-2",
+                      noteIsValue ? "text-base text-foreground" : "text-muted-foreground"
+                    ),
+                    "data-testid": `${testId}-doc-${d.doc_ext_id}-note`,
+                    children: [
+                      noteLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: noteLabel }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "line-clamp-3 min-w-0 whitespace-pre-line",
+                            noteIsValue && "font-semibold",
+                            !d.note && "font-normal italic text-muted-foreground"
+                          ),
+                          children: d.note || l.noValue
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            },
+            d.doc_ext_id
+          )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noDocuments })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DetailSection,
+        {
+          title: l.facts,
+          count: links.fact_count,
+          shown: facts.length,
+          showingLabel: l.showing,
+          testId: `${testId}-facts`,
+          children: facts.length ? /* @__PURE__ */ jsx(DetailLinkList, { children: facts.map((f) => /* @__PURE__ */ jsx(
+            DetailLinkItem,
+            {
+              icon: /* @__PURE__ */ jsx(Lightbulb, { className: "size-4" }),
+              onClick: onOpenFact ? () => onOpenFact(f.fact_ext_id) : void 0,
+              testId: `${testId}-fact-${f.fact_ext_id}`,
+              children: /* @__PURE__ */ jsx("span", { className: "line-clamp-3 min-w-0 flex-1", children: f.text })
+            },
+            f.fact_ext_id
+          )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noFacts })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DetailSection,
+        {
+          title: l.threads,
+          count: links.thread_count,
+          shown: threads.length,
+          showingLabel: l.showing,
+          testId: `${testId}-threads`,
+          children: threads.length ? /* @__PURE__ */ jsx(DetailLinkList, { children: threads.map((t) => /* @__PURE__ */ jsx(
+            DetailLinkItem,
+            {
+              icon: /* @__PURE__ */ jsx(MessagesSquare, { className: "size-4" }),
+              onClick: onOpenThread ? () => onOpenThread(t.conversation_ext_id) : void 0,
+              testId: `${testId}-thread-${t.conversation_ext_id}`,
+              trailing: /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: l.threadUpdated.replace("{date}", formatDay(t.updated_at)) }),
+              children: /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: t.title || l.untitledThread })
+            },
+            t.conversation_ext_id
+          )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noThreads })
+        }
+      )
+    ] }),
     fields.length > 0 && /* @__PURE__ */ jsx(DetailSection, { title: l.fields, testId: `${testId}-fields`, children: /* @__PURE__ */ jsx(DetailFields, { children: fields.map((field) => /* @__PURE__ */ jsx(DetailField, { label: field.name, children: /* @__PURE__ */ jsx(
       TagTableCell,
       {
@@ -1391,96 +1495,7 @@ function TagDetail({
         l: cellLabels,
         testId: `${testId}-field-${field.id}`
       }
-    ) }, field.id)) }) }),
-    /* @__PURE__ */ jsx(
-      DetailSection,
-      {
-        title: l.documents,
-        count: links.doc_count,
-        shown: docs.length,
-        showingLabel: l.showing,
-        testId: `${testId}-documents`,
-        children: docs.length ? /* @__PURE__ */ jsx(DetailLinkList, { children: docs.map((d) => /* @__PURE__ */ jsx(
-          DetailLinkItem,
-          {
-            icon: /* @__PURE__ */ jsx(FileText, { className: "size-4" }),
-            onClick: onOpenDocument ? () => onOpenDocument(d.doc_ext_id) : void 0,
-            testId: `${testId}-doc-${d.doc_ext_id}`,
-            trailing: d.citations_count > 0 && !renderPassages && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: passages(d.citations_count) }),
-            after: d.citations_count > 0 && renderPassages && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-3 py-2 text-xs", children: renderPassages(d, passages(d.citations_count)) }),
-            children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: d.file_name }),
-              (d.note || noteIsValue) && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: cn(
-                    "mt-0.5 flex min-w-0 items-baseline gap-2",
-                    noteIsValue ? "text-base text-foreground" : "text-muted-foreground"
-                  ),
-                  "data-testid": `${testId}-doc-${d.doc_ext_id}-note`,
-                  children: [
-                    noteLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: noteLabel }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "line-clamp-3 min-w-0 whitespace-pre-line",
-                          noteIsValue && "font-semibold",
-                          !d.note && "font-normal italic text-muted-foreground"
-                        ),
-                        children: d.note || l.noValue
-                      }
-                    )
-                  ]
-                }
-              )
-            ] })
-          },
-          d.doc_ext_id
-        )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noDocuments })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DetailSection,
-      {
-        title: l.facts,
-        count: links.fact_count,
-        shown: facts.length,
-        showingLabel: l.showing,
-        testId: `${testId}-facts`,
-        children: facts.length ? /* @__PURE__ */ jsx(DetailLinkList, { children: facts.map((f) => /* @__PURE__ */ jsx(
-          DetailLinkItem,
-          {
-            icon: /* @__PURE__ */ jsx(Lightbulb, { className: "size-4" }),
-            onClick: onOpenFact ? () => onOpenFact(f.fact_ext_id) : void 0,
-            testId: `${testId}-fact-${f.fact_ext_id}`,
-            children: /* @__PURE__ */ jsx("span", { className: "line-clamp-3 min-w-0 flex-1", children: f.text })
-          },
-          f.fact_ext_id
-        )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noFacts })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DetailSection,
-      {
-        title: l.threads,
-        count: links.thread_count,
-        shown: threads.length,
-        showingLabel: l.showing,
-        testId: `${testId}-threads`,
-        children: threads.length ? /* @__PURE__ */ jsx(DetailLinkList, { children: threads.map((t) => /* @__PURE__ */ jsx(
-          DetailLinkItem,
-          {
-            icon: /* @__PURE__ */ jsx(MessagesSquare, { className: "size-4" }),
-            onClick: onOpenThread ? () => onOpenThread(t.conversation_ext_id) : void 0,
-            testId: `${testId}-thread-${t.conversation_ext_id}`,
-            trailing: /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: l.threadUpdated.replace("{date}", formatDay(t.updated_at)) }),
-            children: /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: t.title || l.untitledThread })
-          },
-          t.conversation_ext_id
-        )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noThreads })
-      }
-    )
+    ) }, field.id)) }) })
   ] });
 }
 
@@ -1750,66 +1765,6 @@ function tagKindDescription(kind) {
       return `${tagKindTitle(kind, { plural: true })}.`;
   }
 }
-function TagPicker({ tags, selectedId, kinds, onSelect, onCreate }) {
-  const [open, setOpen] = useState(false);
-  const [kind, ...otherKinds] = kinds;
-  const noun = tagKindNouns(kind);
-  const create = (name, as) => {
-    setOpen(false);
-    void onCreate?.(name, as);
-  };
-  const selected = tags.find((t) => t.external_id === selectedId);
-  const placeholder = onCreate ? `Find or create a ${noun.singular}\u2026` : `Find a ${noun.singular}\u2026`;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex h-9 w-72 max-w-full items-center gap-2 rounded-md border border-input bg-background px-3 text-left text-sm hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "data-testid": "tags-picker",
-        children: [
-          /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { className: selected ? "min-w-0 flex-1 truncate" : "flex-1 text-muted-foreground", children: selected?.name ?? placeholder }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })
-        ]
-      }
-    ) }),
-    open && /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        className: "w-[var(--radix-popover-trigger-width)] min-w-72 p-0",
-        align: "start",
-        sideOffset: 4,
-        "data-testid": "tags-picker-list",
-        children: /* @__PURE__ */ jsx(
-          LabelPickerList,
-          {
-            options: tags.map((t) => ({
-              id: t.external_id,
-              name: t.name,
-              color: getEntityColor(t.external_id, "medium")
-            })),
-            appliedIds: new Set(selectedId ? [selectedId] : []),
-            onToggle: (id) => {
-              setOpen(false);
-              onSelect(id);
-            },
-            onCreate: onCreate ? (name) => create(name, kind) : void 0,
-            moreCreates: onCreate ? otherKinds.map((other) => ({
-              label: (name) => `Create ${tagKindNouns(other).singular} \u201C${name}\u201D`,
-              onCreate: (name) => create(name, other)
-            })) : void 0,
-            labels: {
-              searchPlaceholder: placeholder,
-              noLabels: `No ${noun.plural} yet`,
-              create: (name) => `Create ${noun.singular} \u201C${name}\u201D`
-            }
-          }
-        )
-      }
-    )
-  ] });
-}
 var EXTRACT_LIMIT = 500;
 var isTopLevel = (d) => !d.parent_ext_id;
 function ExtractEntitiesDialog({
@@ -1926,6 +1881,6 @@ function ExtractEntitiesDialog({
   ) });
 }
 
-export { DEFAULT_GLOSSARY_LABELS, DEFAULT_TAG_COLUMNS_EDITOR_LABELS, DEFAULT_TAG_DETAIL_LABELS, DEFAULT_TAG_TABLE_DOCX_LABELS, DEFAULT_TAG_TABLE_LABELS, DEFAULT_WORKSPACE_ACTIVITY_LABELS, EXTRACT_LIMIT, EntityIdentityBar, ExtractEntitiesDialog, GridRowNavigator, IDENTITY_NAME_MAX_LENGTH, LoadingIndicator, TAG_TABLE_DOCX_LANDSCAPE_AFTER, TIPS_VISIBILITY_OVERRIDE, TagColumnsEditor, TagDetail, TagPicker, TagTable, TagTableCell, Toolbar, WELCOME_REPLAY_VIEW, WorkspaceActivityList, cellText, cellValue, documentCount, entitiesPhrase, fieldWrites, glossaryDocumentXml, glossaryDocx, glossaryEntries, glossaryFileName, glossaryMarkdown, isGap, parseCell, rowLinks, setHintsSessionOverride, startWelcomeReplay, tagDetailLabels, tagKindDescription, tagNoteLabel, tagTableDocumentXml, tagTableDocx, tagTableLabels, tagTableMarkdown, tagsPageNouns, useTipsPlacement, workspaceActivityHeadline, workspaceActivityTarget };
-//# sourceMappingURL=chunk-5PKIDR2Q.js.map
-//# sourceMappingURL=chunk-5PKIDR2Q.js.map
+export { DEFAULT_GLOSSARY_LABELS, DEFAULT_TAG_COLUMNS_EDITOR_LABELS, DEFAULT_TAG_DETAIL_LABELS, DEFAULT_TAG_TABLE_DOCX_LABELS, DEFAULT_TAG_TABLE_LABELS, DEFAULT_WORKSPACE_ACTIVITY_LABELS, EXTRACT_LIMIT, EntityIdentityBar, ExtractEntitiesDialog, GridRowNavigator, IDENTITY_NAME_MAX_LENGTH, LoadingIndicator, TAG_TABLE_DOCX_LANDSCAPE_AFTER, TagColumnsEditor, TagDetail, TagTable, TagTableCell, Toolbar, WorkspaceActivityList, cellText, cellValue, documentCount, entitiesPhrase, fieldWrites, glossaryDocumentXml, glossaryDocx, glossaryEntries, glossaryFileName, glossaryMarkdown, isGap, parseCell, rowLinks, tagDetailLabels, tagKindDescription, tagNoteLabel, tagTableDocumentXml, tagTableDocx, tagTableLabels, tagTableMarkdown, tagsPageNouns, useTipsPlacement, workspaceActivityHeadline, workspaceActivityTarget };
+//# sourceMappingURL=chunk-ZHJVABQ6.js.map
+//# sourceMappingURL=chunk-ZHJVABQ6.js.map