@arbidocs/react 0.5.110 → 0.5.112

package/dist/documents/DocumentReview.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { X } from "lucide-react";
+import { useParsedDocument, useTags } from "../hooks.js";
+import { useDocument } from "./documents-data.js";
+import { FINISHED_DOCUMENT_STATUSES } from "./processing-order.js";
+import { MarkdownRenderer } from "../ai/MarkdownRenderer.js";
+import { TagEntity } from "../entities/TagEntity.js";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+const PARSED_STATUSES = /* @__PURE__ */ new Set(["completed", "low-content"]);
+function noTextMessage(status) {
+  if (status === "failed")
+    return "This document could not be processed, so it has no text to review.";
+  if (status === "empty" || status === "skipped") return "No readable content.";
+  return "Still processing. The text appears here when it is ready.";
+}
+function DocumentReview({
+  docId,
+  doc,
+  workspaceId,
+  stage = "final",
+  activeChunkId,
+  onClose,
+  className
+}) {
+  const processingInProp = !!doc?.status && !FINISHED_DOCUMENT_STATUSES.has(doc.status);
+  const { data: polled } = useDocument(docId, {
+    enabled: processingInProp,
+    pollWhileProcessing: true
+  });
+  const status = processingInProp ? polled?.status ?? doc?.status : doc?.status;
+  const noTextYet = stage === "final" && !!status && !PARSED_STATUSES.has(status);
+  const parsedQuery = useParsedDocument(docId, stage, { enabled: !noTextYet });
+  const { isError: parsedFailed, refetch: refetchParsed } = parsedQuery;
+  const readable = !!status && !noTextYet;
+  React.useEffect(() => {
+    if (readable && parsedFailed) void refetchParsed();
+  }, [readable]);
+  const tagsQuery = useTags(workspaceId);
+  const tagNameById = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const t of tagsQuery.data ?? []) {
+      if (t.external_id) map.set(t.external_id, t.name ?? t.external_id.slice(0, 8));
+    }
+    return map;
+  }, [tagsQuery.data]);
+  const title = doc?.doc_metadata?.title || doc?.file_name || "Document";
+  const { findings, chunkToTag } = React.useMemo(() => {
+    const list = [];
+    const chunkTag = /* @__PURE__ */ new Map();
+    for (const dt of doc?.doctags ?? []) {
+      const chunkIds = (dt.citations ?? []).flatMap((d) => (d.chunks ?? []).map((c) => c.chunk_id));
+      if (chunkIds.length === 0) continue;
+      list.push({
+        key: dt.tag_ext_id,
+        tagExtId: dt.tag_ext_id,
+        statement: dt.note ?? "",
+        chunkIds
+      });
+      for (const cid of chunkIds) if (!chunkTag.has(cid)) chunkTag.set(cid, dt.tag_ext_id);
+    }
+    return { findings: list, chunkToTag: chunkTag };
+  }, [doc?.doctags]);
+  const pages = React.useMemo(() => {
+    const chunks = parsedQuery.data?.chunks ?? [];
+    const byPage = /* @__PURE__ */ new Map();
+    for (const c of chunks) {
+      const p = c.metadata?.page_number ?? 0;
+      if (!byPage.has(p)) byPage.set(p, []);
+      byPage.get(p).push(c);
+    }
+    return [...byPage.entries()].sort((a, b) => a[0] - b[0]);
+  }, [parsedQuery.data]);
+  const scrollRef = React.useRef(null);
+  const [flash, setFlash] = React.useState(null);
+  const jumpToChunk = React.useCallback((chunkId) => {
+    const el = scrollRef.current?.querySelector(`[data-chunk-id="${chunkId}"]`);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    setFlash(chunkId);
+    window.setTimeout(() => setFlash((c) => c === chunkId ? null : c), 1600);
+  }, []);
+  const parsedReady = !parsedQuery.isLoading && !!parsedQuery.data;
+  React.useEffect(() => {
+    if (!activeChunkId || !parsedReady) return;
+    const raf = window.requestAnimationFrame(() => jumpToChunk(activeChunkId));
+    return () => window.cancelAnimationFrame(raf);
+  }, [activeChunkId, parsedReady, jumpToChunk]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "document-review",
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold", title, children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              noTextYet ? "" : parsedQuery.data?.metadata?.total_number_of_pages ? `${parsedQuery.data.metadata.total_number_of_pages} pages` : `${pages.length} pages`,
+              findings.length ? ` \xB7 ${findings.length} findings` : ""
+            ] })
+          ] }),
+          status ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: status }) : null,
+          onClose ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close review",
+              "data-testid": "document-review-close",
+              onClick: onClose,
+              className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+          findings.length > 0 ? /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              className: "hidden w-64 shrink-0 overflow-y-auto border-r p-3 md:block",
+              "data-testid": "document-review-findings",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "AI findings" }),
+                /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: findings.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    "data-testid": "review-finding",
+                    onClick: () => jumpToChunk(f.chunkIds[0]),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        jumpToChunk(f.chunkIds[0]);
+                      }
+                    },
+                    className: "w-full cursor-pointer rounded-md border p-2 text-left text-xs transition hover:border-ring hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        TagEntity,
+                        {
+                          size: "sm",
+                          tag: {
+                            external_id: f.tagExtId,
+                            name: tagNameById.get(f.tagExtId) ?? f.tagExtId.slice(0, 8)
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-3 text-muted-foreground", children: f.statement })
+                    ]
+                  }
+                ) }, f.key)) })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "min-w-0 flex-1 overflow-y-auto px-6 py-4", children: noTextYet ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-full items-center justify-center text-sm text-muted-foreground",
+              "data-testid": "document-review-no-text",
+              children: noTextMessage(status)
+            }
+          ) : parsedQuery.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Loading document\u2026" }) : parsedQuery.isError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Could not load this document\u2019s content." }) : pages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "No readable content." }) : /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl space-y-8", children: pages.map(([pageNum, chunks]) => /* @__PURE__ */ jsxs("section", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [
+                "Page ",
+                pageNum
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: chunks.map((c, i) => {
+              const cid = c.metadata?.chunk_ext_id;
+              const tagExtId = cid ? chunkToTag.get(cid) : void 0;
+              const highlighted = !!tagExtId;
+              const isActive = !!cid && cid === activeChunkId;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-chunk-id": cid,
+                  "data-testid": isActive ? "review-chunk-active" : highlighted ? "review-chunk-cited" : "review-chunk",
+                  className: cn(
+                    "scroll-mt-4 rounded-md px-2 py-1 transition-colors",
+                    highlighted && "bg-[var(--color-ai-accent-soft,theme(colors.amber.100))] ring-1 ring-inset ring-border",
+                    // The externally-selected search passage wins the
+                    // styling: a stronger accent ring so the matched
+                    // hit stands out from any AI-finding highlights.
+                    isActive && "bg-[var(--color-ai-accent-soft,theme(colors.amber.100))] ring-2 ring-inset ring-ai-accent",
+                    flash === cid && "ring-2 ring-ring"
+                  ),
+                  children: [
+                    highlighted ? /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx(
+                      TagEntity,
+                      {
+                        size: "sm",
+                        tag: {
+                          external_id: tagExtId,
+                          name: tagNameById.get(tagExtId) ?? tagExtId.slice(0, 8)
+                        }
+                      }
+                    ) }) : null,
+                    /* @__PURE__ */ jsx(MarkdownRenderer, { className: "prose prose-sm max-w-none dark:prose-invert", children: c.content })
+                  ]
+                },
+                cid ?? i
+              );
+            }) })
+          ] }, pageNum)) }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DocumentReview
+};
+//# sourceMappingURL=DocumentReview.js.map

