@burdenoff/microfe-files 2026.510.101

package/dist/files/components/viewers/PDFViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PDFViewer.js","names":[],"sources":["../../../../src/files/components/viewers/PDFViewer.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ZoomIn, ZoomOut } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\n\ninterface PDFViewerProps {\n  file: FileItem;\n  url: string;\n}\n\n/**\n * PDFViewer - Displays PDF files\n *\n * Note: This uses <object> tag for better browser PDF compatibility.\n * For a full-featured PDF viewer with more controls, install react-pdf:\n * bun add react-pdf pdfjs-dist\n */\nexport function PDFViewer({ file, url }: PDFViewerProps) {\n  const [scale, setScale] = useState(100);\n\n  const handleZoomIn = () => setScale((prev) => Math.min(prev + 25, 200));\n  const handleZoomOut = () => setScale((prev) => Math.max(prev - 25, 50));\n\n  // Create zoom-adjusted URL\n  const pdfUrl = `${url}#view=FitH&zoom=${scale}`;\n\n  return (\n    <div className=\"flex flex-col h-full bg-bg-canvas\">\n      {/* Toolbar */}\n      <div className=\"flex items-center justify-between p-4 bg-bg-surface border-b border-border-default\">\n        <div className=\"flex items-center gap-2\">\n          <button\n            onClick={handleZoomOut}\n            disabled={scale <= 50}\n            className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed\"\n            title=\"Zoom out\"\n          >\n            <ZoomOut className=\"size-5\" />\n          </button>\n\n          <span className=\"min-w-16 text-center text-sm font-medium text-text-primary\">\n            {scale}%\n          </span>\n\n          <button\n            onClick={handleZoomIn}\n            disabled={scale >= 200}\n            className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed\"\n            title=\"Zoom in\"\n          >\n            <ZoomIn className=\"size-5\" />\n          </button>\n        </div>\n\n        <span className=\"text-sm text-text-secondary\">{file.name}</span>\n      </div>\n\n      {/* PDF Object - Using object tag instead of iframe for better compatibility */}\n      <div className=\"flex-1 overflow-hidden\">\n        <object\n          data={pdfUrl}\n          type=\"application/pdf\"\n          className=\"w-full h-full\"\n          title={file.name}\n        >\n          {/* Fallback content if PDF cannot be displayed */}\n          <div className=\"flex flex-col items-center justify-center h-full gap-4 p-8\">\n            <div className=\"text-text-secondary text-center\">\n              <p className=\"font-text-lg font-weight-medium mb-2\">\n                Unable to display PDF\n              </p>\n              <p className=\"font-text-sm\">\n                Your browser may not support embedded PDF viewing.\n              </p>\n            </div>\n            <a\n              href={url}\n              download={file.name}\n              className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-btn hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              Download PDF\n            </a>\n          </div>\n        </object>\n      </div>\n\n      {/* Info Footer */}\n      <div className=\"flex items-center justify-center p-3 bg-bg-surface border-t border-border-default text-xs text-text-secondary\">\n        <span>PDF Document · {(file.size / 1024 / 1024).toFixed(2)} MB</span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAgBA,SAAgB,EAAU,EAAE,SAAM,UAAuB;CACvD,IAAM,CAAC,GAAO,KAAY,EAAS,IAAI,EAEjC,UAAqB,GAAU,MAAS,KAAK,IAAI,IAAO,IAAI,IAAI,CAAC,EACjE,UAAsB,GAAU,MAAS,KAAK,IAAI,IAAO,IAAI,GAAG,CAAC,EAGjE,IAAS,GAAG,EAAI,kBAAkB;AAExC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,UAAD;OACE,SAAS;OACT,UAAU,KAAS;OACnB,WAAU;OACV,OAAM;iBAEN,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA;OACvB,CAAA;MAET,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,GAAM,IACF;;MAEP,kBAAC,UAAD;OACE,SAAS;OACT,UAAU,KAAS;OACnB,WAAU;OACV,OAAM;iBAEN,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;OACtB,CAAA;MACL;QAEN,kBAAC,QAAD;KAAM,WAAU;eAA+B,EAAK;KAAY,CAAA,CAC5D;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,MAAM;KACN,MAAK;KACL,WAAU;KACV,OAAO,EAAK;eAGZ,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAuC;QAEhD,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAe;QAExB,CAAA,CACA;UACN,kBAAC,KAAD;OACE,MAAM;OACN,UAAU,EAAK;OACf,WAAU;iBACX;OAEG,CAAA,CACA;;KACC,CAAA;IACL,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD,EAAA,UAAA;KAAM;MAAiB,EAAK,OAAO,OAAO,MAAM,QAAQ,EAAE;KAAC;KAAU,EAAA,CAAA;IACjE,CAAA;GACF"}

package/dist/files/components/viewers/TextViewer.d.ts

@@ -0,0 +1,8 @@
+import { FileItem } from '../../types';
+interface TextViewerProps {
+    file: FileItem;
+    url: string;
+}
+export declare function TextViewer({ file, url }: TextViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TextViewer.d.ts.map

package/dist/files/components/viewers/TextViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextViewer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/TextViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,eAAe;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAMD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,eAAe,2CAyKxD"}

package/dist/files/components/viewers/TextViewer.js

@@ -0,0 +1,121 @@
+import { useEffect as e, useMemo as t, useState as n } from "react";
+import { Check as r, Copy as i, Search as a, WrapText as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/files/components/viewers/TextViewer.tsx
+function u(e) {
+	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function d({ file: d, url: f }) {
+	let [p, m] = n(""), [h, g] = n(!0), [_, v] = n(!0), [y, b] = n(""), [x, S] = n(!1), [C, w] = n(!1);
+	e(() => {
+		fetch(f).then((e) => e.text()).then((e) => {
+			m(e), g(!1);
+		}).catch(() => {
+			g(!1);
+		});
+	}, [f]);
+	let T = () => {
+		navigator.clipboard.writeText(p), w(!0), setTimeout(() => w(!1), 2e3);
+	}, E = t(() => {
+		let e = p.split("\n");
+		if (!y.trim()) return e.map((e) => [{
+			text: e,
+			isMatch: !1
+		}]);
+		let t = RegExp(`(${u(y)})`, "gi");
+		return e.map((e) => e.split(t).map((e) => ({
+			text: e,
+			isMatch: e.toLowerCase() === y.toLowerCase()
+		})));
+	}, [p, y]), D = t(() => {
+		if (!y.trim()) return 0;
+		let e = new RegExp(y, "gi");
+		return (p.match(e) || []).length;
+	}, [p, y]);
+	return h ? /* @__PURE__ */ c("div", {
+		className: "flex items-center justify-center h-full bg-bg-canvas",
+		children: /* @__PURE__ */ c("span", {
+			className: "text-text-secondary",
+			children: "Loading text..."
+		})
+	}) : /* @__PURE__ */ l("div", {
+		className: "flex flex-col h-full bg-bg-canvas",
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between p-3 bg-bg-surface border-b border-border-default",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: /* @__PURE__ */ c("span", {
+						className: "text-sm text-text-secondary",
+						children: d.name
+					})
+				}), /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [
+						x && /* @__PURE__ */ l("div", {
+							className: "flex items-center gap-2 px-2 py-1 border border-border-default rounded",
+							children: [
+								/* @__PURE__ */ c(a, { className: "size-4 text-text-secondary" }),
+								/* @__PURE__ */ c("input", {
+									type: "text",
+									value: y,
+									onChange: (e) => b(e.target.value),
+									placeholder: "Search...",
+									className: "w-40 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none",
+									autoFocus: !0
+								}),
+								D > 0 && /* @__PURE__ */ l("span", {
+									className: "text-xs text-text-secondary",
+									children: [
+										D,
+										" match",
+										D > 1 ? "es" : ""
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ c("button", {
+							onClick: () => S(!x),
+							className: `p-2 rounded transition-colors duration-200 ${x ? "text-text-link bg-bg-accent" : "text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover"}`,
+							title: "Search",
+							"aria-label": "Search within text file",
+							children: /* @__PURE__ */ c(a, { className: "size-4" })
+						}),
+						/* @__PURE__ */ c("button", {
+							onClick: () => v(!_),
+							className: `p-2 rounded transition-colors duration-200 ${_ ? "text-text-link bg-bg-accent" : "text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover"}`,
+							title: _ ? "Disable word wrap" : "Enable word wrap",
+							"aria-label": _ ? "Disable word wrap" : "Enable word wrap",
+							children: /* @__PURE__ */ c(o, { className: "size-4" })
+						}),
+						/* @__PURE__ */ c("button", {
+							onClick: T,
+							className: "flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium text-text-inverse bg-action-primary-bg transition-colors duration-200 hover:bg-action-primary-bg-hover",
+							title: "Copy text",
+							"aria-label": "Copy text content",
+							children: C ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(r, { className: "size-4" }), "Copied!"] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(i, { className: "size-4" }), "Copy"] })
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex-1 overflow-auto",
+				children: /* @__PURE__ */ c("pre", {
+					className: `p-4 text-sm font-mono leading-relaxed text-text-primary ${_ ? "whitespace-pre-wrap" : "whitespace-pre"}`,
+					children: E.map((e, t) => /* @__PURE__ */ c("div", { children: e.length === 0 ? " " : e.map((e, n) => e.isMatch ? /* @__PURE__ */ c("mark", {
+						className: "bg-status-warning-bg text-text-primary",
+						children: e.text
+					}, `${t}-${n}`) : /* @__PURE__ */ c("span", { children: e.text || " " }, `${t}-${n}`)) }, t))
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between p-3 bg-bg-surface border-t border-border-default text-xs text-text-secondary",
+				children: [/* @__PURE__ */ l("span", { children: [p.split("\n").length, " lines"] }), /* @__PURE__ */ l("span", { children: [(d.size / 1024).toFixed(2), " KB"] })]
+			})
+		]
+	});
+}
+//#endregion
+export { d as TextViewer };
+
+//# sourceMappingURL=TextViewer.js.map

package/dist/files/components/viewers/TextViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextViewer.js","names":[],"sources":["../../../../src/files/components/viewers/TextViewer.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from \"react\";\nimport { Copy, Check, WrapText, Search } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\n\ninterface TextViewerProps {\n  file: FileItem;\n  url: string;\n}\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nexport function TextViewer({ file, url }: TextViewerProps) {\n  const [content, setContent] = useState(\"\");\n  const [loading, setLoading] = useState(true);\n  const [wordWrap, setWordWrap] = useState(true);\n  const [searchTerm, setSearchTerm] = useState(\"\");\n  const [showSearch, setShowSearch] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    fetch(url)\n      .then((res) => res.text())\n      .then((text) => {\n        setContent(text);\n        setLoading(false);\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n  }, [url]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(content);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  // Highlight search matches\n  const highlightedLines = useMemo(() => {\n    const lines = content.split(\"\\n\");\n\n    if (!searchTerm.trim()) {\n      return lines.map((line) => [{ text: line, isMatch: false }]);\n    }\n\n    const matcher = new RegExp(`(${escapeRegExp(searchTerm)})`, \"gi\");\n    return lines.map((line) =>\n      line.split(matcher).map((part) => ({\n        text: part,\n        isMatch: part.toLowerCase() === searchTerm.toLowerCase(),\n      })),\n    );\n  }, [content, searchTerm]);\n\n  const matchCount = useMemo(() => {\n    if (!searchTerm.trim()) return 0;\n    const regex = new RegExp(searchTerm, \"gi\");\n    return (content.match(regex) || []).length;\n  }, [content, searchTerm]);\n\n  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center h-full bg-bg-canvas\">\n        <span className=\"text-text-secondary\">Loading text...</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full bg-bg-canvas\">\n      {/* Toolbar */}\n      <div className=\"flex items-center justify-between p-3 bg-bg-surface border-b border-border-default\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm text-text-secondary\">{file.name}</span>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {showSearch && (\n            <div className=\"flex items-center gap-2 px-2 py-1 border border-border-default rounded\">\n              <Search className=\"size-4 text-text-secondary\" />\n              <input\n                type=\"text\"\n                value={searchTerm}\n                onChange={(e) => setSearchTerm(e.target.value)}\n                placeholder=\"Search...\"\n                className=\"w-40 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n                autoFocus\n              />\n              {matchCount > 0 && (\n                <span className=\"text-xs text-text-secondary\">\n                  {matchCount} match{matchCount > 1 ? \"es\" : \"\"}\n                </span>\n              )}\n            </div>\n          )}\n\n          <button\n            onClick={() => setShowSearch(!showSearch)}\n            className={`p-2 rounded transition-colors duration-200 ${\n              showSearch\n                ? \"text-text-link bg-bg-accent\"\n                : \"text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover\"\n            }`}\n            title=\"Search\"\n            aria-label=\"Search within text file\"\n          >\n            <Search className=\"size-4\" />\n          </button>\n\n          <button\n            onClick={() => setWordWrap(!wordWrap)}\n            className={`p-2 rounded transition-colors duration-200 ${\n              wordWrap\n                ? \"text-text-link bg-bg-accent\"\n                : \"text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover\"\n            }`}\n            title={wordWrap ? \"Disable word wrap\" : \"Enable word wrap\"}\n            aria-label={wordWrap ? \"Disable word wrap\" : \"Enable word wrap\"}\n          >\n            <WrapText className=\"size-4\" />\n          </button>\n\n          <button\n            onClick={handleCopy}\n            className=\"flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium text-text-inverse bg-action-primary-bg transition-colors duration-200 hover:bg-action-primary-bg-hover\"\n            title=\"Copy text\"\n            aria-label=\"Copy text content\"\n          >\n            {copied ? (\n              <>\n                <Check className=\"size-4\" />\n                Copied!\n              </>\n            ) : (\n              <>\n                <Copy className=\"size-4\" />\n                Copy\n              </>\n            )}\n          </button>\n        </div>\n      </div>\n\n      {/* Text Content */}\n      <div className=\"flex-1 overflow-auto\">\n        <pre\n          className={`p-4 text-sm font-mono leading-relaxed text-text-primary ${\n            wordWrap ? \"whitespace-pre-wrap\" : \"whitespace-pre\"\n          }`}\n        >\n          {highlightedLines.map((segments, lineIndex) => (\n            <div key={lineIndex}>\n              {segments.length === 0\n                ? \" \"\n                : segments.map((segment, partIndex) =>\n                    segment.isMatch ? (\n                      <mark\n                        key={`${lineIndex}-${partIndex}`}\n                        className=\"bg-status-warning-bg text-text-primary\"\n                      >\n                        {segment.text}\n                      </mark>\n                    ) : (\n                      <span key={`${lineIndex}-${partIndex}`}>\n                        {segment.text || \" \"}\n                      </span>\n                    ),\n                  )}\n            </div>\n          ))}\n        </pre>\n      </div>\n\n      {/* Footer */}\n      <div className=\"flex items-center justify-between p-3 bg-bg-surface border-t border-border-default text-xs text-text-secondary\">\n        <span>{content.split(\"\\n\").length} lines</span>\n        <span>{(file.size / 1024).toFixed(2)} KB</span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/files/components/viewers/VideoPlayer.d.ts

@@ -0,0 +1,8 @@
+import { FileItem } from '../../types';
+interface VideoPlayerProps {
+    file: FileItem;
+    url: string;
+}
+export declare function VideoPlayer({ file, url }: VideoPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VideoPlayer.d.ts.map

package/dist/files/components/viewers/VideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/VideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,gBAAgB,2CAuL1D"}

package/dist/files/components/viewers/VideoPlayer.js

@@ -0,0 +1,138 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { Maximize as r, Pause as i, Play as a, Volume2 as o, VolumeX as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/files/components/viewers/VideoPlayer.tsx
+function u({ file: u, url: d }) {
+	let f = t(null), [p, m] = n(!1), [h, g] = n(0), [_, v] = n(0), [y, b] = n(1), [x, S] = n(!1), [C, w] = n(1);
+	e(() => {
+		let e = f.current;
+		if (!e) return;
+		let t = () => g(e.currentTime), n = () => v(e.duration), r = () => m(!1);
+		return e.addEventListener("timeupdate", t), e.addEventListener("loadedmetadata", n), e.addEventListener("ended", r), () => {
+			e.removeEventListener("timeupdate", t), e.removeEventListener("loadedmetadata", n), e.removeEventListener("ended", r);
+		};
+	}, []);
+	let T = () => {
+		f.current && (p ? f.current.pause() : f.current.play(), m(!p));
+	}, E = (e) => {
+		f.current && (f.current.currentTime = e, g(e));
+	}, D = (e) => {
+		b(e), S(e === 0), f.current && (f.current.volume = e);
+	}, O = () => {
+		if (f.current) {
+			let e = !x;
+			S(e), f.current.muted = e;
+		}
+	}, k = (e) => {
+		w(e), f.current && (f.current.playbackRate = e);
+	}, A = () => {
+		f.current && f.current.requestFullscreen();
+	}, j = (e) => `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
+	return /* @__PURE__ */ l("div", {
+		className: "flex h-full flex-col bg-bg-canvas",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex-1 flex items-center justify-center",
+			children: /* @__PURE__ */ c("video", {
+				ref: f,
+				src: d,
+				className: "max-w-full max-h-full",
+				onClick: T
+			})
+		}), /* @__PURE__ */ l("div", {
+			className: "bg-bg-surface border-t border-border-default p-4",
+			children: [/* @__PURE__ */ l("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ c("input", {
+					type: "range",
+					min: 0,
+					max: _ || 0,
+					value: h,
+					onChange: (e) => E(Number(e.target.value)),
+					className: "w-full h-1 bg-bg-muted rounded-lg appearance-none cursor-pointer accent-action-primary-bg"
+				}), /* @__PURE__ */ l("div", {
+					className: "flex justify-between mt-1 text-xs text-text-secondary",
+					children: [/* @__PURE__ */ c("span", { children: j(h) }), /* @__PURE__ */ c("span", { children: j(_) })]
+				})]
+			}), /* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ c("button", {
+							onClick: T,
+							className: "p-2 text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200",
+							title: p ? "Pause" : "Play",
+							"aria-label": p ? "Pause video" : "Play video",
+							children: c(p ? i : a, { className: "size-5" })
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ c("button", {
+								onClick: O,
+								className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200",
+								title: x ? "Unmute" : "Mute",
+								"aria-label": x ? "Unmute video" : "Mute video",
+								children: c(x ? s : o, { className: "size-5" })
+							}), /* @__PURE__ */ c("input", {
+								type: "range",
+								min: 0,
+								max: 1,
+								step: .1,
+								value: y,
+								onChange: (e) => D(Number(e.target.value)),
+								className: "w-20 h-1 bg-bg-muted rounded-lg appearance-none cursor-pointer accent-action-primary-bg"
+							})]
+						}),
+						/* @__PURE__ */ l("select", {
+							value: C,
+							onChange: (e) => k(Number(e.target.value)),
+							className: "px-2 py-1 text-sm bg-bg-surface border border-border-default rounded text-text-primary cursor-pointer",
+							children: [
+								/* @__PURE__ */ c("option", {
+									value: "0.5",
+									children: "0.5x"
+								}),
+								/* @__PURE__ */ c("option", {
+									value: "0.75",
+									children: "0.75x"
+								}),
+								/* @__PURE__ */ c("option", {
+									value: "1",
+									children: "1x"
+								}),
+								/* @__PURE__ */ c("option", {
+									value: "1.25",
+									children: "1.25x"
+								}),
+								/* @__PURE__ */ c("option", {
+									value: "1.5",
+									children: "1.5x"
+								}),
+								/* @__PURE__ */ c("option", {
+									value: "2",
+									children: "2x"
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ c("span", {
+						className: "text-sm text-text-secondary",
+						children: u.name
+					}), /* @__PURE__ */ c("button", {
+						onClick: A,
+						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200",
+						title: "Fullscreen",
+						"aria-label": "Open fullscreen",
+						children: /* @__PURE__ */ c(r, { className: "size-5" })
+					})]
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { u as VideoPlayer };
+
+//# sourceMappingURL=VideoPlayer.js.map

package/dist/files/components/viewers/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","names":[],"sources":["../../../../src/files/components/viewers/VideoPlayer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { Play, Pause, Volume2, VolumeX, Maximize } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\n\ninterface VideoPlayerProps {\n  file: FileItem;\n  url: string;\n}\n\nexport function VideoPlayer({ file, url }: VideoPlayerProps) {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [volume, setVolume] = useState(1);\n  const [isMuted, setIsMuted] = useState(false);\n  const [playbackRate, setPlaybackRate] = useState(1);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n\n    const handleTimeUpdate = () => setCurrentTime(video.currentTime);\n    const handleLoadedMetadata = () => setDuration(video.duration);\n    const handleEnded = () => setIsPlaying(false);\n\n    video.addEventListener(\"timeupdate\", handleTimeUpdate);\n    video.addEventListener(\"loadedmetadata\", handleLoadedMetadata);\n    video.addEventListener(\"ended\", handleEnded);\n\n    return () => {\n      video.removeEventListener(\"timeupdate\", handleTimeUpdate);\n      video.removeEventListener(\"loadedmetadata\", handleLoadedMetadata);\n      video.removeEventListener(\"ended\", handleEnded);\n    };\n  }, []);\n\n  const togglePlay = () => {\n    if (videoRef.current) {\n      if (isPlaying) {\n        videoRef.current.pause();\n      } else {\n        videoRef.current.play();\n      }\n      setIsPlaying(!isPlaying);\n    }\n  };\n\n  const handleSeek = (time: number) => {\n    if (videoRef.current) {\n      videoRef.current.currentTime = time;\n      setCurrentTime(time);\n    }\n  };\n\n  const handleVolumeChange = (newVolume: number) => {\n    setVolume(newVolume);\n    setIsMuted(newVolume === 0);\n    if (videoRef.current) {\n      videoRef.current.volume = newVolume;\n    }\n  };\n\n  const toggleMute = () => {\n    if (videoRef.current) {\n      const newMuted = !isMuted;\n      setIsMuted(newMuted);\n      videoRef.current.muted = newMuted;\n    }\n  };\n\n  const handlePlaybackRateChange = (rate: number) => {\n    setPlaybackRate(rate);\n    if (videoRef.current) {\n      videoRef.current.playbackRate = rate;\n    }\n  };\n\n  const handleFullscreen = () => {\n    if (videoRef.current) {\n      videoRef.current.requestFullscreen();\n    }\n  };\n\n  const formatTime = (seconds: number): string => {\n    const mins = Math.floor(seconds / 60);\n    const secs = Math.floor(seconds % 60);\n    return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n  };\n\n  return (\n    <div className=\"flex h-full flex-col bg-bg-canvas\">\n      {/* Video */}\n      <div className=\"flex-1 flex items-center justify-center\">\n        <video\n          ref={videoRef}\n          src={url}\n          className=\"max-w-full max-h-full\"\n          onClick={togglePlay}\n        />\n      </div>\n\n      {/* Controls */}\n      <div className=\"bg-bg-surface border-t border-border-default p-4\">\n        {/* Progress Bar */}\n        <div className=\"mb-4\">\n          <input\n            type=\"range\"\n            min={0}\n            max={duration || 0}\n            value={currentTime}\n            onChange={(e) => handleSeek(Number(e.target.value))}\n            className=\"w-full h-1 bg-bg-muted rounded-lg appearance-none cursor-pointer accent-action-primary-bg\"\n          />\n          <div className=\"flex justify-between mt-1 text-xs text-text-secondary\">\n            <span>{formatTime(currentTime)}</span>\n            <span>{formatTime(duration)}</span>\n          </div>\n        </div>\n\n        {/* Control Buttons */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2\">\n            {/* Play/Pause */}\n            <button\n              onClick={togglePlay}\n              className=\"p-2 text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              title={isPlaying ? \"Pause\" : \"Play\"}\n              aria-label={isPlaying ? \"Pause video\" : \"Play video\"}\n            >\n              {isPlaying ? (\n                <Pause className=\"size-5\" />\n              ) : (\n                <Play className=\"size-5\" />\n              )}\n            </button>\n\n            {/* Volume */}\n            <div className=\"flex items-center gap-2\">\n              <button\n                onClick={toggleMute}\n                className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n                title={isMuted ? \"Unmute\" : \"Mute\"}\n                aria-label={isMuted ? \"Unmute video\" : \"Mute video\"}\n              >\n                {isMuted ? (\n                  <VolumeX className=\"size-5\" />\n                ) : (\n                  <Volume2 className=\"size-5\" />\n                )}\n              </button>\n              <input\n                type=\"range\"\n                min={0}\n                max={1}\n                step={0.1}\n                value={volume}\n                onChange={(e) => handleVolumeChange(Number(e.target.value))}\n                className=\"w-20 h-1 bg-bg-muted rounded-lg appearance-none cursor-pointer accent-action-primary-bg\"\n              />\n            </div>\n\n            {/* Playback Speed */}\n            <select\n              value={playbackRate}\n              onChange={(e) => handlePlaybackRateChange(Number(e.target.value))}\n              className=\"px-2 py-1 text-sm bg-bg-surface border border-border-default rounded text-text-primary cursor-pointer\"\n            >\n              <option value=\"0.5\">0.5x</option>\n              <option value=\"0.75\">0.75x</option>\n              <option value=\"1\">1x</option>\n              <option value=\"1.25\">1.25x</option>\n              <option value=\"1.5\">1.5x</option>\n              <option value=\"2\">2x</option>\n            </select>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-text-secondary\">{file.name}</span>\n            <button\n              onClick={handleFullscreen}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              title=\"Fullscreen\"\n              aria-label=\"Open fullscreen\"\n            >\n              <Maximize className=\"size-5\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/files/components/viewers/index.d.ts

@@ -0,0 +1,7 @@
+export { ImageViewer } from './ImageViewer';
+export { PDFViewer } from './PDFViewer';
+export { VideoPlayer } from './VideoPlayer';
+export { AudioPlayer } from './AudioPlayer';
+export { CodeViewer } from './CodeViewer';
+export { TextViewer } from './TextViewer';
+//# sourceMappingURL=index.d.ts.map

package/dist/files/components/viewers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/files/components/viewers/index.js

@@ -0,0 +1,6 @@
+import "./ImageViewer.js";
+import "./PDFViewer.js";
+import "./VideoPlayer.js";
+import "./AudioPlayer.js";
+import "./CodeViewer.js";
+import "./TextViewer.js";