@arbidocs/react 0.5.110 → 0.5.112

package/dist/users/index.js

@@ -0,0 +1,15 @@
+import {
+  isAgent,
+  getUserAvatarColor,
+  getUserInitials,
+  getUserDisplayName,
+  createUserAvatarIcon
+} from "./user-display.js";
+export {
+  createUserAvatarIcon,
+  getUserAvatarColor,
+  getUserDisplayName,
+  getUserInitials,
+  isAgent
+};
+//# sourceMappingURL=index.js.map

package/dist/users/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/users/index.ts"],
+  "sourcesContent": ["export {\n  isAgent,\n  getUserAvatarColor,\n  getUserInitials,\n  getUserDisplayName,\n  createUserAvatarIcon,\n} from './user-display'\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": []
+}

package/dist/users/user-display.js

@@ -0,0 +1,60 @@
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import React from "react";
+function isAgent(user) {
+  return user.external_id.startsWith("agt-");
+}
+function getUserAvatarColor(userId) {
+  let fifthChar = "0";
+  if (userId && userId.length >= 5) {
+    fifthChar = userId.charAt(4);
+  }
+  const colorMap = {
+    "0": "bg-emerald-700",
+    "1": "bg-blue-700",
+    "2": "bg-violet-700",
+    "3": "bg-rose-700",
+    "4": "bg-amber-700",
+    "5": "bg-lime-700",
+    "6": "bg-purple-700",
+    "7": "bg-cyan-700",
+    "8": "bg-orange-700",
+    "9": "bg-teal-700",
+    a: "bg-red-700",
+    b: "bg-indigo-700",
+    c: "bg-pink-700",
+    d: "bg-green-700",
+    e: "bg-yellow-700",
+    f: "bg-sky-700"
+  };
+  return colorMap[fifthChar] || "bg-emerald-700";
+}
+function getUserInitials(user) {
+  const first = user.given_name[0] ?? "";
+  const last = user.family_name?.[0] ?? "";
+  return (first + last).toUpperCase();
+}
+function getUserDisplayName(user) {
+  return user.family_name ? `${user.given_name} ${user.family_name}` : user.given_name;
+}
+function createUserAvatarIcon(user) {
+  const initials = getUserInitials(user);
+  const colorClass = getUserAvatarColor(user.external_id);
+  return React.createElement(
+    Avatar,
+    { className: "h-5 w-5 border border-white" },
+    user.picture && React.createElement(AvatarImage, { src: user.picture, alt: initials }),
+    React.createElement(
+      AvatarFallback,
+      { className: `text-[9px] text-white font-semibold ${colorClass}` },
+      initials
+    )
+  );
+}
+export {
+  createUserAvatarIcon,
+  getUserAvatarColor,
+  getUserDisplayName,
+  getUserInitials,
+  isAgent
+};
+//# sourceMappingURL=user-display.js.map

