@adoptai/genui-components 0.1.68 → 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) {
@@ -505,8 +505,8 @@ function probePdfWorker() {
   return probe;
 }
 function usePdfWorkerReady(enabled) {
-  const [ready, setReady] = React10.useState(null);
-  React10.useEffect(() => {
+  const [ready, setReady] = React11.useState(null);
+  React11.useEffect(() => {
     let cancelled = false;
     probePdfWorker().then((ok) => {
       if (!cancelled) setReady(ok);
@@ -538,15 +538,15 @@ __export(PdfViewer_exports, {
 });
 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;
@@ -654,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);
@@ -718,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;
@@ -844,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);
@@ -966,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);
@@ -1067,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);
@@ -1150,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 }) {
@@ -1201,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;
@@ -1221,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 });
@@ -1233,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]);
@@ -1355,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 }
@@ -1382,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;
@@ -1393,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, "");
@@ -1427,20 +1513,21 @@ function isExpirySoon(expiresAt) {
 // src/shared/viewers/PreviewHost.tsx
 init_ThemeContext();
 init_pdfWorkerProbe();
-var PdfViewer2 = React10.lazy(
+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] = React10.useState(false);
+  const [failed, setFailed] = React11.useState(false);
   const workerReady = usePdfWorkerReady(true);
   const ready = failed ? false : workerReady;
   if (ready === null) {
@@ -1475,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
@@ -1494,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();
@@ -1671,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 };
@@ -1703,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;
@@ -1711,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]);
@@ -1826,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)),