package/dist/documents/DocumentReview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/DocumentReview.tsx"],
+  "sourcesContent": ["/**\n * DocumentReview \u2014 a reusable, decoupled \"review mode\" viewer for a single\n * document. It renders the parsed content (chunks grouped by page, as markdown)\n * and overlays the document's AI findings: each tag citation highlights the\n * chunks it references and is listed in a findings rail that jumps to the\n * passage on click.\n *\n * REUSE-FIRST: reads purely from SDK data \u2014 `useParsedDocument` for the body,\n * the passed-in `doc.doctags[].citations` for findings, `useTags` for label\n * names, and `MarkdownRenderer` for rendering. No app store / react-pdf / Zustand\n * coupling; citation-jump is plain `scrollIntoView` on `data-chunk-id`.\n */\n\nimport React from 'react'\nimport { X } from 'lucide-react'\nimport type { components } from '@arbidocs/client'\n\nimport { useParsedDocument, useTags } from '../hooks'\nimport { useDocument } from './documents-data'\nimport { FINISHED_DOCUMENT_STATUSES } from './processing-order'\nimport { MarkdownRenderer } from '../ai/MarkdownRenderer'\nimport { TagEntity } from '../entities/TagEntity'\nimport { Badge } from '../ui/badge'\nimport { cn } from '../lib/utils'\nimport type { ParsedChunk } from './parsed-types'\n\ntype DocResponse = components['schemas']['DocResponse']\n\nexport interface DocumentReviewProps {\n  /** Document to review. */\n  docId: string\n  /** The document object (from `useDocuments`) \u2014 supplies title + AI findings\n   *  (`doctags[].citations`). Optional: without it the viewer is a plain reader. */\n  doc?: DocResponse\n  /** Workspace id \u2014 used to resolve tag ids \u2192 human names for findings. */\n  workspaceId?: string\n  /** Parse stage to render. Default `final`. */\n  stage?: string\n  /**\n   * A chunk to scroll to and persistently highlight \u2014 the join key is the\n   * parsed chunk's `chunk_ext_id`. This is how a semantic-search hit drives the\n   * viewer: passing the matched passage's `chunkExtId` scrolls the body to it\n   * and marks it, mirroring the monolith's `viewingPassageId` behaviour.\n   * Independent of AI findings (which highlight via `doctags[].citations`).\n   */\n  activeChunkId?: string | null\n  /** When provided, a close button is shown in the header. */\n  onClose?: () => void\n  className?: string\n}\n\n/**\n * Statuses whose parsed text can be read (`low-content` is terminal, with sparse passages). Before\n * then the server has none (404): a copy just saved, still processing, is not an error.\n */\nconst PARSED_STATUSES = new Set<DocResponse['status']>(['completed', 'low-content'])\n\n/** Why a document has no text to review (yet). */\nfunction noTextMessage(status: DocResponse['status'] | undefined): string {\n  if (status === 'failed')\n    return 'This document could not be processed, so it has no text to review.'\n  if (status === 'empty' || status === 'skipped') return 'No readable content.'\n  return 'Still processing. The text appears here when it is ready.'\n}\n\ninterface Finding {\n  key: string\n  tagExtId: string\n  statement: string\n  chunkIds: string[]\n}\n\nexport function DocumentReview({\n  docId,\n  doc,\n  workspaceId,\n  stage = 'final',\n  activeChunkId,\n  onClose,\n  className,\n}: DocumentReviewProps) {\n  // Without its record the reader just reads; with it, the final text waits until processing is\n  // done. A record still processing is re-read here every few seconds until it finishes, so a\n  // missed \"completed\" event (the host's list is not refetched) cannot leave it waiting.\n  const processingInProp = !!doc?.status && !FINISHED_DOCUMENT_STATUSES.has(doc.status)\n  const { data: polled } = useDocument(docId, {\n    enabled: processingInProp,\n    pollWhileProcessing: true,\n  })\n  const status = processingInProp ? (polled?.status ?? doc?.status) : doc?.status\n  // Only the final parse waits for the status; another stage (`marker`) is read as asked.\n  const noTextYet = stage === 'final' && !!status && !PARSED_STATUSES.has(status)\n  const parsedQuery = useParsedDocument(docId, stage, { enabled: !noTextYet })\n  // A read made before the record arrived may have stored a 404: once the text is readable, ask\n  // again.\n  const { isError: parsedFailed, refetch: refetchParsed } = parsedQuery\n  const readable = !!status && !noTextYet\n  React.useEffect(() => {\n    if (readable && parsedFailed) void refetchParsed()\n    // On the status becoming readable only, not on every failure (no retry loop).\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [readable])\n  const tagsQuery = useTags(workspaceId)\n\n  const tagNameById = React.useMemo(() => {\n    const map = new Map<string, string>()\n    for (const t of tagsQuery.data ?? []) {\n      if (t.external_id) map.set(t.external_id, t.name ?? t.external_id.slice(0, 8))\n    }\n    return map\n  }, [tagsQuery.data])\n\n  const title = doc?.doc_metadata?.title || doc?.file_name || 'Document'\n\n  // Findings: one per grounded doctag, plus an index of which chunks it\n  // highlights. A doctag used to carry a per-statement citation map, so this\n  // produced several findings per tag; each statement was a verbatim copy of\n  // the doctag's own note, so the tag's note IS the finding text now.\n  const { findings, chunkToTag } = React.useMemo(() => {\n    const list: Finding[] = []\n    const chunkTag = new Map<string, string>() // chunk_ext_id \u2192 tag_ext_id\n    for (const dt of doc?.doctags ?? []) {\n      const chunkIds = (dt.citations ?? []).flatMap((d) => (d.chunks ?? []).map((c) => c.chunk_id))\n      if (chunkIds.length === 0) continue\n      list.push({\n        key: dt.tag_ext_id,\n        tagExtId: dt.tag_ext_id,\n        statement: dt.note ?? '',\n        chunkIds,\n      })\n      for (const cid of chunkIds) if (!chunkTag.has(cid)) chunkTag.set(cid, dt.tag_ext_id)\n    }\n    return { findings: list, chunkToTag: chunkTag }\n  }, [doc?.doctags])\n\n  // Group parsed chunks by page.\n  const pages = React.useMemo(() => {\n    const chunks = (parsedQuery.data?.chunks ?? []) as ParsedChunk[]\n    const byPage = new Map<number, ParsedChunk[]>()\n    for (const c of chunks) {\n      const p = c.metadata?.page_number ?? 0\n      if (!byPage.has(p)) byPage.set(p, [])\n      byPage.get(p)!.push(c)\n    }\n    return [...byPage.entries()].sort((a, b) => a[0] - b[0])\n  }, [parsedQuery.data])\n\n  const scrollRef = React.useRef<HTMLDivElement | null>(null)\n  const [flash, setFlash] = React.useState<string | null>(null)\n\n  const jumpToChunk = React.useCallback((chunkId: string) => {\n    const el = scrollRef.current?.querySelector<HTMLElement>(`[data-chunk-id=\"${chunkId}\"]`)\n    if (!el) return\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n    setFlash(chunkId)\n    window.setTimeout(() => setFlash((c) => (c === chunkId ? null : c)), 1600)\n  }, [])\n\n  // Drive the viewer from an external passage selection (semantic-search hit).\n  // Scroll to + flash the target chunk once its element is in the DOM \u2014 which,\n  // since this viewer renders every chunk eagerly, is as soon as the parsed\n  // body has loaded. Re-runs whenever the selected passage changes so clicking\n  // successive results re-navigates, matching `viewingPassageId` in the monolith.\n  const parsedReady = !parsedQuery.isLoading && !!parsedQuery.data\n  React.useEffect(() => {\n    if (!activeChunkId || !parsedReady) return\n    // Defer to the next frame so the chunk nodes are committed before we query.\n    const raf = window.requestAnimationFrame(() => jumpToChunk(activeChunkId))\n    return () => window.cancelAnimationFrame(raf)\n  }, [activeChunkId, parsedReady, jumpToChunk])\n\n  return (\n    <div\n      data-testid=\"document-review\"\n      className={cn(\n        'flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card',\n        className\n      )}\n    >\n      {/* Header */}\n      <div className=\"flex items-center gap-3 border-b px-4 py-3\">\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"truncate text-sm font-semibold\" title={title}>\n            {title}\n          </div>\n          <div className=\"text-xs text-muted-foreground\">\n            {noTextYet\n              ? ''\n              : parsedQuery.data?.metadata?.total_number_of_pages\n                ? `${parsedQuery.data.metadata.total_number_of_pages} pages`\n                : `${pages.length} pages`}\n            {findings.length ? ` \u00B7 ${findings.length} findings` : ''}\n          </div>\n        </div>\n        {status ? <Badge variant=\"secondary\">{status}</Badge> : null}\n        {onClose ? (\n          <button\n            type=\"button\"\n            aria-label=\"Close review\"\n            data-testid=\"document-review-close\"\n            onClick={onClose}\n            className=\"rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        ) : null}\n      </div>\n\n      <div className=\"flex min-h-0 flex-1\">\n        {/* Findings rail */}\n        {findings.length > 0 ? (\n          <aside\n            className=\"hidden w-64 shrink-0 overflow-y-auto border-r p-3 md:block\"\n            data-testid=\"document-review-findings\"\n          >\n            <div className=\"mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n              AI findings\n            </div>\n            <ul className=\"space-y-2\">\n              {findings.map((f) => (\n                <li key={f.key}>\n                  {/* role=button (not <button>) so the TagEntity pill \u2014 itself a\n                      button \u2014 isn't nested inside a button (invalid HTML). */}\n                  <div\n                    role=\"button\"\n                    tabIndex={0}\n                    data-testid=\"review-finding\"\n                    onClick={() => jumpToChunk(f.chunkIds[0])}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        jumpToChunk(f.chunkIds[0])\n                      }\n                    }}\n                    className=\"w-full cursor-pointer rounded-md border p-2 text-left text-xs transition hover:border-ring hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  >\n                    <TagEntity\n                      size=\"sm\"\n                      tag={{\n                        external_id: f.tagExtId,\n                        name: tagNameById.get(f.tagExtId) ?? f.tagExtId.slice(0, 8),\n                      }}\n                    />\n                    <p className=\"mt-1 line-clamp-3 text-muted-foreground\">{f.statement}</p>\n                  </div>\n                </li>\n              ))}\n            </ul>\n          </aside>\n        ) : null}\n\n        {/* Document body */}\n        <div ref={scrollRef} className=\"min-w-0 flex-1 overflow-y-auto px-6 py-4\">\n          {noTextYet ? (\n            <div\n              className=\"flex h-full items-center justify-center text-sm text-muted-foreground\"\n              data-testid=\"document-review-no-text\"\n            >\n              {noTextMessage(status)}\n            </div>\n          ) : parsedQuery.isLoading ? (\n            <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n              Loading document\u2026\n            </div>\n          ) : parsedQuery.isError ? (\n            <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n              Could not load this document\u2019s content.\n            </div>\n          ) : pages.length === 0 ? (\n            <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n              No readable content.\n            </div>\n          ) : (\n            <div className=\"mx-auto max-w-3xl space-y-8\">\n              {pages.map(([pageNum, chunks]) => (\n                <section key={pageNum}>\n                  <div className=\"mb-3 flex items-center gap-3\">\n                    <span className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n                      Page {pageNum}\n                    </span>\n                    <div className=\"h-px flex-1 bg-border\" />\n                  </div>\n                  <div className=\"space-y-3\">\n                    {chunks.map((c, i) => {\n                      const cid = c.metadata?.chunk_ext_id\n                      const tagExtId = cid ? chunkToTag.get(cid) : undefined\n                      const highlighted = !!tagExtId\n                      const isActive = !!cid && cid === activeChunkId\n                      return (\n                        <div\n                          key={cid ?? i}\n                          data-chunk-id={cid}\n                          data-testid={\n                            isActive\n                              ? 'review-chunk-active'\n                              : highlighted\n                                ? 'review-chunk-cited'\n                                : 'review-chunk'\n                          }\n                          className={cn(\n                            'scroll-mt-4 rounded-md px-2 py-1 transition-colors',\n                            highlighted &&\n                              'bg-[var(--color-ai-accent-soft,theme(colors.amber.100))] ring-1 ring-inset ring-border',\n                            // The externally-selected search passage wins the\n                            // styling: a stronger accent ring so the matched\n                            // hit stands out from any AI-finding highlights.\n                            isActive &&\n                              'bg-[var(--color-ai-accent-soft,theme(colors.amber.100))] ring-2 ring-inset ring-ai-accent',\n                            flash === cid && 'ring-2 ring-ring'\n                          )}\n                        >\n                          {highlighted ? (\n                            <div className=\"mb-1\">\n                              <TagEntity\n                                size=\"sm\"\n                                tag={{\n                                  external_id: tagExtId!,\n                                  name: tagNameById.get(tagExtId!) ?? tagExtId!.slice(0, 8),\n                                }}\n                              />\n                            </div>\n                          ) : null}\n                          <MarkdownRenderer className=\"prose prose-sm max-w-none dark:prose-invert\">\n                            {c.content}\n                          </MarkdownRenderer>\n                        </div>\n                      )\n                    })}\n                  </div>\n                </section>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/documents/DraftTitleControls.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+import { IconToggle } from "../ui/IconToggle.js";
+const AUTO_RENAME_COLORS = { text: "text-amber-700", bg: "bg-amber-500" };
+function DraftTitleControls({
+  title,
+  onTitleChange,
+  placeholder,
+  autoRename,
+  onAutoRenameChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-shrink-0 items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: title,
+        onChange: (e) => onTitleChange(e.target.value),
+        placeholder,
+        className: "min-w-0 max-w-[220px] rounded-md bg-muted px-2 py-1 text-sm font-medium outline-none focus-visible:ring-1 focus-visible:ring-primary",
+        "data-testid": "draft-title-input"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconToggle,
+      {
+        icon: Sparkles,
+        isActive: autoRename,
+        onToggle: onAutoRenameChange,
+        colors: AUTO_RENAME_COLORS,
+        tooltipActive: "Auto-name from content is on \u2014 generates a title once saved",
+        tooltipInactive: "Auto-name from content is off \u2014 uses the name typed above",
+        "data-testid": "draft-auto-rename-toggle"
+      }
+    )
+  ] });
+}
+export {
+  DraftTitleControls
+};
+//# sourceMappingURL=DraftTitleControls.js.map