package/dist/users/user-display.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/users/user-display.ts"],
+  "sourcesContent": ["/**\n * User Utilities\n *\n * A person's display name, avatar colour and initials, the same in every surface.\n * Uses deterministic color mapping based on user ID (5th character of ID).\n *\n * NOTE: given_name and family_name are required fields.\n */\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport React from 'react'\n\n/**\n * Check if a user is an agent (external_id starts with 'agt-')\n */\nexport function isAgent(user: { external_id: string }): boolean {\n  return user.external_id.startsWith('agt-')\n}\n\n/**\n * Generate consistent avatar color based on user ID\n * Uses same pattern as workspace colors - extracts 5th character for deterministic mapping\n */\nexport function getUserAvatarColor(userId: string): string {\n  // Extract 5th character (index 4) for color mapping\n  let fifthChar = '0' // default fallback\n\n  if (userId && userId.length >= 5) {\n    fifthChar = userId.charAt(4)\n  }\n\n  // Map to solid, vibrant avatar colors (700 weight: white initials pass WCAG AA 4.5:1 on every colour)\n  const colorMap: Record<string, string> = {\n    '0': 'bg-emerald-700',\n    '1': 'bg-blue-700',\n    '2': 'bg-violet-700',\n    '3': 'bg-rose-700',\n    '4': 'bg-amber-700',\n    '5': 'bg-lime-700',\n    '6': 'bg-purple-700',\n    '7': 'bg-cyan-700',\n    '8': 'bg-orange-700',\n    '9': 'bg-teal-700',\n    a: 'bg-red-700',\n    b: 'bg-indigo-700',\n    c: 'bg-pink-700',\n    d: 'bg-green-700',\n    e: 'bg-yellow-700',\n    f: 'bg-sky-700',\n  }\n\n  return colorMap[fifthChar] || 'bg-emerald-700'\n}\n\n/**\n * Get user initials from given_name and family_name (both required)\n * Returns first letter of each name, e.g. \"John Doe\" -> \"JD\"\n */\nexport function getUserInitials(user: { given_name: string; family_name?: string | null }): string {\n  const first = user.given_name[0] ?? ''\n  const last = user.family_name?.[0] ?? ''\n  return (first + last).toUpperCase()\n}\n\n/**\n * Get user display name from given_name and family_name (both required)\n * Returns full name, e.g. \"John Doe\"\n */\nexport function getUserDisplayName(user: {\n  given_name: string\n  family_name?: string | null\n}): string {\n  return user.family_name ? `${user.given_name} ${user.family_name}` : user.given_name\n}\n\n/**\n * Create a user avatar icon element for use in toast notifications.\n * This is a simple React element (not a component with hooks) so it can be\n * used outside of React component context (e.g., in WebSocket handlers).\n */\nexport function createUserAvatarIcon(user: {\n  external_id: string\n  given_name: string\n  family_name?: string | null\n  picture?: string | null\n}): React.ReactElement {\n  const initials = getUserInitials(user)\n  const colorClass = getUserAvatarColor(user.external_id)\n\n  return React.createElement(\n    Avatar,\n    { className: 'h-5 w-5 border border-white' },\n    user.picture && React.createElement(AvatarImage, { src: user.picture, alt: initials }),\n    React.createElement(\n      AvatarFallback,\n      { className: `text-[9px] text-white font-semibold ${colorClass}` },\n      initials\n    )\n  )\n}\n"],
+  "mappings": "AASA,SAAS,QAAQ,gBAAgB,mBAAmB;AACpD,OAAO,WAAW;AAKX,SAAS,QAAQ,MAAwC;AAC9D,SAAO,KAAK,YAAY,WAAW,MAAM;AAC3C;AAMO,SAAS,mBAAmB,QAAwB;AAEzD,MAAI,YAAY;AAEhB,MAAI,UAAU,OAAO,UAAU,GAAG;AAChC,gBAAY,OAAO,OAAO,CAAC;AAAA,EAC7B;AAGA,QAAM,WAAmC;AAAA,IACvC,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,SAAO,SAAS,SAAS,KAAK;AAChC;AAMO,SAAS,gBAAgB,MAAmE;AACjG,QAAM,QAAQ,KAAK,WAAW,CAAC,KAAK;AACpC,QAAM,OAAO,KAAK,cAAc,CAAC,KAAK;AACtC,UAAQ,QAAQ,MAAM,YAAY;AACpC;AAMO,SAAS,mBAAmB,MAGxB;AACT,SAAO,KAAK,cAAc,GAAG,KAAK,UAAU,IAAI,KAAK,WAAW,KAAK,KAAK;AAC5E;AAOO,SAAS,qBAAqB,MAKd;AACrB,QAAM,WAAW,gBAAgB,IAAI;AACrC,QAAM,aAAa,mBAAmB,KAAK,WAAW;AAEtD,SAAO,MAAM;AAAA,IACX;AAAA,IACA,EAAE,WAAW,8BAA8B;AAAA,IAC3C,KAAK,WAAW,MAAM,cAAc,aAAa,EAAE,KAAK,KAAK,SAAS,KAAK,SAAS,CAAC;AAAA,IACrF,MAAM;AAAA,MACJ;AAAA,MACA,EAAE,WAAW,uCAAuC,UAAU,GAAG;AAAA,MACjE;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/viewers/AudioViewer.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+function AudioViewer({ blob, title }) {
+  const [objectUrl, setObjectUrl] = useState("");
+  useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setObjectUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [blob]);
+  if (!objectUrl) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full w-full flex items-center justify-center p-4 bg-muted/30",
+      "data-testid": "audio-viewer",
+      children: /* @__PURE__ */ jsx("audio", { src: objectUrl, controls: true, title, className: "w-full max-w-lg" })
+    }
+  );
+}
+export {
+  AudioViewer
+};
+//# sourceMappingURL=AudioViewer.js.map

