@lamberl-lee/file-preview 0.2.0

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,165 @@
+# @lamberl-lee/file-preview
+
+[![npm version](https://img.shields.io/npm/v/@lamberl-lee/file-preview.svg?style=flat-square)](https://www.npmjs.com/package/@lamberl-lee/file-preview)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@lamberl-lee/file-preview?style=flat-square&label=gzip)](https://bundlephobia.com/package/@lamberl-lee/file-preview)
+[![license](https://img.shields.io/npm/l/@lamberl-lee/file-preview?style=flat-square)](./LICENSE)
+[![CI](https://img.shields.io/github/actions/workflow/status/CoderLambert/filevista/ci.yml?branch=main&style=flat-square&label=CI)](https://github.com/CoderLambert/filevista/actions/workflows/ci.yml)
+
+> Browser-side file preview toolkit for React — 20+ formats with zero server processing.
+
+Render PDF, DOCX, PPTX, XLSX, EPUB, RTF, Markdown, code, images, video, audio, ZIP, CSV, SVG, HTML, and plain text — all in the browser. Files never leave the user's device.
+
+## Install
+
+```bash
+npm install @lamberl-lee/file-preview
+# or pnpm add / yarn add
+```
+
+The base install only ships what every consumer needs: Markdown, code highlighting (Shiki), HTML sanitization (DOMPurify), and the always-included image / video / audio / SVG / CSV / plain-text / JSON renderers.
+
+To preview the heavier formats, install **only the optional peer dependencies for the formats you actually use**:
+
+| Format | Add this peer dep | Approx size (gzipped) |
+| --- | --- | --- |
+| PDF | `pdfjs-dist` (^4.4.0) | ~280 KB worker, lazy-loaded |
+| DOCX | `docx-preview` (^0.3.7) | ~45 KB |
+| XLSX | `exceljs` (^4.4.0) | ~250 KB |
+| PPTX | `pptx-preview` (^1.0.7) | ~80 KB |
+| RTF | `rtf.js` (^3.0.9) | ~120 KB worker, lazy-loaded |
+| ZIP / EPUB | `jszip` (^3.10.1) | ~30 KB |
+
+```bash
+# Example: only PDF + Markdown previews
+pnpm add @lamberl-lee/file-preview pdfjs-dist
+```
+
+If a user uploads a format whose peer dep is missing, the preview falls back to a clear "install `<package>`" message instead of a cryptic bundler error. So you can ship safely with just the formats you need.
+
+`react` and `react-dom` (>=18.2) are also peer dependencies.
+
+## Quick start
+
+```tsx
+import {
+  PluginPreviewRenderer,
+  detectFileType,
+  setAssetBasePath,
+  type FileInfo,
+} from "@lamberl-lee/file-preview";
+import "@lamberl-lee/file-preview/styles/index.css";
+
+// Tell the library where PDF.js worker / RTF.js bundles are served from.
+// (See "Static assets" below.) Empty string means same origin / "/".
+setAssetBasePath("");
+
+function Demo({ file }: { file: File }) {
+  const info: FileInfo = {
+    id: crypto.randomUUID(),
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    fileType: detectFileType(file.name, file.type),
+    source: { kind: "file", file },
+  };
+
+  return <PluginPreviewRenderer file={info} />;
+}
+```
+
+### Remote URL
+
+```tsx
+import { processRemoteUrl } from "@lamberl-lee/file-preview";
+
+const info = await processRemoteUrl("https://example.com/foo.pdf", {
+  onProgress: (p) => console.log(p),
+});
+```
+
+## Static assets (PDF.js worker, RTF.js bundles)
+
+PDF and RTF previews need extra runtime assets that must be served from a static path. The package ships two helper scripts:
+
+```jsonc
+// package.json
+{
+  "scripts": {
+    "postinstall": "node node_modules/@lamberl-lee/file-preview/scripts/copy-pdf-worker.mjs && node node_modules/@lamberl-lee/file-preview/scripts/copy-rtfjs-bundles.mjs"
+  }
+}
+```
+
+These copy:
+
+- `pdfjs-dist/build/pdf.worker.min.mjs` → `public/vendor/pdfjs/pdf.worker.min.mjs`
+- `rtf.js/dist/{WMFJS,EMFJS,RTFJS}.bundle.min.js` → `public/vendor/rtfjs/`
+
+Skip the `copy-pdf-worker.mjs` line if you don't install `pdfjs-dist`, and the `copy-rtfjs-bundles.mjs` line if you don't install `rtf.js` — both scripts are no-ops when the source package is missing.
+
+Then call `setAssetBasePath()` once at app startup to match the public path you serve them from (e.g. `""` for root, `"/static"` for a CDN prefix, or `"/myapp"` for a Next.js `basePath`).
+
+## Theming
+
+Override CSS variables on the document root:
+
+```css
+[data-fv-theme="dark"] {
+  --fv-bg: #0b0b0c;
+  --fv-fg: #e7e7e7;
+  --fv-border: #2a2a2c;
+  --fv-primary: #4f8cff;
+  /* … */
+}
+```
+
+## i18n
+
+```tsx
+import { LocaleProvider, enUS } from "@lamberl-lee/file-preview";
+
+<LocaleProvider value={enUS}>
+  <PluginPreviewRenderer file={info} />
+</LocaleProvider>
+```
+
+Built-in locales: `zhCN` (default), `enUS`. Pass a fully custom `LocaleMessages` object to localize.
+
+## Custom plugin registry
+
+Drop or replace formats:
+
+```tsx
+import {
+  createPreviewPluginRegistry,
+  pdfPlugin,
+  markdownPlugin,
+  imagePlugin,
+} from "@lamberl-lee/file-preview";
+
+const registry = createPreviewPluginRegistry([pdfPlugin, markdownPlugin, imagePlugin]);
+
+<PluginPreviewRenderer file={info} registry={registry} />;
+```
+
+A registry built from a subset of plugins also means the bundler will tree-shake away the formats you don't include.
+
+## Supported formats
+
+PDF · DOCX · PPTX · XLSX · EPUB · RTF · Markdown · HTML · code (Shiki-highlighted) · plain text · CSV · JSON · SVG · images · video · audio · ZIP listing.
+
+## Browser support
+
+| Browser | Minimum |
+| --- | --- |
+| Chrome / Edge | 90+ |
+| Firefox | 88+ |
+| Safari | 14+ |
+
+The library relies on browser-native `File`/`Blob`/`ArrayBuffer`, `fetch`, `URL.createObjectURL`, and dynamic `import()`. PDF preview additionally uses a Web Worker (PDF.js). No polyfills are shipped — if you need to support older browsers, add the relevant polyfills yourself.
+
+## License
+
+LGPL-3.0-or-later — see `LICENSE` (LGPL-3.0) and `COPYING` (GPL-3.0, which LGPL-3.0 extends).
+
+You can use this package in proprietary applications without making your application LGPL — that's exactly what the L (Lesser) in LGPL is for. The obligation only applies if you ship a modified version of this library itself.

package/dist/AudioPreview.d.ts

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

package/dist/AudioPreview.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./styles/AudioPreview.css";
+function AudioPreview({ url, fileName }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fv-audio", children: [
+    /* @__PURE__ */ jsx("div", { className: "fv-audio__icon-wrap", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "fv-audio__info", children: [
+      /* @__PURE__ */ jsx("p", { className: "fv-audio__name", children: fileName }),
+      /* @__PURE__ */ jsx("p", { className: "fv-audio__label", children: "Audio file" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "audio",
+      {
+        src: url,
+        controls: true,
+        className: "fv-audio__player",
+        "aria-label": fileName,
+        children: "Your browser does not support the audio tag."
+      }
+    )
+  ] });
+}
+export {
+  AudioPreview
+};
+//# sourceMappingURL=AudioPreview.js.map

package/dist/AudioPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AudioPreview.tsx"],"sourcesContent":["import \"./styles/AudioPreview.css\";\n\ninterface AudioPreviewProps {\n  url: string;\n  fileName: string;\n}\n\nexport function AudioPreview({ url, fileName }: AudioPreviewProps) {\n  return (\n    <div className=\"fv-audio\">\n      <div className=\"fv-audio__icon-wrap\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d=\"M9 18V5l12-2v13\" />\n          <circle cx=\"6\" cy=\"18\" r=\"3\" />\n          <circle cx=\"18\" cy=\"16\" r=\"3\" />\n        </svg>\n      </div>\n      <div className=\"fv-audio__info\">\n        <p className=\"fv-audio__name\">{fileName}</p>\n        <p className=\"fv-audio__label\">Audio file</p>\n      </div>\n      <audio\n        src={url}\n        controls\n        className=\"fv-audio__player\"\n        aria-label={fileName}\n      >\n        Your browser does not support the audio tag.\n      </audio>\n    </div>\n  );\n}\n"],"mappings":"AAWQ,SACE,KADF;AAXR,OAAO;AAOA,SAAS,aAAa,EAAE,KAAK,SAAS,GAAsB;AACjE,SACE,qBAAC,SAAI,WAAU,YACb;AAAA,wBAAC,SAAI,WAAU,uBACb,+BAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAC1K;AAAA,0BAAC,UAAK,GAAE,mBAAkB;AAAA,MAC1B,oBAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KAAI;AAAA,MAC7B,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,OAChC,GACF;AAAA,IACA,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,OAAE,WAAU,kBAAkB,oBAAS;AAAA,MACxC,oBAAC,OAAE,WAAU,mBAAkB,wBAAU;AAAA,OAC3C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,UAAQ;AAAA,QACR,WAAU;AAAA,QACV,cAAY;AAAA,QACb;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/CodePreview.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+interface CodePreviewProps {
+    content: string;
+    fileName: string;
+    isJson?: boolean;
+}
+declare function CodePreview({ content, fileName, isJson }: CodePreviewProps): react.JSX.Element;
+
+export { CodePreview };

package/dist/CodePreview.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { CopyIcon, CheckIcon, WrapTextIcon } from "./icons";
+import { highlightCode as shikiHighlight, getShikiLanguage } from "./shiki";
+import { shouldHighlight } from "./limits";
+import { PlainTextLargePreview } from "./PlainTextLargePreview";
+import { useLocale } from "./core/i18n";
+import "./styles/ShikiSourceView.css";
+function CodePreview({ content, fileName, isJson }) {
+  const [html, setHtml] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [wordWrap, setWordWrap] = useState(true);
+  const t = useLocale();
+  const language = useMemo(
+    () => isJson ? "json" : getShikiLanguage(fileName),
+    [isJson, fileName]
+  );
+  const displayContent = useMemo(() => {
+    if (isJson) {
+      try {
+        return JSON.stringify(JSON.parse(content), null, 2);
+      } catch {
+        return content;
+      }
+    }
+    return content;
+  }, [content, isJson]);
+  const lineCount = useMemo(
+    () => displayContent.split("\n").length,
+    [displayContent]
+  );
+  const canHighlight = shouldHighlight(displayContent);
+  const [prevDeps, setPrevDeps] = useState({ displayContent, language });
+  if (prevDeps.displayContent !== displayContent || prevDeps.language !== language) {
+    setPrevDeps({ displayContent, language });
+    setHtml("");
+    setError(null);
+    setLoading(canHighlight);
+  }
+  useEffect(() => {
+    if (!canHighlight) return;
+    let cancelled = false;
+    shikiHighlight(displayContent, language).then(
+      (result) => {
+        if (cancelled) return;
+        setHtml(result);
+        setError(null);
+        setLoading(false);
+      },
+      (err) => {
+        if (cancelled) return;
+        console.error("[CodePreview] Shiki highlight error:", err);
+        setError(err instanceof Error ? err.message : "Highlight failed");
+        setHtml("");
+        setLoading(false);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [displayContent, language, canHighlight]);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(displayContent);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  if (!canHighlight) {
+    return /* @__PURE__ */ jsx(PlainTextLargePreview, { content: displayContent, language });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fv-source", children: [
+    /* @__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: displayContent.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 {
+  CodePreview
+};
+//# sourceMappingURL=CodePreview.js.map

package/dist/CodePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CodePreview.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from \"react\";\nimport { CopyIcon, CheckIcon, WrapTextIcon } from \"./icons\";\nimport { highlightCode as shikiHighlight, getShikiLanguage } from \"./shiki\";\nimport { shouldHighlight } from \"./limits\";\nimport { PlainTextLargePreview } from \"./PlainTextLargePreview\";\nimport { useLocale } from \"./core/i18n\";\nimport \"./styles/ShikiSourceView.css\";\n\ninterface CodePreviewProps {\n  content: string;\n  fileName: string;\n  isJson?: boolean;\n}\n\nexport function CodePreview({ content, fileName, isJson }: CodePreviewProps) {\n  const [html, setHtml] = useState<string>(\"\");\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n  const [wordWrap, setWordWrap] = useState(true);\n  const t = useLocale();\n\n  const language = useMemo(\n    () => (isJson ? \"json\" : getShikiLanguage(fileName)),\n    [isJson, fileName]\n  );\n\n  const displayContent = useMemo(() => {\n    if (isJson) {\n      try {\n        return JSON.stringify(JSON.parse(content), null, 2);\n      } catch {\n        return content;\n      }\n    }\n    return content;\n  }, [content, isJson]);\n\n  const lineCount = useMemo(\n    () => displayContent.split(\"\\n\").length,\n    [displayContent]\n  );\n\n  const canHighlight = shouldHighlight(displayContent);\n\n  const [prevDeps, setPrevDeps] = useState({ displayContent, language });\n  if (prevDeps.displayContent !== displayContent || prevDeps.language !== language) {\n    setPrevDeps({ displayContent, language });\n    setHtml(\"\");\n    setError(null);\n    setLoading(canHighlight);\n  }\n\n  useEffect(() => {\n    if (!canHighlight) return;\n\n    let cancelled = false;\n    shikiHighlight(displayContent, language).then(\n      (result) => {\n        if (cancelled) return;\n        setHtml(result);\n        setError(null);\n        setLoading(false);\n      },\n      (err) => {\n        if (cancelled) return;\n        console.error(\"[CodePreview] Shiki highlight error:\", err);\n        setError(err instanceof Error ? err.message : \"Highlight failed\");\n        setHtml(\"\");\n        setLoading(false);\n      }\n    );\n\n    return () => {\n      cancelled = true;\n    };\n  }, [displayContent, language, canHighlight]);\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(displayContent);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  if (!canHighlight) {\n    return <PlainTextLargePreview content={displayContent} language={language} />;\n  }\n\n  return (\n    <div className=\"fv-source\">\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      <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                {displayContent.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/CsvPreview.d.ts

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

package/dist/CsvPreview.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { ArrowUpDownIcon, SearchIcon } from "./icons";
+import "./styles/CsvPreview.css";
+function parseCsv(content) {
+  const lines = content.trim().split("\n");
+  if (lines.length === 0) return { headers: [], rows: [] };
+  const parseLine = (line) => {
+    const result = [];
+    let current = "";
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+      const char = line[i];
+      if (char === '"') {
+        if (inQuotes && i + 1 < line.length && line[i + 1] === '"') {
+          current += '"';
+          i++;
+        } else {
+          inQuotes = !inQuotes;
+        }
+      } else if (char === "," && !inQuotes) {
+        result.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    result.push(current.trim());
+    return result;
+  };
+  const headers = parseLine(lines[0]);
+  const rows = lines.slice(1).map(parseLine);
+  return { headers, rows };
+}
+function CsvPreview({ content, fileName }) {
+  const [sortColumn, setSortColumn] = useState(null);
+  const [sortAsc, setSortAsc] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { headers, rows } = useMemo(() => parseCsv(content), [content]);
+  const filteredRows = useMemo(() => {
+    if (!searchTerm) return rows;
+    return rows.filter(
+      (row) => row.some(
+        (cell) => cell.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [rows, searchTerm]);
+  const sortedRows = useMemo(() => {
+    if (sortColumn === null) return filteredRows;
+    return [...filteredRows].sort((a, b) => {
+      const valA = a[sortColumn] || "";
+      const valB = b[sortColumn] || "";
+      const numA = Number(valA);
+      const numB = Number(valB);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return sortAsc ? numA - numB : numB - numA;
+      }
+      return sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
+    });
+  }, [filteredRows, sortColumn, sortAsc]);
+  const handleSort = (colIndex) => {
+    if (sortColumn === colIndex) {
+      setSortAsc(!sortAsc);
+    } else {
+      setSortColumn(colIndex);
+      setSortAsc(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fv-csv", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fv-csv__toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fv-csv__search-wrap", children: [
+        /* @__PURE__ */ jsx("span", { className: "fv-csv__search-icon", children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search in table...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            className: "fv-csv__search-input"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "fv-csv__row-count", children: [
+        sortedRows.length,
+        " row",
+        sortedRows.length !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "fv-csv__table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "fv-csv__table", children: [
+      /* @__PURE__ */ jsx("thead", { className: "fv-csv__thead", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "fv-csv__th fv-csv__th-num", children: "#" }),
+        headers.map((header, i) => /* @__PURE__ */ jsx("th", { className: "fv-csv__th", onClick: () => handleSort(i), children: /* @__PURE__ */ jsxs("div", { className: "fv-csv__th-inner", children: [
+          /* @__PURE__ */ jsx("span", { children: header || `Column ${i + 1}` }),
+          /* @__PURE__ */ jsx(
+            ArrowUpDownIcon,
+            {
+              size: 12,
+              className: `fv-csv__sort-icon ${sortColumn === i ? "fv-csv__sort-icon--active" : ""}`
+            }
+          )
+        ] }) }, i))
+      ] }) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        sortedRows.map((row, rowIdx) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { className: "fv-csv__td fv-csv__td-num", children: rowIdx + 1 }),
+          headers.map((_, colIdx) => /* @__PURE__ */ jsx("td", { className: "fv-csv__td", children: row[colIdx] || "" }, colIdx))
+        ] }, rowIdx)),
+        sortedRows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: headers.length + 1, className: "fv-csv__empty", children: "No matching rows found" }) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  CsvPreview
+};
+//# sourceMappingURL=CsvPreview.js.map