@lamberl-lee/file-preview 0.2.0

package/dist/PreviewFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PreviewFallback.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { AlertTriangleIcon, DownloadIcon, CopyIcon } from \"./icons\";\nimport type { FileInfo } from \"./utils\";\nimport { formatFileSize } from \"./utils\";\nimport { downloadSource } from \"./core/download\";\nimport { useLocale } from \"./core/i18n\";\nimport \"./styles/PreviewFallback.css\";\n\nexport type PreviewFallbackKind =\n  | \"unsupported\"\n  | \"plugin-load-failed\"\n  | \"render-failed\"\n  | \"source-read-failed\"\n  | \"file-too-large\"\n  | \"aborted\"\n  | \"unknown\";\n\nexport interface PreviewFallbackProps {\n  kind: PreviewFallbackKind;\n  file: FileInfo;\n  title?: string;\n  description?: string;\n  error?: unknown;\n  pluginId?: string;\n  pluginName?: string;\n  onRetry?: () => void;\n  canDownload?: boolean;\n}\n\nfunction getFallbackTitle(kind: PreviewFallbackKind, t: ReturnType<typeof useLocale>): string {\n  switch (kind) {\n    case \"unsupported\":\n      return t.previewNotAvailable;\n    case \"plugin-load-failed\":\n      return t.failedToLoadPreview;\n    case \"render-failed\":\n      return t.previewFailed;\n    case \"source-read-failed\":\n      return t.failedToReadFile;\n    case \"file-too-large\":\n      return t.largeFile;\n    case \"aborted\":\n      return t.loadingCancelled;\n    default:\n      return t.previewFailed;\n  }\n}\n\nfunction getFallbackDescription(\n  kind: PreviewFallbackKind,\n  t: ReturnType<typeof useLocale>,\n): string | undefined {\n  switch (kind) {\n    case \"unsupported\":\n      return t.unsupportedFileType.replace(\"{fileType}\", \"\");\n    case \"plugin-load-failed\":\n      return \"The preview plugin could not be loaded. This may be a network issue or the plugin is not installed.\";\n    case \"render-failed\":\n      return \"The preview crashed while rendering. You can retry or download the original file.\";\n    case \"source-read-failed\":\n      return \"Could not read file content. The file may be corrupted or inaccessible.\";\n    case \"file-too-large\":\n      return t.largeFileHint;\n    case \"aborted\":\n      return \"File loading was cancelled.\";\n    default:\n      return undefined;\n  }\n}\n\nfunction PreviewErrorDetails({\n  error,\n  pluginId,\n  pluginName,\n  t,\n}: {\n  error?: unknown;\n  pluginId?: string;\n  pluginName?: string;\n  t: ReturnType<typeof useLocale>;\n}) {\n  const [expanded, setExpanded] = useState(false);\n\n  if (!error) return null;\n\n  const message =\n    error instanceof Error\n      ? `${error.name}: ${error.message}`\n      : String(error);\n\n  return (\n    <div className=\"fv-fallback__details\">\n      <button\n        onClick={() => setExpanded((v) => !v)}\n        className=\"fv-fallback__details-toggle\"\n      >\n        {expanded ? \"Hide\" : \"Show\"} {t.showErrorDetails.toLowerCase()}\n      </button>\n\n      {expanded && (\n        <div className=\"fv-fallback__details-pre\">\n          {pluginName && `Plugin: ${pluginName}\\n`}\n          {pluginId && `ID: ${pluginId}\\n`}\n          {message}\n          <button\n            onClick={() => {\n              const text = [\n                pluginName && `Plugin: ${pluginName}`,\n                pluginId && `ID: ${pluginId}`,\n                message,\n              ]\n                .filter(Boolean)\n                .join(\"\\n\");\n              navigator.clipboard.writeText(text);\n            }}\n            className=\"fv-fallback__details-copy\"\n            title={t.copyCode}\n          >\n            <CopyIcon size={12} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function PreviewFallback({\n  kind,\n  file,\n  title,\n  description,\n  error,\n  pluginId,\n  pluginName,\n  onRetry,\n  canDownload = true,\n}: PreviewFallbackProps) {\n  const t = useLocale();\n\n  return (\n    <div className=\"fv-fallback\">\n      <div className=\"fv-fallback__inner\">\n        <div className=\"fv-fallback__icon-wrap\">\n          <AlertTriangleIcon size={24} />\n        </div>\n\n        <div>\n          <h3 className=\"fv-fallback__title\">\n            {title ?? getFallbackTitle(kind, t)}\n          </h3>\n          <p className=\"fv-fallback__desc\">\n            {description ?? getFallbackDescription(kind, t)}\n          </p>\n          <p className=\"fv-fallback__meta\">\n            {file.name} · {formatFileSize(file.size)}\n          </p>\n        </div>\n\n        <div className=\"fv-fallback__actions\">\n          {onRetry && (\n            <button className=\"fv-btn fv-btn--primary fv-btn--sm\" onClick={onRetry}>\n              Retry\n            </button>\n          )}\n\n          {canDownload && (\n            <button\n              className=\"fv-btn fv-btn--outline fv-btn--sm\"\n              onClick={() => downloadSource(file.source, file.name, file.type)}\n            >\n              <DownloadIcon size={16} /> {t.downloadOriginal}\n            </button>\n          )}\n        </div>\n\n        <PreviewErrorDetails\n          error={error}\n          pluginId={pluginId}\n          pluginName={pluginName}\n          t={t}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/PreviewLoading.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+
+interface PreviewLoadingProps {
+    label?: string;
+}
+declare function PreviewLoading({ label, }: PreviewLoadingProps): react.JSX.Element;
+
+export { PreviewLoading };

package/dist/PreviewLoading.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./styles/PreviewLoading.css";
+function PreviewLoading({
+  label = "Loading preview..."
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "fv-loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "fv-spinner fv-spinner--lg" }),
+    /* @__PURE__ */ jsx("p", { className: "fv-loading__label", children: label })
+  ] });
+}
+export {
+  PreviewLoading
+};
+//# sourceMappingURL=PreviewLoading.js.map

