@burdenoff/microfe-files 2026.830.1 → 2026.930.1

package/dist/files/components/StorageBanner.js

@@ -1,83 +1,92 @@
-import { QuotaMeter as e } from "@burdenoff/fe-libs/shared/components";
-import { AlertCircle as t, AlertTriangle as n } from "lucide-react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { QuotaMeter as t } from "@burdenoff/fe-libs/shared/components";
+import { AlertCircle as n, AlertTriangle as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/files/components/StorageBanner.tsx
-function a(e) {
+function o(e) {
 	return e >= 1073741824 ? `${(e / 1073741824).toFixed(1)} GB` : e >= 1048576 ? `${(e / 1048576).toFixed(1)} MB` : e >= 1024 ? `${(e / 1024).toFixed(1)} KB` : `${e} B`;
 }
-var o = ({ quota: o }) => {
-	if (o.loading || o.noLimit || !o.isExhausted && !o.isNearLimit) return null;
-	let s = a(o.usedBytes), c = o.limitBytes ? a(o.limitBytes) : null, l = Math.round(o.usedBytes / 1048576), u = o.limitBytes ? Math.round(o.limitBytes / 1048576) : l;
-	return o.isExhausted ? /* @__PURE__ */ i("div", {
+var s = ({ quota: s }) => {
+	let c = e();
+	if (s.loading || s.noLimit || !s.isExhausted && !s.isNearLimit) return null;
+	let l = o(s.usedBytes), u = s.limitBytes ? o(s.limitBytes) : null, d = Math.round(s.usedBytes / 1048576), f = s.limitBytes ? Math.round(s.limitBytes / 1048576) : d;
+	return s.isExhausted ? /* @__PURE__ */ a("div", {
 		className: "flex items-center gap-3 rounded-lg border border-status-error-bg/30 bg-status-error-bg/10 px-4 py-3 text-sm",
 		children: [
-			/* @__PURE__ */ r(t, { className: "size-4 shrink-0 text-status-error-bg" }),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ i(n, { className: "size-4 shrink-0 text-status-error-bg" }),
+			/* @__PURE__ */ a("div", {
 				className: "flex flex-1 items-center gap-1 text-text-primary",
-				children: [/* @__PURE__ */ r("span", {
+				children: [/* @__PURE__ */ i("span", {
 					className: "font-medium",
-					children: "Storage full."
-				}), /* @__PURE__ */ i("span", {
+					children: c("files.storage.full", "Storage full.")
+				}), /* @__PURE__ */ a("span", {
 					className: "text-text-secondary",
 					children: [
-						c ? `${s} of ${c} used — no space left.` : `${s} used — no space left.`,
+						u ? c("files.storage.fullWithLimit", "{{used}} of {{limit}} used — no space left.", {
+							used: l,
+							limit: u
+						}) : c("files.storage.fullNoLimit", "{{used}} used — no space left.", { used: l }),
 						" ",
-						"Delete files to free up space or upgrade your plan."
+						c("files.storage.freeUpOrUpgrade", "Delete files to free up space or upgrade your plan.")
 					]
 				})]
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "min-w-[180px] shrink-0",
-				children: /* @__PURE__ */ r(e, {
-					label: "Storage",
-					used: l,
-					limit: u,
-					unit: "MB"
+				children: /* @__PURE__ */ i(t, {
+					label: c("files.storage.label", "Storage"),
+					used: d,
+					limit: f,
+					unit: c("files.storage.unit", "MB")
 				})
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary",
-				children: /* @__PURE__ */ r("div", { className: "h-full w-full rounded-full bg-status-error-bg" })
+				children: /* @__PURE__ */ i("div", { className: "h-full w-full rounded-full bg-status-error-bg" })
 			})
 		]
-	}) : /* @__PURE__ */ i("div", {
+	}) : /* @__PURE__ */ a("div", {
 		className: "flex items-center gap-3 rounded-lg border border-status-warning-bg/30 bg-status-warning-bg/10 px-4 py-3 text-sm",
 		children: [
-			/* @__PURE__ */ r(n, { className: "size-4 shrink-0 text-status-warning-bg" }),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ i(r, { className: "size-4 shrink-0 text-status-warning-bg" }),
+			/* @__PURE__ */ a("div", {
 				className: "flex flex-1 items-center gap-1 text-text-primary",
-				children: [/* @__PURE__ */ r("span", {
+				children: [/* @__PURE__ */ i("span", {
 					className: "font-medium",
-					children: "Storage almost full."
-				}), /* @__PURE__ */ i("span", {
+					children: c("files.storage.almostFull", "Storage almost full.")
+				}), /* @__PURE__ */ a("span", {
 					className: "text-text-secondary",
 					children: [
-						c ? `${s} of ${c} used (${Math.round(o.usedPercent)}%).` : `${s} used.`,
+						u ? c("files.storage.almostFullWithLimit", "{{used}} of {{limit}} used ({{percent}}%).", {
+							used: l,
+							limit: u,
+							percent: Math.round(s.usedPercent)
+						}) : c("files.storage.almostFullNoLimit", "{{used}} used.", { used: l }),
 						" ",
-						"Consider deleting files or upgrading your plan."
+						c("files.storage.deleteOrUpgrade", "Consider deleting files or upgrading your plan.")
 					]
 				})]
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "min-w-[180px] shrink-0",
-				children: /* @__PURE__ */ r(e, {
-					label: "Storage",
-					used: l,
-					limit: u,
-					unit: "MB"
+				children: /* @__PURE__ */ i(t, {
+					label: c("files.storage.label", "Storage"),
+					used: d,
+					limit: f,
+					unit: c("files.storage.unit", "MB")
 				})
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary",
-				children: /* @__PURE__ */ r("div", {
+				children: /* @__PURE__ */ i("div", {
 					className: "h-full rounded-full bg-status-warning-bg transition-all",
-					style: { width: `${o.usedPercent}%` }
+					style: { width: `${s.usedPercent}%` }
 				})
 			})
 		]
 	});
 };
 //#endregion
-export { o as StorageBanner };
+export { s as StorageBanner };
 
 //# sourceMappingURL=StorageBanner.js.map

package/dist/files/components/StorageBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"StorageBanner.js","names":[],"sources":["../../../src/files/components/StorageBanner.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { AlertCircle, AlertTriangle, HardDrive } from \"lucide-react\";\nimport { QuotaMeter } from \"@burdenoff/fe-libs/shared/components\";\nimport type { StorageQuotaState } from \"../hooks/useStorageQuota\";\n\nfunction formatBytes(bytes: number): string {\n  if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(1)} GB`;\n  if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(1)} MB`;\n  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  return `${bytes} B`;\n}\n\ninterface StorageBannerProps {\n  quota: StorageQuotaState;\n}\n\nexport const StorageBanner: FC<StorageBannerProps> = ({ quota }) => {\n  if (\n    quota.loading ||\n    quota.noLimit ||\n    (!quota.isExhausted && !quota.isNearLimit)\n  ) {\n    return null;\n  }\n\n  const usedLabel = formatBytes(quota.usedBytes);\n  const limitLabel = quota.limitBytes ? formatBytes(quota.limitBytes) : null;\n  const quotaMeterUsed = Math.round(quota.usedBytes / 1048576);\n  const quotaMeterLimit = quota.limitBytes ? Math.round(quota.limitBytes / 1048576) : quotaMeterUsed;\n\n  if (quota.isExhausted) {\n    return (\n      <div className=\"flex items-center gap-3 rounded-lg border border-status-error-bg/30 bg-status-error-bg/10 px-4 py-3 text-sm\">\n        <AlertCircle className=\"size-4 shrink-0 text-status-error-bg\" />\n        <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n          <span className=\"font-medium\">Storage full.</span>\n          <span className=\"text-text-secondary\">\n            {limitLabel\n              ? `${usedLabel} of ${limitLabel} used — no space left.`\n              : `${usedLabel} used — no space left.`}{\" \"}\n            Delete files to free up space or upgrade your plan.\n          </span>\n        </div>\n        <div className=\"min-w-[180px] shrink-0\">\n          <QuotaMeter\n            label=\"Storage\"\n            used={quotaMeterUsed}\n            limit={quotaMeterLimit}\n            unit=\"MB\"\n          />\n        </div>\n        <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n          <div className=\"h-full w-full rounded-full bg-status-error-bg\" />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center gap-3 rounded-lg border border-status-warning-bg/30 bg-status-warning-bg/10 px-4 py-3 text-sm\">\n      <AlertTriangle className=\"size-4 shrink-0 text-status-warning-bg\" />\n      <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n        <span className=\"font-medium\">Storage almost full.</span>\n        <span className=\"text-text-secondary\">\n          {limitLabel\n            ? `${usedLabel} of ${limitLabel} used (${Math.round(quota.usedPercent)}%).`\n            : `${usedLabel} used.`}{\" \"}\n          Consider deleting files or upgrading your plan.\n        </span>\n      </div>\n      <div className=\"min-w-[180px] shrink-0\">\n        <QuotaMeter\n          label=\"Storage\"\n          used={quotaMeterUsed}\n          limit={quotaMeterLimit}\n          unit=\"MB\"\n        />\n      </div>\n      <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n        <div\n          className=\"h-full rounded-full bg-status-warning-bg transition-all\"\n          style={{ width: `${quota.usedPercent}%` }}\n        />\n      </div>\n    </div>\n  );\n};\n\ninterface StorageIndicatorProps {\n  quota: StorageQuotaState;\n}\n\nexport const StorageIndicator: FC<StorageIndicatorProps> = ({ quota }) => {\n  if (quota.loading || quota.noLimit || !quota.limitBytes) return null;\n\n  const usedLabel = formatBytes(quota.usedBytes);\n  const limitLabel = formatBytes(quota.limitBytes);\n  const color = quota.isExhausted\n    ? \"bg-status-error-bg\"\n    : quota.isNearLimit\n      ? \"bg-status-warning-bg\"\n      : \"bg-status-info-bg\";\n\n  return (\n    <div className=\"flex items-center gap-2 text-xs text-text-muted\">\n      <HardDrive className=\"size-3.5 shrink-0\" />\n      <span className=\"tabular-nums\">\n        {usedLabel} / {limitLabel}\n      </span>\n      <div className=\"h-1 w-16 overflow-hidden rounded-full bg-surface-tertiary\">\n        <div\n          className={`h-full rounded-full transition-all ${color}`}\n          style={{ width: `${quota.usedPercent}%` }}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,SAAS,EAAY,GAAuB;AAI1C,QAHI,KAAS,aAAmB,IAAI,IAAQ,YAAY,QAAQ,EAAE,CAAC,OAC/D,KAAS,UAAgB,IAAI,IAAQ,SAAS,QAAQ,EAAE,CAAC,OACzD,KAAS,OAAa,IAAI,IAAQ,MAAM,QAAQ,EAAE,CAAC,OAChD,GAAG,EAAM;;AAOlB,IAAa,KAAyC,EAAE,eAAY;AAClE,KACE,EAAM,WACN,EAAM,WACL,CAAC,EAAM,eAAe,CAAC,EAAM,YAE9B,QAAO;CAGT,IAAM,IAAY,EAAY,EAAM,UAAU,EACxC,IAAa,EAAM,aAAa,EAAY,EAAM,WAAW,GAAG,MAChE,IAAiB,KAAK,MAAM,EAAM,YAAY,QAAQ,EACtD,IAAkB,EAAM,aAAa,KAAK,MAAM,EAAM,aAAa,QAAQ,GAAG;AA8BpF,QA5BI,EAAM,cAEN,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAa,WAAU,wCAAyC,CAAA;GAChE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAc;KAAoB,CAAA,EAClD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,GAAG,EAAU,MAAM,EAAW,0BAC9B,GAAG,EAAU;MAAyB;MAAI;MAEzC;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,OAAM;KACN,MAAM;KACN,OAAO;KACP,MAAK;KACL,CAAA;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;IAC7D,CAAA;GACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAe,WAAU,0CAA2C,CAAA;GACpE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAc;KAA2B,CAAA,EACzD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,GAAG,EAAU,MAAM,EAAW,SAAS,KAAK,MAAM,EAAM,YAAY,CAAC,OACrE,GAAG,EAAU;MAAS;MAAI;MAEzB;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,OAAM;KACN,MAAM;KACN,OAAO;KACP,MAAK;KACL,CAAA;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,GAAG,EAAM,YAAY,IAAI;KACzC,CAAA;IACE,CAAA;GACF"}
+{"version":3,"file":"StorageBanner.js","names":[],"sources":["../../../src/files/components/StorageBanner.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { AlertCircle, AlertTriangle, HardDrive } from \"lucide-react\";\nimport { QuotaMeter } from \"@burdenoff/fe-libs/shared/components\";\nimport type { StorageQuotaState } from \"../hooks/useStorageQuota\";\nimport { useTr } from \"../../shared/hooks/useTr\";\n\nfunction formatBytes(bytes: number): string {\n  if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(1)} GB`;\n  if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(1)} MB`;\n  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  return `${bytes} B`;\n}\n\ninterface StorageBannerProps {\n  quota: StorageQuotaState;\n}\n\nexport const StorageBanner: FC<StorageBannerProps> = ({ quota }) => {\n  const tr = useTr();\n\n  if (\n    quota.loading ||\n    quota.noLimit ||\n    (!quota.isExhausted && !quota.isNearLimit)\n  ) {\n    return null;\n  }\n\n  const usedLabel = formatBytes(quota.usedBytes);\n  const limitLabel = quota.limitBytes ? formatBytes(quota.limitBytes) : null;\n  const quotaMeterUsed = Math.round(quota.usedBytes / 1048576);\n  const quotaMeterLimit = quota.limitBytes\n    ? Math.round(quota.limitBytes / 1048576)\n    : quotaMeterUsed;\n\n  if (quota.isExhausted) {\n    return (\n      <div className=\"flex items-center gap-3 rounded-lg border border-status-error-bg/30 bg-status-error-bg/10 px-4 py-3 text-sm\">\n        <AlertCircle className=\"size-4 shrink-0 text-status-error-bg\" />\n        <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n          <span className=\"font-medium\">\n            {tr(\"files.storage.full\", \"Storage full.\")}\n          </span>\n          <span className=\"text-text-secondary\">\n            {limitLabel\n              ? tr(\n                  \"files.storage.fullWithLimit\",\n                  \"{{used}} of {{limit}} used — no space left.\",\n                  { used: usedLabel, limit: limitLabel },\n                )\n              : tr(\n                  \"files.storage.fullNoLimit\",\n                  \"{{used}} used — no space left.\",\n                  { used: usedLabel },\n                )}{\" \"}\n            {tr(\n              \"files.storage.freeUpOrUpgrade\",\n              \"Delete files to free up space or upgrade your plan.\",\n            )}\n          </span>\n        </div>\n        <div className=\"min-w-[180px] shrink-0\">\n          <QuotaMeter\n            label={tr(\"files.storage.label\", \"Storage\")}\n            used={quotaMeterUsed}\n            limit={quotaMeterLimit}\n            unit={tr(\"files.storage.unit\", \"MB\")}\n          />\n        </div>\n        <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n          <div className=\"h-full w-full rounded-full bg-status-error-bg\" />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center gap-3 rounded-lg border border-status-warning-bg/30 bg-status-warning-bg/10 px-4 py-3 text-sm\">\n      <AlertTriangle className=\"size-4 shrink-0 text-status-warning-bg\" />\n      <div className=\"flex flex-1 items-center gap-1 text-text-primary\">\n        <span className=\"font-medium\">\n          {tr(\"files.storage.almostFull\", \"Storage almost full.\")}\n        </span>\n        <span className=\"text-text-secondary\">\n          {limitLabel\n            ? tr(\n                \"files.storage.almostFullWithLimit\",\n                \"{{used}} of {{limit}} used ({{percent}}%).\",\n                {\n                  used: usedLabel,\n                  limit: limitLabel,\n                  percent: Math.round(quota.usedPercent),\n                },\n              )\n            : tr(\"files.storage.almostFullNoLimit\", \"{{used}} used.\", {\n                used: usedLabel,\n              })}{\" \"}\n          {tr(\n            \"files.storage.deleteOrUpgrade\",\n            \"Consider deleting files or upgrading your plan.\",\n          )}\n        </span>\n      </div>\n      <div className=\"min-w-[180px] shrink-0\">\n        <QuotaMeter\n          label={tr(\"files.storage.label\", \"Storage\")}\n          used={quotaMeterUsed}\n          limit={quotaMeterLimit}\n          unit={tr(\"files.storage.unit\", \"MB\")}\n        />\n      </div>\n      <div className=\"h-1.5 w-24 shrink-0 overflow-hidden rounded-full bg-surface-tertiary\">\n        <div\n          className=\"h-full rounded-full bg-status-warning-bg transition-all\"\n          style={{ width: `${quota.usedPercent}%` }}\n        />\n      </div>\n    </div>\n  );\n};\n\ninterface StorageIndicatorProps {\n  quota: StorageQuotaState;\n}\n\nexport const StorageIndicator: FC<StorageIndicatorProps> = ({ quota }) => {\n  if (quota.loading || quota.noLimit || !quota.limitBytes) return null;\n\n  const usedLabel = formatBytes(quota.usedBytes);\n  const limitLabel = formatBytes(quota.limitBytes);\n  const color = quota.isExhausted\n    ? \"bg-status-error-bg\"\n    : quota.isNearLimit\n      ? \"bg-status-warning-bg\"\n      : \"bg-status-info-bg\";\n\n  return (\n    <div className=\"flex items-center gap-2 text-xs text-text-muted\">\n      <HardDrive className=\"size-3.5 shrink-0\" />\n      <span className=\"tabular-nums\">\n        {usedLabel} / {limitLabel}\n      </span>\n      <div className=\"h-1 w-16 overflow-hidden rounded-full bg-surface-tertiary\">\n        <div\n          className={`h-full rounded-full transition-all ${color}`}\n          style={{ width: `${quota.usedPercent}%` }}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAMA,SAAS,EAAY,GAAuB;AAI1C,QAHI,KAAS,aAAmB,IAAI,IAAQ,YAAY,QAAQ,EAAE,CAAC,OAC/D,KAAS,UAAgB,IAAI,IAAQ,SAAS,QAAQ,EAAE,CAAC,OACzD,KAAS,OAAa,IAAI,IAAQ,MAAM,QAAQ,EAAE,CAAC,OAChD,GAAG,EAAM;;AAOlB,IAAa,KAAyC,EAAE,eAAY;CAClE,IAAM,IAAK,GAAO;AAElB,KACE,EAAM,WACN,EAAM,WACL,CAAC,EAAM,eAAe,CAAC,EAAM,YAE9B,QAAO;CAGT,IAAM,IAAY,EAAY,EAAM,UAAU,EACxC,IAAa,EAAM,aAAa,EAAY,EAAM,WAAW,GAAG,MAChE,IAAiB,KAAK,MAAM,EAAM,YAAY,QAAQ,EACtD,IAAkB,EAAM,aAC1B,KAAK,MAAM,EAAM,aAAa,QAAQ,GACtC;AA2CJ,QAzCI,EAAM,cAEN,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAa,WAAU,wCAAyC,CAAA;GAChE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAG,sBAAsB,gBAAgB;KACrC,CAAA,EACP,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,EACE,+BACA,+CACA;OAAE,MAAM;OAAW,OAAO;OAAY,CACvC,GACD,EACE,6BACA,kCACA,EAAE,MAAM,GAAW,CACpB;MAAE;MACN,EACC,iCACA,sDACD;MACI;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,OAAO,EAAG,uBAAuB,UAAU;KAC3C,MAAM;KACN,OAAO;KACP,MAAM,EAAG,sBAAsB,KAAK;KACpC,CAAA;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;IAC7D,CAAA;GACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAe,WAAU,0CAA2C,CAAA;GACpE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAG,4BAA4B,uBAAuB;KAClD,CAAA,EACP,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IACG,EACE,qCACA,8CACA;OACE,MAAM;OACN,OAAO;OACP,SAAS,KAAK,MAAM,EAAM,YAAY;OACvC,CACF,GACD,EAAG,mCAAmC,kBAAkB,EACtD,MAAM,GACP,CAAC;MAAE;MACP,EACC,iCACA,kDACD;MACI;OACH;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,OAAO,EAAG,uBAAuB,UAAU;KAC3C,MAAM;KACN,OAAO;KACP,MAAM,EAAG,sBAAsB,KAAK;KACpC,CAAA;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,GAAG,EAAM,YAAY,IAAI;KACzC,CAAA;IACE,CAAA;GACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/AudioPlayer.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,+BAyJ1D"}
+{"version":3,"file":"AudioPlayer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/AudioPlayer.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,+BAkK1D"}

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

@@ -1,99 +1,100 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import { Music 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 { Music 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/AudioPlayer.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);
-	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(() => {
+		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 C = () => {
-		f.current && (p ? f.current.pause() : f.current.play(), m(!p));
-	}, w = (e) => {
-		f.current && (f.current.currentTime = e, g(e));
-	}, T = (e) => {
-		b(e), S(e === 0), f.current && (f.current.volume = e);
-	}, E = () => {
-		if (f.current) {
-			let e = !x;
-			S(e), f.current.muted = e;
+	let T = () => {
+		m.current && (h ? m.current.pause() : m.current.play(), g(!h));
+	}, E = (e) => {
+		m.current && (m.current.currentTime = e, v(e));
+	}, D = (e) => {
+		S(e), w(e === 0), m.current && (m.current.volume = e);
+	}, O = () => {
+		if (m.current) {
+			let e = !C;
+			w(e), m.current.muted = e;
 		}
-	}, D = (e) => `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
-	return /* @__PURE__ */ l("div", {
+	}, k = (e) => `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
+	return /* @__PURE__ */ u("div", {
 		className: "flex flex-col h-full bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ c("audio", {
-				ref: f,
-				src: d,
-				"aria-label": u.name,
-				children: /* @__PURE__ */ c("track", { kind: "captions" })
+			/* @__PURE__ */ l("audio", {
+				ref: m,
+				src: f,
+				"aria-label": d.name,
+				children: /* @__PURE__ */ l("track", { kind: "captions" })
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex-1 flex flex-col items-center justify-center p-8",
 				children: [
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ l("div", {
 						className: "size-64 rounded-lg bg-bg-sunken flex items-center justify-center mb-8 shadow-lg",
-						children: /* @__PURE__ */ c(r, { className: "size-32 text-text-tertiary" })
+						children: /* @__PURE__ */ l(i, { className: "size-32 text-text-tertiary" })
 					}),
-					/* @__PURE__ */ c("h2", {
+					/* @__PURE__ */ l("h2", {
 						className: "text-xl font-semibold text-text-primary mb-2",
-						children: u.name
+						children: d.name
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ u("p", {
 						className: "text-sm text-text-secondary mb-1",
-						children: [(u.size / 1024 / 1024).toFixed(2), " MB"]
+						children: [(d.size / 1024 / 1024).toFixed(2), " MB"]
 					}),
-					/* @__PURE__ */ c("p", {
+					/* @__PURE__ */ l("p", {
 						className: "text-sm text-text-secondary",
-						children: D(_)
+						children: k(y)
 					})
 				]
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "bg-bg-surface border-t border-border-default p-6",
-				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) => w(Number(e.target.value)),
-						"aria-label": "Seek",
+						max: y || 0,
+						value: _,
+						onChange: (e) => E(Number(e.target.value)),
+						"aria-label": p("files.preview.audio.seek", "Seek"),
 						className: "w-full h-2 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg"
-					}), /* @__PURE__ */ l("div", {
+					}), /* @__PURE__ */ u("div", {
 						className: "flex justify-between mt-2 text-sm text-text-secondary",
-						children: [/* @__PURE__ */ c("span", { children: D(h) }), /* @__PURE__ */ c("span", { children: D(_) })]
+						children: [/* @__PURE__ */ l("span", { children: k(_) }), /* @__PURE__ */ l("span", { children: k(y) })]
 					})]
-				}), /* @__PURE__ */ l("div", {
+				}), /* @__PURE__ */ u("div", {
 					className: "flex items-center justify-center gap-4",
-					children: [/* @__PURE__ */ c("button", {
+					children: [/* @__PURE__ */ l("button", {
 						type: "button",
-						onClick: C,
+						onClick: T,
 						className: "p-4 text-text-inverse bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-full transition-colors duration-200",
-						title: p ? "Pause" : "Play",
-						children: c(p ? i : a, { className: "size-6" })
-					}), /* @__PURE__ */ l("div", {
+						title: h ? p("files.preview.audio.pause", "Pause") : p("files.preview.audio.play", "Play"),
+						children: l(h ? a : o, { className: "size-6" })
+					}), /* @__PURE__ */ u("div", {
 						className: "flex items-center gap-2 ml-4",
-						children: [/* @__PURE__ */ c("button", {
+						children: [/* @__PURE__ */ l("button", {
 							type: "button",
-							onClick: E,
+							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",
-							children: c(x ? s : o, { className: "size-5" })
-						}), /* @__PURE__ */ c("input", {
+							title: C ? p("files.preview.audio.unmute", "Unmute") : p("files.preview.audio.mute", "Mute"),
+							children: l(C ? c : s, { className: "size-5" })
+						}), /* @__PURE__ */ l("input", {
 							type: "range",
 							min: 0,
 							max: 1,
 							step: .1,
-							value: y,
-							onChange: (e) => T(Number(e.target.value)),
-							"aria-label": "Volume",
+							value: x,
+							onChange: (e) => D(Number(e.target.value)),
+							"aria-label": p("files.preview.audio.volume", "Volume"),
 							className: "w-24 h-1 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg"
 						})]
 					})]
@@ -103,6 +104,6 @@ function u({ file: u, url: d }) {
 	});
 }
 //#endregion
-export { u as AudioPlayer };
+export { d as AudioPlayer };
 
 //# sourceMappingURL=AudioPlayer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.js","names":[],"sources":["../../../../src/files/components/viewers/AudioPlayer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { Play, Pause, Volume2, VolumeX, Music } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\n\ninterface AudioPlayerProps {\n  file: FileItem;\n  url: string;\n}\n\nexport function AudioPlayer({ file, url }: AudioPlayerProps) {\n  const audioRef = useRef<HTMLAudioElement>(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\n  useEffect(() => {\n    const audio = audioRef.current;\n    if (!audio) return;\n\n    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);\n    const handleLoadedMetadata = () => setDuration(audio.duration);\n    const handleEnded = () => setIsPlaying(false);\n\n    audio.addEventListener(\"timeupdate\", handleTimeUpdate);\n    audio.addEventListener(\"loadedmetadata\", handleLoadedMetadata);\n    audio.addEventListener(\"ended\", handleEnded);\n\n    return () => {\n      audio.removeEventListener(\"timeupdate\", handleTimeUpdate);\n      audio.removeEventListener(\"loadedmetadata\", handleLoadedMetadata);\n      audio.removeEventListener(\"ended\", handleEnded);\n    };\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      if (isPlaying) {\n        audioRef.current.pause();\n      } else {\n        audioRef.current.play();\n      }\n      setIsPlaying(!isPlaying);\n    }\n  };\n\n  const handleSeek = (time: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime = time;\n      setCurrentTime(time);\n    }\n  };\n\n  const handleVolumeChange = (newVolume: number) => {\n    setVolume(newVolume);\n    setIsMuted(newVolume === 0);\n    if (audioRef.current) {\n      audioRef.current.volume = newVolume;\n    }\n  };\n\n  const toggleMute = () => {\n    if (audioRef.current) {\n      const newMuted = !isMuted;\n      setIsMuted(newMuted);\n      audioRef.current.muted = newMuted;\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 flex-col h-full bg-bg-canvas\">\n      <audio ref={audioRef} src={url} aria-label={file.name}>\n        <track kind=\"captions\" />\n      </audio>\n\n      {/* Album Art Placeholder */}\n      <div className=\"flex-1 flex flex-col items-center justify-center p-8\">\n        <div className=\"size-64 rounded-lg bg-bg-sunken flex items-center justify-center mb-8 shadow-lg\">\n          <Music className=\"size-32 text-text-tertiary\" />\n        </div>\n\n        {/* Track Info */}\n        <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n          {file.name}\n        </h2>\n        <p className=\"text-sm text-text-secondary mb-1\">\n          {(file.size / 1024 / 1024).toFixed(2)} MB\n        </p>\n        <p className=\"text-sm text-text-secondary\">{formatTime(duration)}</p>\n      </div>\n\n      {/* Controls */}\n      <div className=\"bg-bg-surface border-t border-border-default p-6\">\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-2 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg\"\n          />\n          <div className=\"flex justify-between mt-2 text-sm 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-center gap-4\">\n          {/* Play/Pause */}\n          <button\n            type=\"button\"\n            onClick={togglePlay}\n            className=\"p-4 text-text-inverse bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-full transition-colors duration-200\"\n            title={isPlaying ? \"Pause\" : \"Play\"}\n          >\n            {isPlaying ? (\n              <Pause className=\"size-6\" />\n            ) : (\n              <Play className=\"size-6\" />\n            )}\n          </button>\n\n          {/* Volume Controls */}\n          <div className=\"flex items-center gap-2 ml-4\">\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            >\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-24 h-1 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AudioPlayer.js","names":[],"sources":["../../../../src/files/components/viewers/AudioPlayer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { Play, Pause, Volume2, VolumeX, Music } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\n\ninterface AudioPlayerProps {\n  file: FileItem;\n  url: string;\n}\n\nexport function AudioPlayer({ file, url }: AudioPlayerProps) {\n  const tr = useTr();\n  const audioRef = useRef<HTMLAudioElement>(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\n  useEffect(() => {\n    const audio = audioRef.current;\n    if (!audio) return;\n\n    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);\n    const handleLoadedMetadata = () => setDuration(audio.duration);\n    const handleEnded = () => setIsPlaying(false);\n\n    audio.addEventListener(\"timeupdate\", handleTimeUpdate);\n    audio.addEventListener(\"loadedmetadata\", handleLoadedMetadata);\n    audio.addEventListener(\"ended\", handleEnded);\n\n    return () => {\n      audio.removeEventListener(\"timeupdate\", handleTimeUpdate);\n      audio.removeEventListener(\"loadedmetadata\", handleLoadedMetadata);\n      audio.removeEventListener(\"ended\", handleEnded);\n    };\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      if (isPlaying) {\n        audioRef.current.pause();\n      } else {\n        audioRef.current.play();\n      }\n      setIsPlaying(!isPlaying);\n    }\n  };\n\n  const handleSeek = (time: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime = time;\n      setCurrentTime(time);\n    }\n  };\n\n  const handleVolumeChange = (newVolume: number) => {\n    setVolume(newVolume);\n    setIsMuted(newVolume === 0);\n    if (audioRef.current) {\n      audioRef.current.volume = newVolume;\n    }\n  };\n\n  const toggleMute = () => {\n    if (audioRef.current) {\n      const newMuted = !isMuted;\n      setIsMuted(newMuted);\n      audioRef.current.muted = newMuted;\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 flex-col h-full bg-bg-canvas\">\n      <audio ref={audioRef} src={url} aria-label={file.name}>\n        <track kind=\"captions\" />\n      </audio>\n\n      {/* Album Art Placeholder */}\n      <div className=\"flex-1 flex flex-col items-center justify-center p-8\">\n        <div className=\"size-64 rounded-lg bg-bg-sunken flex items-center justify-center mb-8 shadow-lg\">\n          <Music className=\"size-32 text-text-tertiary\" />\n        </div>\n\n        {/* Track Info */}\n        <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n          {file.name}\n        </h2>\n        <p className=\"text-sm text-text-secondary mb-1\">\n          {(file.size / 1024 / 1024).toFixed(2)} MB\n        </p>\n        <p className=\"text-sm text-text-secondary\">{formatTime(duration)}</p>\n      </div>\n\n      {/* Controls */}\n      <div className=\"bg-bg-surface border-t border-border-default p-6\">\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.audio.seek\", \"Seek\")}\n            className=\"w-full h-2 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg\"\n          />\n          <div className=\"flex justify-between mt-2 text-sm 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-center gap-4\">\n          {/* Play/Pause */}\n          <button\n            type=\"button\"\n            onClick={togglePlay}\n            className=\"p-4 text-text-inverse bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-full transition-colors duration-200\"\n            title={\n              isPlaying\n                ? tr(\"files.preview.audio.pause\", \"Pause\")\n                : tr(\"files.preview.audio.play\", \"Play\")\n            }\n          >\n            {isPlaying ? (\n              <Pause className=\"size-6\" />\n            ) : (\n              <Play className=\"size-6\" />\n            )}\n          </button>\n\n          {/* Volume Controls */}\n          <div className=\"flex items-center gap-2 ml-4\">\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.audio.unmute\", \"Unmute\")\n                  : tr(\"files.preview.audio.mute\", \"Mute\")\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.audio.volume\", \"Volume\")}\n              className=\"w-24 h-1 bg-bg-sunken rounded-lg appearance-none cursor-pointer accent-action-primary-bg\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeViewer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/CodeViewer.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;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAoHlE"}
+{"version":3,"file":"CodeViewer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/CodeViewer.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;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAoIlE"}

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

@@ -1,86 +1,91 @@
-import { useEffect as e, useState as t } from "react";
-import { Check as n, Copy as r, WrapText as i } from "lucide-react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { useEffect as t, useState as n } from "react";
+import { Check as r, Copy as i, WrapText as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/files/components/viewers/CodeViewer.tsx
-function c({ file: c, url: u, language: d }) {
-	let [f, p] = t(""), [m, h] = t(!0), [g, _] = t(!1), [v, y] = t(!1), b = d || l(c.name);
-	return e(() => {
-		fetch(u).then((e) => e.text()).then((e) => {
-			p(e), h(!1);
+function l({ file: l, url: d, language: f }) {
+	let p = e(), [m, h] = n(""), [g, _] = n(!0), [v, y] = n(!1), [b, x] = n(!1), S = f || u(l.name);
+	return t(() => {
+		fetch(d).then((e) => e.text()).then((e) => {
+			h(e), _(!1);
 		}).catch(() => {
-			h(!1);
+			_(!1);
 		});
-	}, [u]), e(() => {
-		if (v) {
-			let e = setTimeout(() => y(!1), 2e3);
+	}, [d]), t(() => {
+		if (b) {
+			let e = setTimeout(() => x(!1), 2e3);
 			return () => clearTimeout(e);
 		}
-	}, [v]), m ? /* @__PURE__ */ o("div", {
+	}, [b]), g ? /* @__PURE__ */ s("div", {
 		className: "flex items-center justify-center h-full bg-bg-canvas",
-		children: /* @__PURE__ */ o("span", {
+		children: /* @__PURE__ */ s("span", {
 			className: "text-text-secondary",
-			children: "Loading code..."
+			children: p("files.preview.code.loading", "Loading code...")
 		})
-	}) : /* @__PURE__ */ s("div", {
+	}) : /* @__PURE__ */ c("div", {
 		className: "flex flex-col h-full bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ c("div", {
 				className: "flex items-center justify-between p-3 bg-bg-surface border-b border-border-default",
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ c("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ o("span", {
+					children: [/* @__PURE__ */ s("span", {
 						className: "px-2 py-1 text-xs font-medium text-text-link bg-bg-accent rounded",
-						children: b || "Text"
-					}), /* @__PURE__ */ o("span", {
+						children: S || p("files.preview.code.text", "Text")
+					}), /* @__PURE__ */ s("span", {
 						className: "text-sm text-text-secondary",
-						children: c.name
+						children: l.name
 					})]
-				}), /* @__PURE__ */ s("div", {
+				}), /* @__PURE__ */ c("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ o("button", {
+					children: [/* @__PURE__ */ s("button", {
 						type: "button",
-						onClick: () => _(!g),
-						className: `p-2 rounded transition-colors duration-200 ${g ? "text-text-link bg-bg-accent" : "text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover"}`,
-						title: g ? "Disable word wrap" : "Enable word wrap",
-						"aria-label": g ? "Disable word wrap" : "Enable word wrap",
-						children: /* @__PURE__ */ o(i, { className: "size-4" })
-					}), /* @__PURE__ */ o("button", {
+						onClick: () => y(!v),
+						className: `p-2 rounded transition-colors duration-200 ${v ? "text-text-link bg-bg-accent" : "text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover"}`,
+						title: v ? p("files.preview.code.disableWordWrap", "Disable word wrap") : p("files.preview.code.enableWordWrap", "Enable word wrap"),
+						"aria-label": v ? p("files.preview.code.disableWordWrap", "Disable word wrap") : p("files.preview.code.enableWordWrap", "Enable word wrap"),
+						children: /* @__PURE__ */ s(a, { className: "size-4" })
+					}), /* @__PURE__ */ s("button", {
 						type: "button",
 						onClick: () => {
-							navigator.clipboard.writeText(f), y(!0);
+							navigator.clipboard.writeText(m), x(!0);
 						},
 						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 code",
-						"aria-label": "Copy code content",
-						children: v ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(n, { className: "size-4" }), "Copied!"] }) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { className: "size-4" }), "Copy"] })
+						title: p("files.preview.code.copyCode", "Copy code"),
+						"aria-label": p("files.preview.code.copyCodeContent", "Copy code content"),
+						children: b ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(r, { className: "size-4" }), p("files.preview.code.copied", "Copied!")] }) : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(i, { className: "size-4" }), p("files.preview.code.copy", "Copy")] })
 					})]
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				className: "flex-1 overflow-auto",
-				children: /* @__PURE__ */ o("pre", {
-					className: `p-4 text-sm font-mono leading-relaxed ${g ? "whitespace-pre-wrap" : "whitespace-pre"}`,
+				children: /* @__PURE__ */ s("pre", {
+					className: `p-4 text-sm font-mono leading-relaxed ${v ? "whitespace-pre-wrap" : "whitespace-pre"}`,
 					style: { tabSize: 2 },
-					children: f.split("\n").map((e, t) => /* @__PURE__ */ s("div", {
+					children: m.split("\n").map((e, t) => /* @__PURE__ */ c("div", {
 						className: "flex",
-						children: [/* @__PURE__ */ o("span", {
+						children: [/* @__PURE__ */ s("span", {
 							className: "inline-block w-12 text-right pr-4 text-text-tertiary select-none",
 							children: t + 1
-						}), /* @__PURE__ */ o("span", {
+						}), /* @__PURE__ */ s("span", {
 							className: "text-text-primary",
 							children: e || " "
 						})]
 					}, t))
 				})
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ c("div", {
 				className: "flex items-center justify-between p-3 bg-bg-surface border-t border-border-default text-xs text-text-secondary",
-				children: [/* @__PURE__ */ s("span", { children: [f.split("\n").length, " lines"] }), /* @__PURE__ */ s("span", { children: [(c.size / 1024).toFixed(2), " KB"] })]
+				children: [/* @__PURE__ */ c("span", { children: [
+					m.split("\n").length,
+					" ",
+					p("files.preview.code.lines", "lines")
+				] }), /* @__PURE__ */ c("span", { children: [(l.size / 1024).toFixed(2), " KB"] })]
 			})
 		]
 	});
 }
-function l(e) {
+function u(e) {
 	return {
 		js: "JavaScript",
 		jsx: "React JSX",
@@ -115,6 +120,6 @@ function l(e) {
 	}[e.split(".").pop()?.toLowerCase() || ""] || "Text";
 }
 //#endregion
-export { c as CodeViewer };
+export { l as CodeViewer };
 
 //# sourceMappingURL=CodeViewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeViewer.js","names":[],"sources":["../../../../src/files/components/viewers/CodeViewer.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { Copy, Check, WrapText } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\n\ninterface CodeViewerProps {\n  file: FileItem;\n  url: string;\n  language?: string;\n}\n\n/**\n * CodeViewer - Displays code files with syntax highlighting\n *\n * Note: This is a simplified implementation with basic highlighting.\n * For full syntax highlighting, install prism-react-renderer:\n * bun add prism-react-renderer\n */\nexport function CodeViewer({ file, url, language }: CodeViewerProps) {\n  const [code, setCode] = useState(\"\");\n  const [loading, setLoading] = useState(true);\n  const [wordWrap, setWordWrap] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const detectedLanguage = language || detectLanguage(file.name);\n\n  useEffect(() => {\n    fetch(url)\n      .then((res) => res.text())\n      .then((text) => {\n        setCode(text);\n        setLoading(false);\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n  }, [url]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(code);\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  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center h-full bg-bg-canvas\">\n        <span className=\"text-text-secondary\">Loading code...</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=\"px-2 py-1 text-xs font-medium text-text-link bg-bg-accent rounded\">\n            {detectedLanguage || \"Text\"}\n          </span>\n          <span className=\"text-sm text-text-secondary\">{file.name}</span>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\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 code\"\n            aria-label=\"Copy code 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      {/* Code Content */}\n      <div className=\"flex-1 overflow-auto\">\n        <pre\n          className={`p-4 text-sm font-mono leading-relaxed ${\n            wordWrap ? \"whitespace-pre-wrap\" : \"whitespace-pre\"\n          }`}\n          style={{ tabSize: 2 }}\n        >\n          {code.split(\"\\n\").map((line, i) => (\n            <div key={i} className=\"flex\">\n              <span className=\"inline-block w-12 text-right pr-4 text-text-tertiary select-none\">\n                {i + 1}\n              </span>\n              <span className=\"text-text-primary\">{line || \" \"}</span>\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>{code.split(\"\\n\").length} lines</span>\n        <span>{(file.size / 1024).toFixed(2)} KB</span>\n      </div>\n    </div>\n  );\n}\n\nfunction detectLanguage(filename: string): string {\n  const ext = filename.split(\".\").pop()?.toLowerCase();\n  const languageMap: Record<string, string> = {\n    js: \"JavaScript\",\n    jsx: \"React JSX\",\n    ts: \"TypeScript\",\n    tsx: \"React TSX\",\n    py: \"Python\",\n    java: \"Java\",\n    cpp: \"C++\",\n    c: \"C\",\n    cs: \"C#\",\n    rb: \"Ruby\",\n    go: \"Go\",\n    rs: \"Rust\",\n    php: \"PHP\",\n    html: \"HTML\",\n    css: \"CSS\",\n    scss: \"SCSS\",\n    json: \"JSON\",\n    md: \"Markdown\",\n    yaml: \"YAML\",\n    yml: \"YAML\",\n    xml: \"XML\",\n    sql: \"SQL\",\n    sh: \"Shell\",\n    bash: \"Bash\",\n    vue: \"Vue\",\n    swift: \"Swift\",\n    kt: \"Kotlin\",\n    r: \"R\",\n    dart: \"Dart\",\n    lua: \"Lua\",\n  };\n  return languageMap[ext || \"\"] || \"Text\";\n}\n"],"mappings":"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"}
+{"version":3,"file":"CodeViewer.js","names":[],"sources":["../../../../src/files/components/viewers/CodeViewer.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { Copy, Check, WrapText } from \"lucide-react\";\nimport type { FileItem } from \"../../types\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\n\ninterface CodeViewerProps {\n  file: FileItem;\n  url: string;\n  language?: string;\n}\n\n/**\n * CodeViewer - Displays code files with syntax highlighting\n *\n * Note: This is a simplified implementation with basic highlighting.\n * For full syntax highlighting, install prism-react-renderer:\n * bun add prism-react-renderer\n */\nexport function CodeViewer({ file, url, language }: CodeViewerProps) {\n  const tr = useTr();\n  const [code, setCode] = useState(\"\");\n  const [loading, setLoading] = useState(true);\n  const [wordWrap, setWordWrap] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const detectedLanguage = language || detectLanguage(file.name);\n\n  useEffect(() => {\n    fetch(url)\n      .then((res) => res.text())\n      .then((text) => {\n        setCode(text);\n        setLoading(false);\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n  }, [url]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(code);\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  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.code.loading\", \"Loading code...\")}\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=\"px-2 py-1 text-xs font-medium text-text-link bg-bg-accent rounded\">\n            {detectedLanguage || tr(\"files.preview.code.text\", \"Text\")}\n          </span>\n          <span className=\"text-sm text-text-secondary\">{file.name}</span>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\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.code.disableWordWrap\", \"Disable word wrap\")\n                : tr(\"files.preview.code.enableWordWrap\", \"Enable word wrap\")\n            }\n            aria-label={\n              wordWrap\n                ? tr(\"files.preview.code.disableWordWrap\", \"Disable word wrap\")\n                : tr(\"files.preview.code.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.code.copyCode\", \"Copy code\")}\n            aria-label={tr(\n              \"files.preview.code.copyCodeContent\",\n              \"Copy code content\",\n            )}\n          >\n            {copied ? (\n              <>\n                <Check className=\"size-4\" />\n                {tr(\"files.preview.code.copied\", \"Copied!\")}\n              </>\n            ) : (\n              <>\n                <Copy className=\"size-4\" />\n                {tr(\"files.preview.code.copy\", \"Copy\")}\n              </>\n            )}\n          </button>\n        </div>\n      </div>\n\n      {/* Code Content */}\n      <div className=\"flex-1 overflow-auto\">\n        <pre\n          className={`p-4 text-sm font-mono leading-relaxed ${\n            wordWrap ? \"whitespace-pre-wrap\" : \"whitespace-pre\"\n          }`}\n          style={{ tabSize: 2 }}\n        >\n          {code.split(\"\\n\").map((line, i) => (\n            <div key={i} className=\"flex\">\n              <span className=\"inline-block w-12 text-right pr-4 text-text-tertiary select-none\">\n                {i + 1}\n              </span>\n              <span className=\"text-text-primary\">{line || \" \"}</span>\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          {code.split(\"\\n\").length} {tr(\"files.preview.code.lines\", \"lines\")}\n        </span>\n        <span>{(file.size / 1024).toFixed(2)} KB</span>\n      </div>\n    </div>\n  );\n}\n\nfunction detectLanguage(filename: string): string {\n  const ext = filename.split(\".\").pop()?.toLowerCase();\n  const languageMap: Record<string, string> = {\n    js: \"JavaScript\",\n    jsx: \"React JSX\",\n    ts: \"TypeScript\",\n    tsx: \"React TSX\",\n    py: \"Python\",\n    java: \"Java\",\n    cpp: \"C++\",\n    c: \"C\",\n    cs: \"C#\",\n    rb: \"Ruby\",\n    go: \"Go\",\n    rs: \"Rust\",\n    php: \"PHP\",\n    html: \"HTML\",\n    css: \"CSS\",\n    scss: \"SCSS\",\n    json: \"JSON\",\n    md: \"Markdown\",\n    yaml: \"YAML\",\n    yml: \"YAML\",\n    xml: \"XML\",\n    sql: \"SQL\",\n    sh: \"Shell\",\n    bash: \"Bash\",\n    vue: \"Vue\",\n    swift: \"Swift\",\n    kt: \"Kotlin\",\n    r: \"R\",\n    dart: \"Dart\",\n    lua: \"Lua\",\n  };\n  return languageMap[ext || \"\"] || \"Text\";\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/ImageViewer.tsx"],"names":[],"mappings":"AASA,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,+BAiK1D"}
+{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../../../../src/files/components/viewers/ImageViewer.tsx"],"names":[],"mappings":"AASA,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,+BAoK1D"}