@burdenoff/microfe-files 2026.802.1 → 2026.830.2

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

@@ -1 +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            type=\"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            type=\"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,MAAK;OACL,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,MAAK;OACL,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"}
+{"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\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\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 tr = useTr();\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            type=\"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={tr(\"files.preview.pdf.zoomOut\", \"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            type=\"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={tr(\"files.preview.pdf.zoomIn\", \"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                {tr(\n                  \"files.preview.pdf.unableToDisplay\",\n                  \"Unable to display PDF\",\n                )}\n              </p>\n              <p className=\"font-text-sm\">\n                {tr(\n                  \"files.preview.pdf.browserUnsupported\",\n                  \"Your browser may not support embedded PDF viewing.\",\n                )}\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              {tr(\"files.preview.pdf.download\", \"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>\n          {tr(\"files.preview.pdf.documentLabel\", \"PDF Document\")} ·{\" \"}\n          {(file.size / 1024 / 1024).toFixed(2)} MB\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,EAAU,EAAE,SAAM,UAAuB;CACvD,IAAM,IAAK,GAAO,EACZ,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,MAAK;OACL,SAAS;OACT,UAAU,KAAS;OACnB,WAAU;OACV,OAAO,EAAG,6BAA6B,WAAW;iBAElD,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA;OACvB,CAAA;MAET,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,GAAM,IACF;;MAEP,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU,KAAS;OACnB,WAAU;OACV,OAAO,EAAG,4BAA4B,UAAU;iBAEhD,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;kBACV,EACC,qCACA,wBACD;QACC,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBACV,EACC,wCACA,qDACD;QACC,CAAA,CACA;UACN,kBAAC,KAAD;OACE,MAAM;OACN,UAAU,EAAK;OACf,WAAU;iBAET,EAAG,8BAA8B,eAAe;OAC/C,CAAA,CACA;;KACC,CAAA;IACL,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD,EAAA,UAAA;KACG,EAAG,mCAAmC,eAAe;KAAC;KAAG;MACxD,EAAK,OAAO,OAAO,MAAM,QAAQ,EAAE;KAAC;KACjC,EAAA,CAAA;IACH,CAAA;GACF"}

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

@@ -1 +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,+BAoLxD"}
+{"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;AAG5C,UAAU,eAAe;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAMD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,eAAe,+BA6MxD"}

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

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

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

