@ai-matrx/media 0.3.0 → 0.4.0

package/dist/viewers.cjs

@@ -0,0 +1,1747 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/viewers.ts
+var viewers_exports = {};
+__export(viewers_exports, {
+  CodeViewer: () => CodeViewer,
+  GenericViewer: () => GenericViewer,
+  HtmlViewer: () => HtmlViewer,
+  MediaFileViewer: () => MediaFileViewer,
+  MediaViewerUnavailable: () => MediaViewerUnavailable,
+  SvgViewer: () => SvgViewer,
+  TRANSPARENCY_GRID_STYLE: () => TRANSPARENCY_GRID_STYLE,
+  TextViewer: () => TextViewer,
+  ViewerCopyButton: () => ViewerCopyButton,
+  ViewerError: () => ViewerError,
+  ViewerSkeleton: () => ViewerSkeleton,
+  ViewerToolbar: () => ViewerToolbar,
+  detectCodeLanguage: () => detectCodeLanguage,
+  getMediaCodeHighlighter: () => getMediaCodeHighlighter,
+  getMediaViewer: () => getMediaViewer,
+  getPreviewKind: () => getPreviewKind,
+  registerMediaCodeHighlighter: () => registerMediaCodeHighlighter,
+  registerMediaViewer: () => registerMediaViewer,
+  registeredMediaViewerKinds: () => registeredMediaViewerKinds,
+  useViewerBytes: () => useViewerBytes,
+  useViewerDisplayUrl: () => useViewerDisplayUrl,
+  useViewerText: () => useViewerText
+});
+module.exports = __toCommonJS(viewers_exports);
+
+// src/viewers/registry.ts
+var VIEWER_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.viewer-registry");
+var HIGHLIGHTER_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.code-highlighter");
+function slots() {
+  return globalThis;
+}
+function viewerMap() {
+  const host = slots();
+  const existing = host[VIEWER_SLOT];
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  host[VIEWER_SLOT] = created;
+  return created;
+}
+function registerMediaViewer(kind, viewer) {
+  const map = viewerMap();
+  const previous = map.get(kind);
+  map.set(kind, viewer);
+  return () => {
+    if (previous) map.set(kind, previous);
+    else map.delete(kind);
+  };
+}
+function getMediaViewer(kind) {
+  return viewerMap().get(kind) ?? null;
+}
+function registeredMediaViewerKinds() {
+  return [...viewerMap().keys()];
+}
+function registerMediaCodeHighlighter(highlighter) {
+  const host = slots();
+  const previous = host[HIGHLIGHTER_SLOT] ?? null;
+  host[HIGHLIGHTER_SLOT] = highlighter;
+  return () => {
+    host[HIGHLIGHTER_SLOT] = previous;
+  };
+}
+function getMediaCodeHighlighter() {
+  return slots()[HIGHLIGHTER_SLOT] ?? null;
+}
+
+// src/viewers/code-viewer.tsx
+var import_react7 = require("react");
+
+// src/react/cn.ts
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)(inputs.filter(Boolean).join(" "));
+}
+
+// src/viewers/chrome.tsx
+var import_react = require("react");
+
+// src/react/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function svgProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function ArchiveIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "20", height: "5", x: "2", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 12h4" })
+  ] });
+}
+function BracesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...svgProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function CodeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m16 18 6-6-6-6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m8 6-6 6 6 6" })
+  ] });
+}
+function CopyIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] });
+}
+function DatabaseIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 5V19A9 3 0 0 0 21 19V5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12A9 3 0 0 0 21 12" })
+  ] });
+}
+function DownloadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 15V3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" })
+  ] });
+}
+function FileAudioIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6.835V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-.343" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 19a2 2 0 0 1 4 0v1a2 2 0 0 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 0 1-4 0v-1a2 2 0 0 1 4 0" })
+  ] });
+}
+function FileCodeIcon(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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 12.5 8 15l2 2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m14 12.5 2 2.5-2 2.5" })
+  ] });
+}
+function FileJsonIcon(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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1" })
+  ] });
+}
+function FileSpreadsheetIcon(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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 13h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 13h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 17h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 17h2" })
+  ] });
+}
+function FileTextIcon(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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 17H8" })
+  ] });
+}
+function FileTypeIcon(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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 18h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 13v-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v.5" })
+  ] });
+}
+function FileVideoIcon(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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.033 13.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z" })
+  ] });
+}
+function FolderIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...svgProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }) });
+}
+function FolderOpenIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...svgProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" }) });
+}
+function ImageIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+  ] });
+}
+function MusicIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "18", cy: "16", r: "3" })
+  ] });
+}
+function PackageBoxIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 22V12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "3.29 7 12 12 20.71 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m7.5 4.27 9 5.15" })
+  ] });
+}
+function PenToolIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m2.3 2.3 7.286 7.286" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "2" })
+  ] });
+}
+function SubtitlesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4" })
+  ] });
+}
+function VideoIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" }),
+    /* @__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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+    /* @__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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h20" })
+  ] });
+}
+function SpinnerIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...svgProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+
+// src/viewers/chrome.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ViewerSkeleton({
+  className,
+  tone = "muted"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full items-center justify-center",
+        tone === "muted" && "bg-muted/20",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-6 w-40 animate-pulse rounded bg-muted" })
+    }
+  );
+}
+function ViewerError({
+  title = "Couldn't load this file",
+  message,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      ),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlertCircleIcon, { className: "h-6 w-6 text-destructive" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-sm font-semibold", children: title }),
+          message ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "max-w-md text-xs break-words text-muted-foreground", children: message }) : null,
+          hint ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "max-w-md text-[11px] text-muted-foreground/80", children: hint }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ViewerCopyButton({
+  text,
+  className
+}) {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  const onCopy = (0, import_react.useCallback)(() => {
+    if (text == null) return;
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    }).catch(() => {
+    });
+  }, [text]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "aria-label": "Copy text to clipboard",
+      title: "Copy text to clipboard",
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
+        copied && "text-emerald-600 dark:text-emerald-400",
+        className
+      ),
+      children: [
+        copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyIcon, { className: "h-3.5 w-3.5" }),
+        copied ? "Copied" : "Copy"
+      ]
+    }
+  );
+}
+function ViewerToolbar({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-between gap-2 border-b border-border/60 bg-muted/20 px-3 py-1 text-xs",
+        className
+      ),
+      children
+    }
+  );
+}
+function truncationNote(maxBytes) {
+  const mb = maxBytes / 1024 / 1024;
+  return `truncated to the first ${mb >= 1 ? `${mb.toFixed(0)}MB` : `${(maxBytes / 1024).toFixed(0)}KB`}`;
+}
+
+// src/viewers/use-viewer-bytes.ts
+var import_react6 = require("react");
+
+// src/core/use-media-blob.ts
+var import_react4 = require("react");
+
+// src/core/context.ts
+var import_react2 = require("react");
+var CLIENT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.client-context");
+var PORTS_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.host-ports-context");
+function clientContext() {
+  const host = globalThis;
+  host[CLIENT_SLOT] ??= (0, import_react2.createContext)(null);
+  return host[CLIENT_SLOT];
+}
+var INERT_PORTS = {};
+function portsContext() {
+  const host = globalThis;
+  host[PORTS_SLOT] ??= (0, import_react2.createContext)(INERT_PORTS);
+  return host[PORTS_SLOT];
+}
+function useMediaClient() {
+  const client = (0, import_react2.useContext)(clientContext());
+  if (!client) {
+    throw new Error(
+      "@ai-matrx/media: no MediaClient. Mount <MediaProvider client={...}> above every media surface (canonically wired to @ai-matrx/data/files)."
+    );
+  }
+  return client;
+}
+function useMediaHostPorts() {
+  return (0, import_react2.useContext)(portsContext());
+}
+
+// src/core/diagnostics.ts
+var import_react3 = require("react");
+var LATCH_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.failure-latch");
+function latch() {
+  const host = globalThis;
+  host[LATCH_SLOT] ??= /* @__PURE__ */ new Set();
+  return host[LATCH_SLOT];
+}
+function failureMediaIdentity(ref, src) {
+  if (ref && typeof ref === "object" && ref.file_id) return `file:${ref.file_id}`;
+  const raw = typeof ref === "string" ? ref : (ref && typeof ref === "object" ? ref.url ?? null : null) ?? src ?? null;
+  if (!raw) return "<unknown-media>";
+  if (raw.startsWith("blob:")) return "blob:object-url";
+  try {
+    const u = new URL(raw);
+    return `url:${u.origin}${u.pathname}`;
+  } catch {
+    const clean = raw.split(/[?#]/, 1)[0] ?? raw;
+    return `ref:${clean}`;
+  }
+}
+function emitMediaFailure(capture, info) {
+  const key = `${info.terminal ? "terminal" : "warning"}|${info.mediaRef}`;
+  const seen = latch();
+  if (seen.has(key)) return;
+  seen.add(key);
+  if (capture) {
+    try {
+      capture(info);
+      return;
+    } catch {
+    }
+  }
+  console.error(
+    "[@ai-matrx/media] media failure (no diagnostics sink captured it \u2014 bind MediaHostPorts.diagnostics.capture to your error system)",
+    info
+  );
+}
+function useMediaFailureCapture() {
+  const ports = useMediaHostPorts();
+  const capture = ports.diagnostics?.capture;
+  const captureRef = (0, import_react3.useRef)(capture);
+  captureRef.current = capture;
+  return (0, import_react3.useCallback)((info) => {
+    emitMediaFailure(captureRef.current, { source: "media", ...info });
+  }, []);
+}
+
+// src/core/ref-key.ts
+function stableRefKey(ref) {
+  if (!ref) return "<none>";
+  if (typeof ref === "string") return `s:${ref}`;
+  if (ref.file_id) return `id:${ref.file_id}:${ref.mime_type ?? ""}`;
+  if (ref.url) return `url:${ref.url}:${ref.mime_type ?? ""}`;
+  return "<empty-ref>";
+}
+
+// src/core/use-media-blob.ts
+function statusOf(err) {
+  if (err && typeof err === "object") {
+    const candidate = err.status ?? err.statusCode;
+    if (typeof candidate === "number") return candidate;
+  }
+  return void 0;
+}
+function useMediaBlob(ref) {
+  const client = useMediaClient();
+  const capture = useMediaFailureCapture();
+  const refKey = stableRefKey(ref);
+  const [state, setState] = (0, import_react4.useState)({ url: null, blob: null, loading: !!ref, error: null });
+  const [retryToken, setRetryToken] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    if (!ref) {
+      setState({ url: null, blob: null, loading: false, error: null });
+      return void 0;
+    }
+    let cancelled = false;
+    let release = null;
+    setState({ url: null, blob: null, loading: true, error: null });
+    client.getBlob(ref).then(
+      (handle) => {
+        if (cancelled) {
+          handle.release();
+          return;
+        }
+        release = handle.release;
+        setState({ url: handle.url, blob: handle.blob, loading: false, error: null });
+      },
+      (err) => {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : String(err ?? "Failed to load file");
+        setState({ url: null, blob: null, loading: false, error: message });
+        const status = statusOf(err);
+        capture({
+          phase: "blob",
+          mediaRef: failureMediaIdentity(ref),
+          terminal: true,
+          message: `getBlob() failed: ${message}`,
+          ...status !== void 0 ? { status } : {}
+        });
+      }
+    );
+    return () => {
+      cancelled = true;
+      release?.();
+    };
+  }, [client, refKey, retryToken]);
+  return {
+    ...state,
+    retry: () => setRetryToken((t) => t + 1)
+  };
+}
+
+// src/core/use-media-resolution.ts
+var import_react5 = require("react");
+function useMediaResolution(ref) {
+  const client = useMediaClient();
+  const capture = useMediaFailureCapture();
+  const refKey = stableRefKey(ref);
+  const { state, failureMessage } = (0, import_react5.useMemo)(() => {
+    if (!ref) {
+      return {
+        state: { resolution: null, status: "empty", reason: null },
+        failureMessage: null
+      };
+    }
+    try {
+      const resolution = client.resolve(ref);
+      if (!resolution) {
+        return {
+          state: { resolution: null, status: "empty", reason: null },
+          failureMessage: null
+        };
+      }
+      return {
+        state: { resolution, status: "ready", reason: null },
+        failureMessage: null
+      };
+    } catch (err) {
+      return {
+        state: {
+          resolution: null,
+          status: "unavailable",
+          reason: client.classifyError(err)
+        },
+        failureMessage: err instanceof Error ? err.message : String(err ?? "resolve() failed")
+      };
+    }
+  }, [client, refKey]);
+  (0, import_react5.useEffect)(() => {
+    if (state.status !== "unavailable") return;
+    capture({
+      phase: "resolve",
+      mediaRef: failureMediaIdentity(ref ?? null),
+      terminal: true,
+      message: `resolve() refused (${state.reason ?? "unknown"}): ${failureMessage ?? "no error message"}`
+    });
+  }, [refKey, state.status]);
+  return state;
+}
+
+// src/viewers/use-viewer-bytes.ts
+function useViewerBytes(source) {
+  const fromClient = useMediaBlob(source.kind === "ref" ? source.ref : null);
+  if (source.kind === "blob") {
+    return { blob: source.blob, loading: false, error: null };
+  }
+  return {
+    blob: fromClient.blob,
+    loading: fromClient.loading,
+    error: fromClient.error
+  };
+}
+async function readBlobText(blob) {
+  const maybeText = blob.text;
+  if (typeof maybeText === "function") return await maybeText.call(blob);
+  const maybeArrayBuffer = blob.arrayBuffer;
+  if (typeof maybeArrayBuffer === "function") {
+    return new TextDecoder().decode(await maybeArrayBuffer.call(blob));
+  }
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ""));
+    reader.onerror = () => reject(reader.error ?? new Error("could not read the file's bytes"));
+    reader.readAsText(blob);
+  });
+}
+function useViewerText(source, maxBytes = 1024 * 1024) {
+  const { blob, loading, error: bytesError } = useViewerBytes(source);
+  const [text, setText] = (0, import_react6.useState)(null);
+  const [readError, setReadError] = (0, import_react6.useState)(null);
+  const [truncated, setTruncated] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    if (!blob) {
+      setText(null);
+      return void 0;
+    }
+    let cancelled = false;
+    setReadError(null);
+    setText(null);
+    setTruncated(false);
+    void (async () => {
+      try {
+        const oversized = blob.size > maxBytes;
+        const value = await readBlobText(
+          oversized ? blob.slice(0, maxBytes) : blob
+        );
+        if (cancelled) return;
+        setTruncated(oversized);
+        setText(value);
+      } catch (err) {
+        if (cancelled) return;
+        setReadError(err instanceof Error ? err.message : String(err));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [blob, maxBytes]);
+  const error = readError ?? bytesError;
+  return {
+    text,
+    error,
+    truncated,
+    loading: (loading || text === null) && error === null
+  };
+}
+function useViewerDisplayUrl(source) {
+  const resolved = useMediaResolution(
+    source.kind === "ref" ? source.ref : null
+  );
+  if (source.kind === "blob") {
+    return {
+      url: source.url,
+      recoverable: false,
+      unavailable: false,
+      loading: false
+    };
+  }
+  return {
+    url: resolved.resolution?.src ?? null,
+    recoverable: resolved.resolution?.recoverable !== false,
+    unavailable: resolved.status === "unavailable",
+    loading: resolved.status === "empty"
+  };
+}
+
+// src/viewers/code-viewer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EXT_TO_LANGUAGE = {
+  js: "javascript",
+  jsx: "jsx",
+  mjs: "javascript",
+  cjs: "javascript",
+  ts: "typescript",
+  tsx: "tsx",
+  py: "python",
+  rb: "ruby",
+  go: "go",
+  rs: "rust",
+  java: "java",
+  kt: "kotlin",
+  swift: "swift",
+  c: "c",
+  h: "c",
+  cpp: "cpp",
+  cc: "cpp",
+  cxx: "cpp",
+  hpp: "cpp",
+  cs: "csharp",
+  php: "php",
+  scala: "scala",
+  html: "markup",
+  htm: "markup",
+  xml: "markup",
+  svg: "markup",
+  css: "css",
+  scss: "scss",
+  less: "less",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  ini: "ini",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  fish: "bash",
+  ps1: "powershell",
+  sql: "sql",
+  graphql: "graphql",
+  gql: "graphql",
+  proto: "protobuf",
+  dockerfile: "docker",
+  makefile: "makefile",
+  lua: "lua",
+  r: "r"
+};
+function extensionOf(fileName) {
+  const base = fileName.split(/[\\/]/).pop() ?? fileName;
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0) return "";
+  return base.slice(dot + 1).toLowerCase();
+}
+function detectCodeLanguage(fileName) {
+  const ext = extensionOf(fileName);
+  if (ext) return EXT_TO_LANGUAGE[ext] ?? "text";
+  const lower = fileName.toLowerCase();
+  if (lower === "dockerfile") return "docker";
+  if (lower === "makefile") return "makefile";
+  return "text";
+}
+function CodeViewer({
+  source,
+  fileName,
+  className,
+  maxBytes = 1024 * 1024
+}) {
+  const { text, error, loading, truncated } = useViewerText(source, maxBytes);
+  const [wrap, setWrap] = (0, import_react7.useState)(false);
+  const language = (0, import_react7.useMemo)(() => detectCodeLanguage(fileName), [fileName]);
+  const highlighter = getMediaCodeHighlighter();
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerError, { message: error, className });
+  if (loading || text === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerSkeleton, { className });
+  const lines = text.split("\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-border bg-muted/30 px-3 py-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-mono tracking-wide uppercase", children: language }),
+            truncated ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-warning", children: [
+              "\xB7 ",
+              truncationNote(maxBytes)
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
+            highlighter ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setWrap((value) => !value),
+                "aria-pressed": wrap,
+                className: cn(
+                  "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
+                  wrap && "bg-accent text-accent-foreground"
+                ),
+                children: "Wrap"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerCopyButton, { text })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-h-0 flex-1 overflow-auto", children: highlighter ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: highlighter({ code: text, language }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pre", { className: "m-0 flex p-3 font-mono text-xs leading-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "code",
+            {
+              "aria-hidden": true,
+              className: "mr-3 shrink-0 border-r border-border/60 pr-3 text-right text-muted-foreground/60 select-none",
+              children: lines.map((_, index) => `${index + 1}
+`).join("")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "code",
+            {
+              className: cn(
+                "min-w-0 flex-1 text-foreground",
+                wrap ? "break-words whitespace-pre-wrap" : "whitespace-pre"
+              ),
+              children: text
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/core/file-kind.ts
+var ROWS = [
+  [["jpg", "jpeg", "png", "gif", "webp", "avif", "heic", "heif", "bmp", "tif", "tiff", "ico"], "IMAGE", "text-emerald-500", "image", "Image"],
+  [["svg"], "IMAGE", "text-amber-500", "pen-tool", "SVG image"],
+  [["mp4", "mov", "webm", "mkv", "avi", "m4v"], "VIDEO", "text-purple-500", "video", "Video"],
+  [["mp3", "wav", "ogg", "m4a", "aac", "flac", "opus"], "AUDIO", "text-pink-500", "music", "Audio"],
+  [["pdf"], "DOCUMENT", "text-red-500", "file-type", "PDF Document"],
+  [["md", "markdown", "mdx", "rst", "adoc", "asciidoc", "org"], "DOCUMENT", "text-slate-400", "file-text", "Markdown"],
+  [["txt", "text", "asc", "me", "log", "out", "err"], "DOCUMENT", "text-muted-foreground", "file-text", "Text"],
+  [["dockerfile", "containerfile", "lua"], "CODE", "text-blue-500", "code", "Code"],
+  [["mk", "make", "swift", "ml", "mli", "fs", "fsi", "fsx", "svelte"], "CODE", "text-orange-500", "code", "Code"],
+  [["diff", "patch", "pem", "csr", "crt", "cer", "der", "key", "pub", "p7b", "p7c", "pfx", "p12"], "CODE", "text-amber-500", "file-text", "Text"],
+  [["ini", "cfg", "conf", "config", "properties", "prefs"], "CODE", "text-amber-400", "braces", "Config"],
+  [["tex", "latex", "ltx", "sty", "cls", "bib"], "CODE", "text-emerald-500", "file-text", "LaTeX"],
+  [["srt", "vtt"], "SUBTITLES", "text-cyan-500", "subtitles", "Subtitles"],
+  [["js", "mjs", "cjs", "jsx"], "CODE", "text-yellow-500", "file-code", "JavaScript"],
+  [["ts", "tsx"], "CODE", "text-blue-500", "file-code", "TypeScript"],
+  [["py", "clj", "cljs", "cljc", "edn", "vue", "styl", "stylus"], "CODE", "text-emerald-500", "code", "Code"],
+  [["rb", "rbw", "rake", "ru", "gemspec", "scala", "sbt"], "CODE", "text-red-500", "code", "Code"],
+  [["go", "dart"], "CODE", "text-cyan-500", "code", "Code"],
+  [["rs"], "CODE", "text-orange-600", "code", "Rust"],
+  [["java"], "CODE", "text-red-600", "code", "Java"],
+  [["c", "h"], "CODE", "text-blue-600", "code", "C"],
+  [["cpp", "cc", "cxx", "hpp"], "CODE", "text-blue-700", "code", "C++"],
+  [["cs"], "CODE", "text-purple-600", "code", "C#"],
+  [["html", "htm", "kt", "kts"], "CODE", "text-orange-400", "code", "Code"],
+  [["css"], "CODE", "text-sky-400", "code", "CSS"],
+  [["scss"], "CODE", "text-pink-400", "code", "SCSS"],
+  [["sh", "bash", "zsh", "fish", "ksh", "ash", "bat", "cmd", "twig", "jinja", "j2", "njk"], "CODE", "text-emerald-400", "code", "Script"],
+  [["sql"], "CODE", "text-amber-400", "code", "SQL"],
+  [["pl", "pm"], "CODE", "text-indigo-400", "code", "Perl"],
+  [["r", "rmd", "proto", "ps1", "psm1", "psd1", "less"], "CODE", "text-blue-400", "code", "Code"],
+  [["ex", "exs"], "CODE", "text-purple-400", "code", "Elixir"],
+  [["erl", "hrl"], "CODE", "text-rose-500", "code", "Erlang"],
+  [["hs", "lhs"], "CODE", "text-violet-500", "code", "Haskell"],
+  [["zig"], "CODE", "text-yellow-500", "code", "Zig"],
+  [["nim", "nims"], "CODE", "text-yellow-400", "code", "Nim"],
+  [["jl"], "CODE", "text-purple-500", "code", "Julia"],
+  [["astro"], "CODE", "text-fuchsia-500", "code", "Astro"],
+  [["graphql", "gql", "graphqls"], "CODE", "text-pink-500", "code", "GraphQL"],
+  [["sol"], "CODE", "text-slate-400", "code", "Solidity"],
+  [["php", "phtml", "phps"], "CODE", "text-indigo-500", "code", "PHP"],
+  [["hbs", "handlebars", "mustache", "ejs", "liquid"], "CODE", "text-amber-500", "code", "Template"],
+  [["json", "jsonc", "json5", "har", "geojson", "topojson"], "DATA", "text-amber-500", "file-json", "JSON"],
+  [["yaml", "yml", "toml"], "CODE", "text-amber-500", "braces", "Config"],
+  [["xml"], "DATA", "text-amber-500", "braces", "XML"],
+  [["csv", "tsv"], "DATA", "text-orange-500", "file-spreadsheet", "Spreadsheet data"],
+  [["sqlite", "sqlite3", "db"], "DATA", "text-blue-400", "database", "Database"],
+  [["ttl", "n3", "nt", "nq", "trig"], "DATA", "text-fuchsia-400", "braces", "RDF data"],
+  [["xlsx", "xls"], "DOCUMENT", "text-emerald-600", "file-spreadsheet", "Excel workbook"],
+  [["doc", "docx"], "DOCUMENT", "text-blue-500", "file-text", "Word document"],
+  [["ppt", "pptx"], "DOCUMENT", "text-orange-600", "file-type", "Presentation"],
+  [["ipynb"], "NOTEBOOK", "text-orange-400", "file-json", "Notebook"],
+  [["epub"], "EBOOK", "text-indigo-500", "file-text", "eBook"],
+  [["eml"], "EMAIL", "text-blue-400", "file-text", "Email"],
+  [["glb", "gltf", "stl", "obj", "fbx"], "MODEL_3D", "text-violet-400", "package", "3D model"],
+  [["zip", "rar", "7z"], "ARCHIVE", "text-amber-600", "archive", "Archive"],
+  [["tar", "gz", "tgz"], "ARCHIVE", "text-amber-600", "package", "Archive"]
+];
+var BY_EXTENSION = /* @__PURE__ */ new Map();
+for (const [extensions, category, colorClass, icon, displayName] of ROWS) {
+  for (const ext of extensions) {
+    BY_EXTENSION.set(ext, { category, colorClass, icon, displayName });
+  }
+}
+var UNKNOWN_DETAILS = {
+  category: "UNKNOWN",
+  displayName: "File",
+  colorClass: "text-muted-foreground",
+  icon: "file"
+};
+var ASSUMED_TEXT_DETAILS = {
+  category: "DOCUMENT",
+  displayName: "Text",
+  colorClass: "text-muted-foreground",
+  icon: "file-text"
+};
+var FOLDER_DETAILS = {
+  category: "FOLDER",
+  displayName: "Folder",
+  colorClass: "text-sky-500",
+  icon: "folder"
+};
+var IMAGE_DETAILS = BY_EXTENSION.get("png");
+var VIDEO_DETAILS = BY_EXTENSION.get("mp4");
+var AUDIO_DETAILS = BY_EXTENSION.get("mp3");
+var PDF_DETAILS = BY_EXTENSION.get("pdf");
+var SVG_DETAILS = BY_EXTENSION.get("svg");
+function basenameOf(path) {
+  const idx = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+  return idx >= 0 ? path.slice(idx + 1) : path;
+}
+function extOf(name) {
+  const idx = name.lastIndexOf(".");
+  if (idx <= 0 || idx === name.length - 1) return null;
+  return name.slice(idx + 1).toLowerCase();
+}
+function dotfileLooksLikeText(filename) {
+  const name = basenameOf(filename);
+  if (!name.startsWith(".")) return false;
+  for (let i = 1; i < name.length; i++) {
+    const c = name.charCodeAt(i);
+    if (c >= 48 && c <= 57 || c >= 65 && c <= 90 || c >= 97 && c <= 122 || c === 95 || c === 45) {
+      return true;
+    }
+  }
+  return false;
+}
+function canonicalMimeBase(raw) {
+  return raw.split(";")[0]?.trim().toLowerCase() ?? raw;
+}
+function getFileKindDetails(fileName, mimeType) {
+  const name = basenameOf(fileName);
+  const lower = name.toLowerCase();
+  const ext = lower === "dockerfile" || lower === "containerfile" ? lower : extOf(name);
+  const fromExt = ext ? BY_EXTENSION.get(ext) : void 0;
+  const mime = mimeType ? canonicalMimeBase(mimeType) : null;
+  if (mime) {
+    if (mime === "image/svg+xml") return fromExt ?? SVG_DETAILS;
+    if (mime.startsWith("image/")) return fromExt?.category === "IMAGE" ? fromExt : IMAGE_DETAILS;
+    if (mime.startsWith("video/")) return fromExt?.category === "VIDEO" ? fromExt : VIDEO_DETAILS;
+    if (mime.startsWith("audio/")) return fromExt?.category === "AUDIO" ? fromExt : AUDIO_DETAILS;
+    if (mime === "application/pdf") return PDF_DETAILS;
+  }
+  if (fromExt) return fromExt;
+  if (dotfileLooksLikeText(fileName)) return ASSUMED_TEXT_DETAILS;
+  return UNKNOWN_DETAILS;
+}
+function getFolderKindDetails(open = false) {
+  return open ? { ...FOLDER_DETAILS, icon: "folder-open" } : FOLDER_DETAILS;
+}
+
+// src/react/file-icon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ICONS = {
+  image: ImageIcon,
+  "pen-tool": PenToolIcon,
+  video: VideoIcon,
+  music: MusicIcon,
+  "file-type": FileTypeIcon,
+  "file-text": FileTextIcon,
+  code: CodeIcon,
+  braces: BracesIcon,
+  subtitles: SubtitlesIcon,
+  "file-code": FileCodeIcon,
+  "file-json": FileJsonIcon,
+  "file-spreadsheet": FileSpreadsheetIcon,
+  database: DatabaseIcon,
+  package: PackageBoxIcon,
+  archive: ArchiveIcon,
+  folder: FolderIcon,
+  "folder-open": FolderOpenIcon,
+  file: FileIcon,
+  "file-audio": FileAudioIcon,
+  "file-video": FileVideoIcon
+};
+function FileIcon2({
+  fileName,
+  mimeType = null,
+  isFolder,
+  open,
+  colorClass,
+  className,
+  size = 16
+}) {
+  const details = isFolder ? getFolderKindDetails(open) : getFileKindDetails(fileName ?? "", mimeType);
+  const Icon = ICONS[details.icon];
+  const style = {
+    width: `${size}px`,
+    height: `${size}px`,
+    minWidth: `${size}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Icon,
+    {
+      style,
+      className: cn("shrink-0", colorClass ?? details.colorClass, className),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// 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");
+function GenericViewer({
+  fileName,
+  fileSize,
+  generic,
+  className
+}) {
+  const onDownload = generic?.onDownload;
+  const onViewAsText = generic?.onViewAsText;
+  const viewAsTextLabel = generic?.viewAsTextLabel ?? "View as text";
+  const viewAsTextPrimary = generic?.viewAsTextPrimary ?? true;
+  const viewAsTextBusy = generic?.viewAsTextBusy ?? false;
+  const hasViewAsText = typeof onViewAsText === "function";
+  const hasDownload = typeof onDownload === "function";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex h-full w-full flex-col items-center justify-center gap-4 p-6 text-center",
+        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_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)(
+            ViewAsTextButton,
+            {
+              onClick: onViewAsText,
+              label: viewAsTextLabel,
+              busy: viewAsTextBusy,
+              variant: "primary"
+            }
+          ) : null,
+          onDownload ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: onDownload,
+              className: cn(
+                "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm",
+                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" }),
+                "Download"
+              ]
+            }
+          ) : null,
+          onViewAsText && !viewAsTextPrimary ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ViewAsTextButton,
+            {
+              onClick: onViewAsText,
+              label: viewAsTextLabel,
+              busy: viewAsTextBusy,
+              variant: "secondary"
+            }
+          ) : 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
+      ]
+    }
+  );
+}
+function ViewAsTextButton({
+  onClick,
+  label,
+  busy,
+  variant
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: busy,
+      className: cn(
+        "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors",
+        "disabled:cursor-not-allowed disabled:opacity-60",
+        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" }),
+        label
+      ]
+    }
+  );
+}
+
+// src/viewers/html-viewer.tsx
+var import_react10 = require("react");
+
+// src/viewers/markup-chrome.tsx
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function useMarkupMode(controls) {
+  const [localMode, setLocalMode] = (0, import_react9.useState)("rendered");
+  const controlled = controls?.mode !== void 0;
+  return {
+    mode: controls?.mode ?? localMode,
+    setMode: controls?.onModeChange ?? setLocalMode,
+    controlled
+  };
+}
+function MarkupModeToggle({
+  mode,
+  onChange,
+  renderedLabel = "Rendered",
+  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)(
+      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" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.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" })
+      }
+    )
+  ] });
+}
+function ToggleButton({
+  active,
+  onClick,
+  icon,
+  label
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded px-2 py-1 text-[11px] font-medium transition-colors",
+        active ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+      ),
+      children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
+      ]
+    }
+  );
+}
+
+// src/viewers/html-viewer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var VIEWPORT_WIDTH = {
+  mobile: 390,
+  tablet: 768,
+  desktop: 1280
+};
+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)(
+        MarkupModeToggle,
+        {
+          mode,
+          onChange: setMode,
+          renderedLabel: "Rendered",
+          renderedIcon: "globe"
+        }
+      )
+    ] }),
+    /* @__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 }) })
+  ] });
+}
+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)(() => {
+    setErrored(false);
+  }, [reloadKey, url]);
+  if (unavailable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ViewerError,
+      {
+        title: "This page isn't available",
+        hint: "You may not have access to it, or it may have been deleted."
+      }
+    );
+  }
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerSkeleton, {});
+  if (errored) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ViewerError, { title: "Preview unavailable" });
+  const constrained = viewport !== "auto";
+  const width = constrained ? VIEWPORT_WIDTH[viewport] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+        "div",
+        {
+          className: cn(
+            "h-full bg-background",
+            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)(
+            "iframe",
+            {
+              src: url,
+              title: fileName,
+              sandbox: "allow-scripts allow-popups allow-forms",
+              referrerPolicy: "no-referrer",
+              className: "h-full w-full border-0 bg-white",
+              onError: () => setErrored(true)
+            },
+            `${reloadKey}-${url}`
+          )
+        }
+      )
+    }
+  );
+}
+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 });
+}
+
+// src/core/use-media-load-recovery.ts
+var import_react11 = require("react");
+
+// src/types.ts
+function mintDurableSrc(url) {
+  return url;
+}
+
+// src/core/use-media-load-recovery.ts
+function normalizeOutcome(outcome) {
+  return typeof outcome === "string" ? { verdict: outcome } : outcome;
+}
+var EPHEMERAL_SECRET_IDENTITY = "server:files-session-secret";
+function useMediaLoadRecovery(src, options) {
+  const client = useMediaClient();
+  const capture = useMediaFailureCapture();
+  const recoverable = options?.recoverable !== false;
+  const onTerminal = options?.onTerminal;
+  const failureRef = options?.failureRef;
+  const [result, setResult] = (0, import_react11.useState)({ source: src, retryKey: 0, failed: false });
+  const attemptRef = (0, import_react11.useRef)(0);
+  (0, import_react11.useEffect)(() => {
+    attemptRef.current = 0;
+  }, [src]);
+  const identity = () => failureMediaIdentity(failureRef ?? null, src);
+  const onLoadError = (event) => {
+    if (!src || !recoverable) {
+      setResult({ source: src, retryKey: 0, failed: true });
+      if (src) {
+        capture({
+          phase: "element-load",
+          mediaRef: identity(),
+          terminal: true,
+          retryOutcome: "not-attempted",
+          message: "media element failed to load and the source is unrecoverable (foreign/object URL \u2014 a session refresh cannot fix it)"
+        });
+      }
+      onTerminal?.(event);
+      return;
+    }
+    attemptRef.current += 1;
+    const attempt = attemptRef.current;
+    client.recoverLoadError(mintDurableSrc(src), attempt).then(
+      (outcome) => {
+        const report = normalizeOutcome(outcome);
+        if (report.secretSource === "ephemeral") {
+          capture({
+            phase: "session",
+            mediaRef: EPHEMERAL_SECRET_IDENTITY,
+            terminal: false,
+            message: "server cookie secret is ephemeral \u2014 private renders will break across restarts/instances (set a persistent files-session secret on the server)"
+          });
+        }
+        if (report.verdict === "retry") {
+          setResult((current) => ({
+            source: src,
+            retryKey: current.source === src ? current.retryKey + 1 : 1,
+            failed: false
+          }));
+        } else {
+          setResult({ source: src, retryKey: 0, failed: true });
+          capture({
+            phase: attempt > 1 ? "element-load" : "recovery",
+            mediaRef: identity(),
+            terminal: true,
+            retryOutcome: attempt > 1 ? "retried" : "not-attempted",
+            message: attempt > 1 ? "media element failed to load after the session-refresh retry" : "media load recovery declined on the first attempt (session refresh did not produce a usable session)",
+            ...report.status !== void 0 ? { status: report.status } : {}
+          });
+          onTerminal?.(event);
+        }
+      },
+      (err) => {
+        setResult({ source: src, retryKey: 0, failed: true });
+        capture({
+          phase: "session",
+          mediaRef: identity(),
+          terminal: true,
+          retryOutcome: "recovery-failed",
+          message: `session recovery failed: ${err instanceof Error ? err.message : String(err ?? "unknown error")}`
+        });
+        onTerminal?.(event);
+      }
+    );
+  };
+  return {
+    retryKey: result.source === src ? result.retryKey : 0,
+    onLoadError,
+    failed: result.source === src ? result.failed : false
+  };
+}
+
+// src/viewers/transparency-grid.ts
+var TRANSPARENCY_GRID_STYLE = {
+  backgroundImage: "linear-gradient(45deg, rgb(0 0 0 / 0.08) 25%, transparent 25%), linear-gradient(-45deg, rgb(0 0 0 / 0.08) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(0 0 0 / 0.08) 75%), linear-gradient(-45deg, transparent 75%, rgb(0 0 0 / 0.08) 75%)",
+  backgroundSize: "16px 16px",
+  backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0"
+};
+
+// src/viewers/svg-viewer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function SvgViewer(props) {
+  const { className, markupControls } = props;
+  const { mode, setMode, controlled } = useMarkupMode(markupControls);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex h-full min-h-0 w-full flex-col bg-background",
+        className
+      ),
+      children: [
+        controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          MarkupModeToggle,
+          {
+            mode,
+            onChange: setMode,
+            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 })
+      ]
+    }
+  );
+}
+function SvgRenderedView({ source, fileName }) {
+  const { url, recoverable, unavailable } = useViewerDisplayUrl(source);
+  const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
+    recoverable,
+    ...source.kind === "ref" ? { failureRef: source.ref } : {}
+  });
+  if (unavailable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ViewerError,
+      {
+        title: "This SVG isn't available",
+        hint: "You may not have access to it, or it may have been deleted."
+      }
+    );
+  }
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSkeleton, { className: "flex-1" });
+  if (failed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ViewerError,
+      {
+        title: "SVG could not be rendered",
+        hint: "Switch to the Source view to inspect the markup."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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)(
+        "img",
+        {
+          src: url,
+          alt: fileName,
+          className: "max-h-full max-w-full object-contain drop-shadow-sm",
+          onError: onLoadError
+        },
+        retryKey
+      )
+    }
+  );
+}
+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 });
+}
+
+// src/viewers/text-viewer.tsx
+var import_jsx_runtime10 = 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 (loading || text === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ViewerSkeleton, { tone: "plain", className });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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_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 })
+      ]
+    }
+  );
+}
+
+// src/viewers/unavailable-viewer.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ENGINE_FOR_KIND = {
+  pdf: "a PDF engine (e.g. PDF.js / react-pdf)",
+  markdown: "a Markdown renderer",
+  data: "a spreadsheet/CSV parser",
+  spreadsheet: "a spreadsheet/CSV parser",
+  office: "an Office document extractor",
+  image: "an image viewer",
+  video: "a video player",
+  audio: "an audio player"
+};
+function MediaViewerUnavailable({
+  kind,
+  ...props
+}) {
+  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: [
+      "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: [
+        'registerMediaViewer("',
+        kind,
+        '", \u2026)'
+      ] }),
+      "."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      GenericViewer,
+      {
+        ...props,
+        className: void 0,
+        generic: {
+          ...generic,
+          message: generic?.message ?? "You can still download this file and open it in another application."
+        }
+      }
+    ) })
+  ] });
+}
+
+// src/viewers/preview-kind.ts
+var EXTENSION_KIND = {
+  svg: "svg",
+  pdf: "pdf",
+  md: "markdown",
+  markdown: "markdown",
+  mdx: "markdown",
+  html: "html",
+  htm: "html",
+  csv: "data",
+  tsv: "data",
+  xlsx: "spreadsheet",
+  xls: "spreadsheet",
+  doc: "office",
+  docx: "office",
+  ppt: "office",
+  pptx: "office",
+  txt: "text",
+  log: "text",
+  text: "text"
+};
+function extensionOf2(fileName) {
+  const base = fileName.split(/[\\/]/).pop() ?? fileName;
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0) return "";
+  return base.slice(dot + 1).toLowerCase();
+}
+function getPreviewKind(fileName, mimeType) {
+  const explicit = EXTENSION_KIND[extensionOf2(fileName)];
+  if (explicit) return explicit;
+  const details = getFileKindDetails(fileName, mimeType ?? void 0);
+  switch (details.category) {
+    case "IMAGE":
+      return details.icon === "pen-tool" ? "svg" : "image";
+    case "VIDEO":
+      return "video";
+    case "AUDIO":
+      return "audio";
+    case "CODE":
+      return "code";
+    case "DATA":
+      return "code";
+    case "NOTEBOOK":
+      return "code";
+    case "SUBTITLES":
+      return "text";
+    case "DOCUMENT":
+      return "text";
+    default:
+      return "generic";
+  }
+}
+
+// src/viewers/media-file-viewer.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BUILT_IN = {
+  text: TextViewer,
+  code: CodeViewer,
+  svg: SvgViewer,
+  html: HtmlViewer,
+  generic: GenericViewer
+};
+function MediaFileViewer({
+  previewKind,
+  ...props
+}) {
+  const kind = previewKind ?? getPreviewKind(props.fileName, props.mimeType ?? null);
+  const registered = getMediaViewer(kind);
+  if (registered) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: registered(props) });
+  const builtIn = BUILT_IN[kind];
+  if (builtIn) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: builtIn(props) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MediaViewerUnavailable, { ...props, kind });
+}
+//# sourceMappingURL=viewers.cjs.map