@devalok/shilp-sutra 0.33.2 → 0.34.1

package/dist/_chunks/file-preview.js

@@ -1,511 +1,499 @@
 "use client";
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as D } from "../ui/lib/utils.js";
-import { Skeleton as X } from "../ui/skeleton.js";
-import { Button as V } from "../ui/button.js";
-import { Icon as x } from "../ui/icon.js";
-import { B as q } from "./badge-group.js";
-import { IconAlertTriangle as H, IconDownload as _, IconVolumeOff as O, IconVolume as Y, IconPlayerPlay as F, IconPlayerPause as K, IconMaximize as G } from "@tabler/icons-react";
-import { tweens as j, springs as J } from "../ui/lib/motion.js";
-import { m as $, A as Q } from "./framer.js";
-function U({ message: t, url: o }) {
-  return /* @__PURE__ */ u("div", { className: "flex flex-col items-center justify-center gap-ds-04 rounded-ds-md border border-surface-border bg-surface-sunken p-ds-08 text-center", children: [
-    /* @__PURE__ */ e(x, { icon: H, size: "2xl", className: "text-warning-9" }),
-    /* @__PURE__ */ u("div", { children: [
-      /* @__PURE__ */ e("p", { className: "text-ds-md font-semibold text-surface-fg", children: "Preview unavailable" }),
-      /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-muted mt-ds-01", children: t })
-    ] }),
-    /* @__PURE__ */ e(V, { variant: "outline", size: "xs", startIcon: /* @__PURE__ */ e(x, { icon: _ }), asChild: !0, children: /* @__PURE__ */ e("a", { href: o, download: !0, target: "_blank", rel: "noopener noreferrer", children: "Download file" }) })
-  ] });
+import { a as e, c as t } from "./framer.js";
+import { springs as n, tweens as r } from "../ui/lib/motion.js";
+import { cn as i } from "../ui/lib/utils.js";
+import { Icon as a } from "../ui/icon.js";
+import { n as o } from "./badge-group.js";
+import { Button as s } from "../ui/button.js";
+import { Skeleton as c } from "../ui/skeleton.js";
+import { a as l, i as u, t as d } from "./shared.js";
+import * as f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { IconDownload as h, IconMaximize as g, IconPlayerPause as _, IconPlayerPlay as v } from "@tabler/icons-react";
+//#region src/composed/file-preview/video-preview.tsx
+var y = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+function b({ url: i, onError: o }) {
+	let s = f.useRef(null), c = f.useRef(null), [h, b] = f.useState(!1), [x, S] = f.useState(0), [C, w] = f.useState(0), [T, E] = f.useState(0), [D, O] = f.useState(!1), [k, A] = f.useState(!1), [j, M] = f.useState(!0), [N, P] = f.useState(1), F = f.useRef(void 0);
+	f.useEffect(() => () => clearTimeout(F.current), []), f.useEffect(() => {
+		function e(e) {
+			let t = c.current;
+			if (!t || !t.contains(document.activeElement) && document.activeElement !== t) return;
+			let n = s.current;
+			if (n) switch (e.key) {
+				case " ":
+				case "k":
+					e.preventDefault(), b((e) => (e ? n.pause() : n.play(), !e));
+					break;
+				case "ArrowRight":
+					e.preventDefault(), n.currentTime = Math.min(n.duration, n.currentTime + 5);
+					break;
+				case "ArrowLeft":
+					e.preventDefault(), n.currentTime = Math.max(0, n.currentTime - 5);
+					break;
+				case "j":
+					e.preventDefault(), n.currentTime = Math.max(0, n.currentTime - 10);
+					break;
+				case "l":
+					e.preventDefault(), n.currentTime = Math.min(n.duration, n.currentTime + 10);
+					break;
+				case "m":
+					e.preventDefault(), O((e) => (n.muted = !e, !e));
+					break;
+				case "f":
+					e.preventDefault(), n.requestFullscreen?.();
+					break;
+				case ">":
+					e.preventDefault(), I(1);
+					break;
+				case "<":
+					e.preventDefault(), I(-1);
+					break;
+			}
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []);
+	function I(e) {
+		let t = y.indexOf(N), n = y[Math.max(0, Math.min(y.length - 1, t + e))];
+		P(n), s.current && (s.current.playbackRate = n);
+	}
+	function L() {
+		s.current && (h ? s.current.pause() : s.current.play(), b(!h));
+	}
+	function R(e) {
+		if (!s.current || !C) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = (e.clientX - t.left) / t.width;
+		s.current.currentTime = n * C;
+	}
+	function z() {
+		M(!0), clearTimeout(F.current), h && (F.current = setTimeout(() => M(!1), 3e3));
+	}
+	return k ? /* @__PURE__ */ p(d, {
+		message: "Could not load video",
+		url: i
+	}) : /* @__PURE__ */ m("div", {
+		ref: c,
+		className: "group relative rounded-ds-md bg-black overflow-hidden",
+		onMouseMove: z,
+		onMouseLeave: () => h && M(!1),
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ p("video", {
+				ref: s,
+				src: i,
+				className: "max-h-[70vh] w-full",
+				onClick: L,
+				muted: D,
+				onTimeUpdate: () => {
+					s.current && (E(s.current.currentTime), s.current.duration && S(s.current.currentTime / s.current.duration * 100));
+				},
+				onLoadedMetadata: () => w(s.current?.duration ?? 0),
+				onEnded: () => {
+					b(!1), M(!0);
+				},
+				onError: () => {
+					A(!0), o?.("Video failed to load");
+				},
+				playsInline: !0
+			}),
+			!h && /* @__PURE__ */ p(e.button, {
+				initial: {
+					opacity: 0,
+					scale: .8
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				transition: n.snappy,
+				onClick: L,
+				className: "absolute inset-0 flex items-center justify-center bg-black/30",
+				"aria-label": "Play video",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex h-14 w-14 items-center justify-center rounded-full bg-white/90 shadow-floating",
+					children: /* @__PURE__ */ p(a, {
+						icon: v,
+						size: "xl",
+						className: "text-surface-fg ml-0.5"
+					})
+				})
+			}),
+			/* @__PURE__ */ p(t, { children: j && C > 0 && /* @__PURE__ */ m(e.div, {
+				initial: {
+					opacity: 0,
+					y: 10
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				exit: {
+					opacity: 0,
+					y: 10
+				},
+				transition: r.fade,
+				className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent px-ds-04 pb-ds-04 pt-ds-08",
+				children: [/* @__PURE__ */ m("div", {
+					className: "relative h-1 w-full cursor-pointer rounded-full bg-white/30 mb-ds-03 group/progress",
+					onClick: R,
+					role: "slider",
+					"aria-label": "Video progress",
+					"aria-valuenow": Math.round(x),
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					tabIndex: 0,
+					children: [/* @__PURE__ */ p("div", {
+						className: "absolute left-0 top-0 h-full rounded-full bg-white transition-[width] duration-75",
+						style: { width: `${x}%` }
+					}), /* @__PURE__ */ p("div", {
+						className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity",
+						style: {
+							left: `${x}%`,
+							marginLeft: "-6px"
+						}
+					})]
+				}), /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-ds-03",
+					children: [
+						/* @__PURE__ */ p("button", {
+							onClick: L,
+							className: "text-white hover:text-white/80",
+							"aria-label": h ? "Pause" : "Play",
+							title: h ? "Pause" : "Play",
+							children: h ? /* @__PURE__ */ p(a, {
+								icon: _,
+								size: "lg"
+							}) : /* @__PURE__ */ p(a, {
+								icon: v,
+								size: "lg"
+							})
+						}),
+						/* @__PURE__ */ p(u, {
+							volume: +!D,
+							muted: D,
+							onVolumeChange: (e) => {
+								s.current && (s.current.volume = e), e > 0 && D && (O(!1), s.current && (s.current.muted = !1));
+							},
+							onMuteToggle: () => {
+								O(!D), s.current && (s.current.muted = !D);
+							},
+							variant: "dark"
+						}),
+						/* @__PURE__ */ m("span", {
+							className: "text-[11px] font-mono text-white/70 tabular-nums",
+							children: [
+								l(T),
+								" / ",
+								l(C)
+							]
+						}),
+						/* @__PURE__ */ p("div", { className: "flex-1" }),
+						/* @__PURE__ */ m("button", {
+							onClick: () => I(1),
+							className: "text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-ds-sm hover:bg-white/10 transition-colors",
+							"aria-label": `Playback speed: ${N}x`,
+							children: [N, "x"]
+						}),
+						/* @__PURE__ */ p("button", {
+							onClick: () => s.current?.requestFullscreen?.(),
+							className: "text-white hover:text-white/80",
+							"aria-label": "Fullscreen (F)",
+							title: "Fullscreen",
+							children: /* @__PURE__ */ p(a, {
+								icon: g,
+								size: "sm"
+							})
+						})
+					]
+				})]
+			}) })
+		]
+	});
 }
