@ai-matrx/media 0.4.4 → 0.5.0

package/dist/viewers.js

@@ -115,13 +115,6 @@ function DownloadIcon(props) {
     /* @__PURE__ */ jsx("path", { d: "m7 10 5 5 5-5" })
   ] });
 }
-function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
-    /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
-    /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
-    /* @__PURE__ */ 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__ */ jsxs("svg", { ...svgProps(props), children: [
     /* @__PURE__ */ 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" }),
@@ -234,12 +227,6 @@ function VideoIcon(props) {
     /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" })
   ] });
 }
-function XIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
-    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-  ] });
-}
 function AlertCircleIcon(props) {
   return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -247,12 +234,6 @@ function AlertCircleIcon(props) {
     /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
   ] });
 }
-function CheckCircle2Icon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
-    /* @__PURE__ */ jsx("path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }),
-    /* @__PURE__ */ jsx("path", { d: "m9 11 3 3L22 4" })
-  ] });
-}
 function GlobeIcon(props) {
   return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -971,181 +952,9 @@ function FileIcon2({
   );
 }
 
-// src/react/upload-progress-list.tsx
-import { memo, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "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] = useState5(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 = useRef2(
-    /* @__PURE__ */ new Map()
-  );
-  const onDismissRef = useRef2(onDismiss);
-  onDismissRef.current = onDismiss;
-  useEffect4(() => {
-    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]);
-  useEffect4(() => {
-    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__ */ jsxs4(
-    "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__ */ jsxs4("div", { className: "flex items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx5("span", { className: "truncate text-xs font-medium text-foreground", children: headerLabel }),
-          completedIds.length > 0 ? /* @__PURE__ */ jsx5(
-            "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__ */ jsx5("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__ */ jsxs4(
-            "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__ */ jsx5(FileIcon2, { fileName: u.fileName, size: 18, className: "shrink-0" }),
-                /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx5("span", { className: "truncate font-medium text-foreground", children: u.fileName }),
-                    /* @__PURE__ */ jsx5("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: failed ? "Failed" : done ? "Done" : `${percent}%` })
-                  ] }),
-                  done ? null : /* @__PURE__ */ jsx5("div", { className: "mt-1 h-1 w-full rounded bg-muted", children: /* @__PURE__ */ jsx5(
-                    "div",
-                    {
-                      className: cn(
-                        "h-1 rounded transition-all",
-                        failed ? "bg-destructive" : "bg-primary"
-                      ),
-                      style: { width: failed ? "100%" : `${percent}%` }
-                    }
-                  ) }),
-                  failed && u.error ? /* @__PURE__ */ jsx5("p", { className: "mt-0.5 truncate text-[10px] text-destructive", children: u.error }) : !done ? /* @__PURE__ */ jsxs4("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: [
-                    formatFileSize(u.bytesUploaded),
-                    " /",
-                    " ",
-                    formatFileSize(u.fileSize)
-                  ] }) : null
-                ] }),
-                canOpen ? /* @__PURE__ */ jsxs4("span", { className: "flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium text-primary", children: [
-                  /* @__PURE__ */ jsx5(ExternalLinkIcon, { className: "h-3 w-3", width: 12, height: 12 }),
-                  "Open"
-                ] }) : done ? /* @__PURE__ */ jsx5(
-                  CheckCircle2Icon,
-                  {
-                    className: "h-4 w-4 shrink-0 text-emerald-500",
-                    width: 16,
-                    height: 16
-                  }
-                ) : failed ? /* @__PURE__ */ jsx5(
-                  AlertCircleIcon,
-                  {
-                    className: "h-4 w-4 shrink-0 text-destructive",
-                    width: 16,
-                    height: 16
-                  }
-                ) : null,
-                done || failed ? /* @__PURE__ */ jsx5(
-                  "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__ */ jsx5(XIcon, { className: "h-3 w-3", width: 12, height: 12 })
-                  }
-                ) : null
-              ]
-            },
-            u.id
-          );
-        }) })
-      ]
-    }
-  );
-}
-var UploadProgressList = memo(UploadProgressListImpl);
-
 // src/viewers/generic-viewer.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { formatFileSize } from "@ai-matrx/kit/format";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function GenericViewer({
   fileName,
   fileSize,
