@adoptai/genui-components 0.1.67 → 0.1.69

package/dist/composites/download-card/resolver.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React10 = require('react');
+var React11 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactPdf = require('react-pdf');
 require('react-pdf/dist/Page/AnnotationLayer.css');
@@ -32,7 +32,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React10__default = /*#__PURE__*/_interopDefault(React10);
+var React11__default = /*#__PURE__*/_interopDefault(React11);
 var XLSX__namespace = /*#__PURE__*/_interopNamespace(XLSX);
 var Papa__default = /*#__PURE__*/_interopDefault(Papa);
 var mammoth__namespace = /*#__PURE__*/_interopNamespace(mammoth);
@@ -106,7 +106,7 @@ var init_theme = __esm({
   }
 });
 function useTheme() {
-  return React10.useContext(GenUIThemeContext);
+  return React11.useContext(GenUIThemeContext);
 }
 var DEFAULT_TOKENS, GenUIThemeContext;
 var init_ThemeContext = __esm({
@@ -128,7 +128,7 @@ var init_ThemeContext = __esm({
       SECONDARY,
       CHART_PALETTE: [...CHART_PALETTE]
     };
-    GenUIThemeContext = React10.createContext(DEFAULT_TOKENS);
+    GenUIThemeContext = React11.createContext(DEFAULT_TOKENS);
   }
 });
 function renderInline(text) {
@@ -470,23 +470,83 @@ var init_Markdown = __esm({
     init_theme();
   }
 });
+function resolvePdfWorkerSrc(pdfjs2) {
+  const override = typeof window !== "undefined" ? window.__GENUI_PDF_WORKER_SRC__ : void 0;
+  const current = pdfjs2.GlobalWorkerOptions.workerSrc;
+  const isConfigured = !!current && current !== "pdf.worker.mjs";
+  if (override) {
+    pdfjs2.GlobalWorkerOptions.workerSrc = override;
+  } else if (!isConfigured) {
+    pdfjs2.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs2.version}/build/pdf.worker.min.mjs`;
+  }
+  return pdfjs2.GlobalWorkerOptions.workerSrc;
+}
+function probePdfWorker() {
+  if (probe) return probe;
+  probe = (async () => {
+    if (typeof window === "undefined") return false;
+    try {
+      const { pdfjs: pdfjs2 } = await import('react-pdf');
+      resolvePdfWorkerSrc(pdfjs2);
+      const task = pdfjs2.getDocument({ data: new TextEncoder().encode(TINY_PDF) });
+      const doc = await Promise.race([
+        task.promise,
+        new Promise(
+          (_, reject) => setTimeout(() => reject(new Error("pdf worker probe timed out")), PROBE_TIMEOUT_MS)
+        )
+      ]);
+      await doc.destroy();
+      return true;
+    } catch (e) {
+      probe = null;
+      return false;
+    }
+  })();
+  return probe;
+}
+function usePdfWorkerReady(enabled) {
+  const [ready, setReady] = React11.useState(null);
+  React11.useEffect(() => {
+    let cancelled = false;
+    probePdfWorker().then((ok) => {
+      if (!cancelled) setReady(ok);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled]);
+  return ready ;
+}
+var TINY_PDF, PROBE_TIMEOUT_MS, probe;
+var init_pdfWorkerProbe = __esm({
+  "src/shared/viewers/pdfWorkerProbe.ts"() {
+    "use client";
+    TINY_PDF = `%PDF-1.1
+1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj
+2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj
+3 0 obj<</Type/Page/Parent 2 0 R/MediaBox[0 0 3 3]>>endobj
+trailer<</Root 1 0 R>>`;
+    PROBE_TIMEOUT_MS = 5e3;
+    probe = null;
+  }
+});
 
 // src/composites/document-preview/PdfViewer.tsx
 var PdfViewer_exports = {};
 __export(PdfViewer_exports, {
   PdfViewer: () => PdfViewer
 });
-function PdfViewer({ url, base64, onLoadSuccess }) {
+function PdfViewer({ url, base64, onLoadSuccess, onLoadError }) {
   const { BORDER: BORDER2, MUTED: MUTED2, SURFACE: SURFACE2 } = useTheme();
-  const [numPages, setNumPages] = React10.useState(0);
-  const [currentPage, setCurrentPage] = React10.useState(1);
-  const [loading, setLoading] = React10.useState(true);
-  const handleLoad = React10.useCallback(({ numPages: n }) => {
+  const [numPages, setNumPages] = React11.useState(0);
+  const [currentPage, setCurrentPage] = React11.useState(1);
+  const [loading, setLoading] = React11.useState(true);
+  const handleLoad = React11.useCallback(({ numPages: n }) => {
     setNumPages(n);
     setLoading(false);
     onLoadSuccess == null ? void 0 : onLoadSuccess(n);
   }, [onLoadSuccess]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (numPages <= 1) return;
     const handler = (e) => {
       var _a;
@@ -556,23 +616,34 @@ function PdfViewer({ url, base64, onLoadSuccess }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { overflow: "auto", width: "100%", display: "flex", justifyContent: "center", padding: "16px" }, children: [
       loading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "200px", color: MUTED2, fontSize: "13px" }, children: "Loading PDF..." }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactPdf.Document, { file: base64 ? `data:application/pdf;base64,${base64}` : url, onLoadSuccess: handleLoad, loading: "", children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactPdf.Page,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactPdf.Document,
         {
-          pageNumber: currentPage,
-          width: 540,
-          renderTextLayer: true,
-          renderAnnotationLayer: true
+          file: base64 ? `data:application/pdf;base64,${base64}` : url,
+          onLoadSuccess: handleLoad,
+          onLoadError,
+          loading: "",
+          error: "",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactPdf.Page,
+            {
+              pageNumber: currentPage,
+              width: 540,
+              renderTextLayer: true,
+              renderAnnotationLayer: true
+            }
+          )
         }
-      ) })
+      )
     ] })
   ] });
 }
 var init_PdfViewer = __esm({
   "src/composites/document-preview/PdfViewer.tsx"() {
     "use client";
+    init_pdfWorkerProbe();
     init_ThemeContext();
-    reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${reactPdf.pdfjs.version}/build/pdf.worker.min.mjs`;
+    resolvePdfWorkerSrc(reactPdf.pdfjs);
   }
 });
 
