@ai-matrx/media 0.4.5 → 0.5.1

package/dist/viewers.cjs

@@ -47,7 +47,7 @@ __export(viewers_exports, {
 module.exports = __toCommonJS(viewers_exports);
 
 // src/viewers/media-file-viewer.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 
 // src/viewers/registry.ts
 var VIEWER_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.viewer-registry");
@@ -161,13 +161,6 @@ function DownloadIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m7 10 5 5 5-5" })
   ] });
 }
-function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3h6v6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 14 21 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
-  ] });
-}
 function FileIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
@@ -280,12 +273,6 @@ function VideoIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" })
   ] });
 }
-function XIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
-  ] });
-}
 function AlertCircleIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
@@ -293,12 +280,6 @@ function AlertCircleIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
   ] });
 }
-function CheckCircle2Icon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 11 3 3L22 4" })
-  ] });
-}
 function GlobeIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
@@ -1013,181 +994,9 @@ function FileIcon2({
   );
 }
 
-// src/react/upload-progress-list.tsx
-var import_react8 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AUTO_DISMISS_MS = 1e4;
-function formatFileSize(bytes) {
-  if (bytes == null || !Number.isFinite(bytes) || bytes < 0) return "\u2014";
-  if (bytes < 1024) return `${bytes} B`;
-  const units = ["KB", "MB", "GB", "TB"];
-  let value = bytes;
-  let unit = -1;
-  do {
-    value /= 1024;
-    unit += 1;
-  } while (value >= 1024 && unit < units.length - 1);
-  return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit] ?? "TB"}`;
-}
-function UploadProgressListImpl({
-  uploads,
-  onDismiss,
-  onOpenFile,
-  className
-}) {
-  const [hovered, setHovered] = (0, import_react8.useState)(false);
-  const activeCount = uploads.filter((u) => u.status === "uploading").length;
-  const successCount = uploads.filter((u) => u.status === "success").length;
-  const errorCount = uploads.filter((u) => u.status === "error").length;
-  const timersRef = (0, import_react8.useRef)(
-    /* @__PURE__ */ new Map()
-  );
-  const onDismissRef = (0, import_react8.useRef)(onDismiss);
-  onDismissRef.current = onDismiss;
-  (0, import_react8.useEffect)(() => {
-    const timers = timersRef.current;
-    if (hovered) {
-      timers.forEach((t) => clearTimeout(t));
-      timers.clear();
-      return;
-    }
-    for (const u of uploads) {
-      if (u.status !== "success") continue;
-      if (timers.has(u.id)) continue;
-      const elapsed = u.completedAt ? Date.now() - u.completedAt : 0;
-      const remaining = Math.max(0, AUTO_DISMISS_MS - elapsed);
-      const handle = setTimeout(() => {
-        timers.delete(u.id);
-        onDismissRef.current(u.id);
-      }, remaining);
-      timers.set(u.id, handle);
-    }
-    const liveSuccessIds = new Set(
-      uploads.filter((u) => u.status === "success").map((u) => u.id)
-    );
-    for (const [id, handle] of timers) {
-      if (!liveSuccessIds.has(id)) {
-        clearTimeout(handle);
-        timers.delete(id);
-      }
-    }
-  }, [uploads, hovered]);
-  (0, import_react8.useEffect)(() => {
-    const timers = timersRef.current;
-    return () => {
-      timers.forEach((t) => clearTimeout(t));
-      timers.clear();
-    };
-  }, []);
-  if (uploads.length === 0) return null;
-  const headerLabel = activeCount > 0 ? `Uploading ${activeCount} file${activeCount === 1 ? "" : "s"}\u2026` : errorCount > 0 && successCount === 0 ? `${errorCount} upload${errorCount === 1 ? "" : "s"} failed` : `Uploaded ${successCount} file${successCount === 1 ? "" : "s"}`;
-  const completedIds = uploads.filter((u) => u.status === "success" || u.status === "error").map((u) => u.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      className: cn(
-        "overflow-hidden rounded-lg border bg-background/95 shadow-lg backdrop-blur",
-        className
-      ),
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      "aria-label": "Uploads",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate text-xs font-medium text-foreground", children: headerLabel }),
-          completedIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                for (const id of completedIds) onDismiss(id);
-              },
-              className: "shrink-0 rounded px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground",
-              children: "Clear"
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "max-h-72 space-y-1 overflow-y-auto p-2", children: uploads.map((u) => {
-          const percent = u.fileSize > 0 ? Math.min(100, Math.round(u.bytesUploaded / u.fileSize * 100)) : 0;
-          const done = u.status === "success";
-          const failed = u.status === "error";
-          const canOpen = done && !!u.fileId && !!onOpenFile;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-            "li",
-            {
-              className: cn(
-                "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs",
-                canOpen && "cursor-pointer hover:bg-accent/60"
-              ),
-              onClick: canOpen ? () => onOpenFile(u.fileId) : void 0,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileIcon2, { fileName: u.fileName, size: 18, className: "shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate font-medium text-foreground", children: u.fileName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: failed ? "Failed" : done ? "Done" : `${percent}%` })
-                  ] }),
-                  done ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 h-1 w-full rounded bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                    "div",
-                    {
-                      className: cn(
-                        "h-1 rounded transition-all",
-                        failed ? "bg-destructive" : "bg-primary"
-                      ),
-                      style: { width: failed ? "100%" : `${percent}%` }
-                    }
-                  ) }),
-                  failed && u.error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-0.5 truncate text-[10px] text-destructive", children: u.error }) : !done ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: [
-                    formatFileSize(u.bytesUploaded),
-                    " /",
-                    " ",
-                    formatFileSize(u.fileSize)
-                  ] }) : null
-                ] }),
-                canOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium text-primary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExternalLinkIcon, { className: "h-3 w-3", width: 12, height: 12 }),
-                  "Open"
-                ] }) : done ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  CheckCircle2Icon,
-                  {
-                    className: "h-4 w-4 shrink-0 text-emerald-500",
-                    width: 16,
-                    height: 16
-                  }
-                ) : failed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  AlertCircleIcon,
-                  {
-                    className: "h-4 w-4 shrink-0 text-destructive",
-                    width: 16,
-                    height: 16
-                  }
-                ) : null,
-                done || failed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onDismiss(u.id);
-                    },
-                    "aria-label": "Dismiss",
-                    className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { className: "h-3 w-3", width: 12, height: 12 })
-                  }
-                ) : null
-              ]
-            },
-            u.id
-          );
-        }) })
-      ]
-    }
-  );
-}
-var UploadProgressList = (0, import_react8.memo)(UploadProgressListImpl);
-
 // src/viewers/generic-viewer.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_format = require("@ai-matrx/kit/format");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function GenericViewer({
   fileName,
   fileSize,
@@ -1201,7 +1010,7 @@ function GenericViewer({
   const viewAsTextBusy = generic?.viewAsTextBusy ?? false;
   const hasViewAsText = typeof onViewAsText === "function";
   const hasDownload = typeof onDownload === "function";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: cn(
@@ -1209,14 +1018,14 @@ function GenericViewer({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon2, { fileName, size: 48 }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "max-w-md truncate text-sm font-medium", children: fileName }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-muted-foreground", children: formatFileSize(fileSize ?? null) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileIcon2, { fileName, size: 48 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "max-w-md truncate text-sm font-medium", children: fileName }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-muted-foreground", children: (0, import_format.formatFileSize)(fileSize ?? null) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "max-w-sm text-sm text-muted-foreground", children: generic?.message ?? (hasViewAsText ? "No built-in previewer for this file type." : "This file type can't be previewed here.") }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
-          onViewAsText && viewAsTextPrimary ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "max-w-sm text-sm text-muted-foreground", children: generic?.message ?? (hasViewAsText ? "No built-in previewer for this file type." : "This file type can't be previewed here.") }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+          onViewAsText && viewAsTextPrimary ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             ViewAsTextButton,
             {
               onClick: onViewAsText,
@@ -1225,7 +1034,7 @@ function GenericViewer({
               variant: "primary"
             }
           ) : null,
-          onDownload ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          onDownload ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "button",
             {
               type: "button",
@@ -1235,12 +1044,12 @@ function GenericViewer({
                 hasViewAsText && viewAsTextPrimary ? "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DownloadIcon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DownloadIcon, { className: "h-4 w-4" }),
                 "Download"
               ]
             }
           ) : null,
-          onViewAsText && !viewAsTextPrimary ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          onViewAsText && !viewAsTextPrimary ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             ViewAsTextButton,
             {
               onClick: onViewAsText,
@@ -1250,7 +1059,7 @@ function GenericViewer({
             }
           ) : null
         ] }),
-        !hasDownload && !hasViewAsText ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "max-w-sm text-[11px] text-muted-foreground/70", children: "Download it from the file's actions menu to open it in another application." }) : null
+        !hasDownload && !hasViewAsText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "max-w-sm text-[11px] text-muted-foreground/70", children: "Download it from the file's actions menu to open it in another application." }) : null
       ]
     }
   );
@@ -1261,7 +1070,7 @@ function ViewAsTextButton({
   busy,
   variant
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
       type: "button",
@@ -1273,7 +1082,7 @@ function ViewAsTextButton({
         variant === "primary" ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground"
       ),
       children: [
-        busy ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileTextIcon, { className: "h-4 w-4" }),
+        busy ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileTextIcon, { className: "h-4 w-4" }),
         label
       ]
     }
@@ -1281,13 +1090,13 @@ function ViewAsTextButton({
 }
 
 // src/viewers/html-viewer.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/viewers/markup-chrome.tsx
-var import_react9 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function useMarkupMode(controls) {
-  const [localMode, setLocalMode] = (0, import_react9.useState)("rendered");
+  const [localMode, setLocalMode] = (0, import_react8.useState)("rendered");
   const controlled = controls?.mode !== void 0;
   return {
     mode: controls?.mode ?? localMode,
@@ -1302,23 +1111,23 @@ function MarkupModeToggle({
   renderedIcon = "image",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ToggleButton,
       {
         active: mode === "rendered",
         onClick: () => onChange("rendered"),
         label: renderedLabel,
-        icon: renderedIcon === "globe" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlobeIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ImageIcon, { className: "h-3.5 w-3.5" })
+        icon: renderedIcon === "globe" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobeIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageIcon, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ToggleButton,
       {
         active: mode === "source",
         onClick: () => onChange("source"),
         label: "Source",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CodeIcon, { className: "h-3.5 w-3.5" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CodeIcon, { className: "h-3.5 w-3.5" })
       }
     )
   ] });
@@ -1329,7 +1138,7 @@ function ToggleButton({
   icon,
   label
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
       type: "button",
@@ -1341,14 +1150,14 @@ function ToggleButton({
       ),
       children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label })
       ]
     }
   );
 }
 
 // src/viewers/html-viewer.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var VIEWPORT_WIDTH = {
   mobile: 390,
   tablet: 768,
@@ -1357,10 +1166,10 @@ var VIEWPORT_WIDTH = {
 function HtmlViewer(props) {
   const { className, fileName, markupControls } = props;
   const { mode, setMode, controlled } = useMarkupMode(markupControls);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex h-full w-full flex-col", className), children: [
-    controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-border/60 bg-background px-3 py-1.5 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate font-medium text-foreground", children: fileName }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex h-full w-full flex-col", className), children: [
+    controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-border/60 bg-background px-3 py-1.5 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate font-medium text-foreground", children: fileName }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         MarkupModeToggle,
         {
           mode,
@@ -1370,19 +1179,19 @@ function HtmlViewer(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative min-h-0 flex-1", children: mode === "rendered" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HtmlRenderedView, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HtmlSourceView, { ...props }) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative min-h-0 flex-1", children: mode === "rendered" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HtmlRenderedView, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HtmlSourceView, { ...props }) })
   ] });
 }
 function HtmlRenderedView({ source, fileName, markupControls }) {
   const { url, unavailable } = useViewerDisplayUrl(source);
   const viewport = markupControls?.viewport ?? "auto";
   const reloadKey = markupControls?.reloadKey ?? 0;
-  const [errored, setErrored] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const [errored, setErrored] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     setErrored(false);
   }, [reloadKey, url]);
   if (unavailable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ViewerError,
       {
         title: "This page isn't available",
@@ -1390,18 +1199,18 @@ function HtmlRenderedView({ source, fileName, markupControls }) {
       }
     );
   }
-  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerSkeleton, {});
-  if (errored) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerError, { title: "Preview unavailable" });
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ViewerSkeleton, {});
+  if (errored) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ViewerError, { title: "Preview unavailable" });
   const constrained = viewport !== "auto";
   const width = constrained ? VIEWPORT_WIDTH[viewport] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: cn(
         "h-full w-full overflow-auto bg-muted/10",
         constrained && "flex items-start justify-center"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           className: cn(
@@ -1409,7 +1218,7 @@ function HtmlRenderedView({ source, fileName, markupControls }) {
             constrained ? "my-4 overflow-hidden rounded-md border border-border/60 shadow-lg" : "w-full"
           ),
           style: constrained ? { width } : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "iframe",
             {
               src: url,
@@ -1428,13 +1237,13 @@ function HtmlRenderedView({ source, fileName, markupControls }) {
 }
 function HtmlSourceView({ source, maxBytes = 1024 * 1024 }) {
   const { text, error, loading } = useViewerText(source, maxBytes);
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerError, { title: "Couldn't load source", message: error });
-  if (loading || text === null) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerSkeleton, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "h-full w-full overflow-auto bg-muted/10 p-4 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: text });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ViewerError, { title: "Couldn't load source", message: error });
+  if (loading || text === null) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ViewerSkeleton, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "h-full w-full overflow-auto bg-muted/10 p-4 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: text });
 }
 
 // src/viewers/svg-viewer.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 
 // src/viewers/transparency-grid.ts
 var TRANSPARENCY_GRID_STYLE = {
@@ -1444,11 +1253,11 @@ var TRANSPARENCY_GRID_STYLE = {
 };
 
 // src/viewers/svg-viewer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SvgViewer(props) {
   const { className, markupControls } = props;
   const { mode, setMode, controlled } = useMarkupMode(markupControls);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: cn(
@@ -1456,7 +1265,7 @@ function SvgViewer(props) {
         className
       ),
       children: [
-        controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           MarkupModeToggle,
           {
             mode,
@@ -1464,15 +1273,15 @@ function SvgViewer(props) {
             className: "absolute top-3 right-3 z-10 rounded-md border border-border bg-background/95 p-0.5 shadow-sm backdrop-blur-sm"
           }
         ),
-        mode === "rendered" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SvgRenderedView, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SvgSourceView, { ...props })
+        mode === "rendered" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SvgRenderedView, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SvgSourceView, { ...props })
       ]
     }
   );
 }
 function SvgRenderedView({ source, fileName }) {
   const fromClient = useMediaBlob(source.kind === "ref" ? source.ref : null);
-  const [normalizedUrl, setNormalizedUrl] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const [normalizedUrl, setNormalizedUrl] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     const blob = fromClient.blob;
     if (!blob || blob.type === "image/svg+xml") {
       setNormalizedUrl(null);
@@ -1487,7 +1296,7 @@ function SvgRenderedView({ source, fileName }) {
   const loading = source.kind === "ref" && fromClient.loading;
   const error = source.kind === "ref" ? fromClient.error : null;
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ViewerError,
       {
         title: "SVG could not be rendered",
@@ -1496,13 +1305,13 @@ function SvgRenderedView({ source, fileName }) {
       }
     );
   }
-  if (loading || !url) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSkeleton, { className: "flex-1" });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  if (loading || !url) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerSkeleton, { className: "flex-1" });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: "flex flex-1 items-center justify-center overflow-auto p-4",
       style: TRANSPARENCY_GRID_STYLE,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "img",
         {
           src: url,
@@ -1515,40 +1324,40 @@ function SvgRenderedView({ source, fileName }) {
 }
 function SvgSourceView({ source, maxBytes = 1024 * 1024 }) {
   const { text, error, loading } = useViewerText(source, maxBytes);
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerError, { title: "Could not load source", message: error });
-  if (loading || text === null) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSkeleton, { className: "flex-1" });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "m-0 flex-1 overflow-auto bg-muted/20 px-4 py-3 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-foreground", children: text });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerError, { title: "Could not load source", message: error });
+  if (loading || text === null) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerSkeleton, { className: "flex-1" });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "m-0 flex-1 overflow-auto bg-muted/20 px-4 py-3 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-foreground", children: text });
 }
 
 // src/viewers/text-viewer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TextViewer({
   source,
   className,
   maxBytes = 1024 * 1024
 }) {
   const { text, error, loading, truncated } = useViewerText(source, maxBytes);
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ViewerError, { message: error, className });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerError, { message: error, className });
   if (loading || text === null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ViewerSkeleton, { tone: "plain", className });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSkeleton, { tone: "plain", className });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: cn("flex h-full w-full flex-col overflow-hidden", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ViewerToolbar, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-muted-foreground", children: truncated ? `Preview ${truncationNote(maxBytes)}.` : `${text.length.toLocaleString()} characters` }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ViewerCopyButton, { text })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ViewerToolbar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground", children: truncated ? `Preview ${truncationNote(maxBytes)}.` : `${text.length.toLocaleString()} characters` }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerCopyButton, { text })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { className: "flex-1 overflow-auto bg-background p-3 font-mono text-xs leading-5 break-words whitespace-pre-wrap", children: text })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "flex-1 overflow-auto bg-background p-3 font-mono text-xs leading-5 break-words whitespace-pre-wrap", children: text })
       ]
     }
   );
 }
 
 // src/viewers/unavailable-viewer.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ENGINE_FOR_KIND = {
   pdf: "a PDF engine (e.g. PDF.js / react-pdf)",
   markdown: "a Markdown renderer",
@@ -1565,22 +1374,22 @@ function MediaViewerUnavailable({
 }) {
   const engine = ENGINE_FOR_KIND[kind] ?? `a "${kind}" viewer`;
   const generic = props.generic;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex h-full w-full flex-col", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "shrink-0 border-b border-amber-500/30 bg-amber-500/10 px-3 py-2 text-center text-xs text-amber-700 dark:text-amber-300", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex h-full w-full flex-col", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "shrink-0 border-b border-amber-500/30 bg-amber-500/10 px-3 py-2 text-center text-xs text-amber-700 dark:text-amber-300", children: [
       "No ",
       kind,
       " viewer is registered in this app, so this file can't be displayed here. An app developer registers ",
       engine,
       " with",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("code", { className: "font-mono", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("code", { className: "font-mono", children: [
         'registerMediaViewer("',
         kind,
         '", \u2026)'
       ] }),
       "."
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       GenericViewer,
       {
         ...props,
@@ -1648,7 +1457,7 @@ function getPreviewKind(fileName, mimeType) {
 }
 
 // src/viewers/media-file-viewer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var BUILT_IN = {
   text: TextViewer,
   code: CodeViewer,
@@ -1662,7 +1471,7 @@ function MediaFileViewer({
 }) {
   const kind = previewKind ?? getPreviewKind(props.fileName, props.mimeType ?? null);
   const viewer = getMediaViewer(kind) ?? BUILT_IN[kind];
-  if (viewer) return (0, import_react12.createElement)(viewer, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MediaViewerUnavailable, { ...props, kind });
+  if (viewer) return (0, import_react11.createElement)(viewer, props);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MediaViewerUnavailable, { ...props, kind });
 }
 //# sourceMappingURL=viewers.cjs.map