@arbidocs/blocks 0.3.185 → 0.4.0

package/dist/chunk-6HIPFEID.cjs

@@ -0,0 +1,574 @@
+"use client";
+'use strict';
+
+var chunkWJMEXTVD_cjs = require('./chunk-WJMEXTVD.cjs');
+var chunkC54XEN5T_cjs = require('./chunk-C54XEN5T.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DEFAULT_PASSAGE_PILL_LABELS = {
+  copyLink: "Copy passage link",
+  copied: "Passage link copied",
+  copyFailed: "Could not copy the passage link",
+  viewPassage: "View passage",
+  page: "Page",
+  pages: "Pages",
+  passage: "Passage",
+  passages: "Passages",
+  pageAbbreviation: "p."
+};
+var COPIED_RESET_MS = 2e3;
+function describePassage(documentTitle, l, page, passage) {
+  return [
+    documentTitle,
+    page.text !== void 0 ? `${page.isRange ? l.pages : l.page} ${page.text}` : null,
+    passage.text !== void 0 ? `${passage.isRange ? l.passages : l.passage} ${passage.text}` : null
+  ].filter(Boolean).join(", ");
+}
+function PillSurface({
+  href,
+  onClick,
+  className,
+  testId,
+  accessibleName,
+  children,
+  tooltip,
+  tooltipSide = "bottom"
+}) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex min-w-0 items-center gap-1", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: accessibleName })
+  ] });
+  const interactive = ui.cn(
+    "relative cursor-pointer hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-3 pointer-coarse:after:content-['']"
+  );
+  let surface;
+  if (href) {
+    surface = /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: ui.cn(className, interactive),
+        onClick,
+        "data-testid": testId,
+        children: content
+      }
+    );
+  } else if (onClick) {
+    surface = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: ui.cn(className, interactive),
+        onClick,
+        "data-testid": testId,
+        children: content
+      }
+    );
+  } else {
+    surface = /* @__PURE__ */ jsxRuntime.jsx("span", { className, "data-testid": testId, children: content });
+  }
+  if (!tooltip) return surface;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: surface }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { side: tooltipSide, children: tooltip })
+  ] });
+}
+function CopyLinkButton({
+  href,
+  labels,
+  testId
+}) {
+  const { notify } = chunkC54XEN5T_cjs.useBlocksEnvironment();
+  const [copied, setCopied] = react.useState(false);
+  const timer = react.useRef(null);
+  react.useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(href);
+    } catch {
+      notify(labels.copyFailed, "error");
+      return;
+    }
+    setCopied(true);
+    notify(labels.copied, "success");
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: "relative inline-flex items-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-fine:min-h-6 pointer-fine:min-w-6 pointer-fine:justify-center pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:justify-center",
+        title: labels.copyLink,
+        "aria-label": labels.copyLink,
+        "data-testid": testId,
+        children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "size-3", "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: "sr-only", children: copied ? labels.copied : "" })
+  ] });
+}
+function PassagePill({
+  icon,
+  documentTitle,
+  variant = "pill",
+  pageNumber,
+  passageIndex,
+  passageIndexEnd,
+  pageNumberEnd,
+  href,
+  className,
+  onClick,
+  showTooltip = true,
+  labelMaxWidth,
+  size = "sm",
+  labels,
+  testIds,
+  testId = "passage-entity"
+}) {
+  const l = { ...DEFAULT_PASSAGE_PILL_LABELS, ...labels };
+  const ids = {
+    root: testIds?.root ?? testId,
+    copy: testIds?.copy ?? `${testIds?.root ?? testId}-copy`
+  };
+  const isPassageRange = passageIndexEnd !== void 0 && passageIndexEnd > (passageIndex ?? 0);
+  const isPageRange = pageNumberEnd !== void 0 && pageNumberEnd > (pageNumber ?? 0);
+  const passageText = isPassageRange ? `${passageIndex}\u2013${passageIndexEnd}` : `${passageIndex}`;
+  const pageText = isPageRange ? `${pageNumber}\u2013${pageNumberEnd}` : `${pageNumber}`;
+  const accessibleName = describePassage(
+    documentTitle,
+    l,
+    { text: pageNumber !== void 0 ? pageText : void 0, isRange: isPageRange },
+    { text: passageIndex !== void 0 ? passageText : void 0, isRange: isPassageRange }
+  );
+  const hasAction = Boolean(href || onClick);
+  if (variant === "icon") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PillSurface,
+      {
+        href,
+        onClick,
+        className: ui.cn("inline-flex items-center rounded-sm", className),
+        testId: ids.root,
+        accessibleName,
+        tooltip: showTooltip ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: documentTitle }),
+          (pageNumber !== void 0 || passageIndex !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            pageNumber !== void 0 && `${isPageRange ? l.pages : l.page} ${pageText}`,
+            pageNumber !== void 0 && passageIndex !== void 0 && ", ",
+            passageIndex !== void 0 && `${isPassageRange ? l.passages : l.passage} ${passageText}`
+          ] })
+        ] }) : void 0,
+        children: icon
+      }
+    );
+  }
+  if (variant === "compact") {
+    const label = [
+      pageNumber !== void 0 ? `${l.pageAbbreviation}${pageText}` : null,
+      passageIndex !== void 0 ? `(${passageText})` : null
+    ].filter(Boolean).join("") || "\u2014";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: ui.cn(
+          "inline-flex items-center gap-1 rounded-md border border-transparent bg-muted px-1 text-sm font-medium",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            PillSurface,
+            {
+              href,
+              onClick,
+              className: "inline-flex items-center gap-1 rounded-sm",
+              testId: ids.root,
+              accessibleName,
+              tooltip: showTooltip ? documentTitle : void 0,
+              children: [
+                icon,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-tight", children: label })
+              ]
+            }
+          ),
+          href && /* @__PURE__ */ jsxRuntime.jsx(CopyLinkButton, { href, labels: l, testId: ids.copy })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PillSurface,
+    {
+      href,
+      onClick,
+      className: ui.cn(
+        "group/pill inline-flex items-center rounded-md border border-border bg-muted transition-all",
+        size === "base" ? "gap-1.5 px-1.5 py-0.5 text-base" : "gap-1 px-1 text-sm",
+        className
+      ),
+      testId: ids.root,
+      accessibleName,
+      tooltip: showTooltip && hasAction ? l.viewPassage : void 0,
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: ui.cn(
+              "min-w-0 truncate font-medium leading-tight",
+              labelMaxWidth ?? "max-w-[320px]"
+            ),
+            children: documentTitle
+          }
+        ),
+        pageNumber ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-shrink-0 text-xs leading-none text-muted-foreground", children: [
+          l.pageAbbreviation,
+          pageText
+        ] }) : null
+      ]
+    }
+  );
+}
+var DEFAULT_QUIET_MARK_LABELS = {
+  openLink: "Open link",
+  copyLink: "Copy link",
+  linkCopied: "Link copied",
+  copyFailed: "Could not copy",
+  jumpHere: "Jump to here",
+  copyPlaceLink: "Copy link to this place",
+  openDocument: "Open document",
+  linkMenu: "Link actions",
+  bookmarkMenu: "Bookmark actions"
+};
+function useCopyText(labels) {
+  const { notify } = chunkC54XEN5T_cjs.useBlocksEnvironment();
+  const done = labels?.linkCopied ?? DEFAULT_QUIET_MARK_LABELS.linkCopied;
+  const failed = labels?.copyFailed ?? DEFAULT_QUIET_MARK_LABELS.copyFailed;
+  return react.useCallback(
+    async (text, message) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        notify(message ?? done, "success");
+      } catch {
+        notify(failed, "error");
+      }
+    },
+    [notify, done, failed]
+  );
+}
+var LINK_STYLE = {
+  external: "text-primary underline decoration-primary/40 decoration-1 underline-offset-[3px] transition-colors hover:decoration-primary focus-visible:decoration-primary",
+  document: "text-primary underline decoration-primary/40 decoration-1 underline-offset-[3px] transition-colors hover:decoration-primary focus-visible:decoration-primary",
+  // A bookmark is nearly invisible until hovered or focused.
+  anchor: "text-inherit underline decoration-dotted decoration-1 decoration-foreground/25 underline-offset-[3px] transition-colors hover:decoration-foreground/70 focus-visible:decoration-foreground/70"
+};
+function scrollToHash(href) {
+  const id = href?.startsWith("#") ? decodeURIComponent(href.slice(1)) : "";
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+function QuietLink({
+  href,
+  kind = "external",
+  onOpen,
+  placeLink,
+  labels,
+  className,
+  testId,
+  children
+}) {
+  const l = { ...DEFAULT_QUIET_MARK_LABELS, ...labels };
+  const copy = useCopyText(l);
+  const open = onOpen ?? (kind === "anchor" ? () => scrollToHash(href) : () => {
+    if (href) window.open(href, "_blank", "noopener,noreferrer");
+  });
+  const copyTarget = kind === "anchor" ? placeLink ?? `${window.location.href.split("#")[0]}${href ?? ""}` : placeLink ?? href ?? "";
+  const items = [
+    {
+      id: "open",
+      label: kind === "anchor" ? l.jumpHere : kind === "document" ? l.openDocument : l.openLink,
+      primary: true,
+      onSelect: open,
+      testId: "mark-open"
+    },
+    {
+      id: "copy",
+      label: kind === "anchor" ? l.copyPlaceLink : l.copyLink,
+      onSelect: () => void copy(copyTarget),
+      testId: "mark-copy"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.MarkMenu,
+    {
+      as: "a",
+      href,
+      items,
+      menuLabel: kind === "anchor" ? l.bookmarkMenu : l.linkMenu,
+      preview: kind === "external" && href ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block break-all text-xs text-muted-foreground", children: href }) : void 0,
+      className: ui.cn(LINK_STYLE[kind], "cursor-pointer", className),
+      testId,
+      "data-mark-kind": kind,
+      children
+    }
+  );
+}
+function PassageMark({ label, menuLabel, items, className, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.MarkMenu,
+    {
+      items,
+      menuLabel,
+      testId,
+      "data-mark-kind": "passage",
+      className: ui.cn(
+        "cursor-pointer select-none rounded-sm px-1 text-xs tabular-nums text-muted-foreground/80 transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:px-2 pointer-coarse:py-2",
+        className
+      ),
+      children: label
+    }
+  );
+}
+function LabelMark({
+  colors,
+  menuLabel,
+  preview,
+  items,
+  name,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.MarkMenu,
+    {
+      items,
+      preview,
+      menuLabel,
+      testId,
+      "aria-label": name,
+      "data-mark-kind": "label",
+      className: ui.cn(
+        "flex cursor-pointer flex-col gap-1 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:px-2 pointer-coarse:py-1",
+        className
+      ),
+      children: colors.slice(0, 4).map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "h-2.5 w-1 rounded-full",
+          style: { backgroundColor: c }
+        },
+        i
+      ))
+    }
+  );
+}
+function NoteMark({
+  label,
+  title,
+  menuLabel = "Note actions",
+  items = [],
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.MarkMenu,
+    {
+      items,
+      preview: title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: title }) : void 0,
+      menuLabel,
+      testId,
+      "data-slot": "note-mark",
+      "data-mark-kind": "note",
+      className: ui.cn(
+        "cursor-default select-none rounded-sm px-1 text-xs font-medium tabular-nums text-foreground/80 underline decoration-yellow-400 decoration-2 underline-offset-[3px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        className
+      ),
+      children: label
+    }
+  );
+}
+function CitationEditor({
+  value,
+  citations,
+  onChange,
+  activeCitationKey,
+  onCiteDocument,
+  citedDocs,
+  renderDocumentPicker,
+  autoFocus = false,
+  "data-testid": dataTestId,
+  placeholder = "Add a note...",
+  readOnly = false,
+  className,
+  defaultHeight,
+  onHeightChange
+}) {
+  const [localValue, setLocalValue] = react.useState(value);
+  const [isEditing, setIsEditing] = react.useState(autoFocus);
+  const textareaRef = react.useRef(null);
+  const debounceRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!isEditing) {
+      setLocalValue(value);
+    }
+  }, [value, isEditing]);
+  const sources = react.useMemo(() => citations ?? [], [citations]);
+  const hasCitations = sources.length > 0;
+  const byDoc = react.useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const doc of sources) {
+      const chunks = doc.chunks ?? [];
+      const pages = [];
+      for (const c of chunks) if (c.page != null && !pages.includes(c.page)) pages.push(c.page);
+      groups.set(doc.doc_ext_id, { pages, count: chunks.length });
+    }
+    return groups;
+  }, [sources]);
+  const docIds = Array.from(byDoc.keys());
+  const handleRemoveDocument = react.useCallback(
+    (docExtId) => {
+      const remaining = sources.filter((d) => d.doc_ext_id !== docExtId);
+      onChange(localValue, remaining.length ? remaining : null);
+    },
+    [sources, localValue, onChange]
+  );
+  const handleToggleDocument = react.useCallback(
+    (docExtId) => {
+      if (!docExtId) return;
+      if (docIds.includes(docExtId)) {
+        handleRemoveDocument(docExtId);
+        return;
+      }
+      onCiteDocument?.(docExtId);
+    },
+    [docIds, onCiteDocument, handleRemoveDocument]
+  );
+  const renderedContent = react.useMemo(
+    () => localValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: localValue }) : null,
+    [localValue]
+  );
+  const handleChange = react.useCallback(
+    (newValue) => {
+      setLocalValue(newValue);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => onChange(newValue, citations ?? null), 400);
+    },
+    [citations, onChange]
+  );
+  const flushPendingChange = react.useCallback(() => {
+    if (!debounceRef.current) return;
+    clearTimeout(debounceRef.current);
+    debounceRef.current = null;
+    onChange(localValue, citations ?? null);
+  }, [localValue, citations, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Textarea,
+      {
+        ref: textareaRef,
+        dictate: true,
+        value: localValue,
+        onChange: (e) => handleChange(e.target.value),
+        onBlur: () => {
+          flushPendingChange();
+          setIsEditing(false);
+        },
+        onMouseUp: () => {
+          if (textareaRef.current && onHeightChange) {
+            onHeightChange(textareaRef.current.offsetHeight);
+          }
+        },
+        placeholder,
+        readOnly,
+        rows: 2,
+        "data-testid": dataTestId,
+        autoFocus: true,
+        style: defaultHeight ? { height: defaultHeight } : void 0,
+        className: "w-full text-sm p-2 pr-14 border border-border rounded-md resize-y bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onClick: () => !readOnly && setIsEditing(true),
+        style: defaultHeight ? { minHeight: defaultHeight } : void 0,
+        "data-testid": dataTestId,
+        className: ui.cn(
+          "w-full text-sm p-2 pr-14 border border-border rounded-md min-h-[4rem] whitespace-pre-wrap bg-background",
+          !readOnly && "cursor-text hover:border-ring",
+          !localValue && "text-muted-foreground"
+        ),
+        children: renderedContent || placeholder
+      }
+    ) }),
+    (hasCitations || !readOnly) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      docIds.map((docId) => {
+        const doc = citedDocs?.[docId];
+        const group = byDoc.get(docId);
+        const pages = (group?.pages ?? []).slice().sort((a, b) => a - b);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1.5 text-sm",
+            "data-testid": `citation-doc-${docId}`,
+            children: [
+              doc ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => !readOnly && onCiteDocument?.(docId),
+                  className: "flex-1 min-w-0 text-left",
+                  title: "Open to tag more passages",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.DocumentEntity, { doc, fullWidth: true, labelMaxWidth: "max-w-full" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: docId }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground shrink-0", children: chunkWJMEXTVD_cjs.formatPageRefs(pages) }),
+              !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleRemoveDocument(docId),
+                  "aria-label": "Remove this document",
+                  className: "p-0.5 hover:bg-destructive/20 hover:text-destructive rounded shrink-0",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
+                }
+              )
+            ]
+          },
+          docId
+        );
+      }),
+      !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", "data-testid": "citation-document-picker", children: renderDocumentPicker?.(handleToggleDocument, docIds) }) })
+    ] }),
+    activeCitationKey && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-blue-text", children: [
+      "Click a passage in the document to add it \u2014 ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "shift-click" }),
+      " to take a whole range. Add as many as you like, from as many documents as you like."
+    ] })
+  ] });
+}
+
+exports.CitationEditor = CitationEditor;
+exports.DEFAULT_PASSAGE_PILL_LABELS = DEFAULT_PASSAGE_PILL_LABELS;
+exports.DEFAULT_QUIET_MARK_LABELS = DEFAULT_QUIET_MARK_LABELS;
+exports.LabelMark = LabelMark;
+exports.NoteMark = NoteMark;
+exports.PassageMark = PassageMark;
+exports.PassagePill = PassagePill;
+exports.QuietLink = QuietLink;
+exports.useCopyText = useCopyText;
+//# sourceMappingURL=chunk-6HIPFEID.cjs.map
+//# sourceMappingURL=chunk-6HIPFEID.cjs.map