@@ -583,13 +654,13 @@ __export(ExcelViewer_exports, {
 });
 function ExcelViewer({ url, base64, onLoadSuccess }) {
   const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2, SURFACE: SURFACE2 } = useTheme();
-  const [sheetNames, setSheetNames] = React10.useState([]);
-  const [activeSheet, setActiveSheet] = React10.useState(0);
-  const [data, setData] = React10.useState([]);
-  const [loading, setLoading] = React10.useState(true);
-  const [error, setError] = React10.useState(null);
-  const wbRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const [sheetNames, setSheetNames] = React11.useState([]);
+  const [activeSheet, setActiveSheet] = React11.useState(0);
+  const [data, setData] = React11.useState([]);
+  const [loading, setLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  const wbRef = React11.useRef(null);
+  React11.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -647,7 +718,7 @@ function ExcelViewer({ url, base64, onLoadSuccess }) {
     const rows = XLSX__namespace.utils.sheet_to_json(wbRef.current.Sheets[wbRef.current.SheetNames[idx]], { header: 1 });
     setData(rows);
   };
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (sheetNames.length <= 1) return;
     const handler = (e) => {
       var _a;
@@ -773,10 +844,10 @@ __export(CsvViewer_exports, {
 });
 function CsvViewer({ url, base64, delimiter, maxRows }) {
   const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
-  const [rows, setRows] = React10.useState([]);
-  const [loading, setLoading] = React10.useState(true);
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
+  const [rows, setRows] = React11.useState([]);
+  const [loading, setLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -895,10 +966,10 @@ __export(TextViewer_exports, {
 });
 function TextViewer({ url, base64, markdown = false, maxLines }) {
   const { MUTED: MUTED2 } = useTheme();
-  const [text, setText] = React10.useState("");
-  const [loading, setLoading] = React10.useState(true);
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
+  const [text, setText] = React11.useState("");
+  const [loading, setLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -996,10 +1067,10 @@ function sanitize(html) {
 }
 function DocxViewer({ url, base64 }) {
   const { MUTED: MUTED2, BORDER: BORDER2, SURFACE: SURFACE2 } = useTheme();
-  const [html, setHtml] = React10.useState("");
-  const [loading, setLoading] = React10.useState(true);
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
+  const [html, setHtml] = React11.useState("");
+  const [loading, setLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1079,6 +1150,89 @@ var init_DocxViewer = __esm({
   }
 });
 
+// src/shared/viewers/HtmlViewer.tsx
+var HtmlViewer_exports = {};
+__export(HtmlViewer_exports, {
+  HtmlViewer: () => HtmlViewer
+});
+function HtmlViewer({ url, base64, height = 480 }) {
+  const { MUTED: MUTED2 } = useTheme();
+  const [html, setHtml] = React11.useState("");
+  const [loading, setLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    if (base64) {
+      try {
+        if (!cancelled) {
+          setHtml(base64ToText(base64));
+          setLoading(false);
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : "Failed to decode HTML");
+          setLoading(false);
+        }
+      }
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (!url) {
+      setError("No file source provided");
+      setLoading(false);
+      return () => {
+        cancelled = true;
+      };
+    }
+    fetch(url).then((r) => {
+      if (!r.ok) throw new Error(`Failed to fetch: ${r.status}`);
+      return r.text();
+    }).then((t) => {
+      if (cancelled) return;
+      setHtml(t);
+      setLoading(false);
+    }).catch((e) => {
+      if (cancelled) return;
+      setError(e.message);
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, base64]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px", color: MUTED2, fontSize: "13px", textAlign: "center" }, children: "Loading\u2026" });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px", color: "#dc2626", fontSize: "13px", textAlign: "center" }, children: error });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      title: "HTML preview",
+      sandbox: "",
+      srcDoc: html,
+      style: {
+        width: "100%",
+        height: `${height}px`,
+        border: "none",
+        background: "white",
+        display: "block"
+      }
+    }
+  );
+}
+var init_HtmlViewer = __esm({
+  "src/shared/viewers/HtmlViewer.tsx"() {
+    "use client";
+    init_ThemeContext();
+    init_decode();
+  }
+});
+
 // src/shared/ColumnSettingsPanel.tsx
 init_ThemeContext();
 function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
@@ -1130,16 +1284,16 @@ var DOT_COLOR = "#aaaaaa";
 var DOT_HOVER = "#555555";
 function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
   const { BORDER: BORDER2, MUTED: MUTED2, SURFACE: SURFACE2, SURFACE_MUTED: SURFACE_MUTED2 } = useTheme();
-  const [open, setOpen] = React10.useState(false);
-  const [view, setView] = React10.useState("main");
-  const contentRef = React10.useRef(null);
-  const menuRef = React10.useRef(null);
-  const btnRef = React10.useRef(null);
-  const close = React10.useCallback(() => {
+  const [open, setOpen] = React11.useState(false);
+  const [view, setView] = React11.useState("main");
+  const contentRef = React11.useRef(null);
+  const menuRef = React11.useRef(null);
+  const btnRef = React11.useRef(null);
+  const close = React11.useCallback(() => {
     setOpen(false);
     setView("main");
   }, []);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a, _b;
@@ -1150,7 +1304,7 @@ function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "c
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open, close]);
-  const handleDownloadPNG = React10.useCallback(async () => {
+  const handleDownloadPNG = React11.useCallback(async () => {
     if (!contentRef.current) return;
     try {
       const url = await htmlToImage.toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
@@ -1162,7 +1316,7 @@ function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "c
     }
     close();
   }, [filename, close]);
-  const handleCSV = React10.useCallback(() => {
+  const handleCSV = React11.useCallback(() => {
     onDownloadCSV == null ? void 0 : onDownloadCSV();
     close();
   }, [onDownloadCSV, close]);
@@ -1284,7 +1438,7 @@ init_theme();
 var FAMILIES = [
   { exts: ["csv", "tsv", "xls", "xlsx", "numbers"], fg: SEMANTIC.success.color, bg: SEMANTIC.success.bg },
   { exts: ["pdf"], fg: SEMANTIC.error.color, bg: SEMANTIC.error.bg },
-  { exts: ["doc", "docx", "txt", "md", "rtf", "pages"], fg: SEMANTIC.info.color, bg: SEMANTIC.info.bg },
+  { exts: ["doc", "docx", "txt", "md", "rtf", "pages", "html", "htm"], fg: SEMANTIC.info.color, bg: SEMANTIC.info.bg },
   { exts: ["json", "yaml", "yml", "xml", "toml"], fg: SEMANTIC.purple.color, bg: SEMANTIC.purple.bg },
   { exts: ["zip", "tar", "gz", "rar", "7z"], fg: SEMANTIC.warning.color, bg: SEMANTIC.warning.bg },
   { exts: ["png", "jpg", "jpeg", "gif", "svg", "webp", "bmp"], fg: SEMANTIC.info.color, bg: SEMANTIC.info.bg }
@@ -1311,7 +1465,9 @@ var PREVIEW_EXTS = {
   txt: "text",
   log: "text",
   text: "text",
-  docx: "docx"
+  docx: "docx",
+  html: "html",
+  htm: "html"
 };
 function extOf(fileType, filename) {
   var _a;
@@ -1322,6 +1478,7 @@ function extOf(fileType, filename) {
     if (mime.includes("csv")) return "csv";
     if (mime.includes("markdown")) return "md";
     if (mime.includes("wordprocessing") || mime.includes("msword")) return "docx";
+    if (mime.includes("html")) return "html";
     if (mime.startsWith("text/")) return "txt";
   } else if (fileType) {
     const t = fileType.toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -1355,17 +1512,32 @@ function isExpirySoon(expiresAt) {
 
 // src/shared/viewers/PreviewHost.tsx
 init_ThemeContext();
-var PdfViewer2 = React10.lazy(
+init_pdfWorkerProbe();
+var PdfViewer2 = React11.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer2 = React10.lazy(
+var ExcelViewer2 = React11.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
-var CsvViewer2 = React10.lazy(() => Promise.resolve().then(() => (init_CsvViewer(), CsvViewer_exports)).then((m) => ({ default: m.CsvViewer })));
-var TextViewer2 = React10.lazy(() => Promise.resolve().then(() => (init_TextViewer(), TextViewer_exports)).then((m) => ({ default: m.TextViewer })));
-var DocxViewer2 = React10.lazy(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
+var CsvViewer2 = React11.lazy(() => Promise.resolve().then(() => (init_CsvViewer(), CsvViewer_exports)).then((m) => ({ default: m.CsvViewer })));
+var TextViewer2 = React11.lazy(() => Promise.resolve().then(() => (init_TextViewer(), TextViewer_exports)).then((m) => ({ default: m.TextViewer })));
+var DocxViewer2 = React11.lazy(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
+var HtmlViewer2 = React11.lazy(() => Promise.resolve().then(() => (init_HtmlViewer(), HtmlViewer_exports)).then((m) => ({ default: m.HtmlViewer })));
 var PEEK_ROWS = 20;
 var PEEK_LINES = 40;
+function GatedPdfViewer({ source }) {
+  const { MUTED: MUTED2 } = useTheme();
+  const [failed, setFailed] = React11.useState(false);
+  const workerReady = usePdfWorkerReady(true);
+  const ready = failed ? false : workerReady;
+  if (ready === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px", color: MUTED2, fontSize: "13px", textAlign: "center" }, children: "Loading preview\u2026" });
+  }
+  if (ready === false) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px", color: MUTED2, fontSize: "13px", textAlign: "center" }, children: "Preview unavailable \u2014 download the file to view it." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PdfViewer2, { url: source.url, base64: source.base64, onLoadError: () => setFailed(true) });
+}
 function PreviewHost({ kind, source, mode = "full" }) {
   const { MUTED: MUTED2 } = useTheme();
   const peek = mode === "peek";
@@ -1373,7 +1545,7 @@ function PreviewHost({ kind, source, mode = "full" }) {
   let viewer = null;
   switch (kind) {
     case "pdf":
-      viewer = /* @__PURE__ */ jsxRuntime.jsx(PdfViewer2, { url: source.url, base64: source.base64 });
+      viewer = /* @__PURE__ */ jsxRuntime.jsx(GatedPdfViewer, { source });
       break;
     case "excel":
       viewer = /* @__PURE__ */ jsxRuntime.jsx(ExcelViewer2, { url: source.url, base64: source.base64 });
@@ -1390,10 +1562,13 @@ function PreviewHost({ kind, source, mode = "full" }) {
     case "docx":
       viewer = /* @__PURE__ */ jsxRuntime.jsx(DocxViewer2, { url: source.url, base64: source.base64 });
       break;
+    case "html":
+      viewer = /* @__PURE__ */ jsxRuntime.jsx(HtmlViewer2, { url: source.url, base64: source.base64, height: peek ? 240 : 480 });
+      break;
     default:
       return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(React10.Suspense, { fallback, children: viewer });
+  return /* @__PURE__ */ jsxRuntime.jsx(React11.Suspense, { fallback, children: viewer });
 }
 
 // src/shared/PreviewModal.tsx
@@ -1409,7 +1584,7 @@ function PreviewModal({
   onDownload
 }) {
   const { BORDER: BORDER2, MUTED: MUTED2, ACCENT: ACCENT2, SURFACE: SURFACE2, FOREGROUND: FOREGROUND2, SCRIM: SCRIM2 } = useTheme();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -1586,17 +1761,17 @@ function FileCard({
   previewDisabled = false
 }) {
   const { BORDER: BORDER2, MUTED: MUTED2, ACCENT: ACCENT2, SURFACE: SURFACE2, SURFACE_MUTED: SURFACE_MUTED2, SHADOW: SHADOW2 } = useTheme();
-  const [cardHover, setCardHover] = React10.useState(false);
-  const [btnHover, setBtnHover] = React10.useState(false);
-  const [pvHover, setPvHover] = React10.useState(false);
+  const [cardHover, setCardHover] = React11.useState(false);
+  const [btnHover, setBtnHover] = React11.useState(false);
+  const [pvHover, setPvHover] = React11.useState(false);
   const previewKind = previewKindFor(fileType, filename);
   const canPreview = !previewDisabled && previewKind !== null && (!!previewUrl || !!fetchPreviewBlob);
-  const [peekOpen, setPeekOpen] = React10.useState(false);
-  const [modalOpen, setModalOpen] = React10.useState(false);
-  const [source, setSource] = React10.useState(previewUrl ? { url: previewUrl } : null);
-  const [pvLoading, setPvLoading] = React10.useState(false);
-  const [pvError, setPvError] = React10.useState(null);
-  const ensureSource = React10.useCallback(async () => {
+  const [peekOpen, setPeekOpen] = React11.useState(false);
+  const [modalOpen, setModalOpen] = React11.useState(false);
+  const [source, setSource] = React11.useState(previewUrl ? { url: previewUrl } : null);
+  const [pvLoading, setPvLoading] = React11.useState(false);
+  const [pvError, setPvError] = React11.useState(null);
+  const ensureSource = React11.useCallback(async () => {
     if (source) return source;
     if (previewUrl) {
       const s = { url: previewUrl };
@@ -1618,7 +1793,7 @@ function FileCard({
       setPvLoading(false);
     }
   }, [source, previewUrl, fetchPreviewBlob]);
-  const togglePeek = React10.useCallback(async () => {
+  const togglePeek = React11.useCallback(async () => {
     if (peekOpen) {
       setPeekOpen(false);
       return;
@@ -1626,7 +1801,7 @@ function FileCard({
     setPeekOpen(true);
     await ensureSource();
   }, [peekOpen, ensureSource]);
-  const openModal = React10.useCallback(async () => {
+  const openModal = React11.useCallback(async () => {
     const s = await ensureSource();
     if (s) setModalOpen(true);
   }, [ensureSource]);
@@ -1741,7 +1916,7 @@ function FileCard({
                       whiteSpace: "nowrap"
                     },
                     children: [
-                      metaTokens.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(React10__default.default.Fragment, { children: [
+                      metaTokens.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(React11__default.default.Fragment, { children: [
                         i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: MUTED2 }, children: "\xB7" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t })
                       ] }, i)),