@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/composed/extensions/emoji-suggestion.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn as e } from "../../ui/lib/utils.js";
+import { g as t, p as n, y as r } from "../../_chunks/tiptap.js";
+import { i, n as a, t as o } from "../../_chunks/emoji-data.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createRoot as u } from "react-dom/client";
+//#region src/composed/extensions/emoji-suggestion.tsx
+function d({ emoji: e, set: t, size: n = "1.2em" }) {
+	return t === "native" ? /* @__PURE__ */ c("span", {
+		style: { fontSize: n },
+		children: e.native
+	}) : /* @__PURE__ */ c("span", {
+		role: "img",
+		"aria-label": e.native,
+		className: "inline-block",
+		style: {
+			width: n,
+			height: n,
+			backgroundImage: `url(${o(t)})`,
+			backgroundSize: "6100% 6100%",
+			backgroundPosition: `${100 / 60 * e.x}% ${100 / 60 * e.y}%`
+		}
+	});
+}
+var f = s.forwardRef(({ items: t, set: n, command: r }, i) => {
+	let [a, o] = s.useState(0);
+	return s.useEffect(() => o(0), [t]), s.useImperativeHandle(i, () => ({ onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (o((e) => (e + t.length - 1) % t.length), !0) : e.key === "ArrowDown" ? (o((e) => (e + 1) % t.length), !0) : e.key === "Enter" ? (t[a] && r(t[a]), !0) : !1 })), t.length ? /* @__PURE__ */ c("div", {
+		role: "listbox",
+		"aria-label": "Emoji suggestions",
+		className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-control border border-surface-border-strong bg-surface-overlay shadow-raised-hover",
+		children: t.map((t, i) => /* @__PURE__ */ l("button", {
+			type: "button",
+			role: "option",
+			"aria-selected": i === a,
+			onClick: () => r(t),
+			className: e("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm", i === a ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
+			children: [/* @__PURE__ */ c(d, {
+				emoji: t,
+				set: n,
+				size: "1.25em"
+			}), /* @__PURE__ */ l("span", {
+				className: "truncate",
+				children: [
+					":",
+					t.id,
+					":"
+				]
+			})]
+		}, t.id))
+	}) : null;
+});
+f.displayName = "EmojiList";
+function p(e) {
+	return () => {
+		let t = null, n = null, r = null;
+		return {
+			onStart: (i) => {
+				n = document.createElement("div"), n.style.position = "absolute", n.style.zIndex = "1400";
+				let a = i.clientRect?.();
+				a && (n.style.left = `${a.left}px`, n.style.top = `${a.bottom + 4}px`), document.body.appendChild(n), t = u(n), t.render(/* @__PURE__ */ c(f, {
+					ref: (e) => {
+						r = e;
+					},
+					items: i.items,
+					set: e,
+					command: (e) => i.command(e)
+				}));
+			},
+			onUpdate: (i) => {
+				if (!t || !n) return;
+				let a = i.clientRect?.();
+				a && (n.style.left = `${a.left}px`, n.style.top = `${a.bottom + 4}px`), t.render(/* @__PURE__ */ c(f, {
+					ref: (e) => {
+						r = e;
+					},
+					items: i.items,
+					set: e,
+					command: (e) => i.command(e)
+				}));
+			},
+			onKeyDown: (e) => e.event.key === "Escape" ? (n && (t?.unmount(), n.remove(), n = null, t = null), !0) : r?.onKeyDown(e) ?? !1,
+			onExit: () => {
+				n && (t?.unmount(), n.remove(), n = null, t = null);
+			}
+		};
+	};
+}
+function m(e = "native") {
+	return t.create({
+		name: "emojiSuggestion",
+		addProseMirrorPlugins() {
+			return [n({
+				pluginKey: new r("emojiSuggestion"),
+				editor: this.editor,
+				char: ":",
+				items: async ({ query: t }) => i(await a(e), t, 8),
+				command: ({ editor: t, range: n, props: r }) => {
+					let i = r;
+					t.chain().focus().deleteRange(n).insertContent({
+						type: "emojiNode",
+						attrs: {
+							id: i.id,
+							native: i.native,
+							set: e,
+							x: i.x,
+							y: i.y
+						}
+					}).run();
+				},
+				render: p(e)
+			})];
+		}
+	});
+}
+//#endregion
+export { m as createEmojiSuggestion };

package/dist/composed/extensions/emoji-suggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-suggestion.js","names":[],"sources":["../../../src/composed/extensions/emoji-suggestion.tsx"],"sourcesContent":["import { Extension } from '@tiptap/core'\nimport Suggestion, { type SuggestionKeyDownProps,type SuggestionProps } from '@tiptap/suggestion'\nimport { PluginKey } from 'prosemirror-state'\nimport * as React from 'react'\nimport { createRoot, type Root } from 'react-dom/client'\n\nimport { cn } from '../../ui/lib/utils'\nimport { loadEmojiData, type ResolvedEmoji, searchEmoji, SHEET_COLS, SHEET_ROWS,SPRITESHEET_URL } from './emoji-data'\n\n// Re-export for external consumers\nexport type { ResolvedEmoji as EmojiSuggestionItem }\n\nfunction EmojiImage({ emoji, set, size = '1.2em' }: { emoji: ResolvedEmoji; set: string; size?: string }) {\n  if (set === 'native') {\n    return <span style={{ fontSize: size }}>{emoji.native}</span>\n  }\n  return (\n    <span\n      role=\"img\"\n      aria-label={emoji.native}\n      className=\"inline-block\"\n      style={{\n        width: size,\n        height: size,\n        backgroundImage: `url(${SPRITESHEET_URL(set)})`,\n        backgroundSize: `${100 * SHEET_COLS}% ${100 * SHEET_ROWS}%`,\n        backgroundPosition: `${(100 / (SHEET_COLS - 1)) * emoji.x}% ${(100 / (SHEET_ROWS - 1)) * emoji.y}%`,\n      }}\n    />\n  )\n}\n\ninterface EmojiListRef {\n  onKeyDown: (props: SuggestionKeyDownProps) => boolean\n}\n\ninterface EmojiListProps {\n  items: ResolvedEmoji[]\n  set: string\n  command: (item: ResolvedEmoji) => void\n}\n\nconst EmojiList = React.forwardRef<EmojiListRef, EmojiListProps>(\n  ({ items, set, command }, ref) => {\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n\n    React.useEffect(() => setSelectedIndex(0), [items])\n\n    React.useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: SuggestionKeyDownProps) => {\n        if (event.key === 'ArrowUp') {\n          setSelectedIndex((i) => (i + items.length - 1) % items.length)\n          return true\n        }\n        if (event.key === 'ArrowDown') {\n          setSelectedIndex((i) => (i + 1) % items.length)\n          return true\n        }\n        if (event.key === 'Enter') {\n          if (items[selectedIndex]) command(items[selectedIndex])\n          return true\n        }\n        return false\n      },\n    }))\n\n    if (!items.length) return null\n\n    return (\n      <div role=\"listbox\" aria-label=\"Emoji suggestions\" className=\"z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-control border border-surface-border-strong bg-surface-overlay shadow-raised-hover\">\n        {items.map((item, index) => (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={index === selectedIndex}\n            onClick={() => command(item)}\n            className={cn(\n              'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm',\n              index === selectedIndex ? 'bg-surface-raised text-surface-fg' : 'text-surface-fg-muted hover:bg-surface-raised',\n            )}\n          >\n            <EmojiImage emoji={item} set={set} size=\"1.25em\" />\n            <span className=\"truncate\">:{item.id}:</span>\n          </button>\n        ))}\n      </div>\n    )\n  },\n)\nEmojiList.displayName = 'EmojiList'\n\nfunction createEmojiSuggestionRenderer(set: string) {\n  return () => {\n    let root: Root | null = null\n    let container: HTMLDivElement | null = null\n    let componentRef: EmojiListRef | null = null\n\n    return {\n      onStart: (props: SuggestionProps<ResolvedEmoji>) => {\n        container = document.createElement('div')\n        container.style.position = 'absolute'\n        container.style.zIndex = '1400'\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n        document.body.appendChild(container)\n        root = createRoot(container)\n        root.render(\n          <EmojiList\n            ref={(r) => { componentRef = r }}\n            items={props.items as ResolvedEmoji[]}\n            set={set}\n            command={(item) => props.command(item)}\n          />,\n        )\n      },\n\n      onUpdate: (props: SuggestionProps<ResolvedEmoji>) => {\n        if (!root || !container) return\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n        root.render(\n          <EmojiList\n            ref={(r) => { componentRef = r }}\n            items={props.items as ResolvedEmoji[]}\n            set={set}\n            command={(item) => props.command(item)}\n          />,\n        )\n      },\n\n      onKeyDown: (props: SuggestionKeyDownProps) => {\n        if (props.event.key === 'Escape') {\n          if (container) {\n            root?.unmount()\n            container.remove()\n            container = null\n            root = null\n          }\n          return true\n        }\n        return componentRef?.onKeyDown(props) ?? false\n      },\n\n      onExit: () => {\n        if (container) {\n          root?.unmount()\n          container.remove()\n          container = null\n          root = null\n        }\n      },\n    }\n  }\n}\n\n/** Factory: call with the emoji set to get a configured extension. */\nexport function createEmojiSuggestion(set = 'native') {\n  return Extension.create({\n    name: 'emojiSuggestion',\n\n    addProseMirrorPlugins() {\n      return [\n        Suggestion({\n          pluginKey: new PluginKey('emojiSuggestion'),\n          editor: this.editor,\n          char: ':',\n          items: async ({ query }) => {\n            const data = await loadEmojiData(set)\n            return searchEmoji(data, query, 8)\n          },\n          command: ({ editor, range, props: item }) => {\n            const emoji = item as ResolvedEmoji\n            editor\n              .chain()\n              .focus()\n              .deleteRange(range)\n              .insertContent({\n                type: 'emojiNode',\n                attrs: { id: emoji.id, native: emoji.native, set, x: emoji.x, y: emoji.y },\n              })\n              .run()\n          },\n          render: createEmojiSuggestionRenderer(set),\n        }),\n      ]\n    },\n  })\n}\n"],"mappings":"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"}

package/dist/composed/file-preview.js

@@ -1,3 +1,499 @@
 "use client";
-import { t as e } from "../_chunks/file-preview.js";
-export { e as FilePreview };
+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 { n as i } from "../_chunks/badge-group.js";
+import { Button as a } from "../ui/button.js";
+import { Skeleton as o } from "../ui/skeleton.js";
+import { a as s, i as c, t as l } from "../_chunks/shared.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { IconDownload as p, IconMaximize as m, IconPlayerPause as h, IconPlayerPlay as g } from "@tabler/icons-react";
+import { AnimatePresence as _, motion as v } from "framer-motion";
+//#region src/composed/file-preview/audio-preview.tsx
+function y({ url: e, fileName: t, onError: n }) {
+	let i = u.useRef(null), o = u.useRef(null), [p, m] = u.useState(!1), [_, v] = u.useState(0), [y, b] = u.useState(0), [x, S] = u.useState(0), [C, w] = u.useState(1), [T, E] = u.useState(!1), [D, O] = u.useState(!1), [k, A] = u.useState(null);
+	u.useEffect(() => {
+		function e(e) {
+			let t = o.current;
+			if (!t || !t.contains(document.activeElement) && document.activeElement !== t) return;
+			let n = i.current;
+			if (n) switch (e.key) {
+				case " ":
+					e.preventDefault(), m((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() {
+		i.current && (p ? i.current.pause() : i.current.play(), m(!p));
+	}
+	function M(e) {
+		if (!i.current || !y) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width));
+		i.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 (!i.current) return;
+		let e = !T;
+		E(e), i.current.muted = e;
+	}
+	return D ? /* @__PURE__ */ d(l, {
+		message: "Could not load audio",
+		url: e
+	}) : /* @__PURE__ */ f("div", {
+		ref: o,
+		className: "rounded-surface border border-surface-border bg-surface-raised shadow-raised overflow-hidden",
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ d("audio", {
+				ref: i,
+				src: e,
+				onTimeUpdate: () => {
+					i.current && (S(i.current.currentTime), i.current.duration && v(i.current.currentTime / i.current.duration * 100));
+				},
+				onLoadedMetadata: () => b(i.current?.duration ?? 0),
+				onEnded: () => m(!1),
+				onError: () => {
+					O(!0), n?.("Audio failed to load");
+				}
+			}),
+			/* @__PURE__ */ f("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(_),
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				tabIndex: 0,
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "absolute left-0 top-0 h-full bg-accent-9 transition-[width] duration-75",
+						style: { width: `${_}%` }
+					}),
+					k !== null && /* @__PURE__ */ d("div", {
+						className: "absolute -top-7 -translate-x-1/2 rounded-control-inner 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: s(k)
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-pill bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity",
+						style: {
+							left: `${_}%`,
+							marginLeft: "-5px"
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex items-center gap-ds-04 px-ds-05 py-ds-04",
+				children: [
+					/* @__PURE__ */ d(a, {
+						variant: "solid",
+						size: "icon-sm",
+						onClick: j,
+						"aria-label": p ? "Pause" : "Play",
+						title: p ? "Pause" : "Play",
+						className: "shrink-0",
+						children: p ? /* @__PURE__ */ d(r, {
+							icon: h,
+							size: "sm"
+						}) : /* @__PURE__ */ d(r, {
+							icon: g,
+							size: "sm",
+							className: "ml-0.5"
+						})
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "flex-1 min-w-0",
+						children: [t && /* @__PURE__ */ d("p", {
+							className: "text-ds-sm font-semibold text-surface-fg truncate",
+							children: t
+						}), /* @__PURE__ */ f("p", {
+							className: "text-ds-xs font-mono text-surface-fg-muted tabular-nums",
+							children: [
+								s(x),
+								" / ",
+								s(y)
+							]
+						})]
+					}),
+					/* @__PURE__ */ d(c, {
+						volume: C,
+						muted: T,
+						onVolumeChange: (e) => {
+							w(e), i.current && (i.current.volume = e), e > 0 && T && (E(!1), i.current && (i.current.muted = !1));
+						},
+						onMuteToggle: P,
+						variant: "light"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composed/file-preview/embed-preview.tsx
+function b({ url: e, embedUrl: n, onError: r }) {
+	let [i, a] = u.useState(!1), [s, c] = u.useState(!1);
+	return u.useEffect(() => {
+		let e = setTimeout(() => {
+			i || (c(!0), r?.("Embed timed out"));
+		}, 15e3);
+		return () => clearTimeout(e);
+	}, [i, r]), s ? /* @__PURE__ */ d(l, {
+		message: "Could not load embed",
+		url: e
+	}) : /* @__PURE__ */ f("div", {
+		className: "relative w-full rounded-control overflow-hidden",
+		style: { aspectRatio: "16 / 9" },
+		children: [!i && /* @__PURE__ */ d(o, { className: "absolute inset-0" }), /* @__PURE__ */ d(v.iframe, {
+			src: n,
+			title: "Embedded content",
+			onLoad: () => a(!0),
+			onError: () => {
+				c(!0), r?.("Embed failed to load");
+			},
+			initial: { opacity: 0 },
+			animate: { opacity: +!!i },
+			transition: t.fade,
+			className: "absolute inset-0 h-full w-full border-none",
+			allowFullScreen: !0
+		})]
+	});
+}
+//#endregion
+//#region src/composed/file-preview/video-preview.tsx
+var x = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+function S({ url: n, onError: i }) {
+	let a = u.useRef(null), o = u.useRef(null), [p, y] = u.useState(!1), [b, S] = u.useState(0), [C, w] = u.useState(0), [T, E] = u.useState(0), [D, O] = u.useState(!1), [k, A] = u.useState(!1), [j, M] = u.useState(!0), [N, P] = u.useState(1), F = u.useRef(void 0);
+	u.useEffect(() => () => clearTimeout(F.current), []), u.useEffect(() => {
+		function e(e) {
+			let t = o.current;
+			if (!t || !t.contains(document.activeElement) && document.activeElement !== t) return;
+			let n = a.current;
+			if (n) switch (e.key) {
+				case " ":
+				case "k":
+					e.preventDefault(), y((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 = x.indexOf(N), n = x[Math.max(0, Math.min(x.length - 1, t + e))];
+		P(n), a.current && (a.current.playbackRate = n);
+	}
+	function L() {
+		a.current && (p ? a.current.pause() : a.current.play(), y(!p));
+	}
+	function R(e) {
+		if (!a.current || !C) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = (e.clientX - t.left) / t.width;
+		a.current.currentTime = n * C;
+	}
+	function z() {
+		M(!0), clearTimeout(F.current), p && (F.current = setTimeout(() => M(!1), 3e3));
+	}
+	return k ? /* @__PURE__ */ d(l, {
+		message: "Could not load video",
+		url: n
+	}) : /* @__PURE__ */ f("div", {
+		ref: o,
+		className: "group relative rounded-control bg-black overflow-hidden",
+		onMouseMove: z,
+		onMouseLeave: () => p && M(!1),
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ d("video", {
+				ref: a,
+				src: n,
+				className: "max-h-[70vh] w-full",
+				onClick: L,
+				muted: D,
+				onTimeUpdate: () => {
+					a.current && (E(a.current.currentTime), a.current.duration && S(a.current.currentTime / a.current.duration * 100));
+				},
+				onLoadedMetadata: () => w(a.current?.duration ?? 0),
+				onEnded: () => {
+					y(!1), M(!0);
+				},
+				onError: () => {
+					A(!0), i?.("Video failed to load");
+				},
+				playsInline: !0
+			}),
+			!p && /* @__PURE__ */ d(v.button, {
+				initial: {
+					opacity: 0,
+					scale: .8
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				transition: e.snappy,
+				onClick: L,
+				className: "absolute inset-0 flex items-center justify-center bg-black/30",
+				"aria-label": "Play video",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex h-14 w-14 items-center justify-center rounded-pill bg-white/90 shadow-floating",
+					children: /* @__PURE__ */ d(r, {
+						icon: g,
+						size: "xl",
+						className: "text-surface-fg ml-0.5"
+					})
+				})
+			}),
+			/* @__PURE__ */ d(_, { children: j && C > 0 && /* @__PURE__ */ f(v.div, {
+				initial: {
+					opacity: 0,
+					y: 10
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				exit: {
+					opacity: 0,
+					y: 10
+				},
+				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__ */ f("div", {
+					className: "relative h-1 w-full cursor-pointer rounded-pill bg-white/30 mb-ds-03 group/progress",
+					onClick: R,
+					role: "slider",
+					"aria-label": "Video progress",
+					"aria-valuenow": Math.round(b),
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					tabIndex: 0,
+					children: [/* @__PURE__ */ d("div", {
+						className: "absolute left-0 top-0 h-full rounded-pill bg-white transition-[width] duration-75",
+						style: { width: `${b}%` }
+					}), /* @__PURE__ */ d("div", {
+						className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-pill bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity",
+						style: {
+							left: `${b}%`,
+							marginLeft: "-6px"
+						}
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "flex items-center gap-ds-03",
+					children: [
+						/* @__PURE__ */ d("button", {
+							onClick: L,
+							className: "text-white hover:text-white/80",
+							"aria-label": p ? "Pause" : "Play",
+							title: p ? "Pause" : "Play",
+							children: p ? /* @__PURE__ */ d(r, {
+								icon: h,
+								size: "lg"
+							}) : /* @__PURE__ */ d(r, {
+								icon: g,
+								size: "lg"
+							})
+						}),
+						/* @__PURE__ */ d(c, {
+							volume: +!D,
+							muted: D,
+							onVolumeChange: (e) => {
+								a.current && (a.current.volume = e), e > 0 && D && (O(!1), a.current && (a.current.muted = !1));
+							},
+							onMuteToggle: () => {
+								O(!D), a.current && (a.current.muted = !D);
+							},
+							variant: "dark"
+						}),
+						/* @__PURE__ */ f("span", {
+							className: "text-[11px] font-mono text-white/70 tabular-nums",
+							children: [
+								s(T),
+								" / ",
+								s(C)
+							]
+						}),
+						/* @__PURE__ */ d("div", { className: "flex-1" }),
+						/* @__PURE__ */ f("button", {
+							onClick: () => I(1),
+							className: "text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-control-inner hover:bg-white/10 transition-colors",
+							"aria-label": `Playback speed: ${N}x`,
+							children: [N, "x"]
+						}),
+						/* @__PURE__ */ d("button", {
+							onClick: () => a.current?.requestFullscreen?.(),
+							className: "text-white hover:text-white/80",
+							"aria-label": "Fullscreen (F)",
+							title: "Fullscreen",
+							children: /* @__PURE__ */ d(r, {
+								icon: m,
+								size: "sm"
+							})
+						})
+					]
+				})]
+			}) })
+		]
+	});
+}
+//#endregion
+//#region src/composed/file-preview.tsx
+var C = u.lazy(() => import("../_chunks/image-preview.js")), w = u.lazy(() => import("../_chunks/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 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;
+}
+function D({ url: e, type: t, mimeType: s, alt: c, initialPage: l = 1, fileName: m, fileSize: h, onError: g, className: _, ...v }) {
+	let x = t ?? T(e, s), D = /* @__PURE__ */ d(o, { className: "h-64 w-full rounded-control" });
+	return /* @__PURE__ */ f("div", {
+		className: n("flex flex-col gap-ds-03", _),
+		...v,
+		children: [
+			(m || h) && /* @__PURE__ */ f("div", {
+				className: "flex items-center gap-ds-03",
+				children: [m && /* @__PURE__ */ d("span", {
+					className: "text-ds-sm font-semibold text-surface-fg truncate",
+					children: m
+				}), h && /* @__PURE__ */ d(i, {
+					variant: "subtle",
+					size: "xs",
+					children: h
+				})]
+			}),
+			x === "image" && /* @__PURE__ */ d(u.Suspense, {
+				fallback: D,
+				children: /* @__PURE__ */ d(C, {
+					url: e,
+					alt: c,
+					onError: g
+				})
+			}),
+			x === "pdf" && /* @__PURE__ */ d(u.Suspense, {
+				fallback: D,
+				children: /* @__PURE__ */ d(w, {
+					url: e,
+					initialPage: l,
+					onError: g
+				})
+			}),
+			x === "video" && /* @__PURE__ */ d(S, {
+				url: e,
+				onError: g
+			}),
+			x === "audio" && /* @__PURE__ */ d(y, {
+				url: e,
+				fileName: m,
+				onError: g
+			}),
+			x === "embed" && /* @__PURE__ */ d(b, {
+				url: e,
+				embedUrl: E(e),
+				onError: g
+			}),
+			x !== "audio" && /* @__PURE__ */ d("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ d(a, {
+					variant: "ghost",
+					size: "xs",
+					startIcon: /* @__PURE__ */ d(r, { icon: p }),
+					asChild: !0,
+					children: /* @__PURE__ */ d("a", {
+						href: e,
+						download: !0,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: "Download"
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { D as FilePreview };