package/dist/viewers/AudioViewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/viewers/AudioViewer.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\nexport interface AudioViewerProps {\n  blob: Blob\n  title: string\n}\n\n/** Renders an audio blob with the browser's native transport controls. */\nexport function AudioViewer({ blob, title }: AudioViewerProps) {\n  const [objectUrl, setObjectUrl] = useState<string>('')\n\n  useEffect(() => {\n    const url = URL.createObjectURL(blob)\n    setObjectUrl(url)\n    return () => URL.revokeObjectURL(url)\n  }, [blob])\n\n  if (!objectUrl) return null\n\n  return (\n    <div\n      className=\"h-full w-full flex items-center justify-center p-4 bg-muted/30\"\n      data-testid=\"audio-viewer\"\n    >\n      <audio src={objectUrl} controls title={title} className=\"w-full max-w-lg\" />\n    </div>\n  )\n}\n"],
+  "mappings": "AAwBM;AAxBN,SAAS,WAAW,gBAAgB;AAQ7B,SAAS,YAAY,EAAE,MAAM,MAAM,GAAqB;AAC7D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,EAAE;AAErD,YAAU,MAAM;AACd,UAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,iBAAa,GAAG;AAChB,WAAO,MAAM,IAAI,gBAAgB,GAAG;AAAA,EACtC,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,UAAW,QAAO;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ,8BAAC,WAAM,KAAK,WAAW,UAAQ,MAAC,OAAc,WAAU,mBAAkB;AAAA;AAAA,EAC5E;AAEJ;",
+  "names": []
+}

package/dist/viewers/DocxViewer.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+function measureContentWidth(container) {
+  let pageWidth = 0;
+  container.querySelectorAll("section.docx").forEach((section) => {
+    pageWidth = Math.max(pageWidth, section.offsetWidth);
+  });
+  if (pageWidth === 0) return 0;
+  const wrapper = container.querySelector(".docx-wrapper");
+  if (wrapper) {
+    const style = window.getComputedStyle(wrapper);
+    pageWidth += (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+  }
+  return pageWidth;
+}
+function DocxViewer({ blob }) {
+  const outerRef = useRef(null);
+  const containerRef = useRef(null);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  useEffect(() => {
+    const outer = outerRef.current;
+    if (!outer) return;
+    const updateWidth = () => setContainerWidth(outer.clientWidth);
+    updateWidth();
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(outer);
+    return () => resizeObserver.disconnect();
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    setContentWidth(0);
+    container.innerHTML = "";
+    import("docx-preview").then(({ renderAsync }) => {
+      if (cancelled) return;
+      return renderAsync(blob, container, void 0, {
+        ignoreLastRenderedPageBreak: false
+      });
+    }).then(() => {
+      if (!cancelled) setIsLoading(false);
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("DocxViewer render error:", err);
+        setError("Failed to render document");
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blob]);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (isLoading || error || !container) return;
+    setContentWidth(measureContentWidth(container));
+  }, [isLoading, error]);
+  const scale = containerWidth > 0 && contentWidth > 0 ? Math.min(1, containerWidth / contentWidth) : 1;
+  return /* @__PURE__ */ jsxs("div", { ref: outerRef, className: "w-full h-full overflow-auto bg-muted", "data-testid": "docx-viewer", children: [
+    isLoading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading document..." }) }),
+    error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx("div", { className: "text-destructive", children: error }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        "data-testid": "docx-viewer-body",
+        className: `docx-viewer-body${isLoading || error ? " hidden" : ""}`,
+        style: { zoom: scale }
+      }
+    )
+  ] });
+}
+export {
+  DocxViewer
+};
+//# sourceMappingURL=DocxViewer.js.map