-function pe({ children: t, className: o }) {
-  return /* @__PURE__ */ e(
-    $.div,
-    {
-      initial: { opacity: 0, y: 8 },
-      animate: { opacity: 1, y: 0 },
-      transition: j.fade,
-      className: D(
-        "flex items-center gap-ds-01 rounded-ds-md border border-surface-border bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-sm",
-        o
-      ),
-      children: t
-    }
-  );
+//#endregion
+//#region src/composed/file-preview/audio-preview.tsx
+function x({ url: e, fileName: t, onError: n }) {
+	let r = f.useRef(null), i = f.useRef(null), [o, c] = f.useState(!1), [h, g] = f.useState(0), [y, b] = f.useState(0), [x, S] = f.useState(0), [C, w] = f.useState(1), [T, E] = f.useState(!1), [D, O] = f.useState(!1), [k, A] = f.useState(null);
+	f.useEffect(() => {
+		function e(e) {
+			let t = i.current;
+			if (!t || !t.contains(document.activeElement) && document.activeElement !== t) return;
+			let n = r.current;
+			if (n) switch (e.key) {
+				case " ":
+					e.preventDefault(), c((e) => (e ? n.pause() : n.play(), !e));
+					break;
+				case "ArrowRight":
+					e.preventDefault(), n.currentTime = Math.min(n.duration || 0, n.currentTime + 5);
+					break;
+				case "ArrowLeft":
+					e.preventDefault(), n.currentTime = Math.max(0, n.currentTime - 5);
+					break;
+				case "m":
+					e.preventDefault(), E((e) => (n.muted = !e, !e));
+					break;
+			}
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []);
+	function j() {
+		r.current && (o ? r.current.pause() : r.current.play(), c(!o));
+	}
+	function M(e) {
+		if (!r.current || !y) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width));
+		r.current.currentTime = n * y;
+	}
+	function N(e) {
+		if (!y) return;
+		let t = e.currentTarget.getBoundingClientRect();
+		A((e.clientX - t.left) / t.width * y);
+	}
+	function P() {
+		if (!r.current) return;
+		let e = !T;
+		E(e), r.current.muted = e;
+	}
+	return D ? /* @__PURE__ */ p(d, {
+		message: "Could not load audio",
+		url: e
+	}) : /* @__PURE__ */ m("div", {
+		ref: i,
+		className: "rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised overflow-hidden",
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ p("audio", {
+				ref: r,
+				src: e,
+				onTimeUpdate: () => {
+					r.current && (S(r.current.currentTime), r.current.duration && g(r.current.currentTime / r.current.duration * 100));
+				},
+				onLoadedMetadata: () => b(r.current?.duration ?? 0),
+				onEnded: () => c(!1),
+				onError: () => {
+					O(!0), n?.("Audio failed to load");
+				}
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "relative h-1 w-full cursor-pointer bg-surface-sunken group/bar",
+				onClick: M,
+				onMouseMove: N,
+				onMouseLeave: () => A(null),
+				role: "slider",
+				"aria-label": "Audio progress",
+				"aria-valuenow": Math.round(h),
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				tabIndex: 0,
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "absolute left-0 top-0 h-full bg-accent-9 transition-[width] duration-75",
+						style: { width: `${h}%` }
+					}),
+					k !== null && /* @__PURE__ */ p("div", {
+						className: "absolute -top-7 -translate-x-1/2 rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-surface-fg shadow-floating pointer-events-none",
+						style: { left: `${k / (y || 1) * 100}%` },
+						children: l(k)
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity",
+						style: {
+							left: `${h}%`,
+							marginLeft: "-5px"
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-ds-04 px-ds-05 py-ds-04",
+				children: [
+					/* @__PURE__ */ p(s, {
+						variant: "solid",
+						size: "icon-sm",
+						onClick: j,
+						"aria-label": o ? "Pause" : "Play",
+						title: o ? "Pause" : "Play",
+						className: "shrink-0",
+						children: o ? /* @__PURE__ */ p(a, {
+							icon: _,
+							size: "sm"
+						}) : /* @__PURE__ */ p(a, {
+							icon: v,
+							size: "sm",
+							className: "ml-0.5"
+						})
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flex-1 min-w-0",
+						children: [t && /* @__PURE__ */ p("p", {
+							className: "text-ds-sm font-semibold text-surface-fg truncate",
+							children: t
+						}), /* @__PURE__ */ m("p", {
+							className: "text-ds-xs font-mono text-surface-fg-muted tabular-nums",
+							children: [
+								l(x),
+								" / ",
+								l(y)
+							]
+						})]
+					}),
+					/* @__PURE__ */ p(u, {
+						volume: C,
+						muted: T,
+						onVolumeChange: (e) => {
+							w(e), r.current && (r.current.volume = e), e > 0 && T && (E(!1), r.current && (r.current.muted = !1));
+						},
+						onMuteToggle: P,
+						variant: "light"
+					})
+				]
+			})
+		]
+	});
 }
-function ge() {
-  return /* @__PURE__ */ e("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
+//#endregion
+//#region src/composed/file-preview/embed-preview.tsx
+function S({ url: t, embedUrl: n, onError: i }) {
+	let [a, o] = f.useState(!1), [s, l] = f.useState(!1);
+	return f.useEffect(() => {
+		let e = setTimeout(() => {
+			a || (l(!0), i?.("Embed timed out"));
+		}, 15e3);
+		return () => clearTimeout(e);
+	}, [a, i]), s ? /* @__PURE__ */ p(d, {
+		message: "Could not load embed",
+		url: t
+	}) : /* @__PURE__ */ m("div", {
+		className: "relative w-full rounded-ds-md overflow-hidden",
+		style: { aspectRatio: "16 / 9" },
+		children: [!a && /* @__PURE__ */ p(c, { className: "absolute inset-0" }), /* @__PURE__ */ p(e.iframe, {
+			src: n,
+			title: "Embedded content",
+			onLoad: () => o(!0),
+			onError: () => {
+				l(!0), i?.("Embed failed to load");
+			},
+			initial: { opacity: 0 },
+			animate: { opacity: +!!a },
+			transition: r.fade,
+			className: "absolute inset-0 h-full w-full border-none",
+			allowFullScreen: !0
+		})]
+	});
 }
-function W({
-  volume: t,
-  muted: o,
-  onVolumeChange: r,
-  onMuteToggle: n,
-  variant: d = "light"
-}) {
-  const l = a.useRef(null), [f, m] = a.useState(!1), v = o ? 0 : t;
-  function g(p) {
-    if (!l.current) return t;
-    const M = l.current.getBoundingClientRect();
-    return Math.max(0, Math.min(1, (p.clientX - M.left) / M.width));
-  }
-  function b(p) {
-    p.preventDefault(), m(!0);
-    const M = g(p);
-    r(M), p.target.setPointerCapture(p.pointerId);
-  }
-  function N(p) {
-    f && r(g(p));
-  }
-  function y() {
-    m(!1);
-  }
-  const k = d === "dark", R = k ? "bg-white/30" : "bg-surface-sunken", T = k ? "bg-white" : "bg-accent-9", P = k ? "bg-white" : "bg-accent-9";
-  return /* @__PURE__ */ u("div", { className: "group/vol flex items-center gap-ds-02 shrink-0", children: [
-    /* @__PURE__ */ e("button", { onClick: n, className: D("transition-colors", k ? "text-white hover:text-white/80" : "text-surface-fg-muted hover:text-surface-fg"), "aria-label": o ? "Unmute (M)" : "Mute (M)", title: o ? "Unmute" : "Mute", children: o || t === 0 ? /* @__PURE__ */ e(x, { icon: O, size: "sm" }) : /* @__PURE__ */ e(x, { icon: Y, size: "sm" }) }),
-    /* @__PURE__ */ e("div", { className: "w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center", children: /* @__PURE__ */ u(
-      "div",
-      {
-        ref: l,
-        className: D("relative w-full h-1 rounded-full cursor-pointer", R),
-        onPointerDown: b,
-        onPointerMove: N,
-        onPointerUp: y,
-        role: "slider",
-        "aria-label": "Volume",
-        "aria-valuenow": Math.round(v * 100),
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: D("absolute left-0 top-0 h-full rounded-full transition-[width] duration-75", T),
-              style: { width: `${v * 100}%` }
-            }
-          ),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: D(
-                "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full shadow-raised transition-opacity",
-                P,
-                f ? "opacity-100 scale-110" : "opacity-0 group-hover/vol:opacity-100"
-              ),
-              style: { left: `${v * 100}%`, marginLeft: "-5px" }
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
+//#endregion
+//#region src/composed/file-preview.tsx
+var C = f.lazy(() => import("./image-preview.js")), w = f.lazy(() => import("./document-preview.js"));
+function T(e, t) {
+	if (t) {
+		if (t.startsWith("image/")) return "image";
+		if (t === "application/pdf") return "pdf";
+		if (t.startsWith("video/")) return "video";
+		if (t.startsWith("audio/")) return "audio";
+	}
+	let n = e.split("?")[0].split(".").pop()?.toLowerCase();
+	return [
+		"jpg",
+		"jpeg",
+		"png",
+		"gif",
+		"webp",
+		"svg",
+		"avif",
+		"bmp"
+	].includes(n ?? "") ? "image" : n === "pdf" ? "pdf" : [
+		"mp4",
+		"webm",
+		"ogg",
+		"mov"
+	].includes(n ?? "") ? "video" : [
+		"mp3",
+		"wav",
+		"ogg",
+		"aac",
+		"flac"
+	].includes(n ?? "") ? "audio" : e.includes("figma.com") || e.includes("loom.com") || e.includes("youtube.com") || e.includes("youtu.be") || e.includes("vimeo.com") ? "embed" : "image";
 }
-function L(t) {
-  if (!isFinite(t) || t < 0) return "0:00";
-  const o = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), n = Math.floor(t % 60);
-  return o > 0 ? `${o}:${r.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}` : `${r}:${n.toString().padStart(2, "0")}`;
+function E(e) {
+	let t = e.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?]+)/);
+	if (t) return `https://www.youtube.com/embed/${t[1]}`;
+	let n = e.match(/vimeo\.com\/(\d+)/);
+	if (n) return `https://player.vimeo.com/video/${n[1]}`;
+	if (e.includes("figma.com")) return `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(e)}`;
+	let r = e.match(/loom\.com\/share\/([^?]+)/);
+	return r ? `https://www.loom.com/embed/${r[1]}` : e;
 }
-const B = [0.5, 0.75, 1, 1.25, 1.5, 2];
-function Z({ url: t, onError: o }) {
-  const r = a.useRef(null), n = a.useRef(null), [d, l] = a.useState(!1), [f, m] = a.useState(0), [v, g] = a.useState(0), [b, N] = a.useState(0), [y, k] = a.useState(!1), [R, T] = a.useState(!1), [P, C] = a.useState(!0), [p, M] = a.useState(1), S = a.useRef(void 0);
-  a.useEffect(() => () => clearTimeout(S.current), []), a.useEffect(() => {
-    function c(s) {
-      const h = n.current;
-      if (!h || !h.contains(document.activeElement) && document.activeElement !== h) return;
-      const i = r.current;
-      if (i)
-        switch (s.key) {
-          case " ":
-          case "k":
-            s.preventDefault(), l((w) => (w ? i.pause() : i.play(), !w));
-            break;
-          case "ArrowRight":
-            s.preventDefault(), i.currentTime = Math.min(i.duration, i.currentTime + 5);
-            break;
-          case "ArrowLeft":
-            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
-            break;
-          case "j":
-            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 10);
-            break;
-          case "l":
-            s.preventDefault(), i.currentTime = Math.min(i.duration, i.currentTime + 10);
-            break;
-          case "m":
-            s.preventDefault(), k((w) => (i.muted = !w, !w));
-            break;
-          case "f":
-            s.preventDefault(), i.requestFullscreen?.();
-            break;
-          case ">":
-            s.preventDefault(), E(1);
-            break;
-          case "<":
-            s.preventDefault(), E(-1);
-            break;
-        }
-    }
-    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, []);
-  function E(c) {
-    const s = B.indexOf(p), h = Math.max(0, Math.min(B.length - 1, s + c)), i = B[h];
-    M(i), r.current && (r.current.playbackRate = i);
-  }
-  function I() {
-    r.current && (d ? r.current.pause() : r.current.play(), l(!d));
-  }
-  function z(c) {
-    if (!r.current || !v) return;
-    const s = c.currentTarget.getBoundingClientRect(), h = (c.clientX - s.left) / s.width;
-    r.current.currentTime = h * v;
-  }
-  function A() {
-    C(!0), clearTimeout(S.current), d && (S.current = setTimeout(() => C(!1), 3e3));
-  }
-  return R ? /* @__PURE__ */ e(U, { message: "Could not load video", url: t }) : /* @__PURE__ */ u(
-    "div",
-    {
-      ref: n,
-      className: "group relative rounded-ds-md bg-black overflow-hidden",
-      onMouseMove: A,
-      onMouseLeave: () => d && C(!1),
-      tabIndex: -1,
-      children: [
-        /* @__PURE__ */ e(
-          "video",
-          {
-            ref: r,
-            src: t,
-            className: "max-h-[70vh] w-full",
-            onClick: I,
-            muted: y,
-            onTimeUpdate: () => {
-              r.current && (N(r.current.currentTime), r.current.duration && m(r.current.currentTime / r.current.duration * 100));
-            },
-            onLoadedMetadata: () => g(r.current?.duration ?? 0),
-            onEnded: () => {
-              l(!1), C(!0);
-            },
-            onError: () => {
-              T(!0), o?.("Video failed to load");
-            },
-            playsInline: !0
-          }
-        ),
-        !d && /* @__PURE__ */ e(
-          $.button,
-          {
-            initial: { opacity: 0, scale: 0.8 },
-            animate: { opacity: 1, scale: 1 },
-            transition: J.snappy,
-            onClick: I,
-            className: "absolute inset-0 flex items-center justify-center bg-black/30",
-            "aria-label": "Play video",
-            children: /* @__PURE__ */ e("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-white/90 shadow-floating", children: /* @__PURE__ */ e(x, { icon: F, size: "xl", className: "text-surface-fg ml-0.5" }) })
-          }
-        ),
-        /* @__PURE__ */ e(Q, { children: P && v > 0 && /* @__PURE__ */ u(
-          $.div,
-          {
-            initial: { opacity: 0, y: 10 },
-            animate: { opacity: 1, y: 0 },
-            exit: { opacity: 0, y: 10 },
-            transition: j.fade,
-            className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent px-ds-04 pb-ds-04 pt-ds-08",
-            children: [
-              /* @__PURE__ */ u(
-                "div",
-                {
-                  className: "relative h-1 w-full cursor-pointer rounded-full bg-white/30 mb-ds-03 group/progress",
-                  onClick: z,
-                  role: "slider",
-                  "aria-label": "Video progress",
-                  "aria-valuenow": Math.round(f),
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 100,
-                  tabIndex: 0,
-                  children: [
-                    /* @__PURE__ */ e(
-                      "div",
-                      {
-                        className: "absolute left-0 top-0 h-full rounded-full bg-white transition-[width] duration-75",
-                        style: { width: `${f}%` }
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "div",
-                      {
-                        className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity",
-                        style: { left: `${f}%`, marginLeft: "-6px" }
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-03", children: [
-                /* @__PURE__ */ e("button", { onClick: I, className: "text-white hover:text-white/80", "aria-label": d ? "Pause" : "Play", title: d ? "Pause" : "Play", children: d ? /* @__PURE__ */ e(x, { icon: K, size: "lg" }) : /* @__PURE__ */ e(x, { icon: F, size: "lg" }) }),
-                /* @__PURE__ */ e(
-                  W,
-                  {
-                    volume: y ? 0 : 1,
-                    muted: y,
-                    onVolumeChange: (c) => {
-                      r.current && (r.current.volume = c), c > 0 && y && (k(!1), r.current && (r.current.muted = !1));
-                    },
-                    onMuteToggle: () => {
-                      k(!y), r.current && (r.current.muted = !y);
-                    },
-                    variant: "dark"
-                  }
-                ),
-                /* @__PURE__ */ u("span", { className: "text-[11px] font-mono text-white/70 tabular-nums", children: [
-                  L(b),
-                  " / ",
-                  L(v)
-                ] }),
-                /* @__PURE__ */ e("div", { className: "flex-1" }),
-                /* @__PURE__ */ u(
-                  "button",
-                  {
-                    onClick: () => E(1),
-                    className: "text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-ds-sm hover:bg-white/10 transition-colors",
-                    "aria-label": `Playback speed: ${p}x`,
-                    children: [
-                      p,
-                      "x"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "button",
-                  {
-                    onClick: () => r.current?.requestFullscreen?.(),
-                    className: "text-white hover:text-white/80",
-                    "aria-label": "Fullscreen (F)",
-                    title: "Fullscreen",
-                    children: /* @__PURE__ */ e(x, { icon: G, size: "sm" })
-                  }
-                )
-              ] })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
+function D({ url: e, type: t, mimeType: n, alt: r, initialPage: l = 1, fileName: u, fileSize: d, onError: g, className: _, ...v }) {
+	let y = t ?? T(e, n), D = /* @__PURE__ */ p(c, { className: "h-64 w-full rounded-ds-md" });
+	return /* @__PURE__ */ m("div", {
+		className: i("flex flex-col gap-ds-03", _),
+		...v,
+		children: [
+			(u || d) && /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-ds-03",
+				children: [u && /* @__PURE__ */ p("span", {
+					className: "text-ds-sm font-semibold text-surface-fg truncate",
+					children: u
+				}), d && /* @__PURE__ */ p(o, {
+					variant: "subtle",
+					size: "xs",
+					children: d
+				})]
+			}),
+			y === "image" && /* @__PURE__ */ p(f.Suspense, {
+				fallback: D,
+				children: /* @__PURE__ */ p(C, {
+					url: e,
+					alt: r,
+					onError: g
+				})
+			}),
+			y === "pdf" && /* @__PURE__ */ p(f.Suspense, {
+				fallback: D,
+				children: /* @__PURE__ */ p(w, {
+					url: e,
+					initialPage: l,
+					onError: g
+				})
+			}),
+			y === "video" && /* @__PURE__ */ p(b, {
+				url: e,
+				onError: g
+			}),
+			y === "audio" && /* @__PURE__ */ p(x, {
+				url: e,
+				fileName: u,
+				onError: g
+			}),
+			y === "embed" && /* @__PURE__ */ p(S, {
+				url: e,
+				embedUrl: E(e),
+				onError: g
+			}),
+			y !== "audio" && /* @__PURE__ */ p("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ p(s, {
+					variant: "ghost",
+					size: "xs",
+					startIcon: /* @__PURE__ */ p(a, { icon: h }),
+					asChild: !0,
+					children: /* @__PURE__ */ p("a", {
+						href: e,
+						download: !0,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: "Download"
+					})
+				})
+			})
+		]
+	});
 }
-function ee({ url: t, fileName: o, onError: r }) {
-  const n = a.useRef(null), d = a.useRef(null), [l, f] = a.useState(!1), [m, v] = a.useState(0), [g, b] = a.useState(0), [N, y] = a.useState(0), [k, R] = a.useState(1), [T, P] = a.useState(!1), [C, p] = a.useState(!1), [M, S] = a.useState(null);
-  a.useEffect(() => {
-    function c(s) {
-      const h = d.current;
-      if (!h || !h.contains(document.activeElement) && document.activeElement !== h) return;
-      const i = n.current;
-      if (i)
-        switch (s.key) {
-          case " ":
-            s.preventDefault(), f((w) => (w ? i.pause() : i.play(), !w));
-            break;
-          case "ArrowRight":
-            s.preventDefault(), i.currentTime = Math.min(i.duration || 0, i.currentTime + 5);
-            break;
-          case "ArrowLeft":
-            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
-            break;
-          case "m":
-            s.preventDefault(), P((w) => (i.muted = !w, !w));
-            break;
-        }
-    }
-    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, []);
-  function E() {
-    n.current && (l ? n.current.pause() : n.current.play(), f(!l));
-  }
-  function I(c) {
-    if (!n.current || !g) return;
-    const s = c.currentTarget.getBoundingClientRect(), h = Math.max(0, Math.min(1, (c.clientX - s.left) / s.width));
-    n.current.currentTime = h * g;
-  }
-  function z(c) {
-    if (!g) return;
-    const s = c.currentTarget.getBoundingClientRect(), h = (c.clientX - s.left) / s.width;
-    S(h * g);
-  }
-  function A() {
-    if (!n.current) return;
-    const c = !T;
-    P(c), n.current.muted = c;
-  }
-  return C ? /* @__PURE__ */ e(U, { message: "Could not load audio", url: t }) : /* @__PURE__ */ u("div", { ref: d, className: "rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised overflow-hidden", tabIndex: -1, children: [
-    /* @__PURE__ */ e(
-      "audio",
-      {
-        ref: n,
-        src: t,
-        onTimeUpdate: () => {
-          n.current && (y(n.current.currentTime), n.current.duration && v(n.current.currentTime / n.current.duration * 100));
-        },
-        onLoadedMetadata: () => b(n.current?.duration ?? 0),
-        onEnded: () => f(!1),
-        onError: () => {
-          p(!0), r?.("Audio failed to load");
-        }
-      }
-    ),
-    /* @__PURE__ */ u(
-      "div",
-      {
-        className: "relative h-1 w-full cursor-pointer bg-surface-sunken group/bar",
-        onClick: I,
-        onMouseMove: z,
-        onMouseLeave: () => S(null),
-        role: "slider",
-        "aria-label": "Audio progress",
-        "aria-valuenow": Math.round(m),
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: "absolute left-0 top-0 h-full bg-accent-9 transition-[width] duration-75",
-              style: { width: `${m}%` }
-            }
-          ),
-          M !== null && /* @__PURE__ */ e(
-            "div",
-            {
-              className: "absolute -top-7 -translate-x-1/2 rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-surface-fg shadow-floating pointer-events-none",
-              style: { left: `${M / (g || 1) * 100}%` },
-              children: L(M)
-            }
-          ),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity",
-              style: { left: `${m}%`, marginLeft: "-5px" }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-04 px-ds-05 py-ds-04", children: [
-      /* @__PURE__ */ e(
-        V,
-        {
-          variant: "solid",
-          size: "icon-sm",
-          onClick: E,
-          "aria-label": l ? "Pause" : "Play",
-          title: l ? "Pause" : "Play",
-          className: "shrink-0",
-          children: l ? /* @__PURE__ */ e(x, { icon: K, size: "sm" }) : /* @__PURE__ */ e(x, { icon: F, size: "sm", className: "ml-0.5" })
-        }
-      ),
-      /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
-        o && /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold text-surface-fg truncate", children: o }),
-        /* @__PURE__ */ u("p", { className: "text-ds-xs font-mono text-surface-fg-muted tabular-nums", children: [
-          L(N),
-          " / ",
-          L(g)
-        ] })
-      ] }),
-      /* @__PURE__ */ e(
-        W,
-        {
-          volume: k,
-          muted: T,
-          onVolumeChange: (c) => {
-            R(c), n.current && (n.current.volume = c), c > 0 && T && (P(!1), n.current && (n.current.muted = !1));
-          },
-          onMuteToggle: A,
-          variant: "light"
-        }
-      )
-    ] })
-  ] });
-}
-function te({ url: t, embedUrl: o, onError: r }) {
-  const [n, d] = a.useState(!1), [l, f] = a.useState(!1);
-  return a.useEffect(() => {
-    const m = setTimeout(() => {
-      n || (f(!0), r?.("Embed timed out"));
-    }, 15e3);
-    return () => clearTimeout(m);
-  }, [n, r]), l ? /* @__PURE__ */ e(U, { message: "Could not load embed", url: t }) : /* @__PURE__ */ u("div", { className: "relative w-full rounded-ds-md overflow-hidden", style: { aspectRatio: "16 / 9" }, children: [
-    !n && /* @__PURE__ */ e(X, { className: "absolute inset-0" }),
-    /* @__PURE__ */ e(
-      $.iframe,
-      {
-        src: o,
-        title: "Embedded content",
-        onLoad: () => d(!0),
-        onError: () => {
-          f(!0), r?.("Embed failed to load");
-        },
-        initial: { opacity: 0 },
-        animate: { opacity: n ? 1 : 0 },
-        transition: j.fade,
-        className: "absolute inset-0 h-full w-full border-none",
-        allowFullScreen: !0
-      }
-    )
-  ] });
-}
-const re = a.lazy(() => import("./image-preview.js")), ne = a.lazy(() => import("./document-preview.js"));
-function ae(t, o) {
-  if (o) {
-    if (o.startsWith("image/")) return "image";
-    if (o === "application/pdf") return "pdf";
-    if (o.startsWith("video/")) return "video";
-    if (o.startsWith("audio/")) return "audio";
-  }
-  const r = t.split("?")[0].split(".").pop()?.toLowerCase();
-  return ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp"].includes(r ?? "") ? "image" : r === "pdf" ? "pdf" : ["mp4", "webm", "ogg", "mov"].includes(r ?? "") ? "video" : ["mp3", "wav", "ogg", "aac", "flac"].includes(r ?? "") ? "audio" : t.includes("figma.com") || t.includes("loom.com") || t.includes("youtube.com") || t.includes("youtu.be") || t.includes("vimeo.com") ? "embed" : "image";
-}
-function oe(t) {
-  const o = t.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?]+)/);
-  if (o) return `https://www.youtube.com/embed/${o[1]}`;
-  const r = t.match(/vimeo\.com\/(\d+)/);
-  if (r) return `https://player.vimeo.com/video/${r[1]}`;
-  if (t.includes("figma.com")) return `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(t)}`;
-  const n = t.match(/loom\.com\/share\/([^?]+)/);
-  return n ? `https://www.loom.com/embed/${n[1]}` : t;
-}
-function ve({
-  url: t,
-  type: o,
-  mimeType: r,
-  alt: n,
-  initialPage: d = 1,
-  fileName: l,
-  fileSize: f,
-  onError: m,
-  className: v,
-  ...g
-}) {
-  const b = o ?? ae(t, r), N = /* @__PURE__ */ e(X, { className: "h-64 w-full rounded-ds-md" });
-  return /* @__PURE__ */ u("div", { className: D("flex flex-col gap-ds-03", v), ...g, children: [
-    (l || f) && /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-03", children: [
-      l && /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold text-surface-fg truncate", children: l }),
-      f && /* @__PURE__ */ e(q, { variant: "subtle", size: "xs", children: f })
-    ] }),
-    b === "image" && /* @__PURE__ */ e(a.Suspense, { fallback: N, children: /* @__PURE__ */ e(re, { url: t, alt: n, onError: m }) }),
-    b === "pdf" && /* @__PURE__ */ e(a.Suspense, { fallback: N, children: /* @__PURE__ */ e(ne, { url: t, initialPage: d, onError: m }) }),
-    b === "video" && /* @__PURE__ */ e(Z, { url: t, onError: m }),
-    b === "audio" && /* @__PURE__ */ e(ee, { url: t, fileName: l, onError: m }),
-    b === "embed" && /* @__PURE__ */ e(te, { url: t, embedUrl: oe(t), onError: m }),
-    b !== "audio" && /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(V, { variant: "ghost", size: "xs", startIcon: /* @__PURE__ */ e(x, { icon: _ }), asChild: !0, children: /* @__PURE__ */ e("a", { href: t, download: !0, target: "_blank", rel: "noopener noreferrer", children: "Download" }) }) })
-  ] });
-}
-export {
-  U as E,
-  ve as F,
-  pe as T,
-  ge as a
-};
+//#endregion
+export { D as t };