package/dist/documents/DraftTitleControls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/DraftTitleControls.tsx"],
+  "sourcesContent": ["/**\n * DraftTitleControls\n *\n * A title field + an auto-name toggle for an unsaved draft (blank document,\n * voice note, or anything else a host app drafts before it exists on the\n * backend) \u2014 so picking a name or leaving AI generation on doesn't require a\n * separate settings surface.\n *\n * REUSE-FIRST: props/callbacks in, no store or config-API coupling. The host\n * owns where `title` is stored and what `autoRename` actually controls (in\n * ARBI-frontend, the same `DoctagLLM.AUTO_RENAME` config field the Upload\n * modal's toggle already writes).\n */\n\nimport { Sparkles } from 'lucide-react'\nimport { IconToggle } from '../ui/IconToggle'\n\nconst AUTO_RENAME_COLORS = { text: 'text-amber-700', bg: 'bg-amber-500' }\n\nexport interface DraftTitleControlsProps {\n  title: string\n  onTitleChange: (title: string) => void\n  placeholder: string\n  autoRename: boolean\n  onAutoRenameChange: (value: boolean) => void\n}\n\nexport function DraftTitleControls({\n  title,\n  onTitleChange,\n  placeholder,\n  autoRename,\n  onAutoRenameChange,\n}: DraftTitleControlsProps) {\n  return (\n    <div className=\"flex min-w-0 flex-shrink-0 items-center gap-1.5\">\n      <input\n        type=\"text\"\n        value={title}\n        onChange={(e) => onTitleChange(e.target.value)}\n        placeholder={placeholder}\n        className=\"min-w-0 max-w-[220px] rounded-md bg-muted px-2 py-1 text-sm font-medium outline-none focus-visible:ring-1 focus-visible:ring-primary\"\n        data-testid=\"draft-title-input\"\n      />\n      <IconToggle\n        icon={Sparkles}\n        isActive={autoRename}\n        onToggle={onAutoRenameChange}\n        colors={AUTO_RENAME_COLORS}\n        tooltipActive=\"Auto-name from content is on \u2014 generates a title once saved\"\n        tooltipInactive=\"Auto-name from content is off \u2014 uses the name typed above\"\n        data-testid=\"draft-auto-rename-toggle\"\n      />\n    </div>\n  )\n}\n"],
+  "mappings": "AAmCI,SACE,KADF;AArBJ,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB,EAAE,MAAM,kBAAkB,IAAI,eAAe;AAUjE,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,qBAAC,SAAI,WAAU,mDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,QAC7C;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,eAAc;AAAA,QACd,iBAAgB;AAAA,QAChB,eAAY;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/documents/InlineMicButton.js