package/dist/viewers/DocxViewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/viewers/DocxViewer.tsx"],
+  "sourcesContent": ["/**\n * DocxViewer\n *\n * Renders DOCX files natively using docx-preview, preserving track changes\n * (shown as strikethrough deletions + inserted text) and inline comments.\n *\n * Pages render at their natural width and are scaled down to fit the\n * container, so the document resizes with the panel instead of clipping.\n *\n * `docx-preview` is an OPTIONAL peer dependency, imported dynamically \u2014 a\n * consumer that never renders a .docx does not need it installed. If it is\n * missing the viewer shows a load error rather than crashing the app.\n */\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\n\nexport interface DocxViewerProps {\n  blob: Blob\n}\n\n/** Natural width of the rendered document: widest page plus wrapper padding. */\nfunction measureContentWidth(container: HTMLElement): number {\n  let pageWidth = 0\n  container.querySelectorAll<HTMLElement>('section.docx').forEach((section) => {\n    pageWidth = Math.max(pageWidth, section.offsetWidth)\n  })\n  if (pageWidth === 0) return 0\n\n  const wrapper = container.querySelector<HTMLElement>('.docx-wrapper')\n  if (wrapper) {\n    const style = window.getComputedStyle(wrapper)\n    pageWidth += (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0)\n  }\n  return pageWidth\n}\n\nexport function DocxViewer({ blob }: DocxViewerProps) {\n  const outerRef = useRef<HTMLDivElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(true)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [contentWidth, setContentWidth] = useState(0)\n\n  // Track container width so the document rescales when the panel is resized\n  useEffect(() => {\n    const outer = outerRef.current\n    if (!outer) return\n\n    const updateWidth = () => setContainerWidth(outer.clientWidth)\n    updateWidth()\n\n    const resizeObserver = new ResizeObserver(updateWidth)\n    resizeObserver.observe(outer)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    let cancelled = false\n\n    setIsLoading(true)\n    setError(null)\n    setContentWidth(0)\n    container.innerHTML = ''\n\n    import('docx-preview')\n      .then(({ renderAsync }) => {\n        if (cancelled) return\n        return renderAsync(blob, container, undefined, {\n          ignoreLastRenderedPageBreak: false,\n        })\n      })\n      .then(() => {\n        if (!cancelled) setIsLoading(false)\n      })\n      .catch((err) => {\n        if (!cancelled) {\n          console.error('DocxViewer render error:', err)\n          setError('Failed to render document')\n          setIsLoading(false)\n        }\n      })\n\n    return () => {\n      cancelled = true\n    }\n  }, [blob])\n\n  // Measure after the body is unhidden \u2014 offsetWidth is 0 while `hidden` (display: none)\n  useLayoutEffect(() => {\n    const container = containerRef.current\n    if (isLoading || error || !container) return\n    setContentWidth(measureContentWidth(container))\n  }, [isLoading, error])\n\n  const scale =\n    containerWidth > 0 && contentWidth > 0 ? Math.min(1, containerWidth / contentWidth) : 1\n\n  return (\n    <div ref={outerRef} className=\"w-full h-full overflow-auto bg-muted\" data-testid=\"docx-viewer\">\n      {isLoading && (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"text-sm text-muted-foreground\">Loading document...</div>\n        </div>\n      )}\n      {error && (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"text-destructive\">{error}</div>\n        </div>\n      )}\n      <div\n        ref={containerRef}\n        data-testid=\"docx-viewer-body\"\n        className={`docx-viewer-body${isLoading || error ? ' hidden' : ''}`}\n        style={{ zoom: scale }}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": "AAsGI,SAGM,KAHN;AAxFJ,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;AAO7D,SAAS,oBAAoB,WAAgC;AAC3D,MAAI,YAAY;AAChB,YAAU,iBAA8B,cAAc,EAAE,QAAQ,CAAC,YAAY;AAC3E,gBAAY,KAAK,IAAI,WAAW,QAAQ,WAAW;AAAA,EACrD,CAAC;AACD,MAAI,cAAc,EAAG,QAAO;AAE5B,QAAM,UAAU,UAAU,cAA2B,eAAe;AACpE,MAAI,SAAS;AACX,UAAM,QAAQ,OAAO,iBAAiB,OAAO;AAC7C,kBAAc,WAAW,MAAM,WAAW,KAAK,MAAM,WAAW,MAAM,YAAY,KAAK;AAAA,EACzF;AACA,SAAO;AACT;AAEO,SAAS,WAAW,EAAE,KAAK,GAAoB;AACpD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAGlD,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AAEZ,UAAM,cAAc,MAAM,kBAAkB,MAAM,WAAW;AAC7D,gBAAY;AAEZ,UAAM,iBAAiB,IAAI,eAAe,WAAW;AACrD,mBAAe,QAAQ,KAAK;AAC5B,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,QAAI,YAAY;AAEhB,iBAAa,IAAI;AACjB,aAAS,IAAI;AACb,oBAAgB,CAAC;AACjB,cAAU,YAAY;AAEtB,WAAO,cAAc,EAClB,KAAK,CAAC,EAAE,YAAY,MAAM;AACzB,UAAI,UAAW;AACf,aAAO,YAAY,MAAM,WAAW,QAAW;AAAA,QAC7C,6BAA6B;AAAA,MAC/B,CAAC;AAAA,IACH,CAAC,EACA,KAAK,MAAM;AACV,UAAI,CAAC,UAAW,cAAa,KAAK;AAAA,IACpC,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,UAAI,CAAC,WAAW;AACd,gBAAQ,MAAM,4BAA4B,GAAG;AAC7C,iBAAS,2BAA2B;AACpC,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,kBAAgB,MAAM;AACpB,UAAM,YAAY,aAAa;AAC/B,QAAI,aAAa,SAAS,CAAC,UAAW;AACtC,oBAAgB,oBAAoB,SAAS,CAAC;AAAA,EAChD,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,QAAM,QACJ,iBAAiB,KAAK,eAAe,IAAI,KAAK,IAAI,GAAG,iBAAiB,YAAY,IAAI;AAExF,SACE,qBAAC,SAAI,KAAK,UAAU,WAAU,wCAAuC,eAAY,eAC9E;AAAA,iBACC,oBAAC,SAAI,WAAU,2CACb,8BAAC,SAAI,WAAU,iCAAgC,iCAAmB,GACpE;AAAA,IAED,SACC,oBAAC,SAAI,WAAU,2CACb,8BAAC,SAAI,WAAU,oBAAoB,iBAAM,GAC3C;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,mBAAmB,aAAa,QAAQ,YAAY,EAAE;AAAA,QACjE,OAAO,EAAE,MAAM,MAAM;AAAA;AAAA,IACvB;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/viewers/ImageViewer.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+function ImageViewer({ blob, alt }) {
+  const [objectUrl, setObjectUrl] = useState("");
+  useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setObjectUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [blob]);
+  if (!objectUrl) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full w-full overflow-auto flex items-center justify-center p-4 bg-muted/30",
+      "data-testid": "image-viewer",
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: objectUrl,
+          alt,
+          className: "max-w-full max-h-full object-contain rounded shadow-sm",
+          "data-testid": "image-viewer-img"
+        }
+      )
+    }
+  );
+}
+export {
+  ImageViewer
+};
+//# sourceMappingURL=ImageViewer.js.map

