@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/composed/file-preview.js

@@ -1,24 +1,25 @@
 "use client";
 import { springs as e, tweens as t } from "../ui/lib/motion.js";
-import { cn as n } from "../ui/lib/utils.js";
-import { Icon as r } from "../ui/icon.js";
-import { Skeleton as i } from "../ui/skeleton.js";
-import { BadgeCompound as a } from "../_chunks/badge-group.js";
-import { Button as o } from "../ui/button.js";
-import { TruncatedText as s } from "../ui/truncated-text.js";
-import { ErrorFallback as c, MediaSlider as l, VolumeControl as u, formatTime as d } from "../_chunks/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";
-import { AnimatePresence as y, motion as b } from "framer-motion";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "../ui/lib/utils.js";
+import { Icon as i } from "../ui/icon.js";
+import { Skeleton as a } from "../ui/skeleton.js";
+import { BadgeCompound as o } from "../_chunks/badge-group.js";
+import { Button as s } from "../ui/button.js";
+import { TruncatedText as c } from "../ui/truncated-text.js";
+import { ErrorFallback as l, MediaSlider as u, VolumeControl as d, formatTime as f } from "../_chunks/shared.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IconDownload as g, IconMaximize as _, IconPlayerPause as v, IconPlayerPlay as y } from "@tabler/icons-react";
+import { AnimatePresence as b, motion as x } from "framer-motion";
 //#region src/composed/file-preview/audio-preview.tsx