package/dist/PreviewLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PreviewLoading.tsx"],"sourcesContent":["import \"./styles/PreviewLoading.css\";\n\ninterface PreviewLoadingProps {\n  label?: string;\n}\n\nexport function PreviewLoading({\n  label = \"Loading preview...\",\n}: PreviewLoadingProps) {\n  return (\n    <div className=\"fv-loading\">\n      <div className=\"fv-spinner fv-spinner--lg\" />\n      <p className=\"fv-loading__label\">{label}</p>\n    </div>\n  );\n}\n"],"mappings":"AAUI,SACE,KADF;AAVJ,OAAO;AAMA,SAAS,eAAe;AAAA,EAC7B,QAAQ;AACV,GAAwB;AACtB,SACE,qBAAC,SAAI,WAAU,cACb;AAAA,wBAAC,SAAI,WAAU,6BAA4B;AAAA,IAC3C,oBAAC,OAAE,WAAU,qBAAqB,iBAAM;AAAA,KAC1C;AAEJ;","names":[]}

package/dist/RtfPreview.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+interface RtfPreviewProps {
+    buffer: ArrayBuffer;
+    rawText: string;
+    fileName: string;
+}
+declare function RtfPreview({ buffer, rawText, fileName }: RtfPreviewProps): react.JSX.Element;
+
+export { RtfPreview };

package/dist/RtfPreview.js

