@ai-matrx/media 0.1.0

package/dist/react.js

@@ -0,0 +1,2120 @@
+"use client";
+
+// src/react/cn.ts
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(inputs.filter(Boolean).join(" "));
+}
+
+// src/react/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function svgProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function ArchiveIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("rect", { width: "20", height: "5", x: "2", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 12h4" })
+  ] });
+}
+function BracesIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function CodeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "m16 18 6-6-6-6" }),
+    /* @__PURE__ */ jsx("path", { d: "m8 6-6 6 6 6" })
+  ] });
+}
+function CopyIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] });
+}
+function DatabaseIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 5V19A9 3 0 0 0 21 19V5" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 12A9 3 0 0 0 21 12" })
+  ] });
+}
+function DownloadIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 15V3" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("path", { d: "m7 10 5 5 5-5" })
+  ] });
+}
+function ExternalLinkIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+  ] });
+}
+function FileIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" })
+  ] });
+}
+function FileAudioIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 6.835V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-.343" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 19a2 2 0 0 1 4 0v1a2 2 0 0 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 0 1-4 0v-1a2 2 0 0 1 4 0" })
+  ] });
+}
+function FileCodeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 12.5 8 15l2 2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "m14 12.5 2 2.5-2 2.5" })
+  ] });
+}
+function FileJsonIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1" })
+  ] });
+}
+function FileSpreadsheetIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 13h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 13h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 17h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 17h2" })
+  ] });
+}
+function FileTextIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 17H8" })
+  ] });
+}
+function FileTypeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 18h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 12v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 13v-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v.5" })
+  ] });
+}
+function FileVideoIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.033 13.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z" })
+  ] });
+}
+function FolderIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }) });
+}
+function FolderOpenIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" }) });
+}
+function ImageIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+  ] });
+}
+function ImageOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.41 10.41a2 2 0 1 1-2.83-2.83" }),
+    /* @__PURE__ */ jsx("line", { x1: "13.5", x2: "6", y1: "13.5", y2: "21" }),
+    /* @__PURE__ */ jsx("line", { x1: "18", x2: "21", y1: "12", y2: "15" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 15V5a2 2 0 0 0-2-2H9" })
+  ] });
+}
+function MusicIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+  ] });
+}
+function PackageBoxIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 22V12" }),
+    /* @__PURE__ */ jsx("polyline", { points: "3.29 7 12 12 20.71 7" }),
+    /* @__PURE__ */ jsx("path", { d: "m7.5 4.27 9 5.15" })
+  ] });
+}
+function PenToolIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" }),
+    /* @__PURE__ */ jsx("path", { d: "m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m2.3 2.3 7.286 7.286" }),
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "2" })
+  ] });
+}
+function Share2Icon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "5", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "19", r: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "8.59", x2: "15.42", y1: "13.51", y2: "17.49" }),
+    /* @__PURE__ */ jsx("line", { x1: "15.41", x2: "8.59", y1: "6.51", y2: "10.49" })
+  ] });
+}
+function SubtitlesIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4" })
+  ] });
+}
+function UploadIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
+    /* @__PURE__ */ jsx("path", { d: "m17 8-5-5-5 5" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" })
+  ] });
+}
+function VideoIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" })
+  ] });
+}
+function VideoOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.66 6H14a2 2 0 0 1 2 2v2.5l5.248-3.062A.5.5 0 0 1 22 7.87v8.196" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
+  ] });
+}
+function VolumeXIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" }),
+    /* @__PURE__ */ jsx("line", { x1: "22", x2: "16", y1: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", x2: "22", y1: "9", y2: "15" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+  ] });
+}
+function AlertCircleIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+  ] });
+}
+function CheckCircle2Icon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 11 3 3L22 4" })
+  ] });
+}
+
+// src/core/file-kind.ts
+var ROWS = [
+  [["jpg", "jpeg", "png", "gif", "webp", "avif", "heic", "heif", "bmp", "tif", "tiff", "ico"], "IMAGE", "text-emerald-500", "image", "Image"],
+  [["svg"], "IMAGE", "text-amber-500", "pen-tool", "SVG image"],
+  [["mp4", "mov", "webm", "mkv", "avi", "m4v"], "VIDEO", "text-purple-500", "video", "Video"],
+  [["mp3", "wav", "ogg", "m4a", "aac", "flac", "opus"], "AUDIO", "text-pink-500", "music", "Audio"],
+  [["pdf"], "DOCUMENT", "text-red-500", "file-type", "PDF Document"],
+  [["md", "markdown", "mdx", "rst", "adoc", "asciidoc", "org"], "DOCUMENT", "text-slate-400", "file-text", "Markdown"],
+  [["txt", "text", "asc", "me", "log", "out", "err"], "DOCUMENT", "text-muted-foreground", "file-text", "Text"],
+  [["dockerfile", "containerfile", "lua"], "CODE", "text-blue-500", "code", "Code"],
+  [["mk", "make", "swift", "ml", "mli", "fs", "fsi", "fsx", "svelte"], "CODE", "text-orange-500", "code", "Code"],
+  [["diff", "patch", "pem", "csr", "crt", "cer", "der", "key", "pub", "p7b", "p7c", "pfx", "p12"], "CODE", "text-amber-500", "file-text", "Text"],
+  [["ini", "cfg", "conf", "config", "properties", "prefs"], "CODE", "text-amber-400", "braces", "Config"],
+  [["tex", "latex", "ltx", "sty", "cls", "bib"], "CODE", "text-emerald-500", "file-text", "LaTeX"],
+  [["srt", "vtt"], "SUBTITLES", "text-cyan-500", "subtitles", "Subtitles"],
+  [["js", "mjs", "cjs", "jsx"], "CODE", "text-yellow-500", "file-code", "JavaScript"],
+  [["ts", "tsx"], "CODE", "text-blue-500", "file-code", "TypeScript"],
+  [["py", "clj", "cljs", "cljc", "edn", "vue", "styl", "stylus"], "CODE", "text-emerald-500", "code", "Code"],
+  [["rb", "rbw", "rake", "ru", "gemspec", "scala", "sbt"], "CODE", "text-red-500", "code", "Code"],
+  [["go", "dart"], "CODE", "text-cyan-500", "code", "Code"],
+  [["rs"], "CODE", "text-orange-600", "code", "Rust"],
+  [["java"], "CODE", "text-red-600", "code", "Java"],
+  [["c", "h"], "CODE", "text-blue-600", "code", "C"],
+  [["cpp", "cc", "cxx", "hpp"], "CODE", "text-blue-700", "code", "C++"],
+  [["cs"], "CODE", "text-purple-600", "code", "C#"],
+  [["html", "htm", "kt", "kts"], "CODE", "text-orange-400", "code", "Code"],
+  [["css"], "CODE", "text-sky-400", "code", "CSS"],
+  [["scss"], "CODE", "text-pink-400", "code", "SCSS"],
+  [["sh", "bash", "zsh", "fish", "ksh", "ash", "bat", "cmd", "twig", "jinja", "j2", "njk"], "CODE", "text-emerald-400", "code", "Script"],
+  [["sql"], "CODE", "text-amber-400", "code", "SQL"],
+  [["pl", "pm"], "CODE", "text-indigo-400", "code", "Perl"],
+  [["r", "rmd", "proto", "ps1", "psm1", "psd1", "less"], "CODE", "text-blue-400", "code", "Code"],
+  [["ex", "exs"], "CODE", "text-purple-400", "code", "Elixir"],
+  [["erl", "hrl"], "CODE", "text-rose-500", "code", "Erlang"],
+  [["hs", "lhs"], "CODE", "text-violet-500", "code", "Haskell"],
+  [["zig"], "CODE", "text-yellow-500", "code", "Zig"],
+  [["nim", "nims"], "CODE", "text-yellow-400", "code", "Nim"],
+  [["jl"], "CODE", "text-purple-500", "code", "Julia"],
+  [["astro"], "CODE", "text-fuchsia-500", "code", "Astro"],
+  [["graphql", "gql", "graphqls"], "CODE", "text-pink-500", "code", "GraphQL"],
+  [["sol"], "CODE", "text-slate-400", "code", "Solidity"],
+  [["php", "phtml", "phps"], "CODE", "text-indigo-500", "code", "PHP"],
+  [["hbs", "handlebars", "mustache", "ejs", "liquid"], "CODE", "text-amber-500", "code", "Template"],
+  [["json", "jsonc", "json5", "har", "geojson", "topojson"], "DATA", "text-amber-500", "file-json", "JSON"],
+  [["yaml", "yml", "toml"], "CODE", "text-amber-500", "braces", "Config"],
+  [["xml"], "DATA", "text-amber-500", "braces", "XML"],
+  [["csv", "tsv"], "DATA", "text-orange-500", "file-spreadsheet", "Spreadsheet data"],
+  [["sqlite", "sqlite3", "db"], "DATA", "text-blue-400", "database", "Database"],
+  [["ttl", "n3", "nt", "nq", "trig"], "DATA", "text-fuchsia-400", "braces", "RDF data"],
+  [["xlsx", "xls"], "DOCUMENT", "text-emerald-600", "file-spreadsheet", "Excel workbook"],
+  [["doc", "docx"], "DOCUMENT", "text-blue-500", "file-text", "Word document"],
+  [["ppt", "pptx"], "DOCUMENT", "text-orange-600", "file-type", "Presentation"],
+  [["ipynb"], "NOTEBOOK", "text-orange-400", "file-json", "Notebook"],
+  [["epub"], "EBOOK", "text-indigo-500", "file-text", "eBook"],
+  [["eml"], "EMAIL", "text-blue-400", "file-text", "Email"],
+  [["glb", "gltf", "stl", "obj", "fbx"], "MODEL_3D", "text-violet-400", "package", "3D model"],
+  [["zip", "rar", "7z"], "ARCHIVE", "text-amber-600", "archive", "Archive"],
+  [["tar", "gz", "tgz"], "ARCHIVE", "text-amber-600", "package", "Archive"]
+];
+var BY_EXTENSION = /* @__PURE__ */ new Map();
+for (const [extensions, category, colorClass, icon, displayName] of ROWS) {
+  for (const ext of extensions) {
+    BY_EXTENSION.set(ext, { category, colorClass, icon, displayName });
+  }
+}
+var UNKNOWN_DETAILS = {
+  category: "UNKNOWN",
+  displayName: "File",
+  colorClass: "text-muted-foreground",
+  icon: "file"
+};
+var ASSUMED_TEXT_DETAILS = {
+  category: "DOCUMENT",
+  displayName: "Text",
+  colorClass: "text-muted-foreground",
+  icon: "file-text"
+};
+var FOLDER_DETAILS = {
+  category: "FOLDER",
+  displayName: "Folder",
+  colorClass: "text-sky-500",
+  icon: "folder"
+};
+var IMAGE_DETAILS = BY_EXTENSION.get("png");
+var VIDEO_DETAILS = BY_EXTENSION.get("mp4");
+var AUDIO_DETAILS = BY_EXTENSION.get("mp3");
+var PDF_DETAILS = BY_EXTENSION.get("pdf");
+var SVG_DETAILS = BY_EXTENSION.get("svg");
+function basenameOf(path) {
+  const idx = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+  return idx >= 0 ? path.slice(idx + 1) : path;
+}
+function extOf(name) {
+  const idx = name.lastIndexOf(".");
+  if (idx <= 0 || idx === name.length - 1) return null;
+  return name.slice(idx + 1).toLowerCase();
+}
+function dotfileLooksLikeText(filename) {
+  const name = basenameOf(filename);
+  if (!name.startsWith(".")) return false;
+  for (let i = 1; i < name.length; i++) {
+    const c = name.charCodeAt(i);
+    if (c >= 48 && c <= 57 || c >= 65 && c <= 90 || c >= 97 && c <= 122 || c === 95 || c === 45) {
+      return true;
+    }
+  }
+  return false;
+}
+function canonicalMimeBase(raw) {
+  return raw.split(";")[0]?.trim().toLowerCase() ?? raw;
+}
+function getFileKindDetails(fileName, mimeType) {
+  const name = basenameOf(fileName);
+  const lower = name.toLowerCase();
+  const ext = lower === "dockerfile" || lower === "containerfile" ? lower : extOf(name);
+  const fromExt = ext ? BY_EXTENSION.get(ext) : void 0;
+  const mime = mimeType ? canonicalMimeBase(mimeType) : null;
+  if (mime) {
+    if (mime === "image/svg+xml") return fromExt ?? SVG_DETAILS;
+    if (mime.startsWith("image/")) return fromExt?.category === "IMAGE" ? fromExt : IMAGE_DETAILS;
+    if (mime.startsWith("video/")) return fromExt?.category === "VIDEO" ? fromExt : VIDEO_DETAILS;
+    if (mime.startsWith("audio/")) return fromExt?.category === "AUDIO" ? fromExt : AUDIO_DETAILS;
+    if (mime === "application/pdf") return PDF_DETAILS;
+  }
+  if (fromExt) return fromExt;
+  if (dotfileLooksLikeText(fileName)) return ASSUMED_TEXT_DETAILS;
+  return UNKNOWN_DETAILS;
+}
+function getFolderKindDetails(open = false) {
+  return open ? { ...FOLDER_DETAILS, icon: "folder-open" } : FOLDER_DETAILS;
+}
+
+// src/react/file-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ICONS = {
+  image: ImageIcon,
+  "pen-tool": PenToolIcon,
+  video: VideoIcon,
+  music: MusicIcon,
+  "file-type": FileTypeIcon,
+  "file-text": FileTextIcon,
+  code: CodeIcon,
+  braces: BracesIcon,
+  subtitles: SubtitlesIcon,
+  "file-code": FileCodeIcon,
+  "file-json": FileJsonIcon,
+  "file-spreadsheet": FileSpreadsheetIcon,
+  database: DatabaseIcon,
+  package: PackageBoxIcon,
+  archive: ArchiveIcon,
+  folder: FolderIcon,
+  "folder-open": FolderOpenIcon,
+  file: FileIcon,
+  "file-audio": FileAudioIcon,
+  "file-video": FileVideoIcon
+};
+function FileIcon2({
+  fileName,
+  mimeType = null,
+  isFolder,
+  open,
+  colorClass,
+  className,
+  size = 16
+}) {
+  const details = isFolder ? getFolderKindDetails(open) : getFileKindDetails(fileName ?? "", mimeType);
+  const Icon = ICONS[details.icon];
+  const style = {
+    width: `${size}px`,
+    height: `${size}px`,
+    minWidth: `${size}px`
+  };
+  return /* @__PURE__ */ jsx2(
+    Icon,
+    {
+      style,
+      className: cn("shrink-0", colorClass ?? details.colorClass, className),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/react/inline-media-ref.tsx
+import {
+  useCallback,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+
+// src/core/context.ts
+import {
+  createContext,
+  createElement,
+  useContext
+} from "react";
+var CLIENT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.client-context");
+var PORTS_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.media.host-ports-context");
+function clientContext() {
+  const host = globalThis;
+  host[CLIENT_SLOT] ??= createContext(null);
+  return host[CLIENT_SLOT];
+}
+var INERT_PORTS = {};
+function portsContext() {
+  const host = globalThis;
+  host[PORTS_SLOT] ??= createContext(INERT_PORTS);
+  return host[PORTS_SLOT];
+}
+function useMediaClient() {
+  const client = useContext(clientContext());
+  if (!client) {
+    throw new Error(
+      "@ai-matrx/media: no MediaClient. Mount <MediaProvider client={...}> above every media surface (canonically wired to @ai-matrx/data/files)."
+    );
+  }
+  return client;
+}
+function useMediaHostPorts() {
+  return useContext(portsContext());
+}
+
+// src/core/use-media-blob.ts
+import { useEffect, useState } from "react";
+
+// src/core/ref-key.ts
+function stableRefKey(ref) {
+  if (!ref) return "<none>";
+  if (typeof ref === "string") return `s:${ref}`;
+  if (ref.file_id) return `id:${ref.file_id}:${ref.mime_type ?? ""}`;
+  if (ref.url) return `url:${ref.url}:${ref.mime_type ?? ""}`;
+  return "<empty-ref>";
+}
+
+// src/core/use-media-blob.ts
+function useMediaBlob(ref) {
+  const client = useMediaClient();
+  const refKey = stableRefKey(ref);
+  const [state, setState] = useState({ url: null, blob: null, loading: !!ref, error: null });
+  const [retryToken, setRetryToken] = useState(0);
+  useEffect(() => {
+    if (!ref) {
+      setState({ url: null, blob: null, loading: false, error: null });
+      return void 0;
+    }
+    let cancelled = false;
+    let release = null;
+    setState({ url: null, blob: null, loading: true, error: null });
+    client.getBlob(ref).then(
+      (handle) => {
+        if (cancelled) {
+          handle.release();
+          return;
+        }
+        release = handle.release;
+        setState({ url: handle.url, blob: handle.blob, loading: false, error: null });
+      },
+      (err) => {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : String(err ?? "Failed to load file");
+        setState({ url: null, blob: null, loading: false, error: message });
+      }
+    );
+    return () => {
+      cancelled = true;
+      release?.();
+    };
+  }, [client, refKey, retryToken]);
+  return {
+    ...state,
+    retry: () => setRetryToken((t) => t + 1)
+  };
+}
+
+// src/core/use-media-load-recovery.ts
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// src/types.ts
+function mintDurableSrc(url) {
+  return url;
+}
+
+// src/core/use-media-load-recovery.ts
+function useMediaLoadRecovery(src, options) {
+  const client = useMediaClient();
+  const recoverable = options?.recoverable !== false;
+  const onTerminal = options?.onTerminal;
+  const [result, setResult] = useState2({ source: src, retryKey: 0, failed: false });
+  const attemptRef = useRef(0);
+  useEffect2(() => {
+    attemptRef.current = 0;
+  }, [src]);
+  const onLoadError = (event) => {
+    if (!src || !recoverable) {
+      setResult({ source: src, retryKey: 0, failed: true });
+      onTerminal?.(event);
+      return;
+    }
+    attemptRef.current += 1;
+    const attempt = attemptRef.current;
+    client.recoverLoadError(mintDurableSrc(src), attempt).then(
+      (verdict) => {
+        if (verdict === "retry") {
+          setResult((current) => ({
+            source: src,
+            retryKey: current.source === src ? current.retryKey + 1 : 1,
+            failed: false
+          }));
+        } else {
+          setResult({ source: src, retryKey: 0, failed: true });
+          onTerminal?.(event);
+        }
+      },
+      () => {
+        setResult({ source: src, retryKey: 0, failed: true });
+        onTerminal?.(event);
+      }
+    );
+  };
+  return {
+    retryKey: result.source === src ? result.retryKey : 0,
+    onLoadError,
+    failed: result.source === src ? result.failed : false
+  };
+}
+
+// src/core/use-media-resolution.ts
+import { useMemo } from "react";
+function useMediaResolution(ref) {
+  const client = useMediaClient();
+  const refKey = stableRefKey(ref);
+  return useMemo(() => {
+    if (!ref) return { resolution: null, status: "empty", reason: null };
+    try {
+      const resolution = client.resolve(ref);
+      if (!resolution) return { resolution: null, status: "empty", reason: null };
+      return { resolution, status: "ready", reason: null };
+    } catch (err) {
+      return {
+        resolution: null,
+        status: "unavailable",
+        reason: client.classifyError(err)
+      };
+    }
+  }, [client, refKey]);
+}
+
+// src/react/inline-media-ref.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SIZE_PX = {
+  xs: 24,
+  sm: 32,
+  md: 64,
+  lg: 128,
+  xl: 256
+};
+var ROUNDED_CLASS = {
+  none: "",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full"
+};
+function resolveDimensions(size) {
+  if (typeof size === "object") return size;
+  if (size === "fill") return "fill";
+  const px = SIZE_PX[size];
+  return { width: px, height: px };
+}
+function inferElementType(ref, resolutionKind, override) {
+  if (override) return override;
+  if (ref && typeof ref === "object" && ref.mime_type) {
+    if (ref.mime_type.startsWith("video/")) return "video";
+    if (ref.mime_type.startsWith("audio/")) return "audio";
+  }
+  if (resolutionKind === "video") return "video";
+  if (resolutionKind === "audio") return "audio";
+  return "img";
+}
+function prettifyUrl(url) {
+  try {
+    const u = new URL(url);
+    const tail = `${u.pathname}${u.search}`;
+    return { host: u.host, tail: tail === "/" ? "" : tail };
+  } catch {
+    return { host: null, tail: url };
+  }
+}
+var INERT_PLAYBACK = {
+  useMediaElementSink(forward) {
+    return useCallback(
+      (node) => {
+        if (!forward) return;
+        if (typeof forward === "function") forward(node);
+        else forward.current = node;
+      },
+      [forward]
+    );
+  },
+  usePlaybackSession() {
+  }
+};
+function FallbackVisual({
+  kind,
+  dimensions,
+  rounded,
+  border,
+  className,
+  icon
+}) {
+  const isFill = dimensions === "fill";
+  const wrapperCls = cn(
+    "flex items-center justify-center bg-muted/60 text-muted-foreground",
+    ROUNDED_CLASS[rounded],
+    border === "subtle" && "border border-border",
+    kind === "skeleton" && "animate-pulse",
+    isFill && "w-full h-full",
+    className
+  );
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: wrapperCls,
+      style: isFill ? void 0 : { width: dimensions.width, height: dimensions.height },
+      "aria-hidden": kind === "skeleton",
+      children: kind === "icon" ? icon : null
+    }
+  );
+}
+function InformativeErrorFallback({
+  url,
+  alt,
+  elementType,
+  mediaRef,
+  dimensions,
+  rounded,
+  className
+}) {
+  const shortAxis = dimensions === "fill" ? Number.POSITIVE_INFINITY : Math.min(dimensions.width, dimensions.height);
+  const isCompact = dimensions !== "fill" && shortAxis < 64;
+  const isMidsize = shortAxis < 140;
+  const fileId = mediaRef && typeof mediaRef === "object" && "file_id" in mediaRef ? mediaRef.file_id ?? null : null;
+  const FailIcon = elementType === "video" ? VideoOffIcon : elementType === "audio" ? VolumeXIcon : ImageOffIcon;
+  const tooltip = [
+    `Failed to load ${elementType}`,
+    alt && `alt: ${alt}`,
+    `url: ${url}`,
+    fileId && `file_id: ${fileId}`
+  ].filter(Boolean).join("\n");
+  if (isCompact) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center bg-destructive/5 text-destructive border border-destructive/40 border-dashed",
+          ROUNDED_CLASS[rounded],
+          className
+        ),
+        style: { width: dimensions.width, height: dimensions.height },
+        role: "img",
+        "aria-label": `Failed to load ${elementType}${alt ? `: ${alt}` : ""}`,
+        title: tooltip,
+        children: /* @__PURE__ */ jsx3(FailIcon, { className: "h-1/2 w-1/2 max-h-5 max-w-5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    InformativeErrorPanel,
+    {
+      url,
+      alt,
+      elementType,
+      fileId,
+      dimensions,
+      rounded,
+      className,
+      compact: isMidsize,
+      icon: /* @__PURE__ */ jsx3(FailIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+      tooltip
+    }
+  );
+}
+function InformativeErrorPanel({
+  url,
+  alt,
+  elementType,
+  fileId,
+  dimensions,
+  rounded,
+  className,
+  compact,
+  icon,
+  tooltip
+}) {
+  const [copied, setCopied] = useState3(false);
+  const isFill = dimensions === "fill";
+  const { host, tail } = prettifyUrl(url);
+  const handleCopy = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      navigator.clipboard?.writeText(url).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }).catch(() => {
+      });
+    },
+    [url]
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-destructive/5 text-foreground border border-destructive/40 border-dashed overflow-hidden",
+        ROUNDED_CLASS[rounded],
+        compact ? "p-1.5 gap-0.5" : "p-2 gap-1",
+        isFill ? "w-full h-full" : "",
+        className
+      ),
+      style: isFill ? void 0 : { width: dimensions.width, height: dimensions.height },
+      role: "img",
+      "aria-label": `Failed to load ${elementType}${alt ? `: ${alt}` : ""}`,
+      title: tooltip,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5 text-destructive font-medium leading-tight",
+              compact ? "text-[10px]" : "text-xs"
+            ),
+            children: [
+              icon,
+              /* @__PURE__ */ jsx3("span", { className: "truncate", children: elementType === "img" ? "Image failed to load" : elementType === "video" ? "Video failed to load" : "Audio failed to load" })
+            ]
+          }
+        ),
+        alt && !compact && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "text-[11px] text-muted-foreground italic line-clamp-1",
+            title: alt,
+            children: alt
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              "flex items-end gap-1 mt-auto min-w-0",
+              compact ? "text-[9px]" : "text-[10px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3("div", { className: "font-mono text-muted-foreground truncate flex-1 min-w-0", children: host ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx3("span", { className: "text-foreground/80", children: host }),
+                tail && /* @__PURE__ */ jsx3("span", { className: "opacity-70", children: tail })
+              ] }) : /* @__PURE__ */ jsx3("span", { children: tail }) }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  className: cn(
+                    "shrink-0 p-0.5 rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-1 focus:ring-destructive/40",
+                    copied && "text-emerald-600 dark:text-emerald-500"
+                  ),
+                  "aria-label": copied ? "URL copied" : "Copy URL",
+                  title: copied ? "URL copied" : "Copy URL",
+                  children: copied ? /* @__PURE__ */ jsx3(CheckIcon, { className: "h-3 w-3", width: 12, height: 12 }) : /* @__PURE__ */ jsx3(CopyIcon, { className: "h-3 w-3", width: 12, height: 12 })
+                }
+              )
+            ]
+          }
+        ),
+        fileId && !compact && /* @__PURE__ */ jsx3("div", { className: "text-[9px] font-mono text-muted-foreground/70 truncate", children: fileId })
+      ]
+    }
+  );
+}
+function InlineMediaRef({
+  ref: mediaRef,
+  size = "md",
+  fit = "cover",
+  fallback = "icon",
+  fallbackIcon,
+  errorFallback = "info",
+  alt = "",
+  as,
+  controls = true,
+  autoPlay,
+  loop,
+  muted,
+  playsInline,
+  preload,
+  controlsList,
+  rounded = "md",
+  onClick,
+  onError,
+  onLoad,
+  mediaElementRef,
+  crossOrigin,
+  border = "none",
+  className
+}) {
+  const ports = useMediaHostPorts();
+  const { resolution, status, reason } = useMediaResolution(mediaRef);
+  const elementType = inferElementType(mediaRef, resolution?.kind, as);
+  const needsBlob = Boolean(
+    resolution && (resolution.transport === "blob" || crossOrigin && resolution.isCdn !== true)
+  );
+  const blob = useMediaBlob(needsBlob ? mediaRef : null);
+  const url = needsBlob ? blob.url : resolution?.src ?? null;
+  const recovery = useMediaLoadRecovery(url, {
+    recoverable: !needsBlob && resolution?.recoverable !== false,
+    onTerminal: (event) => onError?.(
+      event
+    )
+  });
+  const playback = ports.playbackSession ?? INERT_PLAYBACK;
+  const sessionElRef = useRef2(null);
+  const [isMediaPlaying, setIsMediaPlaying] = useState3(false);
+  const portSinkRef = playback.useMediaElementSink(
+    mediaElementRef
+  );
+  const sinkRef = (node) => {
+    sessionElRef.current = node;
+    portSinkRef(node);
+  };
+  const trackKey = useMemo2(() => {
+    if (mediaRef && typeof mediaRef === "object" && mediaRef.file_id) {
+      return mediaRef.file_id;
+    }
+    return typeof mediaRef === "string" ? mediaRef : void 0;
+  }, [mediaRef]);
+  playback.usePlaybackSession(
+    {
+      isPlaying: isMediaPlaying,
+      source: "file-media",
+      label: alt || "Media file",
+      trackKey
+    },
+    sessionElRef
+  );
+  const mediaSessionEvents = {
+    onPlay: () => setIsMediaPlaying(true),
+    onPause: () => setIsMediaPlaying(false),
+    onEnded: () => setIsMediaPlaying(false)
+  };
+  const mediaResolutionError = status === "unavailable" ? reason ?? "unknown" : blob.error ?? null;
+  const dimensions = resolveDimensions(size);
+  const isFill = dimensions === "fill";
+  const hasLoadError = recovery.failed;
+  const handleLoadError = recovery.onLoadError;
+  const defaultIcon = elementType === "video" ? /* @__PURE__ */ jsx3(FileVideoIcon, { className: "h-1/2 w-1/2" }) : elementType === "audio" ? /* @__PURE__ */ jsx3(FileAudioIcon, { className: "h-1/2 w-1/2" }) : mediaRef ? /* @__PURE__ */ jsx3(ImageIcon, { className: "h-1/2 w-1/2" }) : /* @__PURE__ */ jsx3(FileIcon, { className: "h-1/2 w-1/2" });
+  const unresolvedDisplayUrl = mediaRef && typeof mediaRef === "object" && mediaRef.file_id ? `file:${mediaRef.file_id}` : "unresolved-media";
+  if (!url) {
+    if (mediaResolutionError) {
+      if (errorFallback === null) return null;
+      if (errorFallback === "info") {
+        return /* @__PURE__ */ jsx3(
+          InformativeErrorFallback,
+          {
+            url: unresolvedDisplayUrl,
+            alt,
+            elementType,
+            mediaRef,
+            dimensions,
+            rounded,
+            className
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx3(
+        FallbackVisual,
+        {
+          kind: errorFallback,
+          dimensions,
+          rounded,
+          border,
+          className,
+          icon: fallbackIcon ?? defaultIcon
+        }
+      );
+    }
+    if (needsBlob && blob.loading) {
+      return /* @__PURE__ */ jsx3(
+        FallbackVisual,
+        {
+          kind: "skeleton",
+          dimensions,
+          rounded,
+          border,
+          className,
+          icon: null
+        }
+      );
+    }
+    if (!fallback) return null;
+    return /* @__PURE__ */ jsx3(
+      FallbackVisual,
+      {
+        kind: fallback,
+        dimensions,
+        rounded,
+        border,
+        className,
+        icon: fallbackIcon ?? defaultIcon
+      }
+    );
+  }
+  if (hasLoadError) {
+    if (errorFallback === null) return null;
+    if (errorFallback === "info") {
+      return /* @__PURE__ */ jsx3(
+        InformativeErrorFallback,
+        {
+          url,
+          alt,
+          elementType,
+          mediaRef,
+          dimensions,
+          rounded,
+          className
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx3(
+      FallbackVisual,
+      {
+        kind: errorFallback,
+        dimensions,
+        rounded,
+        border,
+        className,
+        icon: fallbackIcon ?? defaultIcon
+      }
+    );
+  }
+  const interactiveProps = onClick ? {
+    onClick,
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick(event);
+      }
+    },
+    role: "button",
+    tabIndex: 0,
+    className: cn(
+      "cursor-pointer",
+      "focus:outline-none focus:ring-2 focus:ring-primary/50"
+    )
+  } : {};
+  const baseCls = cn(
+    "block",
+    isFill && "w-full h-full",
+    ROUNDED_CLASS[rounded],
+    border === "subtle" && "border border-border",
+    onClick && "cursor-pointer",
+    interactiveProps.className,
+    className
+  );
+  const objectFitClass = fit === "cover" ? "object-cover" : fit === "contain" ? "object-contain" : "object-fill";
+  const sizeAttrs = isFill ? {} : { width: dimensions.width, height: dimensions.height };
+  if (elementType === "video") {
+    return /* @__PURE__ */ jsx3(
+      "video",
+      {
+        ref: sinkRef,
+        src: url,
+        ...sizeAttrs,
+        className: cn(baseCls, objectFitClass),
+        controls,
+        autoPlay,
+        loop,
+        muted,
+        playsInline,
+        preload,
+        controlsList,
+        onLoadedData: onLoad,
+        onError: handleLoadError,
+        crossOrigin,
+        ...mediaSessionEvents,
+        ...interactiveProps
+      },
+      recovery.retryKey
+    );
+  }
+  if (elementType === "audio") {
+    return /* @__PURE__ */ jsx3(
+      "audio",
+      {
+        ref: sinkRef,
+        src: url,
+        className: cn(baseCls),
+        controls,
+        autoPlay,
+        loop,
+        muted,
+        preload,
+        ...mediaSessionEvents,
+        onLoadedData: onLoad,
+        onError: handleLoadError,
+        crossOrigin,
+        ...interactiveProps
+      },
+      recovery.retryKey
+    );
+  }
+  const needsPlainImg = !!onLoad || !!mediaElementRef || !!crossOrigin;
+  const isCdnUrl = resolution?.isCdn ?? (url.startsWith("https://cdn.") || url.includes("/cdn/"));
+  const HostImage = ports.ImageComponent;
+  if (HostImage && isCdnUrl && !isFill && !needsPlainImg && !needsBlob) {
+    return /* @__PURE__ */ jsx3(
+      HostImage,
+      {
+        src: url,
+        alt,
+        width: dimensions.width,
+        height: dimensions.height,
+        className: cn(baseCls, objectFitClass),
+        onError: handleLoadError,
+        ...interactiveProps
+      },
+      recovery.retryKey
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "img",
+    {
+      ref: mediaElementRef,
+      src: url,
+      alt,
+      ...sizeAttrs,
+      className: cn(baseCls, objectFitClass),
+      onLoad,
+      onError: handleLoadError,
+      crossOrigin,
+      ...interactiveProps
+    },
+    recovery.retryKey
+  );
+}
+
+// src/react/media-thumbnail.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// src/core/use-thumbnail-source.ts
+import { useMemo as useMemo3 } from "react";
+function useThumbnailSource(ref, options = {}) {
+  const { thumbnailUrl, allowSourceFallback = true } = options;
+  const client = useMediaClient();
+  const { resolution } = useMediaResolution(ref);
+  const explicitThumb = useMemo3(() => {
+    if (!thumbnailUrl) return null;
+    try {
+      return client.resolve(thumbnailUrl);
+    } catch {
+      return null;
+    }
+  }, [client, thumbnailUrl]);
+  const needsBlob = allowSourceFallback && !explicitThumb && !resolution?.thumbnailSrc && resolution?.transport === "blob";
+  const blob = useMediaBlob(needsBlob ? ref : null);
+  if (explicitThumb) {
+    return {
+      src: explicitThumb.src,
+      mode: "thumbnail",
+      loading: false,
+      resolution,
+      recoverable: explicitThumb.recoverable !== false
+    };
+  }
+  if (resolution?.thumbnailSrc) {
+    return {
+      src: resolution.thumbnailSrc,
+      mode: "thumbnail",
+      loading: false,
+      resolution,
+      recoverable: resolution.recoverable !== false
+    };
+  }
+  if (allowSourceFallback && resolution) {
+    if (needsBlob) {
+      return {
+        src: blob.url,
+        mode: blob.url ? resolution.kind === "video" ? "live-video-poster" : "live-image" : "icon",
+        loading: blob.loading,
+        resolution,
+        recoverable: false
+      };
+    }
+    if (resolution.kind === "image") {
+      return {
+        src: resolution.src,
+        mode: "live-image",
+        loading: false,
+        resolution,
+        recoverable: resolution.recoverable !== false
+      };
+    }
+    if (resolution.kind === "video") {
+      return {
+        src: resolution.src,
+        mode: "live-video-poster",
+        loading: false,
+        resolution,
+        recoverable: resolution.recoverable !== false
+      };
+    }
+  }
+  return {
+    src: null,
+    mode: "icon",
+    loading: false,
+    resolution,
+    recoverable: false
+  };
+}
+
+// src/react/media-thumbnail.tsx
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+function MediaThumbnail({
+  mediaRef,
+  fileName,
+  mimeType = null,
+  thumbnailUrl,
+  iconSize = 48,
+  className,
+  rounded,
+  allowSourceFallback = true
+}) {
+  const source = useThumbnailSource(mediaRef, {
+    thumbnailUrl,
+    allowSourceFallback
+  });
+  const fallback = /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full items-center justify-center bg-muted/40", children: /* @__PURE__ */ jsx4(FileIcon2, { fileName, mimeType, size: iconSize }) });
+  let body = source.loading ? /* @__PURE__ */ jsx4("div", { className: "h-full w-full animate-pulse bg-muted" }) : fallback;
+  if (source.src) {
+    if (source.mode === "live-video-poster") {
+      body = /* @__PURE__ */ jsx4(
+        VideoPosterThumb,
+        {
+          url: source.src,
+          recoverable: source.recoverable,
+          fallback
+        }
+      );
+    } else {
+      body = /* @__PURE__ */ jsx4(
+        ImageThumb,
+        {
+          url: source.src,
+          alt: fileName,
+          recoverable: source.recoverable,
+          fallback
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn("relative overflow-hidden bg-muted/40", rounded, className),
+      children: body
+    }
+  );
+}
+function ImageThumb({
+  url,
+  alt,
+  recoverable,
+  fallback
+}) {
+  const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
+    recoverable
+  });
+  if (failed) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
+  return /* @__PURE__ */ jsx4(
+    "img",
+    {
+      src: url,
+      alt,
+      loading: "lazy",
+      className: "h-full w-full object-cover",
+      onError: onLoadError
+    },
+    retryKey
+  );
+}
+function VideoPosterThumb({
+  url,
+  recoverable,
+  fallback
+}) {
+  const { retryKey, onLoadError, failed } = useMediaLoadRecovery(url, {
+    recoverable
+  });
+  const ref = useRef3(null);
+  useEffect3(() => {
+    const v = ref.current;
+    if (!v) return void 0;
+    const onMeta = () => {
+      try {
+        v.currentTime = 0;
+      } catch {
+      }
+    };
+    v.addEventListener("loadedmetadata", onMeta);
+    return () => v.removeEventListener("loadedmetadata", onMeta);
+  }, []);
+  if (failed) return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
+  return /* @__PURE__ */ jsx4(
+    "video",
+    {
+      ref,
+      src: url,
+      className: "h-full w-full object-cover pointer-events-none",
+      preload: "metadata",
+      muted: true,
+      playsInline: true,
+      onError: onLoadError
+    },
+    retryKey
+  );
+}
+
+// src/react/use-media-dropzone.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useMemo as useMemo4,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+function matchesAccept(file, accept) {
+  if (!accept || accept.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const mime = file.type.toLowerCase();
+  return accept.some((pattern) => {
+    const p = pattern.trim().toLowerCase();
+    if (!p) return false;
+    if (p.startsWith(".")) return name.endsWith(p);
+    if (p.endsWith("/*")) return mime.startsWith(p.slice(0, -1));
+    return mime === p;
+  });
+}
+function useMediaDropzone(options) {
+  const {
+    onFiles,
+    accept,
+    maxSize,
+    onRejected,
+    enablePaste = true,
+    pickerEventName,
+    disabled = false,
+    multiple = true
+  } = options;
+  const [isDragActive, setIsDragActive] = useState4(false);
+  const [pasteHighlight, setPasteHighlight] = useState4(false);
+  const dragDepth = useRef4(0);
+  const inputRef = useRef4(null);
+  const onFilesRef = useRef4(onFiles);
+  onFilesRef.current = onFiles;
+  const onRejectedRef = useRef4(onRejected);
+  onRejectedRef.current = onRejected;
+  const acceptKey = accept?.join(",") ?? "";
+  const filterFiles = useCallback2(
+    (files) => {
+      const accepted = [];
+      const rejected = [];
+      for (const file of files) {
+        if (!matchesAccept(file, acceptKey ? acceptKey.split(",") : void 0)) {
+          rejected.push({ file, reason: "type" });
+        } else if (maxSize != null && file.size > maxSize) {
+          rejected.push({ file, reason: "size" });
+        } else {
+          accepted.push(file);
+        }
+      }
+      if (rejected.length) onRejectedRef.current?.(rejected);
+      return accepted;
+    },
+    [acceptKey, maxSize]
+  );
+  const emit = useCallback2(
+    (files) => {
+      const accepted = filterFiles(files);
+      if (accepted.length) onFilesRef.current(accepted);
+    },
+    [filterFiles]
+  );
+  const openPicker = useCallback2(() => {
+    if (!disabled) inputRef.current?.click();
+  }, [disabled]);
+  useEffect4(() => {
+    if (!pickerEventName || typeof window === "undefined") return void 0;
+    const handler = () => openPicker();
+    window.addEventListener(pickerEventName, handler);
+    return () => window.removeEventListener(pickerEventName, handler);
+  }, [openPicker, pickerEventName]);
+  useEffect4(() => {
+    if (!enablePaste || disabled || typeof window === "undefined") {
+      return void 0;
+    }
+    const handler = (event) => {
+      if (!event.clipboardData?.items) return;
+      const images = [];
+      for (const item of Array.from(event.clipboardData.items)) {
+        if (item.type.startsWith("image/")) {
+          const blob = item.getAsFile();
+          if (!blob) continue;
+          const ext = blob.type.split("/")[1] ?? "png";
+          const name = `pasted-${Date.now()}.${ext}`;
+          images.push(new File([blob], name, { type: blob.type }));
+        }
+      }
+      if (images.length > 0) {
+        event.preventDefault();
+        setPasteHighlight(true);
+        setTimeout(() => setPasteHighlight(false), 400);
+        emit(images);
+      }
+    };
+    window.addEventListener("paste", handler);
+    return () => window.removeEventListener("paste", handler);
+  }, [enablePaste, disabled, emit]);
+  const getRootProps = useCallback2(
+    () => ({
+      onDragEnter: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+        dragDepth.current += 1;
+        setIsDragActive(true);
+      },
+      onDragOver: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+      },
+      onDragLeave: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+        dragDepth.current = Math.max(0, dragDepth.current - 1);
+        if (dragDepth.current === 0) setIsDragActive(false);
+      },
+      onDrop: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+        dragDepth.current = 0;
+        setIsDragActive(false);
+        const files = Array.from(event.dataTransfer?.files ?? []);
+        if (files.length) emit(multiple ? files : files.slice(0, 1));
+      }
+    }),
+    [disabled, emit, multiple]
+  );
+  const inputAccept = useMemo4(
+    () => acceptKey.length ? acceptKey : void 0,
+    [acceptKey]
+  );
+  const getInputProps = useCallback2(
+    () => ({
+      ref: (node) => {
+        inputRef.current = node;
+      },
+      type: "file",
+      multiple,
+      accept: inputAccept,
+      tabIndex: -1,
+      style: { display: "none" },
+      onChange: (event) => {
+        const files = Array.from(event.target.files ?? []);
+        event.target.value = "";
+        if (files.length) emit(files);
+      }
+    }),
+    [emit, inputAccept, multiple]
+  );
+  return { getRootProps, getInputProps, isDragActive, pasteHighlight, openPicker };
+}
+
+// src/react/file-upload-dropzone.tsx
+import { useCallback as useCallback4 } from "react";
+
+// src/core/use-media-upload.ts
+import { useCallback as useCallback3, useRef as useRef5, useState as useState5 } from "react";
+var entrySeq = 0;
+function useMediaUpload() {
+  const client = useMediaClient();
+  const [uploading, setUploading] = useState5(false);
+  const [progress, setProgress] = useState5(null);
+  const [result, setResult] = useState5(null);
+  const [error, setError] = useState5(null);
+  const [entries, setEntries] = useState5([]);
+  const activeCount = useRef5(0);
+  const patchEntry = useCallback3(
+    (id, patch) => {
+      setEntries(
+        (current) => current.map((e) => e.id === id ? { ...e, ...patch } : e)
+      );
+    },
+    []
+  );
+  const upload = useCallback3(
+    async (file, opts = {}) => {
+      const id = `up-${++entrySeq}`;
+      const fileName = opts.fileName ?? (file instanceof File ? file.name : "file");
+      setEntries((current) => [
+        ...current,
+        {
+          id,
+          fileName,
+          fileSize: file.size,
+          bytesUploaded: 0,
+          status: "uploading",
+          error: null,
+          fileId: null,
+          completedAt: null
+        }
+      ]);
+      activeCount.current += 1;
+      setUploading(true);
+      setError(null);
+      setProgress(null);
+      try {
+        const uploaded = await client.upload(file, {
+          ...opts,
+          onProgress: (loaded, total) => {
+            setProgress({ loaded, total, ratio: total > 0 ? loaded / total : 0 });
+            patchEntry(id, { bytesUploaded: loaded });
+            opts.onProgress?.(loaded, total);
+          }
+        });
+        setResult(uploaded);
+        patchEntry(id, {
+          status: "success",
+          fileId: uploaded.fileId,
+          bytesUploaded: file.size,
+          completedAt: Date.now()
+        });
+        return uploaded;
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        patchEntry(id, {
+          status: "error",
+          error: e.message,
+          completedAt: Date.now()
+        });
+        throw e;
+      } finally {
+        activeCount.current -= 1;
+        if (activeCount.current <= 0) setUploading(false);
+      }
+    },
+    [client, patchEntry]
+  );
+  const uploadMany = useCallback3(
+    async (files, opts = {}) => {
+      if (client.uploadMany) {
+        activeCount.current += 1;
+        setUploading(true);
+        try {
+          return await client.uploadMany(files, opts);
+        } finally {
+          activeCount.current -= 1;
+          if (activeCount.current <= 0) setUploading(false);
+        }
+      }
+      const uploaded = [];
+      const failed = [];
+      for (const file of files) {
+        try {
+          const one = await upload(file, opts);
+          uploaded.push(one.fileId);
+        } catch (err) {
+          failed.push({
+            name: file.name,
+            error: err instanceof Error ? err.message : String(err)
+          });
+        }
+      }
+      return { uploaded, failed, cancelled: false };
+    },
+    [client, upload]
+  );
+  const clearEntry = useCallback3((id) => {
+    setEntries((current) => current.filter((e) => e.id !== id));
+  }, []);
+  const reset = useCallback3(() => {
+    setResult(null);
+    setError(null);
+    setProgress(null);
+    setEntries([]);
+  }, []);
+  return {
+    upload,
+    uploadMany,
+    uploading,
+    progress,
+    result,
+    error,
+    entries,
+    clearEntry,
+    reset
+  };
+}
+
+// src/react/upload-progress-list.tsx
+import { memo, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var AUTO_DISMISS_MS = 1e4;
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unit = -1;
+  do {
+    value /= 1024;
+    unit += 1;
+  } while (value >= 1024 && unit < units.length - 1);
+  return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit] ?? "TB"}`;
+}
+function UploadProgressListImpl({
+  uploads,
+  onDismiss,
+  onOpenFile,
+  className
+}) {
+  const [hovered, setHovered] = useState6(false);
+  const activeCount = uploads.filter((u) => u.status === "uploading").length;
+  const successCount = uploads.filter((u) => u.status === "success").length;
+  const errorCount = uploads.filter((u) => u.status === "error").length;
+  const timersRef = useRef6(
+    /* @__PURE__ */ new Map()
+  );
+  const onDismissRef = useRef6(onDismiss);
+  onDismissRef.current = onDismiss;
+  useEffect5(() => {
+    const timers = timersRef.current;
+    if (hovered) {
+      timers.forEach((t) => clearTimeout(t));
+      timers.clear();
+      return;
+    }
+    for (const u of uploads) {
+      if (u.status !== "success") continue;
+      if (timers.has(u.id)) continue;
+      const elapsed = u.completedAt ? Date.now() - u.completedAt : 0;
+      const remaining = Math.max(0, AUTO_DISMISS_MS - elapsed);
+      const handle = setTimeout(() => {
+        timers.delete(u.id);
+        onDismissRef.current(u.id);
+      }, remaining);
+      timers.set(u.id, handle);
+    }
+    const liveSuccessIds = new Set(
+      uploads.filter((u) => u.status === "success").map((u) => u.id)
+    );
+    for (const [id, handle] of timers) {
+      if (!liveSuccessIds.has(id)) {
+        clearTimeout(handle);
+        timers.delete(id);
+      }
+    }
+  }, [uploads, hovered]);
+  useEffect5(() => {
+    const timers = timersRef.current;
+    return () => {
+      timers.forEach((t) => clearTimeout(t));
+      timers.clear();
+    };
+  }, []);
+  if (uploads.length === 0) return null;
+  const headerLabel = activeCount > 0 ? `Uploading ${activeCount} file${activeCount === 1 ? "" : "s"}\u2026` : errorCount > 0 && successCount === 0 ? `${errorCount} upload${errorCount === 1 ? "" : "s"} failed` : `Uploaded ${successCount} file${successCount === 1 ? "" : "s"}`;
+  const completedIds = uploads.filter((u) => u.status === "success" || u.status === "error").map((u) => u.id);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-lg border bg-background/95 shadow-lg backdrop-blur",
+        className
+      ),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-label": "Uploads",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx5("span", { className: "truncate text-xs font-medium text-foreground", children: headerLabel }),
+          completedIds.length > 0 ? /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                for (const id of completedIds) onDismiss(id);
+              },
+              className: "shrink-0 rounded px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground",
+              children: "Clear"
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx5("ul", { className: "max-h-72 space-y-1 overflow-y-auto p-2", children: uploads.map((u) => {
+          const percent = u.fileSize > 0 ? Math.min(100, Math.round(u.bytesUploaded / u.fileSize * 100)) : 0;
+          const done = u.status === "success";
+          const failed = u.status === "error";
+          const canOpen = done && !!u.fileId && !!onOpenFile;
+          return /* @__PURE__ */ jsxs3(
+            "li",
+            {
+              className: cn(
+                "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs",
+                canOpen && "cursor-pointer hover:bg-accent/60"
+              ),
+              onClick: canOpen ? () => onOpenFile(u.fileId) : void 0,
+              children: [
+                /* @__PURE__ */ jsx5(FileIcon2, { fileName: u.fileName, size: 18, className: "shrink-0" }),
+                /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx5("span", { className: "truncate font-medium text-foreground", children: u.fileName }),
+                    /* @__PURE__ */ jsx5("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: failed ? "Failed" : done ? "Done" : `${percent}%` })
+                  ] }),
+                  done ? null : /* @__PURE__ */ jsx5("div", { className: "mt-1 h-1 w-full rounded bg-muted", children: /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      className: cn(
+                        "h-1 rounded transition-all",
+                        failed ? "bg-destructive" : "bg-primary"
+                      ),
+                      style: { width: failed ? "100%" : `${percent}%` }
+                    }
+                  ) }),
+                  failed && u.error ? /* @__PURE__ */ jsx5("p", { className: "mt-0.5 truncate text-[10px] text-destructive", children: u.error }) : !done ? /* @__PURE__ */ jsxs3("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: [
+                    formatFileSize(u.bytesUploaded),
+                    " /",
+                    " ",
+                    formatFileSize(u.fileSize)
+                  ] }) : null
+                ] }),
+                canOpen ? /* @__PURE__ */ jsxs3("span", { className: "flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium text-primary", children: [
+                  /* @__PURE__ */ jsx5(ExternalLinkIcon, { className: "h-3 w-3", width: 12, height: 12 }),
+                  "Open"
+                ] }) : done ? /* @__PURE__ */ jsx5(
+                  CheckCircle2Icon,
+                  {
+                    className: "h-4 w-4 shrink-0 text-emerald-500",
+                    width: 16,
+                    height: 16
+                  }
+                ) : failed ? /* @__PURE__ */ jsx5(
+                  AlertCircleIcon,
+                  {
+                    className: "h-4 w-4 shrink-0 text-destructive",
+                    width: 16,
+                    height: 16
+                  }
+                ) : null,
+                done || failed ? /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onDismiss(u.id);
+                    },
+                    "aria-label": "Dismiss",
+                    className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+                    children: /* @__PURE__ */ jsx5(XIcon, { className: "h-3 w-3", width: 12, height: 12 })
+                  }
+                ) : null
+              ]
+            },
+            u.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+var UploadProgressList = memo(UploadProgressListImpl);
+
+// src/react/file-upload-dropzone.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function FileUploadDropzone({
+  uploadOptions,
+  accept,
+  maxSize,
+  enablePaste = true,
+  mode = "overlay",
+  children,
+  className,
+  actions,
+  onUploadStart,
+  onUploaded,
+  onError,
+  onOpenFile,
+  pickerEventName
+}) {
+  const { uploadMany, entries, clearEntry } = useMediaUpload();
+  const handleUpload = useCallback4(
+    async (files) => {
+      if (!files.length) return;
+      try {
+        onUploadStart?.(files);
+        const { uploaded, failed } = await uploadMany(files, uploadOptions);
+        if (uploaded.length && onUploaded) onUploaded(uploaded);
+        if (failed.length && onError) {
+          const message = failed.map((f) => `${f.name}: ${f.error}`).join("; ");
+          onError(message);
+        }
+      } catch (err) {
+        onError?.(err instanceof Error ? err.message : String(err));
+      }
+    },
+    [uploadMany, uploadOptions, onUploadStart, onUploaded, onError]
+  );
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    pasteHighlight,
+    openPicker
+  } = useMediaDropzone({
+    onFiles: (files) => void handleUpload(files),
+    accept,
+    maxSize,
+    enablePaste,
+    pickerEventName
+  });
+  const highlighted = isDragActive || pasteHighlight;
+  const renderedChildren = typeof children === "function" ? children({ openLocalPicker: openPicker, uploadFiles: handleUpload }) : children;
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ...getRootProps(),
+        className: cn(
+          "flex flex-col items-center justify-center gap-3 rounded-md border-2 border-dashed p-6",
+          "text-sm text-muted-foreground",
+          highlighted ? "border-primary bg-primary/5" : "border-border",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx6("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsx6(UploadIcon, { className: "h-8 w-8", width: 32, height: 32, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx6("p", { children: "Drag & drop files here." }),
+            enablePaste ? /* @__PURE__ */ jsx6("p", { className: "text-xs mt-1 opacity-75", children: "You can also paste an image with \u2318V." }) : null
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: openPicker,
+              className: "rounded-md border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent",
+              children: "Browse files"
+            }
+          ),
+          actions,
+          entries.length > 0 ? /* @__PURE__ */ jsx6(
+            UploadProgressList,
+            {
+              uploads: entries,
+              onDismiss: clearEntry,
+              onOpenFile,
+              className: "w-full"
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...getRootProps(),
+      className: cn("relative h-full w-full", className),
+      "data-drop-active": highlighted ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx6("input", { ...getInputProps() }),
+        renderedChildren,
+        highlighted ? /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed border-primary bg-primary/10",
+            "aria-live": "polite",
+            children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-2 text-primary", children: [
+              /* @__PURE__ */ jsx6(UploadIcon, { className: "h-10 w-10", width: 40, height: 40, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx6("span", { className: "font-medium", children: "Drop to upload" })
+            ] })
+          }
+        ) : null,
+        entries.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "absolute bottom-3 right-3 z-20 w-80 max-w-[90%]", children: /* @__PURE__ */ jsx6(
+          UploadProgressList,
+          {
+            uploads: entries,
+            onDismiss: clearEntry,
+            onOpenFile
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+// src/react/media-action-toolbar.tsx
+import { useState as useState8 } from "react";
+
+// src/core/use-media-actions.ts
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState7 } from "react";
+function useMediaActions(ref, options = {}) {
+  const ports = useMediaHostPorts();
+  const { resolution } = useMediaResolution(ref);
+  const [busy, setBusy] = useState7(null);
+  const [lastError, setLastError] = useState7(null);
+  const actions = ports.actions;
+  const { fileName, alt } = options;
+  const context = useMemo5(() => {
+    if (!ref) return null;
+    return { ref, resolution, fileName, alt };
+  }, [ref, resolution, fileName, alt]);
+  const isAvailable = useCallback5(
+    (kind) => {
+      if (!context || !actions) return false;
+      if (kind === "share") return Boolean(actions.share || actions.SharePopover);
+      return Boolean(actions[kind]);
+    },
+    [context, actions]
+  );
+  const run = useCallback5(
+    async (kind) => {
+      if (!context || !actions) return;
+      const handler = actions[kind];
+      if (!handler) return;
+      setBusy(kind);
+      setLastError(null);
+      try {
+        await handler(context);
+      } catch (err) {
+        setLastError({
+          kind,
+          message: err instanceof Error ? err.message : String(err)
+        });
+      } finally {
+        setBusy(null);
+      }
+    },
+    [context, actions]
+  );
+  return {
+    context,
+    isAvailable,
+    run,
+    busy,
+    lastError,
+    SharePopover: actions?.SharePopover ?? null
+  };
+}
+
+// src/react/media-action-toolbar.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ACTION_META = {
+  share: { label: "Share", Icon: Share2Icon },
+  download: { label: "Download", Icon: DownloadIcon },
+  copy: { label: "Copy", Icon: CopyIcon },
+  open: { label: "Open", Icon: ExternalLinkIcon }
+};
+var DEFAULT_ORDER = ["share", "download", "copy", "open"];
+function MediaActionToolbar({
+  mediaRef,
+  fileName,
+  alt,
+  actions = DEFAULT_ORDER,
+  hideUnavailable = false,
+  className,
+  buttonClassName
+}) {
+  const state = useMediaActions(mediaRef, { fileName, alt });
+  const [shareOpen, setShareOpen] = useState8(false);
+  const SharePopover = state.SharePopover;
+  const visible = hideUnavailable ? actions.filter((kind) => state.isAvailable(kind)) : actions;
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsxs5("div", { className: cn("relative inline-flex items-center gap-1", className), children: [
+    visible.map((kind) => {
+      const { label, Icon } = ACTION_META[kind];
+      const available = state.isAvailable(kind);
+      const busy = state.busy === kind;
+      return /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          title: label,
+          disabled: !available || busy,
+          onClick: () => {
+            if (kind === "share" && SharePopover) {
+              setShareOpen((open) => !open);
+              return;
+            }
+            void state.run(kind);
+          },
+          className: cn(
+            "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors",
+            available ? "hover:bg-accent hover:text-foreground" : "opacity-40 cursor-not-allowed",
+            busy && "animate-pulse",
+            buttonClassName
+          ),
+          children: /* @__PURE__ */ jsx7(Icon, { className: "h-4 w-4", width: 16, height: 16 })
+        },
+        kind
+      );
+    }),
+    state.lastError ? /* @__PURE__ */ jsxs5(
+      "span",
+      {
+        role: "status",
+        className: "ml-1 max-w-48 truncate text-[11px] text-destructive",
+        title: state.lastError.message,
+        children: [
+          ACTION_META[state.lastError.kind].label,
+          " failed"
+        ]
+      }
+    ) : null,
+    shareOpen && SharePopover && state.context ? /* @__PURE__ */ jsx7("div", { className: "absolute right-0 top-full z-30 mt-1", children: /* @__PURE__ */ jsx7(
+      SharePopover,
+      {
+        context: state.context,
+        onClose: () => setShareOpen(false)
+      }
+    ) }) : null
+  ] });
+}
+
+// src/react/media-lightbox.tsx
+import { useEffect as useEffect6 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function MediaLightbox({
+  open,
+  onClose,
+  mediaRef,
+  fileName,
+  alt,
+  as,
+  actions,
+  hideUnavailableActions = false,
+  headerExtra,
+  className
+}) {
+  useEffect6(() => {
+    if (!open || typeof window === "undefined") return void 0;
+    const handler = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": fileName ?? alt ?? "Media viewer",
+      className: cn(
+        "fixed inset-0 z-50 flex flex-col bg-black/80 backdrop-blur-sm",
+        className
+      ),
+      onClick: onClose,
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: "flex items-center justify-between gap-2 p-3",
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsx8("span", { className: "truncate text-sm font-medium text-white/90", children: fileName ?? alt ?? "" }),
+                headerExtra
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx8(
+                  MediaActionToolbar,
+                  {
+                    mediaRef,
+                    fileName,
+                    alt,
+                    actions,
+                    hideUnavailable: hideUnavailableActions,
+                    buttonClassName: "text-white/80 hover:bg-white/10 hover:text-white"
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Close",
+                    onClick: onClose,
+                    className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-white/80 transition-colors hover:bg-white/10 hover:text-white",
+                    children: /* @__PURE__ */ jsx8(XIcon, { className: "h-4 w-4", width: 16, height: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "flex min-h-0 flex-1 items-center justify-center p-4",
+            onClick: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsx8("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx8(
+              InlineMediaRef,
+              {
+                ref: mediaRef,
+                size: "fill",
+                fit: "contain",
+                rounded: "none",
+                alt: alt ?? fileName ?? "",
+                as
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AlertCircleIcon,
+  ArchiveIcon,
+  BracesIcon,
+  CheckCircle2Icon,
+  CheckIcon,
+  CodeIcon,
+  CopyIcon,
+  DatabaseIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+  FileAudioIcon,
+  FileCodeIcon,
+  FileIcon2 as FileIcon,
+  FileJsonIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileTypeIcon,
+  FileUploadDropzone,
+  FileVideoIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  ImageIcon,
+  ImageOffIcon,
+  InlineMediaRef,
+  MediaActionToolbar,
+  MediaLightbox,
+  MediaThumbnail,
+  MusicIcon,
+  PackageBoxIcon,
+  PenToolIcon,
+  Share2Icon,
+  SubtitlesIcon,
+  UploadIcon,
+  UploadProgressList,
+  VideoIcon,
+  VideoOffIcon,
+  VolumeXIcon,
+  XIcon,
+  cn,
+  formatFileSize,
+  useMediaDropzone
+};
+//# sourceMappingURL=react.js.map