-function x({ url: e, fileName: t, onError: n }) {
-	let i = f.useRef(null), a = f.useRef(null), [h, g] = f.useState(!1), [y, b] = f.useState(0), [x, S] = f.useState(0), [C, w] = f.useState(0), [T, E] = f.useState(1), [D, O] = f.useState(!1), [k, A] = f.useState(!1);
-	f.useEffect(() => {
+function S({ url: e, fileName: t, onError: n }) {
+	let r = p.useRef(null), a = p.useRef(null), [o, g] = p.useState(!1), [_, b] = p.useState(0), [x, S] = p.useState(0), [C, w] = p.useState(0), [T, E] = p.useState(1), [D, O] = p.useState(!1), [k, A] = p.useState(!1);
+	p.useEffect(() => {
 		function e(e) {
 			let t = a.current;
 			if (!t || !t.contains(document.activeElement) && document.activeElement !== t) return;
-			let n = i.current;
+			let n = r.current;
 			if (n) switch (e.key) {
 				case " ":
 					e.preventDefault(), g((e) => (e ? n.pause() : n.play(), !e));
@@ -37,40 +38,40 @@ function x({ url: e, fileName: t, onError: n }) {
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, []);
 	function j() {
-		i.current && (h ? i.current.pause() : i.current.play(), g(!h));
+		r.current && (o ? r.current.pause() : r.current.play(), g(!o));
 	}
 	function M(e) {
-		!i.current || !x || (i.current.currentTime = e / 100 * x);
+		!r.current || !x || (r.current.currentTime = e / 100 * x);
 	}
 	function N() {
-		if (!i.current) return;
+		if (!r.current) return;
 		let e = !D;
-		O(e), i.current.muted = e;
+		O(e), r.current.muted = e;
 	}
-	return k ? /* @__PURE__ */ p(c, {
+	return k ? /* @__PURE__ */ m(l, {
 		message: "Could not load audio",
 		url: e
-	}) : /* @__PURE__ */ m("div", {
+	}) : /* @__PURE__ */ h("div", {
 		ref: a,
 		className: "rounded-surface bg-surface-panel overflow-hidden",
 		tabIndex: -1,
 		children: [
-			/* @__PURE__ */ p("audio", {
-				ref: i,
+			/* @__PURE__ */ m("audio", {
+				ref: r,
 				src: e,
 				onTimeUpdate: () => {
-					i.current && (w(i.current.currentTime), i.current.duration && b(i.current.currentTime / i.current.duration * 100));
+					r.current && (w(r.current.currentTime), r.current.duration && b(r.current.currentTime / r.current.duration * 100));
 				},
-				onLoadedMetadata: () => S(i.current?.duration ?? 0),
+				onLoadedMetadata: () => S(r.current?.duration ?? 0),
 				onEnded: () => g(!1),
 				onError: () => {
 					A(!0), n?.("Audio failed to load");
 				}
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: "px-ds-03 pt-ds-02",
-				children: /* @__PURE__ */ p(l, {
-					value: y,
+				children: /* @__PURE__ */ m(u, {
+					value: _,
 					max: 100,
 					step: .1,
 					onValueChange: M,
@@ -78,46 +79,46 @@ function x({ url: e, fileName: t, onError: n }) {
 					ariaLabel: "Audio progress"
 				})
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-center gap-ds-04 px-ds-05 py-ds-04",
 				children: [
-					/* @__PURE__ */ p(o, {
+					/* @__PURE__ */ m(s, {
 						variant: "solid",
 						size: "icon-sm",
 						onClick: j,
-						"aria-label": h ? "Pause" : "Play",
-						title: h ? "Pause" : "Play",
+						"aria-label": o ? "Pause" : "Play",
+						title: o ? "Pause" : "Play",
 						className: "shrink-0",
-						children: h ? /* @__PURE__ */ p(r, {
-							icon: _,
-							size: "sm"
-						}) : /* @__PURE__ */ p(r, {
+						children: o ? /* @__PURE__ */ m(i, {
 							icon: v,
+							size: "sm"
+						}) : /* @__PURE__ */ m(i, {
+							icon: y,
 							size: "sm",
 							className: "ml-0.5"
 						})
 					}),
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ h("div", {
 						className: "flex-1 min-w-0",
-						children: [t && /* @__PURE__ */ p(s, {
+						children: [t && /* @__PURE__ */ m(c, {
 							as: "p",
 							mode: "middle",
 							className: "text-body-sm font-semibold text-surface-fg",
 							children: t
-						}), /* @__PURE__ */ m("p", {
+						}), /* @__PURE__ */ h("p", {
 							className: "text-caption font-mono text-surface-fg-muted tabular-nums",
 							children: [
-								d(C),
+								f(C),
 								" / ",
-								d(x)
+								f(x)
 							]
 						})]
 					}),
-					/* @__PURE__ */ p(u, {
+					/* @__PURE__ */ m(d, {
 						volume: T,
 						muted: D,
 						onVolumeChange: (e) => {
-							E(e), i.current && (i.current.volume = e), e > 0 && D && (O(!1), i.current && (i.current.muted = !1));
+							E(e), r.current && (r.current.volume = e), e > 0 && D && (O(!1), r.current && (r.current.muted = !1));
 						},
 						onMuteToggle: N,
 						variant: "light"
@@ -129,28 +130,28 @@ function x({ url: e, fileName: t, onError: n }) {
 }
 //#endregion
 //#region src/composed/file-preview/embed-preview.tsx
-function S({ url: e, embedUrl: n, onError: r }) {
-	let [a, o] = f.useState(!1), [s, l] = f.useState(!1);
-	return f.useEffect(() => {
+function C({ url: e, embedUrl: n, onError: r }) {
+	let [i, o] = p.useState(!1), [s, c] = p.useState(!1);
+	return p.useEffect(() => {
 		let e = setTimeout(() => {
-			a || (l(!0), r?.("Embed timed out"));
+			i || (c(!0), r?.("Embed timed out"));
 		}, 15e3);
 		return () => clearTimeout(e);
-	}, [a, r]), s ? /* @__PURE__ */ p(c, {
+	}, [i, r]), s ? /* @__PURE__ */ m(l, {
 		message: "Could not load embed",
 		url: e
-	}) : /* @__PURE__ */ m("div", {
+	}) : /* @__PURE__ */ h("div", {
 		className: "relative w-full rounded-control overflow-hidden",
 		style: { aspectRatio: "16 / 9" },
-		children: [!a && /* @__PURE__ */ p(i, { className: "absolute inset-0" }), /* @__PURE__ */ p(b.iframe, {
+		children: [!i && /* @__PURE__ */ m(a, { className: "absolute inset-0" }), /* @__PURE__ */ m(x.iframe, {
 			src: n,
 			title: "Embedded content",
 			onLoad: () => o(!0),
 			onError: () => {
-				l(!0), r?.("Embed failed to load");
+				c(!0), r?.("Embed failed to load");
 			},
 			initial: { opacity: 0 },
-			animate: { opacity: +!!a },
+			animate: { opacity: +!!i },
 			transition: t.fade,
 			className: "absolute inset-0 h-full w-full border-none",
 			allowFullScreen: !0
@@ -159,7 +160,7 @@ function S({ url: e, embedUrl: n, onError: r }) {
 }
 //#endregion
 //#region src/composed/file-preview/video-preview.tsx
-var C = [
+var w = [
 	.5,
 	.75,
 	1,
@@ -167,19 +168,19 @@ var C = [
 	1.5,
 	2
 ];
-function w({ url: n, onError: i }) {
-	let a = f.useRef(null), o = f.useRef(null), [s, h] = f.useState(!1), [x, S] = f.useState(0), [w, T] = f.useState(0), [E, D] = f.useState(0), [O, k] = f.useState(!1), [A, j] = f.useState(!1), [M, N] = f.useState(!0), [P, F] = f.useState(1), I = f.useRef(P);
-	I.current = P;
-	let L = f.useRef(void 0);
-	f.useEffect(() => () => clearTimeout(L.current), []), f.useEffect(() => {
+function T({ url: r, onError: a }) {
+	let o = p.useRef(null), s = p.useRef(null), [c, g] = p.useState(!1), [S, C] = p.useState(0), [T, E] = p.useState(0), [D, O] = p.useState(0), [k, A] = p.useState(!1), [j, M] = p.useState(!1), [N, P] = p.useState(!0), [F, I] = p.useState(1), L = p.useRef(F);
+	L.current = F;
+	let R = p.useRef(void 0);
+	p.useEffect(() => () => clearTimeout(R.current), []), p.useEffect(() => {
 		function e(e) {
-			let t = o.current;
+			let t = s.current;
 			if (!t || !t.contains(document.activeElement) && document.activeElement !== t) return;
-			let n = a.current;
+			let n = o.current;
 			if (n) switch (e.key) {
 				case " ":
 				case "k":
-					e.preventDefault(), h((e) => (e ? n.pause() : n.play(), !e));
+					e.preventDefault(), g((e) => (e ? n.pause() : n.play(), !e));
 					break;
 				case "ArrowRight":
 					e.preventDefault(), n.currentTime = Math.min(n.duration, n.currentTime + 5);
@@ -194,63 +195,63 @@ function w({ url: n, onError: i }) {
 					e.preventDefault(), n.currentTime = Math.min(n.duration, n.currentTime + 10);
 					break;
 				case "m":
-					e.preventDefault(), k((e) => (n.muted = !e, !e));
+					e.preventDefault(), A((e) => (n.muted = !e, !e));
 					break;
 				case "f":
 					e.preventDefault(), n.requestFullscreen?.();
 					break;
 				case ">":
-					e.preventDefault(), R(1);
+					e.preventDefault(), z(1);
 					break;
 				case "<":
-					e.preventDefault(), R(-1);
+					e.preventDefault(), z(-1);
 					break;
 			}
 		}
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, []);
-	function R(e) {
-		let t = C.indexOf(I.current), n = C[Math.max(0, Math.min(C.length - 1, t + e))];
-		F(n), a.current && (a.current.playbackRate = n);
+	function z(e) {
+		let t = w.indexOf(L.current), n = w[Math.max(0, Math.min(w.length - 1, t + e))];
+		I(n), o.current && (o.current.playbackRate = n);
 	}
-	function z() {
-		a.current && (s ? a.current.pause() : a.current.play(), h(!s));
+	function B() {
+		o.current && (c ? o.current.pause() : o.current.play(), g(!c));
 	}
-	function B(e) {
-		!a.current || !w || (a.current.currentTime = e / 100 * w);
+	function V(e) {
+		!o.current || !T || (o.current.currentTime = e / 100 * T);
 	}
-	function V() {
-		N(!0), clearTimeout(L.current), s && (L.current = setTimeout(() => N(!1), 3e3));
+	function H() {
+		P(!0), clearTimeout(R.current), c && (R.current = setTimeout(() => P(!1), 3e3));
 	}
-	return A ? /* @__PURE__ */ p(c, {
+	return j ? /* @__PURE__ */ m(l, {
 		message: "Could not load video",
-		url: n
-	}) : /* @__PURE__ */ m("div", {
-		ref: o,
+		url: r
+	}) : /* @__PURE__ */ m(n, { children: /* @__PURE__ */ h("div", {
+		ref: s,
 		className: "group relative rounded-control bg-black overflow-hidden",
-		onMouseMove: V,
-		onMouseLeave: () => s && N(!1),
+		onMouseMove: H,
+		onMouseLeave: () => c && P(!1),
 		tabIndex: -1,
 		children: [
-			/* @__PURE__ */ p("video", {
-				ref: a,
-				src: n,
+			/* @__PURE__ */ m("video", {
+				ref: o,
+				src: r,
 				className: "max-h-[70vh] w-full",
-				onClick: z,
-				muted: O,
+				onClick: B,
+				muted: k,
 				onTimeUpdate: () => {
-					a.current && (D(a.current.currentTime), a.current.duration && S(a.current.currentTime / a.current.duration * 100));
+					o.current && (O(o.current.currentTime), o.current.duration && C(o.current.currentTime / o.current.duration * 100));
 				},
-				onLoadedMetadata: () => T(a.current?.duration ?? 0),
+				onLoadedMetadata: () => E(o.current?.duration ?? 0),
 				onEnded: () => {
-					h(!1), N(!0);
+					g(!1), P(!0);
 				},
 				onError: () => {
-					j(!0), i?.("Video failed to load");
+					M(!0), a?.("Video failed to load");
 				},
 				playsInline: !0
 			}),
-			!s && /* @__PURE__ */ p(b.button, {
+			!c && /* @__PURE__ */ m(x.button, {
 				initial: {
 					opacity: 0,
 					scale: .8
@@ -260,19 +261,19 @@ function w({ url: n, onError: i }) {
 					scale: 1
 				},
 				transition: e.snappy,
-				onClick: z,
+				onClick: B,
 				className: "absolute inset-0 flex items-center justify-center bg-black/30",
 				"aria-label": "Play video",
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ m("div", {
 					className: "flex h-14 w-14 items-center justify-center rounded-pill bg-white/90 shadow-floating",
-					children: /* @__PURE__ */ p(r, {
-						icon: v,
+					children: /* @__PURE__ */ m(i, {
+						icon: y,
 						size: "xl",
 						className: "text-surface-fg ml-0.5"
 					})
 				})
 			}),
-			/* @__PURE__ */ p(y, { children: M && w > 0 && /* @__PURE__ */ m(b.div, {
+			/* @__PURE__ */ m(b, { children: N && T > 0 && /* @__PURE__ */ h(x.div, {
 				initial: {
 					opacity: 0,
 					y: 10
@@ -287,63 +288,63 @@ function w({ url: n, onError: i }) {
 				},
 				transition: t.fade,
 				className: "absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/80 to-transparent px-ds-04 pb-ds-04 pt-ds-08",
-				children: [/* @__PURE__ */ p(l, {
+				children: [/* @__PURE__ */ m(u, {
 					className: "mb-ds-03",
-					value: x,
+					value: S,
 					max: 100,
 					step: .1,
-					onValueChange: B,
+					onValueChange: V,
 					tone: "dark",
 					ariaLabel: "Video progress"
-				}), /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-ds-03",
 					children: [
-						/* @__PURE__ */ p("button", {
-							onClick: z,
+						/* @__PURE__ */ m("button", {
+							onClick: B,
 							className: "text-white hover:text-white/80",
-							"aria-label": s ? "Pause" : "Play",
-							title: s ? "Pause" : "Play",
-							children: s ? /* @__PURE__ */ p(r, {
-								icon: _,
-								size: "lg"
-							}) : /* @__PURE__ */ p(r, {
+							"aria-label": c ? "Pause" : "Play",
+							title: c ? "Pause" : "Play",
+							children: c ? /* @__PURE__ */ m(i, {
 								icon: v,
 								size: "lg"
+							}) : /* @__PURE__ */ m(i, {
+								icon: y,
+								size: "lg"
 							})
 						}),
-						/* @__PURE__ */ p(u, {
-							volume: +!O,
-							muted: O,
+						/* @__PURE__ */ m(d, {
+							volume: +!k,
+							muted: k,
 							onVolumeChange: (e) => {
-								a.current && (a.current.volume = e), e > 0 && O && (k(!1), a.current && (a.current.muted = !1));
+								o.current && (o.current.volume = e), e > 0 && k && (A(!1), o.current && (o.current.muted = !1));
 							},
 							onMuteToggle: () => {
-								k(!O), a.current && (a.current.muted = !O);
+								A(!k), o.current && (o.current.muted = !k);
 							},
 							variant: "dark"
 						}),
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ h("span", {
 							className: "text-body-sm font-mono text-white/70 tabular-nums",
 							children: [
-								d(E),
+								f(D),
 								" / ",
-								d(w)
+								f(T)
 							]
 						}),
-						/* @__PURE__ */ p("div", { className: "flex-1" }),
-						/* @__PURE__ */ m("button", {
-							onClick: () => R(1),
+						/* @__PURE__ */ m("div", { className: "flex-1" }),
+						/* @__PURE__ */ h("button", {
+							onClick: () => z(1),
 							className: "text-body-sm font-mono text-white/70 hover:text-white px-1 rounded-control-inner hover:bg-white/10 transition-colors",
-							"aria-label": `Playback speed: ${P}x`,
-							children: [P, "x"]
+							"aria-label": `Playback speed: ${F}x`,
+							children: [F, "x"]
 						}),
-						/* @__PURE__ */ p("button", {
-							onClick: () => a.current?.requestFullscreen?.(),
+						/* @__PURE__ */ m("button", {
+							onClick: () => o.current?.requestFullscreen?.(),
 							className: "text-white hover:text-white/80",
 							"aria-label": "Fullscreen (F)",
 							title: "Fullscreen",
-							children: /* @__PURE__ */ p(r, {
-								icon: g,
+							children: /* @__PURE__ */ m(i, {
+								icon: _,
 								size: "sm"
 							})
 						})
@@ -351,12 +352,12 @@ function w({ url: n, onError: i }) {
 				})]
 			}) })
 		]
-	});
+	}) });
 }
 //#endregion
 //#region src/composed/file-preview.tsx
-var T = f.lazy(() => import("../_chunks/image-preview.js")), E = f.lazy(() => import("../_chunks/document-preview.js"));
-function D(e, t) {
+var E = p.lazy(() => import("../_chunks/image-preview.js")), D = p.lazy(() => import("../_chunks/document-preview.js"));
+function O(e, t) {
 	if (t) {
 		if (t.startsWith("image/")) return "image";
 		if (t === "application/pdf") return "pdf";
@@ -386,7 +387,7 @@ function D(e, t) {
 		"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 O(e) {
+function k(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+)/);
@@ -395,62 +396,62 @@ function O(e) {
 	let r = e.match(/loom\.com\/share\/([^?]+)/);
 	return r ? `https://www.loom.com/embed/${r[1]}` : e;
 }
-function k({ url: e, type: t, mimeType: c, alt: l, initialPage: u = 1, fileName: d, fileSize: g, onError: _, className: v, ...y }) {
-	let b = t ?? D(e, c), C = /* @__PURE__ */ p(i, { className: "h-64 w-full rounded-control" });
-	return /* @__PURE__ */ m("div", {
-		className: n("flex flex-col gap-ds-03", v),
+function A({ url: e, type: t, mimeType: n, alt: l, initialPage: u = 1, fileName: d, fileSize: f, onError: _, className: v, ...y }) {
+	let b = t ?? O(e, n), x = /* @__PURE__ */ m(a, { className: "h-64 w-full rounded-control" });
+	return /* @__PURE__ */ h("div", {
+		className: r("flex flex-col gap-ds-03", v),
 		...y,
 		children: [
-			(d || g) && /* @__PURE__ */ m("div", {
+			(d || f) && /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-ds-03",
-				children: [d && /* @__PURE__ */ p(s, {
+				children: [d && /* @__PURE__ */ m(c, {
 					mode: "middle",
 					className: "min-w-0 text-body-sm font-semibold text-surface-fg",
 					children: d
-				}), g && /* @__PURE__ */ p(a, {
+				}), f && /* @__PURE__ */ m(o, {
 					variant: "subtle",
 					size: "xs",
-					children: g
+					children: f
 				})]
 			}),
-			b === "image" && /* @__PURE__ */ p(f.Suspense, {
-				fallback: C,
-				children: /* @__PURE__ */ p(T, {
+			b === "image" && /* @__PURE__ */ m(p.Suspense, {
+				fallback: x,
+				children: /* @__PURE__ */ m(E, {
 					url: e,
 					alt: l,
 					onError: _
 				})
 			}),
-			b === "pdf" && /* @__PURE__ */ p(f.Suspense, {
-				fallback: C,
-				children: /* @__PURE__ */ p(E, {
+			b === "pdf" && /* @__PURE__ */ m(p.Suspense, {
+				fallback: x,
+				children: /* @__PURE__ */ m(D, {
 					url: e,
 					initialPage: u,
 					onError: _
 				})
 			}),
-			b === "video" && /* @__PURE__ */ p(w, {
+			b === "video" && /* @__PURE__ */ m(T, {
 				url: e,
 				onError: _
 			}),
-			b === "audio" && /* @__PURE__ */ p(x, {
+			b === "audio" && /* @__PURE__ */ m(S, {
 				url: e,
 				fileName: d,
 				onError: _
 			}),
-			b === "embed" && /* @__PURE__ */ p(S, {
+			b === "embed" && /* @__PURE__ */ m(C, {
 				url: e,
-				embedUrl: O(e),
+				embedUrl: k(e),
 				onError: _
 			}),
-			b !== "audio" && /* @__PURE__ */ p("div", {
+			b !== "audio" && /* @__PURE__ */ m("div", {
 				className: "flex justify-end",
-				children: /* @__PURE__ */ p(o, {
+				children: /* @__PURE__ */ m(s, {
 					variant: "ghost",
 					size: "xs",
-					startIcon: /* @__PURE__ */ p(r, { icon: h }),
+					startIcon: /* @__PURE__ */ m(i, { icon: g }),
 					asChild: !0,
-					children: /* @__PURE__ */ p("a", {
+					children: /* @__PURE__ */ m("a", {
 						href: e,
 						download: !0,
 						target: "_blank",
@@ -463,4 +464,4 @@ function k({ url: e, type: t, mimeType: c, alt: l, initialPage: u = 1, fileName:
 	});
 }
 //#endregion
-export { k as FilePreview };
+export { A as FilePreview };