@@ -0,0 +1,90 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Mic, Square, Loader2 } from "lucide-react";
+import { useAudioRecorder } from "./useAudioRecorder.js";
+import { MicRecordingOverlay } from "./MicRecordingOverlay.js";
+const HOLD_THRESHOLD_MS = 350;
+function InlineMicButton({
+  focused,
+  onTranscript,
+  onError,
+  transcribe,
+  className
+}) {
+  const recorder = useAudioRecorder();
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [latched, setLatched] = useState(false);
+  const pressedAtRef = useRef(0);
+  useEffect(() => {
+    if (recorder.error) onError?.(recorder.error);
+  }, [recorder.error]);
+  useEffect(() => {
+    if (recorder.state !== "stopped" || !recorder.blob) return;
+    const blob = recorder.blob;
+    setIsTranscribing(true);
+    transcribe(blob).then((text) => {
+      if (text.trim()) onTranscript(text.trim());
+    }).catch((err) => {
+      onError?.(err instanceof Error ? err.message : "Could not transcribe audio.");
+    }).finally(() => {
+      setIsTranscribing(false);
+      setLatched(false);
+      recorder.reset();
+    });
+  }, [recorder.state, recorder.blob]);
+  const isRecording = recorder.state === "recording";
+  const isBusy = isTranscribing;
+  if (!focused && !isRecording && !isBusy) return null;
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    if (isRecording) return;
+    pressedAtRef.current = Date.now();
+    void recorder.start();
+  };
+  const handlePointerUp = () => {
+    if (!isRecording) return;
+    if (latched) {
+      recorder.stop();
+      setLatched(false);
+      return;
+    }
+    const held = Date.now() - pressedAtRef.current;
+    if (held >= HOLD_THRESHOLD_MS) {
+      recorder.stop();
+    } else {
+      setLatched(true);
+    }
+  };
+  const handlePointerLeave = () => {
+    if (isRecording && !latched) recorder.stop();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerLeave,
+        disabled: isBusy,
+        title: isRecording ? "Release to stop, or tap again if hands-free" : "Hold, or tap to dictate",
+        "data-testid": "inline-mic-button",
+        className: `inline-flex items-center justify-center rounded-full transition-colors disabled:pointer-events-none ${isRecording ? "h-7 w-7 bg-red-500 text-white shadow-sm hover:bg-red-600" : isBusy ? "h-6 w-6 text-muted-foreground" : "h-6 w-6 text-muted-foreground/50 hover:bg-muted hover:text-muted-foreground"} ${className ?? ""}`,
+        children: isBusy ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : isRecording ? /* @__PURE__ */ jsx(Square, { className: "h-3 w-3 fill-current" }) : /* @__PURE__ */ jsx(Mic, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    isRecording && /* @__PURE__ */ jsx(
+      MicRecordingOverlay,
+      {
+        level: recorder.level,
+        elapsedMs: recorder.elapsedMs,
+        caption: latched ? "Tap the mic again to stop" : "Release to stop, or keep holding"
+      }
+    )
+  ] });
+}
+export {
+  InlineMicButton
+};
+//# sourceMappingURL=InlineMicButton.js.map