@@ -0,0 +1,240 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { EyeIcon, Code2Icon } from "./icons";
+import DOMPurify from "dompurify";
+import { ShikiSourceView } from "./ShikiSourceView";
+import { loadRtfJsGlobals } from "./rtf/load-rtfjs";
+import { normalizeRtfCodepage } from "./rtf/normalize-codepage";
+import { useLocale } from "./core/i18n";
+import "./styles/RtfPreview.css";
+import "./styles/ViewModeBar.css";
+function extractRtfText(rtf) {
+  let text = rtf;
+  let prev;
+  do {
+    prev = text;
+    text = text.replace(/\{\\\*[^{}]*\}/g, "");
+  } while (text !== prev);
+  text = text.replace(
+    /\{\\(?:fonttbl|colortbl|stylesheet|info|generator|listtable|listoverridetable|rsidtbl|datastore|themedata)[^{}]*(?:\{[^{}]*\}[^{}]*)*\}/gi,
+    ""
+  );
+  text = text.replace(/\\par\b\s?/g, "\n");
+  text = text.replace(/\\line\b\s?/g, "\n");
+  text = text.replace(/\\tab\b\s?/g, "	");
+  text = text.replace(/\\u(-?\d+)\??/g, (_, n) => {
+    let code = parseInt(n, 10);
+    if (code < 0) code += 65536;
+    return String.fromCharCode(code);
+  });
+  text = text.replace(
+    /\\'([0-9a-fA-F]{2})/g,
+    (_, hex) => String.fromCharCode(parseInt(hex, 16))
+  );
+  text = text.replace(/\\([\\{}])/g, "$1");
+  text = text.replace(/\\[a-z]+-?\d* ?/gi, "");
+  text = text.replace(/\\[^a-zA-Z0-9]/g, "");
+  text = text.replace(/[{}]/g, "");
+  text = text.replace(/\r\n?/g, "\n");
+  return text.split("\n").map((l) => l.trim()).filter(Boolean);
+}
+async function buildRtfHtml(buffer) {
+  const head = new TextDecoder("ascii", { fatal: false }).decode(
+    buffer.slice(0, 16)
+  );
+  if (!head.trimStart().startsWith("{\\rtf")) {
+    return {
+      html: null,
+      error: "Not a valid RTF stream (missing {\\rtf header)"
+    };
+  }
+  try {
+    const { RTFJS } = await loadRtfJsGlobals();
+    const { bytes, injectedCodepage } = normalizeRtfCodepage(buffer);
+    if (injectedCodepage !== null) {
+      console.info(
+        `[FileVista][RTF] no \\ansicpg in source \u2014 inferred cp${injectedCodepage} from \\fcharset`
+      );
+    }
+    const doc = new RTFJS.Document(bytes.buffer.slice(
+      bytes.byteOffset,
+      bytes.byteOffset + bytes.byteLength
+    ), {});
+    const elements = await doc.render();
+    const container = document.createElement("div");
+    for (const el of elements) {
+      container.appendChild(el);
+    }
+    let rawHtml = container.innerHTML;
+    rawHtml = rawHtml.replace(/undefined/g, "");
+    if (!rawHtml.trim()) {
+      return { html: null, error: "Parsed RTF produced no renderable content" };
+    }
+    const sanitized = DOMPurify.sanitize(rawHtml, {
+      USE_PROFILES: { html: true, svg: true, svgFilters: true },
+      FORBID_TAGS: ["script", "iframe", "object", "embed", "form", "input", "button"],
+      ALLOWED_ATTR: [
+        "href",
+        "src",
+        "alt",
+        "title",
+        "width",
+        "height",
+        "colspan",
+        "rowspan",
+        "align",
+        "valign",
+        "border",
+        "cellpadding",
+        "cellspacing",
+        "class",
+        "style"
+      ]
+    });
+    return { html: sanitized, error: null };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.warn("[FileVista][RTF] rich render failed, falling back to text:", message);
+    return { html: null, error: message };
+  }
+}
+function buildIframeDoc(html) {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+      "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue",
+      Arial, sans-serif;
+    font-size: 15px; line-height: 1.7; color: #1f2937; background: #fff;
+  }
+  body { padding: 32px 40px; max-width: 860px; margin: 0 auto; }
+  h1, h2, h3 { line-height: 1.3; font-weight: 600; color: #111827; }
+  h1 { font-size: 1.75rem; margin: 1.4rem 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e5e7eb; }
+  h2 { font-size: 1.4rem; margin: 1.3rem 0 0.7rem; padding-bottom: 0.35rem; border-bottom: 1px solid #e5e7eb; }
+  h3 { font-size: 1.15rem; margin: 1.1rem 0 0.55rem; }
+  h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
+  p { margin: 0 0 0.8rem; } p:last-child { margin-bottom: 0; }
+  strong, b { font-weight: 600; color: #111827; }
+  em, i { font-style: italic; } u { text-decoration: underline; text-underline-offset: 2px; }
+  s, strike, del { text-decoration: line-through; }
+  table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; }
+  th, td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; vertical-align: top; }
+  th { background: #f9fafb; font-weight: 600; }
+  ul, ol { padding-left: 1.6rem; margin: 0 0 0.8rem; } li { margin-bottom: 0.25rem; }
+  a { color: #2563eb; text-decoration: underline; }
+  blockquote { border-left: 3px solid #d1d5db; padding: 0.25rem 0 0.25rem 1rem; margin: 0.8rem 0; color: #4b5563; }
+  pre { background: #f3f4f6; padding: 12px 16px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 0.8rem 0; }
+  code { background: #f3f4f6; padding: 2px 5px; border-radius: 3px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  pre code { background: none; padding: 0; }
+  img, svg { max-width: 100%; height: auto; }
+  hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.2rem 0; }
+  body > div { margin: 0; }
+  @media (prefers-color-scheme: dark) {
+    html, body { color: #d1d5db; background: #111827; }
+    h1, h2, h3 { color: #f3f4f6; } h1, h2 { border-color: #374151; }
+    strong, b { color: #f9fafb; } th { background: #1f2937; } th, td { border-color: #374151; }
+    pre, code { background: #1f2937; } blockquote { border-color: #4b5563; color: #9ca3af; }
+    a { color: #60a5fa; } hr { border-color: #374151; }
+  }
+</style>
+</head>
+<body>${html}</body></html>`;
+}
+function RtfPreview({ buffer, rawText, fileName }) {
+  const [viewMode, setViewMode] = useState("preview");
+  const [iframeHtml, setIframeHtml] = useState(null);
+  const [renderError, setRenderError] = useState(null);
+  const [renderState, setRenderState] = useState("loading");
+  const t = useLocale();
+  useEffect(() => {
+    let cancelled = false;
+    setRenderState("loading");
+    buildRtfHtml(buffer).then((result) => {
+      if (cancelled) return;
+      if (result.html !== null) {
+        setIframeHtml(buildIframeDoc(result.html));
+        setRenderError(null);
+      } else {
+        setIframeHtml(null);
+        setRenderError(result.error);
+      }
+      setRenderState("done");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [buffer]);
+  return /* @__PURE__ */ jsxs("div", { className: "fv-rtf", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fv-rtf__topbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fv-rtf__topbar-left", children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--fv-font-size-sm)" }, children: "\u{1F4C3}" }),
+        /* @__PURE__ */ jsx("span", { className: "fv-rtf__filename", children: fileName }),
+        /* @__PURE__ */ jsx("span", { className: "fv-rtf__filetype", children: "RTF" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "fv-view-mode-group", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setViewMode("preview"),
+            className: `fv-view-mode-btn ${viewMode === "preview" ? "fv-view-mode-btn--active" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(EyeIcon, { size: 13 }),
+              t.preview
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setViewMode("source"),
+            className: `fv-view-mode-btn ${viewMode === "source" ? "fv-view-mode-btn--active" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(Code2Icon, { size: 13 }),
+              t.source
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "fv-rtf__content", children: viewMode === "preview" ? renderState === "loading" ? /* @__PURE__ */ jsx("div", { className: "fv-rtf__loading", children: t.loadingRtf }) : iframeHtml ? /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        srcDoc: iframeHtml,
+        sandbox: "",
+        className: "fv-rtf__iframe",
+        title: `Preview of ${fileName}`
+      }
+    ) : /* @__PURE__ */ jsx(RtfTextFallback, { rawText, renderError, t }) : /* @__PURE__ */ jsx(ShikiSourceView, { content: rawText, fileName, language: "text" }) })
+  ] });
+}
+function RtfTextFallback({
+  rawText,
+  renderError,
+  t
+}) {
+  const paragraphs = extractRtfText(rawText);
+  return /* @__PURE__ */ jsx("div", { className: "fv-rtf-text-fallback", children: /* @__PURE__ */ jsxs("div", { className: "fv-rtf-text-fallback__inner", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fv-rtf-text-fallback__warn", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fv-rtf-text-fallback__warn-header", children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--fv-font-size-sm)" }, children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ jsx("span", { className: "fv-rtf-text-fallback__warn-text", children: t.rtfFallback })
+      ] }),
+      renderError && /* @__PURE__ */ jsxs("details", { style: { marginTop: "0.5rem" }, children: [
+        /* @__PURE__ */ jsx("summary", { style: { cursor: "pointer", fontSize: "11px", color: "var(--fv-warning)", opacity: 0.7 }, children: t.showErrorDetails }),
+        /* @__PURE__ */ jsx("pre", { style: { marginTop: "0.375rem", fontSize: "10px", color: "var(--fv-warning)", opacity: 0.7, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: renderError })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "fv-rtf-text-fallback__paper", children: [
+      paragraphs.map((para, i) => /* @__PURE__ */ jsx("p", { className: "fv-rtf-text-fallback__p", children: para }, i)),
+      paragraphs.length === 0 && /* @__PURE__ */ jsx("p", { style: { color: "var(--fv-muted-foreground)", fontSize: "var(--fv-font-size-sm)" }, children: t.rtfNoText })
+    ] })
+  ] }) });
+}
+export {
+  RtfPreview
+};
+//# sourceMappingURL=RtfPreview.js.map

package/dist/RtfPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RtfPreview.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { EyeIcon, Code2Icon } from \"./icons\";\nimport DOMPurify from \"dompurify\";\nimport { ShikiSourceView } from \"./ShikiSourceView\";\nimport { loadRtfJsGlobals } from \"./rtf/load-rtfjs\";\nimport { normalizeRtfCodepage } from \"./rtf/normalize-codepage\";\nimport { useLocale } from \"./core/i18n\";\nimport \"./styles/RtfPreview.css\";\nimport \"./styles/ViewModeBar.css\";\n\ninterface RtfPreviewProps {\n  buffer: ArrayBuffer;\n  rawText: string;\n  fileName: string;\n}\n\ntype ViewMode = \"preview\" | \"source\";\n\nfunction extractRtfText(rtf: string): string[] {\n  let text = rtf;\n  let prev: string;\n  do {\n    prev = text;\n    text = text.replace(/\\{\\\\\\*[^{}]*\\}/g, \"\");\n  } while (text !== prev);\n\n  text = text.replace(\n    /\\{\\\\(?:fonttbl|colortbl|stylesheet|info|generator|listtable|listoverridetable|rsidtbl|datastore|themedata)[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\}/gi,\n    \"\",\n  );\n\n  text = text.replace(/\\\\par\\b\\s?/g, \"\\n\");\n  text = text.replace(/\\\\line\\b\\s?/g, \"\\n\");\n  text = text.replace(/\\\\tab\\b\\s?/g, \"\\t\");\n\n  text = text.replace(/\\\\u(-?\\d+)\\??/g, (_, n) => {\n    let code = parseInt(n, 10);\n    if (code < 0) code += 65536;\n    return String.fromCharCode(code);\n  });\n\n  text = text.replace(/\\\\'([0-9a-fA-F]{2})/g, (_, hex) =>\n    String.fromCharCode(parseInt(hex, 16)),\n  );\n\n  text = text.replace(/\\\\([\\\\{}])/g, \"$1\");\n  text = text.replace(/\\\\[a-z]+-?\\d* ?/gi, \"\");\n  text = text.replace(/\\\\[^a-zA-Z0-9]/g, \"\");\n  text = text.replace(/[{}]/g, \"\");\n  text = text.replace(/\\r\\n?/g, \"\\n\");\n\n  return text\n    .split(\"\\n\")\n    .map((l) => l.trim())\n    .filter(Boolean);\n}\n\nasync function buildRtfHtml(\n  buffer: ArrayBuffer,\n): Promise<{ html: string | null; error: string | null }> {\n  const head = new TextDecoder(\"ascii\", { fatal: false }).decode(\n    buffer.slice(0, 16),\n  );\n  if (!head.trimStart().startsWith(\"{\\\\rtf\")) {\n    return {\n      html: null,\n      error: \"Not a valid RTF stream (missing {\\\\rtf header)\",\n    };\n  }\n\n  try {\n    const { RTFJS } = await loadRtfJsGlobals();\n\n    const { bytes, injectedCodepage } = normalizeRtfCodepage(buffer);\n    if (injectedCodepage !== null) {\n      console.info(\n        `[FileVista][RTF] no \\\\ansicpg in source — inferred cp${injectedCodepage} from \\\\fcharset`,\n      );\n    }\n\n    const doc = new RTFJS.Document(bytes.buffer.slice(\n      bytes.byteOffset,\n      bytes.byteOffset + bytes.byteLength,\n    ) as ArrayBuffer, {});\n    const elements = await doc.render();\n\n    const container = document.createElement(\"div\");\n    for (const el of elements) {\n      container.appendChild(el);\n    }\n    let rawHtml = container.innerHTML;\n    rawHtml = rawHtml.replace(/undefined/g, \"\");\n\n    if (!rawHtml.trim()) {\n      return { html: null, error: \"Parsed RTF produced no renderable content\" };\n    }\n\n    const sanitized = DOMPurify.sanitize(rawHtml, {\n      USE_PROFILES: { html: true, svg: true, svgFilters: true },\n      FORBID_TAGS: [\"script\", \"iframe\", \"object\", \"embed\", \"form\", \"input\", \"button\"],\n      ALLOWED_ATTR: [\n        \"href\", \"src\", \"alt\", \"title\", \"width\", \"height\",\n        \"colspan\", \"rowspan\", \"align\", \"valign\", \"border\",\n        \"cellpadding\", \"cellspacing\", \"class\", \"style\",\n      ],\n    });\n\n    return { html: sanitized, error: null };\n  } catch (err) {\n    const message = err instanceof Error ? err.message : String(err);\n    console.warn(\"[FileVista][RTF] rich render failed, falling back to text:\", message);\n    return { html: null, error: message };\n  }\n}\n\nfunction buildIframeDoc(html: string): string {\n  return `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<style>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  html, body {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\",\n      \"Hiragino Sans GB\", \"Microsoft YaHei\", Roboto, \"Helvetica Neue\",\n      Arial, sans-serif;\n    font-size: 15px; line-height: 1.7; color: #1f2937; background: #fff;\n  }\n  body { padding: 32px 40px; max-width: 860px; margin: 0 auto; }\n  h1, h2, h3 { line-height: 1.3; font-weight: 600; color: #111827; }\n  h1 { font-size: 1.75rem; margin: 1.4rem 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e5e7eb; }\n  h2 { font-size: 1.4rem; margin: 1.3rem 0 0.7rem; padding-bottom: 0.35rem; border-bottom: 1px solid #e5e7eb; }\n  h3 { font-size: 1.15rem; margin: 1.1rem 0 0.55rem; }\n  h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }\n  p { margin: 0 0 0.8rem; } p:last-child { margin-bottom: 0; }\n  strong, b { font-weight: 600; color: #111827; }\n  em, i { font-style: italic; } u { text-decoration: underline; text-underline-offset: 2px; }\n  s, strike, del { text-decoration: line-through; }\n  table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; }\n  th, td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; vertical-align: top; }\n  th { background: #f9fafb; font-weight: 600; }\n  ul, ol { padding-left: 1.6rem; margin: 0 0 0.8rem; } li { margin-bottom: 0.25rem; }\n  a { color: #2563eb; text-decoration: underline; }\n  blockquote { border-left: 3px solid #d1d5db; padding: 0.25rem 0 0.25rem 1rem; margin: 0.8rem 0; color: #4b5563; }\n  pre { background: #f3f4f6; padding: 12px 16px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 0.8rem 0; }\n  code { background: #f3f4f6; padding: 2px 5px; border-radius: 3px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }\n  pre code { background: none; padding: 0; }\n  img, svg { max-width: 100%; height: auto; }\n  hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.2rem 0; }\n  body > div { margin: 0; }\n  @media (prefers-color-scheme: dark) {\n    html, body { color: #d1d5db; background: #111827; }\n    h1, h2, h3 { color: #f3f4f6; } h1, h2 { border-color: #374151; }\n    strong, b { color: #f9fafb; } th { background: #1f2937; } th, td { border-color: #374151; }\n    pre, code { background: #1f2937; } blockquote { border-color: #4b5563; color: #9ca3af; }\n    a { color: #60a5fa; } hr { border-color: #374151; }\n  }\n</style>\n</head>\n<body>${html}</body></html>`;\n}\n\nexport function RtfPreview({ buffer, rawText, fileName }: RtfPreviewProps) {\n  const [viewMode, setViewMode] = useState<ViewMode>(\"preview\");\n  const [iframeHtml, setIframeHtml] = useState<string | null>(null);\n  const [renderError, setRenderError] = useState<string | null>(null);\n  const [renderState, setRenderState] = useState<\"loading\" | \"done\">(\"loading\");\n  const t = useLocale();\n\n  useEffect(() => {\n    let cancelled = false;\n    setRenderState(\"loading\");\n\n    buildRtfHtml(buffer).then((result) => {\n      if (cancelled) return;\n      if (result.html !== null) {\n        setIframeHtml(buildIframeDoc(result.html));\n        setRenderError(null);\n      } else {\n        setIframeHtml(null);\n        setRenderError(result.error);\n      }\n      setRenderState(\"done\");\n    });\n\n    return () => { cancelled = true; };\n  }, [buffer]);\n\n  return (\n    <div className=\"fv-rtf\">\n      <div className=\"fv-rtf__topbar\">\n        <div className=\"fv-rtf__topbar-left\">\n          <span style={{ fontSize: 'var(--fv-font-size-sm)' }}>📃</span>\n          <span className=\"fv-rtf__filename\">{fileName}</span>\n          <span className=\"fv-rtf__filetype\">RTF</span>\n        </div>\n        <div className=\"fv-view-mode-group\">\n          <button\n            onClick={() => setViewMode(\"preview\")}\n            className={`fv-view-mode-btn ${viewMode === \"preview\" ? \"fv-view-mode-btn--active\" : \"\"}`}\n          >\n            <EyeIcon size={13} />\n            {t.preview}\n          </button>\n          <button\n            onClick={() => setViewMode(\"source\")}\n            className={`fv-view-mode-btn ${viewMode === \"source\" ? \"fv-view-mode-btn--active\" : \"\"}`}\n          >\n            <Code2Icon size={13} />\n            {t.source}\n          </button>\n        </div>\n      </div>\n\n      <div className=\"fv-rtf__content\">\n        {viewMode === \"preview\" ? (\n          renderState === \"loading\" ? (\n            <div className=\"fv-rtf__loading\">{t.loadingRtf}</div>\n          ) : iframeHtml ? (\n            <iframe\n              srcDoc={iframeHtml}\n              sandbox=\"\"\n              className=\"fv-rtf__iframe\"\n              title={`Preview of ${fileName}`}\n            />\n          ) : (\n            <RtfTextFallback rawText={rawText} renderError={renderError} t={t} />\n          )\n        ) : (\n          <ShikiSourceView content={rawText} fileName={fileName} language=\"text\" />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction RtfTextFallback({\n  rawText,\n  renderError,\n  t,\n}: {\n  rawText: string;\n  renderError: string | null;\n  t: ReturnType<typeof useLocale>;\n}) {\n  const paragraphs = extractRtfText(rawText);\n\n  return (\n    <div className=\"fv-rtf-text-fallback\">\n      <div className=\"fv-rtf-text-fallback__inner\">\n        <div className=\"fv-rtf-text-fallback__warn\">\n          <div className=\"fv-rtf-text-fallback__warn-header\">\n            <span style={{ fontSize: 'var(--fv-font-size-sm)' }}>⚠️</span>\n            <span className=\"fv-rtf-text-fallback__warn-text\">\n              {t.rtfFallback}\n            </span>\n          </div>\n          {renderError && (\n            <details style={{ marginTop: '0.5rem' }}>\n              <summary style={{ cursor: 'pointer', fontSize: '11px', color: 'var(--fv-warning)', opacity: 0.7 }}>\n                {t.showErrorDetails}\n              </summary>\n              <pre style={{ marginTop: '0.375rem', fontSize: '10px', color: 'var(--fv-warning)', opacity: 0.7, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>\n                {renderError}\n              </pre>\n            </details>\n          )}\n        </div>\n        <div className=\"fv-rtf-text-fallback__paper\">\n          {paragraphs.map((para, i) => (\n            <p key={i} className=\"fv-rtf-text-fallback__p\">{para}</p>\n          ))}\n          {paragraphs.length === 0 && (\n            <p style={{ color: 'var(--fv-muted-foreground)', fontSize: 'var(--fv-font-size-sm)' }}>\n              {t.rtfNoText}\n            </p>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ShikiSourceView.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+
+interface ShikiSourceViewProps {
+    content: string;
+    fileName: string;
+    language?: string;
+    showToolbar?: boolean;
+}
+declare function ShikiSourceView({ content, fileName, language: languageOverride, showToolbar, }: ShikiSourceViewProps): react.JSX.Element;
+
+export { ShikiSourceView };

package/dist/ShikiSourceView.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { CopyIcon, CheckIcon, WrapTextIcon } from "./icons";
+import { highlightCode, getShikiLanguage } from "./shiki";
+import { shouldHighlight } from "./limits";
+import { PlainTextLargePreview } from "./PlainTextLargePreview";
+import { useLocale } from "./core/i18n";
+import "./styles/ShikiSourceView.css";
+function ShikiSourceView({
+  content,
+  fileName,
+  language: languageOverride,
+  showToolbar = true
+}) {
+  const [html, setHtml] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
+  const [wordWrap, setWordWrap] = useState(true);
+  const t = useLocale();
+  const language = useMemo(
+    () => languageOverride || getShikiLanguage(fileName),
+    [languageOverride, fileName]
+  );
+  const lineCount = useMemo(
+    () => content.split("\n").length,
+    [content]
+  );
+  const canHighlight = useMemo(() => shouldHighlight(content), [content]);
+  const [prevDeps, setPrevDeps] = useState({ content, language });
+  if (prevDeps.content !== content || prevDeps.language !== language) {
+    setPrevDeps({ content, language });
+    setHtml("");
+    setLoading(canHighlight);
+  }
+  useEffect(() => {
+    if (!canHighlight) return;
+    let cancelled = false;
+    highlightCode(content, language).then(
+      (result) => {
+        if (cancelled) return;
+        setHtml(result);
+        setLoading(false);
+      },
+      (err) => {
+        if (cancelled) return;
+        console.warn("[ShikiSourceView] highlight error:", err);
+        setHtml("");
+        setLoading(false);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [content, language, canHighlight]);
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [content]);
+  if (!canHighlight) {
+    return /* @__PURE__ */ jsx(PlainTextLargePreview, { content, language });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fv-source", children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "fv-source__toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fv-source__toolbar-left", children: [
+        /* @__PURE__ */ jsx("span", { className: "fv-source__lang-badge", children: language }),
+        /* @__PURE__ */ jsxs("span", { className: "fv-source__line-count", children: [
+          lineCount,
+          " line",
+          lineCount !== 1 ? "s" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "fv-source__toolbar-right", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setWordWrap((w) => !w),
+            className: `fv-btn fv-btn--icon ${wordWrap ? "fv-source__btn-active" : ""}`,
+            title: wordWrap ? "Disable word wrap" : "Enable word wrap",
+            children: /* @__PURE__ */ jsx(WrapTextIcon, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "fv-btn fv-btn--icon",
+            title: t.copyCode,
+            children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "fv-source__content", children: loading ? /* @__PURE__ */ jsx("div", { className: "fv-source__loading", children: /* @__PURE__ */ jsxs("div", { className: "fv-source__loading-inner", children: [
+      /* @__PURE__ */ jsx("div", { className: "fv-spinner" }),
+      /* @__PURE__ */ jsx("p", { className: "fv-source__loading-label", children: "Loading syntax highlighter..." })
+    ] }) }) : html ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `fv-shiki-wrapper ${wordWrap ? "fv-shiki-wrap" : "fv-shiki-nowrap"}`,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "fv-shiki-plaintext", children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: content.split("\n").map((line, i) => /* @__PURE__ */ jsxs("div", { className: "line", children: [
+      /* @__PURE__ */ jsx("span", { className: "linenumber", children: i + 1 }),
+      /* @__PURE__ */ jsx("span", { className: "linecontent", children: line || "\xA0" })
+    ] }, i)) }) }) }) })
+  ] });
+}
+export {
+  ShikiSourceView
+};
+//# sourceMappingURL=ShikiSourceView.js.map

package/dist/ShikiSourceView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ShikiSourceView.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useMemo } from \"react\";\nimport { CopyIcon, CheckIcon, WrapTextIcon } from \"./icons\";\nimport { highlightCode, getShikiLanguage } from \"./shiki\";\nimport { shouldHighlight } from \"./limits\";\nimport { PlainTextLargePreview } from \"./PlainTextLargePreview\";\nimport { useLocale } from \"./core/i18n\";\nimport \"./styles/ShikiSourceView.css\";\n\ninterface ShikiSourceViewProps {\n  content: string;\n  fileName: string;\n  language?: string;\n  showToolbar?: boolean;\n}\n\nexport function ShikiSourceView({\n  content,\n  fileName,\n  language: languageOverride,\n  showToolbar = true,\n}: ShikiSourceViewProps) {\n  const [html, setHtml] = useState<string>(\"\");\n  const [loading, setLoading] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const [wordWrap, setWordWrap] = useState(true);\n  const t = useLocale();\n\n  const language = useMemo(\n    () => languageOverride || getShikiLanguage(fileName),\n    [languageOverride, fileName]\n  );\n\n  const lineCount = useMemo(\n    () => content.split(\"\\n\").length,\n    [content]\n  );\n\n  const canHighlight = useMemo(() => shouldHighlight(content), [content]);\n\n  const [prevDeps, setPrevDeps] = useState({ content, language });\n  if (prevDeps.content !== content || prevDeps.language !== language) {\n    setPrevDeps({ content, language });\n    setHtml(\"\");\n    setLoading(canHighlight);\n  }\n\n  useEffect(() => {\n    if (!canHighlight) return;\n\n    let cancelled = false;\n    highlightCode(content, language).then(\n      (result) => {\n        if (cancelled) return;\n        setHtml(result);\n        setLoading(false);\n      },\n      (err) => {\n        if (cancelled) return;\n        console.warn(\"[ShikiSourceView] highlight error:\", err);\n        setHtml(\"\");\n        setLoading(false);\n      }\n    );\n\n    return () => {\n      cancelled = true;\n    };\n  }, [content, language, canHighlight]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(content);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [content]);\n\n  if (!canHighlight) {\n    return <PlainTextLargePreview content={content} language={language} />;\n  }\n\n  return (\n    <div className=\"fv-source\">\n      {showToolbar && (\n        <div className=\"fv-source__toolbar\">\n          <div className=\"fv-source__toolbar-left\">\n            <span className=\"fv-source__lang-badge\">{language}</span>\n            <span className=\"fv-source__line-count\">\n              {lineCount} line{lineCount !== 1 ? \"s\" : \"\"}\n            </span>\n          </div>\n          <div className=\"fv-source__toolbar-right\">\n            <button\n              onClick={() => setWordWrap((w) => !w)}\n              className={`fv-btn fv-btn--icon ${wordWrap ? \"fv-source__btn-active\" : \"\"}`}\n              title={wordWrap ? \"Disable word wrap\" : \"Enable word wrap\"}\n            >\n              <WrapTextIcon size={14} />\n            </button>\n            <button\n              onClick={handleCopy}\n              className=\"fv-btn fv-btn--icon\"\n              title={t.copyCode}\n            >\n              {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}\n            </button>\n          </div>\n        </div>\n      )}\n\n      <div className=\"fv-source__content\">\n        {loading ? (\n          <div className=\"fv-source__loading\">\n            <div className=\"fv-source__loading-inner\">\n              <div className=\"fv-spinner\" />\n              <p className=\"fv-source__loading-label\">Loading syntax highlighter...</p>\n            </div>\n          </div>\n        ) : html ? (\n          <div\n            className={`fv-shiki-wrapper ${wordWrap ? \"fv-shiki-wrap\" : \"fv-shiki-nowrap\"}`}\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        ) : (\n          <div className=\"fv-shiki-plaintext\">\n            <pre>\n              <code>\n                {content.split(\"\\n\").map((line, i) => (\n                  <div key={i} className=\"line\">\n                    <span className=\"linenumber\">{i + 1}</span>\n                    <span className=\"linecontent\">{line || \" \"}</span>\n                  </div>\n                ))}\n              </code>\n            </pre>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/SvgPreview.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface SvgPreviewProps {
+    content: string;
+    fileName: string;
+}
+declare function SvgPreview({ content, fileName }: SvgPreviewProps): react.JSX.Element;
+
+export { SvgPreview };

package/dist/SvgPreview.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { EyeIcon, Code2Icon, Columns2Icon, ZoomInIcon, ZoomOutIcon, RotateCwIcon } from "./icons";
+import { ShikiSourceView } from "./ShikiSourceView";
+import { useLocale } from "./core/i18n";
+import "./styles/SvgPreview.css";
+function SvgPreview({ content, fileName }) {
+  const [viewMode, setViewMode] = useState("rendered");
+  const [zoom, setZoom] = useState(100);
+  const [rotation, setRotation] = useState(0);
+  const t = useLocale();
+  const svgUrl = useMemo(() => {
+    const blob = new Blob([content], { type: "image/svg+xml" });
+    return URL.createObjectURL(blob);
+  }, [content]);
+  useEffect(() => {
+    return () => URL.revokeObjectURL(svgUrl);
+  }, [svgUrl]);
+  const renderedView = /* @__PURE__ */ jsxs("div", { className: "fv-svg__panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fv-svg__toolbar", children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(z - 25, 25)), className: "fv-btn fv-btn--icon", title: "Zoom Out", children: /* @__PURE__ */ jsx(ZoomOutIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsxs("span", { className: "fv-svg__zoom-label", children: [
+        zoom,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.min(z + 25, 400)), className: "fv-btn fv-btn--icon", title: "Zoom In", children: /* @__PURE__ */ jsx(ZoomInIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsx("div", { className: "fv-toolbar__separator" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setRotation((r) => (r + 90) % 360), className: "fv-btn fv-btn--icon", title: "Rotate", children: /* @__PURE__ */ jsx(RotateCwIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        setZoom(100);
+        setRotation(0);
+      }, className: "fv-svg__reset-btn", children: "Reset" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "fv-svg__canvas", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: svgUrl,
+        alt: fileName,
+        className: "fv-svg__img",
+        style: { transform: `scale(${zoom / 100}) rotate(${rotation}deg)`, transformOrigin: "center center" }
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "fv-svg", children: [
+    /* @__PURE__ */ jsx("div", { className: "fv-svg__mode-bar", children: /* @__PURE__ */ jsxs("div", { className: "fv-svg__mode-group", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setViewMode("rendered"),
+          className: `fv-svg__mode-btn ${viewMode === "rendered" ? "fv-svg__mode-btn--active" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(EyeIcon, { size: 13 }),
+            t.preview
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setViewMode("source"),
+          className: `fv-svg__mode-btn ${viewMode === "source" ? "fv-svg__mode-btn--active" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(Code2Icon, { size: 13 }),
+            t.source
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setViewMode("split"),
+          className: `fv-svg__mode-btn ${viewMode === "split" ? "fv-svg__mode-btn--active" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(Columns2Icon, { size: 13 }),
+            t.split
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "fv-svg__content", children: [
+      (viewMode === "rendered" || viewMode === "split") && /* @__PURE__ */ jsx("div", { className: `fv-svg__panel ${viewMode === "split" ? "fv-svg__panel--split" : ""}`, children: renderedView }),
+      (viewMode === "source" || viewMode === "split") && /* @__PURE__ */ jsx("div", { className: `fv-svg__panel ${viewMode === "split" ? "fv-svg__panel--split-source" : ""}`, children: /* @__PURE__ */ jsx(ShikiSourceView, { content, fileName, language: "xml" }) })
+    ] })
+  ] });
+}
+export {
+  SvgPreview
+};
+//# sourceMappingURL=SvgPreview.js.map

package/dist/SvgPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SvgPreview.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from \"react\";\nimport { EyeIcon, Code2Icon, Columns2Icon, ZoomInIcon, ZoomOutIcon, RotateCwIcon } from \"./icons\";\nimport { ShikiSourceView } from \"./ShikiSourceView\";\nimport { useLocale } from \"./core/i18n\";\nimport \"./styles/SvgPreview.css\";\n\ninterface SvgPreviewProps {\n  content: string;\n  fileName: string;\n}\n\ntype ViewMode = \"rendered\" | \"source\" | \"split\";\n\nexport function SvgPreview({ content, fileName }: SvgPreviewProps) {\n  const [viewMode, setViewMode] = useState<ViewMode>(\"rendered\");\n  const [zoom, setZoom] = useState(100);\n  const [rotation, setRotation] = useState(0);\n  const t = useLocale();\n\n  const svgUrl = useMemo(() => {\n    const blob = new Blob([content], { type: \"image/svg+xml\" });\n    return URL.createObjectURL(blob);\n  }, [content]);\n\n  useEffect(() => {\n    return () => URL.revokeObjectURL(svgUrl);\n  }, [svgUrl]);\n\n  const renderedView = (\n    <div className=\"fv-svg__panel\">\n      <div className=\"fv-svg__toolbar\">\n        <button onClick={() => setZoom(z => Math.max(z - 25, 25))} className=\"fv-btn fv-btn--icon\" title=\"Zoom Out\">\n          <ZoomOutIcon size={14} />\n        </button>\n        <span className=\"fv-svg__zoom-label\">{zoom}%</span>\n        <button onClick={() => setZoom(z => Math.min(z + 25, 400))} className=\"fv-btn fv-btn--icon\" title=\"Zoom In\">\n          <ZoomInIcon size={14} />\n        </button>\n        <div className=\"fv-toolbar__separator\" />\n        <button onClick={() => setRotation(r => (r + 90) % 360)} className=\"fv-btn fv-btn--icon\" title=\"Rotate\">\n          <RotateCwIcon size={14} />\n        </button>\n        <button onClick={() => { setZoom(100); setRotation(0); }} className=\"fv-svg__reset-btn\">Reset</button>\n      </div>\n      <div className=\"fv-svg__canvas\">\n        <img\n          src={svgUrl}\n          alt={fileName}\n          className=\"fv-svg__img\"\n          style={{ transform: `scale(${zoom / 100}) rotate(${rotation}deg)`, transformOrigin: \"center center\" }}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"fv-svg\">\n      <div className=\"fv-svg__mode-bar\">\n        <div className=\"fv-svg__mode-group\">\n          <button\n            onClick={() => setViewMode(\"rendered\")}\n            className={`fv-svg__mode-btn ${viewMode === \"rendered\" ? \"fv-svg__mode-btn--active\" : \"\"}`}\n          >\n            <EyeIcon size={13} />\n            {t.preview}\n          </button>\n          <button\n            onClick={() => setViewMode(\"source\")}\n            className={`fv-svg__mode-btn ${viewMode === \"source\" ? \"fv-svg__mode-btn--active\" : \"\"}`}\n          >\n            <Code2Icon size={13} />\n            {t.source}\n          </button>\n          <button\n            onClick={() => setViewMode(\"split\")}\n            className={`fv-svg__mode-btn ${viewMode === \"split\" ? \"fv-svg__mode-btn--active\" : \"\"}`}\n          >\n            <Columns2Icon size={13} />\n            {t.split}\n          </button>\n        </div>\n      </div>\n\n      <div className=\"fv-svg__content\">\n        {(viewMode === \"rendered\" || viewMode === \"split\") && (\n          <div className={`fv-svg__panel ${viewMode === \"split\" ? \"fv-svg__panel--split\" : \"\"}`}>\n            {renderedView}\n          </div>\n        )}\n        {(viewMode === \"source\" || viewMode === \"split\") && (\n          <div className={`fv-svg__panel ${viewMode === \"split\" ? \"fv-svg__panel--split-source\" : \"\"}`}>\n            <ShikiSourceView content={content} fileName={fileName} language=\"xml\" />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAgCU,cAEF,YAFE;AAhCV,SAAS,UAAU,WAAW,eAAe;AAC7C,SAAS,SAAS,WAAW,cAAc,YAAY,aAAa,oBAAoB;AACxF,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,OAAO;AASA,SAAS,WAAW,EAAE,SAAS,SAAS,GAAoB;AACjE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,UAAU;AAC7D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,GAAG;AACpC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,IAAI,UAAU;AAEpB,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,OAAO,IAAI,KAAK,CAAC,OAAO,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAC1D,WAAO,IAAI,gBAAgB,IAAI;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,WAAO,MAAM,IAAI,gBAAgB,MAAM;AAAA,EACzC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,eACJ,qBAAC,SAAI,WAAU,iBACb;AAAA,yBAAC,SAAI,WAAU,mBACb;AAAA,0BAAC,YAAO,SAAS,MAAM,QAAQ,OAAK,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,GAAG,WAAU,uBAAsB,OAAM,YAC/F,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,MACA,qBAAC,UAAK,WAAU,sBAAsB;AAAA;AAAA,QAAK;AAAA,SAAC;AAAA,MAC5C,oBAAC,YAAO,SAAS,MAAM,QAAQ,OAAK,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,GAAG,WAAU,uBAAsB,OAAM,WAChG,8BAAC,cAAW,MAAM,IAAI,GACxB;AAAA,MACA,oBAAC,SAAI,WAAU,yBAAwB;AAAA,MACvC,oBAAC,YAAO,SAAS,MAAM,YAAY,QAAM,IAAI,MAAM,GAAG,GAAG,WAAU,uBAAsB,OAAM,UAC7F,8BAAC,gBAAa,MAAM,IAAI,GAC1B;AAAA,MACA,oBAAC,YAAO,SAAS,MAAM;AAAE,gBAAQ,GAAG;AAAG,oBAAY,CAAC;AAAA,MAAG,GAAG,WAAU,qBAAoB,mBAAK;AAAA,OAC/F;AAAA,IACA,oBAAC,SAAI,WAAU,kBACb;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,QAAQ,QAAQ,iBAAiB,gBAAgB;AAAA;AAAA,IACtG,GACF;AAAA,KACF;AAGF,SACE,qBAAC,SAAI,WAAU,UACb;AAAA,wBAAC,SAAI,WAAU,oBACb,+BAAC,SAAI,WAAU,sBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,YAAY,UAAU;AAAA,UACrC,WAAW,oBAAoB,aAAa,aAAa,6BAA6B,EAAE;AAAA,UAExF;AAAA,gCAAC,WAAQ,MAAM,IAAI;AAAA,YAClB,EAAE;AAAA;AAAA;AAAA,MACL;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,YAAY,QAAQ;AAAA,UACnC,WAAW,oBAAoB,aAAa,WAAW,6BAA6B,EAAE;AAAA,UAEtF;AAAA,gCAAC,aAAU,MAAM,IAAI;AAAA,YACpB,EAAE;AAAA;AAAA;AAAA,MACL;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,YAAY,OAAO;AAAA,UAClC,WAAW,oBAAoB,aAAa,UAAU,6BAA6B,EAAE;AAAA,UAErF;AAAA,gCAAC,gBAAa,MAAM,IAAI;AAAA,YACvB,EAAE;AAAA;AAAA;AAAA,MACL;AAAA,OACF,GACF;AAAA,IAEA,qBAAC,SAAI,WAAU,mBACX;AAAA,oBAAa,cAAc,aAAa,YACxC,oBAAC,SAAI,WAAW,iBAAiB,aAAa,UAAU,yBAAyB,EAAE,IAChF,wBACH;AAAA,OAEA,aAAa,YAAY,aAAa,YACtC,oBAAC,SAAI,WAAW,iBAAiB,aAAa,UAAU,gCAAgC,EAAE,IACxF,8BAAC,mBAAgB,SAAkB,UAAoB,UAAS,OAAM,GACxE;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/TextPreview.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface TextPreviewProps {
+    content: string;
+    fileName: string;
+}
+declare function TextPreview({ content, fileName }: TextPreviewProps): react.JSX.Element;
+
+export { TextPreview };

package/dist/TextPreview.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { ShikiSourceView } from "./ShikiSourceView";
+function TextPreview({ content, fileName }) {
+  return /* @__PURE__ */ jsx(ShikiSourceView, { content, fileName, language: "text" });
+}
+export {
+  TextPreview
+};
+//# sourceMappingURL=TextPreview.js.map

package/dist/TextPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextPreview.tsx"],"sourcesContent":["import { ShikiSourceView } from \"./ShikiSourceView\";\n\ninterface TextPreviewProps {\n  content: string;\n  fileName: string;\n}\n\nexport function TextPreview({ content, fileName }: TextPreviewProps) {\n  return <ShikiSourceView content={content} fileName={fileName} language=\"text\" />;\n}\n"],"mappings":"AAQS;AART,SAAS,uBAAuB;AAOzB,SAAS,YAAY,EAAE,SAAS,SAAS,GAAqB;AACnE,SAAO,oBAAC,mBAAgB,SAAkB,UAAoB,UAAS,QAAO;AAChF;","names":[]}

package/dist/VideoPreview.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface VideoPreviewProps {
+    url: string;
+    fileName: string;
+}
+declare function VideoPreview({ url, fileName }: VideoPreviewProps): react.JSX.Element;
+
+export { VideoPreview };