@@ -1 +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  };\n\n  // Cleanup timeout on unmount to prevent React state update warning\n  useEffect(() => {\n    if (copied) {\n      const timer = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [copied]);\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                aria-label=\"Search text\"\n                className=\"w-40 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\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            type=\"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            type=\"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            type=\"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":";;;;AASA,SAAS,EAAa,GAAuB;AAC3C,QAAO,EAAM,QAAQ,uBAAuB,OAAO;;AAGrD,SAAgB,EAAW,EAAE,SAAM,UAAwB;CACzD,IAAM,CAAC,GAAS,KAAc,EAAS,GAAG,EACpC,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAU,KAAe,EAAS,GAAK,EACxC,CAAC,GAAY,KAAiB,EAAS,GAAG,EAC1C,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAQ,KAAa,EAAS,GAAM;AAE3C,SAAgB;AACd,QAAM,EAAI,CACP,MAAM,MAAQ,EAAI,MAAM,CAAC,CACzB,MAAM,MAAS;AAEd,GADA,EAAW,EAAK,EAChB,EAAW,GAAM;IACjB,CACD,YAAY;AACX,KAAW,GAAM;IACjB;IACH,CAAC,EAAI,CAAC;CAET,IAAM,UAAmB;AAEvB,EADA,UAAU,UAAU,UAAU,EAAQ,EACtC,EAAU,GAAK;;AAIjB,SAAgB;AACd,MAAI,GAAQ;GACV,IAAM,IAAQ,iBAAiB,EAAU,GAAM,EAAE,IAAK;AACtD,gBAAa,aAAa,EAAM;;IAGjC,CAAC,EAAO,CAAC;CAGZ,IAAM,IAAmB,QAAc;EACrC,IAAM,IAAQ,EAAQ,MAAM,KAAK;AAEjC,MAAI,CAAC,EAAW,MAAM,CACpB,QAAO,EAAM,KAAK,MAAS,CAAC;GAAE,MAAM;GAAM,SAAS;GAAO,CAAC,CAAC;EAG9D,IAAM,IAAc,OAAO,IAAI,EAAa,EAAW,CAAC,IAAI,KAAK;AACjE,SAAO,EAAM,KAAK,MAChB,EAAK,MAAM,EAAQ,CAAC,KAAK,OAAU;GACjC,MAAM;GACN,SAAS,EAAK,aAAa,KAAK,EAAW,aAAa;GACzD,EAAE,CACJ;IACA,CAAC,GAAS,EAAW,CAAC,EAEnB,IAAa,QAAc;AAC/B,MAAI,CAAC,EAAW,MAAM,CAAE,QAAO;EAC/B,IAAM,IAAQ,IAAI,OAAO,GAAY,KAAK;AAC1C,UAAQ,EAAQ,MAAM,EAAM,IAAI,EAAE,EAAE;IACnC,CAAC,GAAS,EAAW,CAAC;AAUzB,QARI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,QAAD;GAAM,WAAU;aAAsB;GAAsB,CAAA;EACxD,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,QAAD;MAAM,WAAU;gBAA+B,EAAK;MAAY,CAAA;KAC5D,CAAA,EAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD,EAAQ,WAAU,8BAA+B,CAAA;QACjD,kBAAC,SAAD;SACE,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;SAC9C,aAAY;SACZ,cAAW;SACX,WAAU;SACV,CAAA;QACD,IAAa,KACZ,kBAAC,QAAD;SAAM,WAAU;mBAAhB;UACG;UAAW;UAAO,IAAa,IAAI,OAAO;UACtC;;QAEL;;MAGR,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAc,CAAC,EAAW;OACzC,WAAW,8CACT,IACI,gCACA;OAEN,OAAM;OACN,cAAW;iBAEX,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;OACtB,CAAA;MAET,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAY,CAAC,EAAS;OACrC,WAAW,8CACT,IACI,gCACA;OAEN,OAAO,IAAW,sBAAsB;OACxC,cAAY,IAAW,sBAAsB;iBAE7C,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;OACxB,CAAA;MAET,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;OACV,OAAM;OACN,cAAW;iBAEV,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA,EAAA,UAE3B,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA,EAAA,OAE1B,EAAA,CAAA;OAEE,CAAA;MACL;OACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,2DACT,IAAW,wBAAwB;eAGpC,EAAiB,KAAK,GAAU,MAC/B,kBAAC,OAAD,EAAA,UACG,EAAS,WAAW,IACjB,MACA,EAAS,KAAK,GAAS,MACrB,EAAQ,UACN,kBAAC,QAAD;MAEE,WAAU;gBAET,EAAQ;MACJ,EAJA,GAAG,EAAU,GAAG,IAIhB,GAEP,kBAAC,QAAD,EAAA,UACG,EAAQ,QAAQ,KACZ,EAFI,GAAG,EAAU,GAAG,IAEpB,CAEV,EACD,EAjBI,EAiBJ,CACN;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAQ,MAAM,KAAK,CAAC,QAAO,SAAa,EAAA,CAAA,EAC/C,kBAAC,QAAD,EAAA,UAAA,EAAQ,EAAK,OAAO,MAAM,QAAQ,EAAE,EAAC,MAAU,EAAA,CAAA,CAC3C;;GACF"}
+{"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\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\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 tr = useTr();\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  };\n\n  // Cleanup timeout on unmount to prevent React state update warning\n  useEffect(() => {\n    if (copied) {\n      const timer = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [copied]);\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\">\n          {tr(\"files.preview.text.loading\", \"Loading text...\")}\n        </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={tr(\n                  \"files.preview.text.searchPlaceholder\",\n                  \"Search...\",\n                )}\n                aria-label={tr(\"files.preview.text.searchAria\", \"Search text\")}\n                className=\"w-40 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              />\n              {matchCount > 0 && (\n                <span className=\"text-xs text-text-secondary\">\n                  {matchCount}{\" \"}\n                  {matchCount > 1\n                    ? tr(\"files.preview.text.matches\", \"matches\")\n                    : tr(\"files.preview.text.match\", \"match\")}\n                </span>\n              )}\n            </div>\n          )}\n\n          <button\n            type=\"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={tr(\"files.preview.text.search\", \"Search\")}\n            aria-label={tr(\n              \"files.preview.text.searchWithinFile\",\n              \"Search within text file\",\n            )}\n          >\n            <Search className=\"size-4\" />\n          </button>\n\n          <button\n            type=\"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={\n              wordWrap\n                ? tr(\"files.preview.text.disableWordWrap\", \"Disable word wrap\")\n                : tr(\"files.preview.text.enableWordWrap\", \"Enable word wrap\")\n            }\n            aria-label={\n              wordWrap\n                ? tr(\"files.preview.text.disableWordWrap\", \"Disable word wrap\")\n                : tr(\"files.preview.text.enableWordWrap\", \"Enable word wrap\")\n            }\n          >\n            <WrapText className=\"size-4\" />\n          </button>\n\n          <button\n            type=\"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={tr(\"files.preview.text.copyText\", \"Copy text\")}\n            aria-label={tr(\n              \"files.preview.text.copyTextContent\",\n              \"Copy text content\",\n            )}\n          >\n            {copied ? (\n              <>\n                <Check className=\"size-4\" />\n                {tr(\"files.preview.text.copied\", \"Copied!\")}\n              </>\n            ) : (\n              <>\n                <Copy className=\"size-4\" />\n                {tr(\"files.preview.text.copy\", \"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>\n          {content.split(\"\\n\").length} {tr(\"files.preview.text.lines\", \"lines\")}\n        </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.map

@@ -1 +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,+BA+L1D"}
+{"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;AAG5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,gBAAgB,+BAmN1D"}

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

@@ -1,138 +1,139 @@
-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";
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { Maximize as i, Pause as a, Play as o, Volume2 as s, VolumeX as c } from "lucide-react";
+import { jsx as l, jsxs as u } 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;
+function d({ file: d, url: f }) {
+	let p = e(), m = n(null), [h, g] = r(!1), [_, v] = r(0), [y, b] = r(0), [x, S] = r(1), [C, w] = r(!1), [T, E] = r(1);
+	t(() => {
+		let e = m.current;
 		if (!e) return;
-		let t = () => g(e.currentTime), n = () => v(e.duration), r = () => m(!1);
+		let t = () => v(e.currentTime), n = () => b(e.duration), r = () => g(!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;
-		}
+	let D = () => {
+		m.current && (h ? m.current.pause() : m.current.play(), g(!h));
+	}, O = (e) => {
+		m.current && (m.current.currentTime = e, v(e));
 	}, k = (e) => {
-		w(e), f.current && (f.current.playbackRate = e);
+		S(e), w(e === 0), m.current && (m.current.volume = 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", {
+		if (m.current) {
+			let e = !C;
+			w(e), m.current.muted = e;
+		}
+	}, j = (e) => {
+		E(e), m.current && (m.current.playbackRate = e);
+	}, M = () => {
+		m.current && m.current.requestFullscreen();
+	}, N = (e) => `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
+	return /* @__PURE__ */ u("div", {
 		className: "flex h-full flex-col bg-bg-canvas",
-		children: [/* @__PURE__ */ c("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "flex-1 flex items-center justify-center",
-			children: /* @__PURE__ */ c("video", {
-				ref: f,
-				src: d,
-				"aria-label": u.name,
+			children: /* @__PURE__ */ l("video", {
+				ref: m,
+				src: f,
+				"aria-label": d.name,
 				className: "max-w-full max-h-full",
-				onClick: T,
-				children: /* @__PURE__ */ c("track", { kind: "captions" })
+				onClick: D,
+				children: /* @__PURE__ */ l("track", { kind: "captions" })
 			})
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: "bg-bg-surface border-t border-border-default p-4",
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ u("div", {
 				className: "mb-4",
-				children: [/* @__PURE__ */ c("input", {
+				children: [/* @__PURE__ */ l("input", {
 					type: "range",
 					min: 0,
-					max: _ || 0,
-					value: h,
-					onChange: (e) => E(Number(e.target.value)),
-					"aria-label": "Seek",
+					max: y || 0,
+					value: _,
+					onChange: (e) => O(Number(e.target.value)),
+					"aria-label": p("files.preview.video.seek", "Seek"),
 					className: "w-full h-1 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg"
-				}), /* @__PURE__ */ l("div", {
+				}), /* @__PURE__ */ u("div", {
 					className: "flex justify-between mt-1 text-xs text-text-secondary",
-					children: [/* @__PURE__ */ c("span", { children: j(h) }), /* @__PURE__ */ c("span", { children: j(_) })]
+					children: [/* @__PURE__ */ l("span", { children: N(_) }), /* @__PURE__ */ l("span", { children: N(y) })]
 				})]
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ u("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ l("div", {
+				children: [/* @__PURE__ */ u("div", {
 					className: "flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ c("button", {
+						/* @__PURE__ */ l("button", {
 							type: "button",
-							onClick: T,
+							onClick: D,
 							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" })
+							title: h ? p("files.preview.video.pause", "Pause") : p("files.preview.video.play", "Play"),
+							"aria-label": h ? p("files.preview.video.pauseVideo", "Pause video") : p("files.preview.video.playVideo", "Play video"),
+							children: l(h ? a : o, { className: "size-5" })
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ u("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ c("button", {
+							children: [/* @__PURE__ */ l("button", {
 								type: "button",
-								onClick: O,
+								onClick: A,
 								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", {
+								title: C ? p("files.preview.video.unmute", "Unmute") : p("files.preview.video.mute", "Mute"),
+								"aria-label": C ? p("files.preview.video.unmuteVideo", "Unmute video") : p("files.preview.video.muteVideo", "Mute video"),
+								children: l(C ? c : s, { className: "size-5" })
+							}), /* @__PURE__ */ l("input", {
 								type: "range",
 								min: 0,
 								max: 1,
 								step: .1,
-								value: y,
-								onChange: (e) => D(Number(e.target.value)),
-								"aria-label": "Volume",
+								value: x,
+								onChange: (e) => k(Number(e.target.value)),
+								"aria-label": p("files.preview.video.volume", "Volume"),
 								className: "w-20 h-1 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg"
 							})]
 						}),
-						/* @__PURE__ */ l("select", {
-							value: C,
-							onChange: (e) => k(Number(e.target.value)),
+						/* @__PURE__ */ u("select", {
+							value: T,
+							onChange: (e) => j(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", {
+								/* @__PURE__ */ l("option", {
 									value: "0.5",
 									children: "0.5x"
 								}),
-								/* @__PURE__ */ c("option", {
+								/* @__PURE__ */ l("option", {
 									value: "0.75",
 									children: "0.75x"
 								}),
-								/* @__PURE__ */ c("option", {
+								/* @__PURE__ */ l("option", {
 									value: "1",
 									children: "1x"
 								}),
-								/* @__PURE__ */ c("option", {
+								/* @__PURE__ */ l("option", {
 									value: "1.25",
 									children: "1.25x"
 								}),
-								/* @__PURE__ */ c("option", {
+								/* @__PURE__ */ l("option", {
 									value: "1.5",
 									children: "1.5x"
 								}),
-								/* @__PURE__ */ c("option", {
+								/* @__PURE__ */ l("option", {
 									value: "2",
 									children: "2x"
 								})
 							]
 						})
 					]
-				}), /* @__PURE__ */ l("div", {
+				}), /* @__PURE__ */ u("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ c("span", {
+					children: [/* @__PURE__ */ l("span", {
 						className: "text-sm text-text-secondary",
-						children: u.name
-					}), /* @__PURE__ */ c("button", {
+						children: d.name
+					}), /* @__PURE__ */ l("button", {
 						type: "button",
-						onClick: A,
+						onClick: M,
 						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" })
+						title: p("files.preview.video.fullscreen", "Fullscreen"),
+						"aria-label": p("files.preview.video.openFullscreen", "Open fullscreen"),
+						children: /* @__PURE__ */ l(i, { className: "size-5" })
 					})]
 				})]
 			})]
@@ -140,6 +141,6 @@ function u({ file: u, url: d }) {
 	});
 }
 //#endregion
-export { u as VideoPlayer };
+export { d as VideoPlayer };
 
 //# sourceMappingURL=VideoPlayer.js.map

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

@@ -1 +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          aria-label={file.name}\n          className=\"max-w-full max-h-full\"\n          onClick={togglePlay}\n        >\n          <track kind=\"captions\" />\n        </video>\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            aria-label=\"Seek\"\n            className=\"w-full h-1 bg-bg-sunken 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              type=\"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                type=\"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                aria-label=\"Volume\"\n                className=\"w-20 h-1 bg-bg-sunken 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              type=\"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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"}
+{"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\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\n\ninterface VideoPlayerProps {\n  file: FileItem;\n  url: string;\n}\n\nexport function VideoPlayer({ file, url }: VideoPlayerProps) {\n  const tr = useTr();\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          aria-label={file.name}\n          className=\"max-w-full max-h-full\"\n          onClick={togglePlay}\n        >\n          <track kind=\"captions\" />\n        </video>\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            aria-label={tr(\"files.preview.video.seek\", \"Seek\")}\n            className=\"w-full h-1 bg-bg-sunken 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              type=\"button\"\n              onClick={togglePlay}\n              className=\"p-2 text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              title={\n                isPlaying\n                  ? tr(\"files.preview.video.pause\", \"Pause\")\n                  : tr(\"files.preview.video.play\", \"Play\")\n              }\n              aria-label={\n                isPlaying\n                  ? tr(\"files.preview.video.pauseVideo\", \"Pause video\")\n                  : tr(\"files.preview.video.playVideo\", \"Play video\")\n              }\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                type=\"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={\n                  isMuted\n                    ? tr(\"files.preview.video.unmute\", \"Unmute\")\n                    : tr(\"files.preview.video.mute\", \"Mute\")\n                }\n                aria-label={\n                  isMuted\n                    ? tr(\"files.preview.video.unmuteVideo\", \"Unmute video\")\n                    : tr(\"files.preview.video.muteVideo\", \"Mute video\")\n                }\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                aria-label={tr(\"files.preview.video.volume\", \"Volume\")}\n                className=\"w-20 h-1 bg-bg-sunken 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              type=\"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={tr(\"files.preview.video.fullscreen\", \"Fullscreen\")}\n              aria-label={tr(\n                \"files.preview.video.openFullscreen\",\n                \"Open fullscreen\",\n              )}\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/shared/hooks/useTr.d.ts

@@ -0,0 +1,17 @@
+/**
+ * useTr — translation hook with fallback semantics.
+ *
+ * Wraps `useI18n().t()` so that when a key has no translation (i.e. the
+ * provider returns the key itself), the caller's English fallback is used
+ * instead. This keeps consumer call sites consistent and avoids leaking
+ * untranslated keys into the UI.
+ *
+ * Supports optional interpolation params using `{{key}}` placeholders.
+ *
+ * @example
+ *   const tr = useTr();
+ *   return <h1>{tr('files.browser.title', 'My Drive')}</h1>;
+ *   return <p>{tr('files.browser.selectedCount', '{{count}} selected', { count: 5 })}</p>;
+ */
+export declare function useTr(): (key: string, fallback: string, params?: Record<string, string | number>) => string;
+//# sourceMappingURL=useTr.d.ts.map

package/dist/shared/hooks/useTr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTr.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useTr.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,IAAI,CACvB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KACrC,MAAM,CAmBV"}