package/dist/documents/InlineMicButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/InlineMicButton.tsx"],
+  "sourcesContent": ["/**\n * InlineMicButton\n *\n * A dictate-instead-of-type button meant to sit inside a text field's own\n * padding (a corner of an `<input>`/`<textarea>`), not a standalone feature\n * in its own right \u2014 no waveform, no timer, no card chrome. Only shows while\n * the host field is focused (or mid-recording/transcribing, so it never\n * vanishes out from under an active dictation) \u2014 otherwise the field stays\n * clean. Idle it's subtle (small, muted); once pressed it's the opposite \u2014\n * a solid, unmissable recording indicator, because \"is this thing listening\"\n * is the one moment subtlety actively hurts. Built on the same\n * useAudioRecorder engine as VoiceNoteRecorder/MicButton.\n *\n * Two ways to use it, same as WhatsApp/Telegram voice messages:\n *  - Press and hold, release to stop \u2014 quick dictation, thumb-friendly.\n *  - A quick tap instead locks it into hands-free recording (no need to keep\n *    the pointer down for a long note); tap again to stop. A tap is whatever\n *    releases before HOLD_THRESHOLD_MS \u2014 past that it's a hold, and release\n *    stops it immediately.\n *\n * REUSE-FIRST: props/callbacks in. The host supplies `transcribe` (its own\n * speech-to-text endpoint), `focused` (its own focus state), and\n * `onTranscript` (where the text goes \u2014 append, insert at cursor, whatever\n * fits the field).\n *\n * `preventDefault()` on pointerdown so pressing this button never steals\n * focus from the field it's embedded in \u2014 without that, a field that blurs\n * to collapse itself (e.g. an editor that exits edit mode on blur) would\n * close out from under a user mid-dictation, and `focused` would immediately\n * flip false and hide the button being pressed.\n */\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Mic, Square, Loader2 } from 'lucide-react'\nimport { useAudioRecorder } from './useAudioRecorder'\nimport { MicRecordingOverlay } from './MicRecordingOverlay'\n\n// Below this, a press-release is a \"tap\" (locks into hands-free recording);\n// at or above it, release stops the recording immediately (press-and-hold).\nconst HOLD_THRESHOLD_MS = 350\n\nexport interface InlineMicButtonProps {\n  /** Whether the host field currently has focus. The button renders only\n   *  while this is true, or while actively recording/transcribing. */\n  focused: boolean\n  /** Called with the transcribed text once recording stops and transcription\n   *  resolves. The host decides how to merge it into the field's value. */\n  onTranscript: (text: string) => void\n  /** Surfaces recorder or transcription failures \u2014 wire to the host's own\n   *  notification system. Without it, failures are silent. */\n  onError?: (message: string) => void\n  /** The host's own speech-to-text call. */\n  transcribe: (blob: Blob) => Promise<string>\n  className?: string\n}\n\nexport function InlineMicButton({\n  focused,\n  onTranscript,\n  onError,\n  transcribe,\n  className,\n}: InlineMicButtonProps) {\n  const recorder = useAudioRecorder()\n  const [isTranscribing, setIsTranscribing] = useState(false)\n  // True once a quick tap has left the recording running hands-free \u2014 the\n  // next press (of any length) is the \"stop\" gesture rather than a new hold.\n  const [latched, setLatched] = useState(false)\n  const pressedAtRef = useRef(0)\n\n  useEffect(() => {\n    if (recorder.error) onError?.(recorder.error)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [recorder.error])\n\n  useEffect(() => {\n    if (recorder.state !== 'stopped' || !recorder.blob) return\n    const blob = recorder.blob\n    setIsTranscribing(true)\n    transcribe(blob)\n      .then((text) => {\n        if (text.trim()) onTranscript(text.trim())\n      })\n      .catch((err) => {\n        onError?.(err instanceof Error ? err.message : 'Could not transcribe audio.')\n      })\n      .finally(() => {\n        setIsTranscribing(false)\n        setLatched(false)\n        recorder.reset()\n      })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [recorder.state, recorder.blob])\n\n  const isRecording = recorder.state === 'recording'\n  const isBusy = isTranscribing\n\n  if (!focused && !isRecording && !isBusy) return null\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    e.preventDefault()\n    if (isRecording) return // latched (or otherwise already going) \u2014 let pointerup stop it\n    pressedAtRef.current = Date.now()\n    void recorder.start()\n  }\n\n  const handlePointerUp = () => {\n    if (!isRecording) return\n    if (latched) {\n      recorder.stop()\n      setLatched(false)\n      return\n    }\n    const held = Date.now() - pressedAtRef.current\n    if (held >= HOLD_THRESHOLD_MS) {\n      recorder.stop()\n    } else {\n      setLatched(true)\n    }\n  }\n\n  const handlePointerLeave = () => {\n    // Dragged off mid-hold (not latched into hands-free) \u2014 stop, same as\n    // releasing over the button. Latched recording stays running regardless\n    // of where the pointer goes; that's the point of hands-free.\n    if (isRecording && !latched) recorder.stop()\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerLeave={handlePointerLeave}\n        onPointerCancel={handlePointerLeave}\n        disabled={isBusy}\n        title={\n          isRecording ? 'Release to stop, or tap again if hands-free' : 'Hold, or tap to dictate'\n        }\n        data-testid=\"inline-mic-button\"\n        className={`inline-flex items-center justify-center rounded-full transition-colors disabled:pointer-events-none ${\n          isRecording\n            ? 'h-7 w-7 bg-red-500 text-white shadow-sm hover:bg-red-600'\n            : isBusy\n              ? 'h-6 w-6 text-muted-foreground'\n              : 'h-6 w-6 text-muted-foreground/50 hover:bg-muted hover:text-muted-foreground'\n        } ${className ?? ''}`}\n      >\n        {isBusy ? (\n          <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n        ) : isRecording ? (\n          <Square className=\"h-3 w-3 fill-current\" />\n        ) : (\n          <Mic className=\"h-3.5 w-3.5\" />\n        )}\n      </button>\n      {/* Same big, unmissable \"is it hearing me\" feedback as the chat\n          composer's mic \u2014 reused, not reimplemented, so every recording in\n          the app looks and feels the same. */}\n      {isRecording && (\n        <MicRecordingOverlay\n          level={recorder.level}\n          elapsedMs={recorder.elapsedMs}\n          caption={latched ? 'Tap the mic again to stop' : 'Release to stop, or keep holding'}\n        />\n      )}\n    </>\n  )\n}\n"],
+  "mappings": "AAiII,mBAqBM,KArBN;AAjGJ,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,KAAK,QAAQ,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAIpC,MAAM,oBAAoB;AAiBnB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,WAAW,iBAAiB;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAG1D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,eAAe,OAAO,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,SAAS,MAAO,WAAU,SAAS,KAAK;AAAA,EAE9C,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,SAAS,UAAU,aAAa,CAAC,SAAS,KAAM;AACpD,UAAM,OAAO,SAAS;AACtB,sBAAkB,IAAI;AACtB,eAAW,IAAI,EACZ,KAAK,CAAC,SAAS;AACd,UAAI,KAAK,KAAK,EAAG,cAAa,KAAK,KAAK,CAAC;AAAA,IAC3C,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,gBAAU,eAAe,QAAQ,IAAI,UAAU,6BAA6B;AAAA,IAC9E,CAAC,EACA,QAAQ,MAAM;AACb,wBAAkB,KAAK;AACvB,iBAAW,KAAK;AAChB,eAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EAEL,GAAG,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAElC,QAAM,cAAc,SAAS,UAAU;AACvC,QAAM,SAAS;AAEf,MAAI,CAAC,WAAW,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEhD,QAAM,oBAAoB,CAAC,MAA0B;AACnD,MAAE,eAAe;AACjB,QAAI,YAAa;AACjB,iBAAa,UAAU,KAAK,IAAI;AAChC,SAAK,SAAS,MAAM;AAAA,EACtB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,YAAa;AAClB,QAAI,SAAS;AACX,eAAS,KAAK;AACd,iBAAW,KAAK;AAChB;AAAA,IACF;AACA,UAAM,OAAO,KAAK,IAAI,IAAI,aAAa;AACvC,QAAI,QAAQ,mBAAmB;AAC7B,eAAS,KAAK;AAAA,IAChB,OAAO;AACL,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAI/B,QAAI,eAAe,CAAC,QAAS,UAAS,KAAK;AAAA,EAC7C;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,OACE,cAAc,gDAAgD;AAAA,QAEhE,eAAY;AAAA,QACZ,WAAW,uGACT,cACI,6DACA,SACE,kCACA,6EACR,IAAI,aAAa,EAAE;AAAA,QAElB,mBACC,oBAAC,WAAQ,WAAU,4BAA2B,IAC5C,cACF,oBAAC,UAAO,WAAU,wBAAuB,IAEzC,oBAAC,OAAI,WAAU,eAAc;AAAA;AAAA,IAEjC;AAAA,IAIC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,SAAS;AAAA,QAChB,WAAW,SAAS;AAAA,QACpB,SAAS,UAAU,8BAA8B;AAAA;AAAA,IACnD;AAAA,KAEJ;AAEJ;",
+  "names": []
+}