package/dist/viewers/ImageViewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/viewers/ImageViewer.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\nexport interface ImageViewerProps {\n  blob: Blob\n  alt: string\n}\n\n/** Renders an image blob, scaled to fit its container. */\nexport function ImageViewer({ blob, alt }: ImageViewerProps) {\n  const [objectUrl, setObjectUrl] = useState<string>('')\n\n  useEffect(() => {\n    const url = URL.createObjectURL(blob)\n    setObjectUrl(url)\n    return () => URL.revokeObjectURL(url)\n  }, [blob])\n\n  if (!objectUrl) return null\n\n  return (\n    <div\n      className=\"h-full w-full overflow-auto flex items-center justify-center p-4 bg-muted/30\"\n      data-testid=\"image-viewer\"\n    >\n      <img\n        src={objectUrl}\n        alt={alt}\n        className=\"max-w-full max-h-full object-contain rounded shadow-sm\"\n        data-testid=\"image-viewer-img\"\n      />\n    </div>\n  )\n}\n"],
+  "mappings": "AAwBM;AAxBN,SAAS,WAAW,gBAAgB;AAQ7B,SAAS,YAAY,EAAE,MAAM,IAAI,GAAqB;AAC3D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,EAAE;AAErD,YAAU,MAAM;AACd,UAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,iBAAa,GAAG;AAChB,WAAO,MAAM,IAAI,gBAAgB,GAAG;AAAA,EACtC,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,UAAW,QAAO;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA,WAAU;AAAA,UACV,eAAY;AAAA;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/viewers/PdfViewer.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkQP3WQSAA_cjs = require('../chunk-QP3WQSAA.cjs');
+require('../chunk-T5FZICXN.cjs');
+
+
+
+Object.defineProperty(exports, "PdfViewer", {
+  enumerable: true,
+  get: function () { return chunkQP3WQSAA_cjs.PdfViewer; }
+});
+Object.defineProperty(exports, "pdfViewerChunk", {
+  enumerable: true,
+  get: function () { return chunkQP3WQSAA_cjs.pdfViewerChunk; }
+});
+//# sourceMappingURL=PdfViewer.cjs.map
+//# sourceMappingURL=PdfViewer.cjs.map

package/dist/viewers/PdfViewer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"PdfViewer.cjs"}