@@ -1159,7 +968,7 @@ function GenericViewer({
   const viewAsTextBusy = generic?.viewAsTextBusy ?? false;
   const hasViewAsText = typeof onViewAsText === "function";
   const hasDownload = typeof onDownload === "function";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
@@ -1167,14 +976,14 @@ function GenericViewer({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx6(FileIcon2, { fileName, size: 48 }),
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx6("p", { className: "max-w-md truncate text-sm font-medium", children: fileName }),
-          /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: formatFileSize(fileSize ?? null) })
+        /* @__PURE__ */ jsx5(FileIcon2, { fileName, size: 48 }),
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx5("p", { className: "max-w-md truncate text-sm font-medium", children: fileName }),
+          /* @__PURE__ */ jsx5("p", { className: "text-xs text-muted-foreground", children: formatFileSize(fileSize ?? null) })
         ] }),
-        /* @__PURE__ */ jsx6("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__ */ jsxs5("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
-          onViewAsText && viewAsTextPrimary ? /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5("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__ */ jsxs4("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+          onViewAsText && viewAsTextPrimary ? /* @__PURE__ */ jsx5(
             ViewAsTextButton,
             {
               onClick: onViewAsText,
@@ -1183,7 +992,7 @@ function GenericViewer({
               variant: "primary"
             }
           ) : null,
-          onDownload ? /* @__PURE__ */ jsxs5(
+          onDownload ? /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -1193,12 +1002,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__ */ jsx6(DownloadIcon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx5(DownloadIcon, { className: "h-4 w-4" }),
                 "Download"
               ]
             }
           ) : null,
-          onViewAsText && !viewAsTextPrimary ? /* @__PURE__ */ jsx6(
+          onViewAsText && !viewAsTextPrimary ? /* @__PURE__ */ jsx5(
             ViewAsTextButton,
             {
               onClick: onViewAsText,
@@ -1208,7 +1017,7 @@ function GenericViewer({
             }
           ) : null
         ] }),
-        !hasDownload && !hasViewAsText ? /* @__PURE__ */ jsx6("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__ */ jsx5("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
       ]
     }
   );
@@ -1219,7 +1028,7 @@ function ViewAsTextButton({
   busy,
   variant
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       type: "button",
@@ -1231,7 +1040,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__ */ jsx6(SpinnerIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx6(FileTextIcon, { className: "h-4 w-4" }),
+        busy ? /* @__PURE__ */ jsx5(SpinnerIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx5(FileTextIcon, { className: "h-4 w-4" }),
         label
       ]
     }
@@ -1239,13 +1048,13 @@ function ViewAsTextButton({
 }
 
 // src/viewers/html-viewer.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 
 // src/viewers/markup-chrome.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function useMarkupMode(controls) {
-  const [localMode, setLocalMode] = useState6("rendered");
+  const [localMode, setLocalMode] = useState5("rendered");
   const controlled = controls?.mode !== void 0;
   return {
     mode: controls?.mode ?? localMode,
@@ -1260,23 +1069,23 @@ function MarkupModeToggle({
   renderedIcon = "image",
   className
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-0.5", className), children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-0.5", className), children: [
+    /* @__PURE__ */ jsx6(
       ToggleButton,
       {
         active: mode === "rendered",
         onClick: () => onChange("rendered"),
         label: renderedLabel,
-        icon: renderedIcon === "globe" ? /* @__PURE__ */ jsx7(GlobeIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(ImageIcon, { className: "h-3.5 w-3.5" })
+        icon: renderedIcon === "globe" ? /* @__PURE__ */ jsx6(GlobeIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(ImageIcon, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx6(
       ToggleButton,
       {
         active: mode === "source",
         onClick: () => onChange("source"),
         label: "Source",
-        icon: /* @__PURE__ */ jsx7(CodeIcon, { className: "h-3.5 w-3.5" })
+        icon: /* @__PURE__ */ jsx6(CodeIcon, { className: "h-3.5 w-3.5" })
       }
     )
   ] });
@@ -1287,7 +1096,7 @@ function ToggleButton({
   icon,
   label
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
@@ -1299,14 +1108,14 @@ function ToggleButton({
       ),
       children: [
         icon,
-        /* @__PURE__ */ jsx7("span", { children: label })
+        /* @__PURE__ */ jsx6("span", { children: label })
       ]
     }
   );
 }
 
 // src/viewers/html-viewer.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var VIEWPORT_WIDTH = {
   mobile: 390,
   tablet: 768,
@@ -1315,10 +1124,10 @@ var VIEWPORT_WIDTH = {
 function HtmlViewer(props) {
   const { className, fileName, markupControls } = props;
   const { mode, setMode, controlled } = useMarkupMode(markupControls);
-  return /* @__PURE__ */ jsxs7("div", { className: cn("flex h-full w-full flex-col", className), children: [
-    controlled ? null : /* @__PURE__ */ jsxs7("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__ */ jsx8("span", { className: "truncate font-medium text-foreground", children: fileName }),
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex h-full w-full flex-col", className), children: [
+    controlled ? null : /* @__PURE__ */ jsxs6("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__ */ jsx7("span", { className: "truncate font-medium text-foreground", children: fileName }),
+      /* @__PURE__ */ jsx7(
         MarkupModeToggle,
         {
           mode,
@@ -1328,19 +1137,19 @@ function HtmlViewer(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "relative min-h-0 flex-1", children: mode === "rendered" ? /* @__PURE__ */ jsx8(HtmlRenderedView, { ...props }) : /* @__PURE__ */ jsx8(HtmlSourceView, { ...props }) })
+    /* @__PURE__ */ jsx7("div", { className: "relative min-h-0 flex-1", children: mode === "rendered" ? /* @__PURE__ */ jsx7(HtmlRenderedView, { ...props }) : /* @__PURE__ */ jsx7(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] = useState7(false);
-  useEffect5(() => {
+  const [errored, setErrored] = useState6(false);
+  useEffect4(() => {
     setErrored(false);
   }, [reloadKey, url]);
   if (unavailable) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       ViewerError,
       {
         title: "This page isn't available",
@@ -1348,18 +1157,18 @@ function HtmlRenderedView({ source, fileName, markupControls }) {
       }
     );
   }
-  if (!url) return /* @__PURE__ */ jsx8(ViewerSkeleton, {});
-  if (errored) return /* @__PURE__ */ jsx8(ViewerError, { title: "Preview unavailable" });
+  if (!url) return /* @__PURE__ */ jsx7(ViewerSkeleton, {});
+  if (errored) return /* @__PURE__ */ jsx7(ViewerError, { title: "Preview unavailable" });
   const constrained = viewport !== "auto";
   const width = constrained ? VIEWPORT_WIDTH[viewport] : void 0;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn(
         "h-full w-full overflow-auto bg-muted/10",
         constrained && "flex items-start justify-center"
       ),
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx7(
         "div",
         {
           className: cn(
@@ -1367,7 +1176,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__ */ jsx8(
+          children: /* @__PURE__ */ jsx7(
             "iframe",
             {
               src: url,
@@ -1386,13 +1195,13 @@ function HtmlRenderedView({ source, fileName, markupControls }) {
 }
 function HtmlSourceView({ source, maxBytes = 1024 * 1024 }) {
   const { text, error, loading } = useViewerText(source, maxBytes);
-  if (error) return /* @__PURE__ */ jsx8(ViewerError, { title: "Couldn't load source", message: error });
-  if (loading || text === null) return /* @__PURE__ */ jsx8(ViewerSkeleton, {});
-  return /* @__PURE__ */ jsx8("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__ */ jsx7(ViewerError, { title: "Couldn't load source", message: error });
+  if (loading || text === null) return /* @__PURE__ */ jsx7(ViewerSkeleton, {});
+  return /* @__PURE__ */ jsx7("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
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 
 // src/viewers/transparency-grid.ts
 var TRANSPARENCY_GRID_STYLE = {
@@ -1402,11 +1211,11 @@ var TRANSPARENCY_GRID_STYLE = {
 };
 
 // src/viewers/svg-viewer.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SvgViewer(props) {
   const { className, markupControls } = props;
   const { mode, setMode, controlled } = useMarkupMode(markupControls);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
@@ -1414,7 +1223,7 @@ function SvgViewer(props) {
         className
       ),
       children: [
-        controlled ? null : /* @__PURE__ */ jsx9(
+        controlled ? null : /* @__PURE__ */ jsx8(
           MarkupModeToggle,
           {
             mode,
@@ -1422,15 +1231,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__ */ jsx9(SvgRenderedView, { ...props }) : /* @__PURE__ */ jsx9(SvgSourceView, { ...props })
+        mode === "rendered" ? /* @__PURE__ */ jsx8(SvgRenderedView, { ...props }) : /* @__PURE__ */ jsx8(SvgSourceView, { ...props })
       ]
     }
   );
 }
 function SvgRenderedView({ source, fileName }) {
   const fromClient = useMediaBlob(source.kind === "ref" ? source.ref : null);
-  const [normalizedUrl, setNormalizedUrl] = useState8(null);
-  useEffect6(() => {
+  const [normalizedUrl, setNormalizedUrl] = useState7(null);
+  useEffect5(() => {
     const blob = fromClient.blob;
     if (!blob || blob.type === "image/svg+xml") {
       setNormalizedUrl(null);
@@ -1445,7 +1254,7 @@ function SvgRenderedView({ source, fileName }) {
   const loading = source.kind === "ref" && fromClient.loading;
   const error = source.kind === "ref" ? fromClient.error : null;
   if (error) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(
       ViewerError,
       {
         title: "SVG could not be rendered",
@@ -1454,13 +1263,13 @@ function SvgRenderedView({ source, fileName }) {
       }
     );
   }
-  if (loading || !url) return /* @__PURE__ */ jsx9(ViewerSkeleton, { className: "flex-1" });
-  return /* @__PURE__ */ jsx9(
+  if (loading || !url) return /* @__PURE__ */ jsx8(ViewerSkeleton, { className: "flex-1" });
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: "flex flex-1 items-center justify-center overflow-auto p-4",
       style: TRANSPARENCY_GRID_STYLE,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx8(
         "img",
         {
           src: url,
@@ -1473,40 +1282,40 @@ function SvgRenderedView({ source, fileName }) {
 }
 function SvgSourceView({ source, maxBytes = 1024 * 1024 }) {
   const { text, error, loading } = useViewerText(source, maxBytes);
-  if (error) return /* @__PURE__ */ jsx9(ViewerError, { title: "Could not load source", message: error });
-  if (loading || text === null) return /* @__PURE__ */ jsx9(ViewerSkeleton, { className: "flex-1" });
-  return /* @__PURE__ */ jsx9("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__ */ jsx8(ViewerError, { title: "Could not load source", message: error });
+  if (loading || text === null) return /* @__PURE__ */ jsx8(ViewerSkeleton, { className: "flex-1" });
+  return /* @__PURE__ */ jsx8("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
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TextViewer({
   source,
   className,
   maxBytes = 1024 * 1024
 }) {
   const { text, error, loading, truncated } = useViewerText(source, maxBytes);
-  if (error) return /* @__PURE__ */ jsx10(ViewerError, { message: error, className });
+  if (error) return /* @__PURE__ */ jsx9(ViewerError, { message: error, className });
   if (loading || text === null) {
-    return /* @__PURE__ */ jsx10(ViewerSkeleton, { tone: "plain", className });
+    return /* @__PURE__ */ jsx9(ViewerSkeleton, { tone: "plain", className });
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn("flex h-full w-full flex-col overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxs9(ViewerToolbar, { children: [
-          /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground", children: truncated ? `Preview ${truncationNote(maxBytes)}.` : `${text.length.toLocaleString()} characters` }),
-          /* @__PURE__ */ jsx10(ViewerCopyButton, { text })
+        /* @__PURE__ */ jsxs8(ViewerToolbar, { children: [
+          /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: truncated ? `Preview ${truncationNote(maxBytes)}.` : `${text.length.toLocaleString()} characters` }),
+          /* @__PURE__ */ jsx9(ViewerCopyButton, { text })
         ] }),
-        /* @__PURE__ */ jsx10("pre", { className: "flex-1 overflow-auto bg-background p-3 font-mono text-xs leading-5 break-words whitespace-pre-wrap", children: text })
+        /* @__PURE__ */ jsx9("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
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var ENGINE_FOR_KIND = {
   pdf: "a PDF engine (e.g. PDF.js / react-pdf)",
   markdown: "a Markdown renderer",
@@ -1523,22 +1332,22 @@ function MediaViewerUnavailable({
 }) {
   const engine = ENGINE_FOR_KIND[kind] ?? `a "${kind}" viewer`;
   const generic = props.generic;
-  return /* @__PURE__ */ jsxs10("div", { className: cn("flex h-full w-full flex-col", props.className), children: [
-    /* @__PURE__ */ jsxs10("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__ */ jsxs9("div", { className: cn("flex h-full w-full flex-col", props.className), children: [
+    /* @__PURE__ */ jsxs9("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__ */ jsxs10("code", { className: "font-mono", children: [
+      /* @__PURE__ */ jsxs9("code", { className: "font-mono", children: [
         'registerMediaViewer("',
         kind,
         '", \u2026)'
       ] }),
       "."
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx10(
       GenericViewer,
       {
         ...props,
@@ -1606,7 +1415,7 @@ function getPreviewKind(fileName, mimeType) {
 }
 
 // src/viewers/media-file-viewer.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var BUILT_IN = {
   text: TextViewer,
   code: CodeViewer,
@@ -1621,7 +1430,7 @@ function MediaFileViewer({
   const kind = previewKind ?? getPreviewKind(props.fileName, props.mimeType ?? null);
   const viewer = getMediaViewer(kind) ?? BUILT_IN[kind];
   if (viewer) return createElement3(viewer, props);
-  return /* @__PURE__ */ jsx12(MediaViewerUnavailable, { ...props, kind });
+  return /* @__PURE__ */ jsx11(MediaViewerUnavailable, { ...props, kind });
 }
 export {
   CodeViewer,