package/dist/documents/MicRecordingOverlay.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { MicWaveformIndicator } from "./MicWaveformIndicator.js";
+function MicRecordingOverlay({
+  level,
+  elapsedMs,
+  caption = "Keep button pressed while speaking"
+}) {
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none fixed inset-0 z-[2147483647] flex items-center justify-center",
+        "data-testid": "mic-recording-overlay",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col items-center gap-3 rounded-2xl bg-background/95 px-6 py-5 shadow-2xl ring-1 ring-border backdrop-blur-sm", children: [
+          /* @__PURE__ */ jsx(MicWaveformIndicator, { level, elapsedMs }),
+          /* @__PURE__ */ jsx("p", { className: "text-center text-sm font-medium text-muted-foreground", children: caption })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+export {
+  MicRecordingOverlay
+};
+//# sourceMappingURL=MicRecordingOverlay.js.map

package/dist/documents/MicRecordingOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/MicRecordingOverlay.tsx"],
+  "sourcesContent": ["/**\n * MicRecordingOverlay\n *\n * The big, unmissable \"is it hearing me\" feedback for an active recording \u2014\n * a centered, portaled card with the REC-badge/timer/waveform visual\n * (MicWaveformIndicator). Shared by any recorder in the app that wants the\n * same prominent treatment while actively recording: the chat composer's\n * press-and-hold mic and the inline dictate button both use this, so\n * \"you are recording\" looks and feels identical everywhere it happens.\n *\n * Non-interactive (pointer-events disabled) so it never blocks a click\n * elsewhere; mounted via a portal so it renders above whatever field or\n * layout it was triggered from, regardless of overflow/z-index there.\n */\n\nimport { createPortal } from 'react-dom'\nimport { MicWaveformIndicator } from './MicWaveformIndicator'\n\nexport interface MicRecordingOverlayProps {\n  level: number\n  elapsedMs: number\n  /** Caption under the waveform \u2014 defaults to the press-and-hold framing. */\n  caption?: string\n}\n\nexport function MicRecordingOverlay({\n  level,\n  elapsedMs,\n  caption = 'Keep button pressed while speaking',\n}: MicRecordingOverlayProps) {\n  if (typeof document === 'undefined') return null\n  return createPortal(\n    <div\n      aria-hidden\n      className=\"pointer-events-none fixed inset-0 z-[2147483647] flex items-center justify-center\"\n      data-testid=\"mic-recording-overlay\"\n    >\n      <div className=\"flex w-72 flex-col items-center gap-3 rounded-2xl bg-background/95 px-6 py-5 shadow-2xl ring-1 ring-border backdrop-blur-sm\">\n        <MicWaveformIndicator level={level} elapsedMs={elapsedMs} />\n        <p className=\"text-center text-sm font-medium text-muted-foreground\">{caption}</p>\n      </div>\n    </div>,\n    document.body\n  )\n}\n"],
+  "mappings": "AAqCM,SACE,KADF;AAtBN,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAS9B,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAA6B;AAC3B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,+BAAC,SAAI,WAAU,+HACb;AAAA,8BAAC,wBAAqB,OAAc,WAAsB;AAAA,UAC1D,oBAAC,OAAE,WAAU,yDAAyD,mBAAQ;AAAA,WAChF;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/documents/MicWaveformIndicator.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatElapsed } from "./format-elapsed.js";
+const BAR_WEIGHTS = [
+  0.25,
+  0.32,
+  0.48,
+  0.62,
+  0.82,
+  0.56,
+  0.92,
+  0.72,
+  1,
+  0.86,
+  0.62,
+  0.96,
+  0.76,
+  0.5,
+  0.84,
+  0.66,
+  0.42,
+  0.56,
+  0.36,
+  0.28,
+  0.22
+];
+const MIN_BAR_PX = 3;
+const MAX_BAR_PX = 40;
+function MicWaveformIndicator({
+  level,
+  elapsedMs,
+  paused = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", "data-testid": "mic-waveform-indicator", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+        !paused && /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `relative inline-flex h-2 w-2 rounded-full ${paused ? "bg-muted-foreground" : "bg-red-500"}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-xs font-semibold uppercase tracking-wide ${paused ? "text-muted-foreground" : "text-red-500"}`,
+          children: paused ? "Paused" : "Rec"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatElapsed(elapsedMs) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex h-10 items-end gap-[3px]", "data-testid": "mic-waveform-indicator-bars", children: BAR_WEIGHTS.map((weight, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "w-1 rounded-full bg-secondary transition-[height] duration-75 ease-out",
+        style: {
+          height: Math.min(MAX_BAR_PX, Math.max(MIN_BAR_PX, level * weight * MAX_BAR_PX))
+        }
+      },
+      i
+    )) })
+  ] });
+}
+export {
+  MicWaveformIndicator
+};
+//# sourceMappingURL=MicWaveformIndicator.js.map