package/dist/viewers/PdfViewer.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { L as LazyChunk } from '../lazy-chunk.d-B6YDLMKI.js';
+import { a as PdfViewerProps, _ as __PdfViewerImpl } from '../PdfViewerImpl.d-B28hLEuj.js';
+export { P as PdfViewerAssets } from '../PdfViewerImpl.d-B28hLEuj.js';
+
+declare const pdfViewerChunk: LazyChunk<typeof __PdfViewerImpl>;
+declare const PdfViewer: ComponentType<PdfViewerProps>;
+
+export { PdfViewer, PdfViewerProps, pdfViewerChunk };

package/dist/viewers/PdfViewer.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { lazyChunk, lazyComponent } from "../lazy-chunk.js";
+const pdfViewerChunk = lazyChunk(() => import("./PdfViewerImpl.js"));
+const PdfViewer = lazyComponent(
+  pdfViewerChunk,
+  (m) => m.PdfViewer,
+  () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full w-full animate-pulse bg-muted/40",
+      "data-slot": "pdf-loading",
+      "aria-busy": "true"
+    }
+  )
+);
+export {
+  PdfViewer,
+  pdfViewerChunk
+};
+//# sourceMappingURL=PdfViewer.js.map

package/dist/viewers/PdfViewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/viewers/PdfViewer.tsx"],
+  "sourcesContent": ["/**\n * `PdfViewer`: a PDF rendered with pdf.js. The PDF engine is large, so it lives in its own chunk,\n * loaded the first time a PDF renders (`pdfViewerChunk`); meanwhile a blank page area.\n */\nimport type { ComponentType } from 'react'\nimport { lazyChunk, lazyComponent } from '../lazy-chunk'\nimport type { PdfViewerProps } from './PdfViewerImpl'\n\nexport type { PdfViewerAssets, PdfViewerProps } from './PdfViewerImpl'\n\nexport const pdfViewerChunk = lazyChunk(() => import('./PdfViewerImpl'))\n\nexport const PdfViewer: ComponentType<PdfViewerProps> = lazyComponent(\n  pdfViewerChunk,\n  (m) => m.PdfViewer,\n  () => (\n    <div\n      className=\"h-full w-full animate-pulse bg-muted/40\"\n      data-slot=\"pdf-loading\"\n      aria-busy=\"true\"\n    />\n  )\n)\n"],
+  "mappings": "AAgBI;AAXJ,SAAS,WAAW,qBAAqB;AAKlC,MAAM,iBAAiB,UAAU,MAAM,OAAO,iBAAiB,CAAC;AAEhE,MAAM,YAA2C;AAAA,EACtD;AAAA,EACA,CAAC,MAAM,EAAE;AAAA,EACT,MACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,aAAU;AAAA,MACV,aAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}