package/dist/documents/MicWaveformIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/MicWaveformIndicator.tsx"],
+  "sourcesContent": ["/**\n * MicWaveformIndicator\n *\n * The REC-badge + timer + waveform visual \u2014 the reusable \"is it hearing me\"\n * piece shared by any press-and-hold or toggle-style audio recorder a host\n * app builds on `useAudioRecorder`. Purely presentational: no portal, no\n * card chrome, no caption \u2014 callers provide their own context around it.\n *\n * Styled like the REC-badge + timer + waveform convention every voice\n * recorder app uses (Voice Memos, WhatsApp, Slack huddles) \u2014 recognisable\n * at a glance as \"this bar height is how loud you are\", not just decoration.\n */\n\nimport { formatElapsed } from './format-elapsed'\n\n// A waveform silhouette (bell-shaped with a little natural asymmetry) rather\n// than a uniform bank of bars \u2014 reads as an actual audio waveform rather\n// than N identical dots. Every bar still scales with the same live `level`.\nconst BAR_WEIGHTS = [\n  0.25, 0.32, 0.48, 0.62, 0.82, 0.56, 0.92, 0.72, 1, 0.86, 0.62, 0.96, 0.76, 0.5, 0.84, 0.66, 0.42,\n  0.56, 0.36, 0.28, 0.22,\n]\nconst MIN_BAR_PX = 3\nconst MAX_BAR_PX = 40\n\nexport interface MicWaveformIndicatorProps {\n  level: number\n  elapsedMs: number\n  /** Dims the REC badge and freezes the \"recording\" framing while paused,\n   *  without needing a separate visual language. */\n  paused?: boolean\n}\n\nexport function MicWaveformIndicator({\n  level,\n  elapsedMs,\n  paused = false,\n}: MicWaveformIndicatorProps) {\n  return (\n    <div className=\"flex flex-col items-center gap-3\" data-testid=\"mic-waveform-indicator\">\n      <div className=\"flex items-center gap-2\">\n        <span className=\"relative flex h-2 w-2\">\n          {!paused && (\n            <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75\" />\n          )}\n          <span\n            className={`relative inline-flex h-2 w-2 rounded-full ${paused ? 'bg-muted-foreground' : 'bg-red-500'}`}\n          />\n        </span>\n        <span\n          className={`text-xs font-semibold uppercase tracking-wide ${paused ? 'text-muted-foreground' : 'text-red-500'}`}\n        >\n          {paused ? 'Paused' : 'Rec'}\n        </span>\n        <span className=\"font-mono text-xs tabular-nums text-muted-foreground\">\n          {formatElapsed(elapsedMs)}\n        </span>\n      </div>\n      <div className=\"flex h-10 items-end gap-[3px]\" data-testid=\"mic-waveform-indicator-bars\">\n        {BAR_WEIGHTS.map((weight, i) => (\n          <span\n            key={i}\n            className=\"w-1 rounded-full bg-secondary transition-[height] duration-75 ease-out\"\n            style={{\n              height: Math.min(MAX_BAR_PX, Math.max(MIN_BAR_PX, level * weight * MAX_BAR_PX)),\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AAyCQ,SAEI,KAFJ;AA5BR,SAAS,qBAAqB;AAK9B,MAAM,cAAc;AAAA,EAClB;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAG;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAAA,EAAM;AAAA,EAC5F;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AACpB;AACA,MAAM,aAAa;AACnB,MAAM,aAAa;AAUZ,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAA8B;AAC5B,SACE,qBAAC,SAAI,WAAU,oCAAmC,eAAY,0BAC5D;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,2BAAC,UAAK,WAAU,yBACb;AAAA,SAAC,UACA,oBAAC,UAAK,WAAU,sFAAqF;AAAA,QAEvG;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,6CAA6C,SAAS,wBAAwB,YAAY;AAAA;AAAA,QACvG;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,iDAAiD,SAAS,0BAA0B,cAAc;AAAA,UAE5G,mBAAS,WAAW;AAAA;AAAA,MACvB;AAAA,MACA,oBAAC,UAAK,WAAU,wDACb,wBAAc,SAAS,GAC1B;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,iCAAgC,eAAY,+BACxD,sBAAY,IAAI,CAAC,QAAQ,MACxB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQ,KAAK,IAAI,YAAY,KAAK,IAAI,YAAY,QAAQ,SAAS,UAAU,CAAC;AAAA,QAChF;AAAA;AAAA,MAJK;AAAA,IAKP,CACD,GACH;AAAA,KACF;AAEJ;",
+  "names": []
+}