react-os-shell 3.10.1 → 3.11.2

package/dist/index.js

@@ -1,26 +1,26 @@
 import { subscribePomo, getPomoSnapshot } from './chunk-VGJ3KCOP.js';
 export { setShellTodoProvider } from './chunk-VGJ3KCOP.js';
-import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-L5SPKS76.js';
-export { Breadcrumbs } from './chunk-L5SPKS76.js';
+import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-P3DVY4XJ.js';
+export { Breadcrumbs } from './chunk-P3DVY4XJ.js';
 import { SidebarLayout } from './chunk-YG45DAUT.js';
 export { SidebarLayout } from './chunk-YG45DAUT.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-WEQXKNOA.js';
-export { ImageAnnotator_default as ImageAnnotator } from './chunk-WEQXKNOA.js';
+import { setPdfPreview } from './chunk-BI5XBNI5.js';
+export { ImageAnnotator_default as ImageAnnotator } from './chunk-BI5XBNI5.js';
 import { toast_default } from './chunk-VENYVK3L.js';
 export { toast_default as toast } from './chunk-VENYVK3L.js';
-import { EditableGrid } from './chunk-YPIDICFR.js';
-export { EditableGrid } from './chunk-YPIDICFR.js';
+import { EditableGrid } from './chunk-OKFJBJY6.js';
+export { EditableGrid } from './chunk-OKFJBJY6.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
-import { APP_VERSION, VERSION } from './chunk-SRFLPGGO.js';
-export { VERSION } from './chunk-SRFLPGGO.js';
+import { APP_VERSION, VERSION } from './chunk-NZLE6YR6.js';
+export { VERSION } from './chunk-NZLE6YR6.js';
 import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, CancelButton, setWindowPosition, ThumbCard, activateModal } from './chunk-HLWEKEKD.js';
 export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-HLWEKEKD.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-ZF6AYO4G.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-ZF6AYO4G.js';
-import { createContext, lazy, forwardRef, useCallback, useState, useRef, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, Children, useId, useSyncExternalStore } from 'react';
+import { createContext, lazy, forwardRef, useCallback, useState, useRef, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, useId, Children, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -591,15 +591,6 @@ function SidebarActionButton({
     }
   );
 }
-function useClickOutside(ref, onClose) {
-  useEffect(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [ref, onClose]);
-}
 
 // src/forms/styles.ts
 var INPUT_BASE = "block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30";
@@ -608,15 +599,43 @@ var INPUT_DISABLED = "disabled:cursor-not-allowed disabled:opacity-60";
 function inputClasses(opts) {
   return [INPUT_BASE, opts?.invalid ? INPUT_INVALID : "", INPUT_DISABLED, opts?.className ?? ""].filter(Boolean).join(" ");
 }
-function useDropdownAlignment(triggerRef, open, maxWidth) {
-  const [alignRight, setAlignRight] = useState(false);
+var POPUP_MAX_WIDTH = 448;
+var MENU_MAX_HEIGHT = 240;
+var MENU_GAP = 4;
+var VIEWPORT_MARGIN = 8;
+function useDropdownPosition(triggerRef, open) {
+  const [pos, setPos] = useState(null);
   useLayoutEffect(() => {
-    if (!open) return;
-    const rect = triggerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    setAlignRight(window.innerWidth - rect.left < maxWidth);
-  }, [open, maxWidth, triggerRef]);
-  return alignRight;
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const compute = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP - VIEWPORT_MARGIN;
+      const spaceAbove = rect.top - MENU_GAP - VIEWPORT_MARGIN;
+      const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT, 160) && spaceAbove > spaceBelow;
+      const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT, placeAbove ? spaceAbove : spaceBelow));
+      const next = { minWidth: rect.width, maxHeight };
+      if (window.innerWidth - rect.left < POPUP_MAX_WIDTH) {
+        next.right = Math.max(VIEWPORT_MARGIN, window.innerWidth - rect.right);
+      } else {
+        next.left = Math.max(VIEWPORT_MARGIN, rect.left);
+      }
+      if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP;
+      else next.top = rect.bottom + MENU_GAP;
+      setPos(next);
+    };
+    compute();
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open, triggerRef]);
+  return pos;
 }
 function ClearButton({ onClear, ariaLabel = "Clear selection" }) {
   return /* @__PURE__ */ jsx(
@@ -655,6 +674,7 @@ function SearchableSelect({
   };
   const wrapRef = useRef(null);
   const triggerRef = useRef(null);
+  const menuRef = useRef(null);
   const adornRef = useRef(null);
   const [adornPad, setAdornPad] = useState(null);
   useLayoutEffect(() => {
@@ -665,20 +685,26 @@ function SearchableSelect({
     const w = adornRef.current?.offsetWidth ?? 0;
     setAdornPad(w ? w + (value && !disabled ? 32 : 8) + 6 : null);
   });
-  const POPUP_MAX_WIDTH = 448;
-  const alignRight = useDropdownAlignment(triggerRef, open, POPUP_MAX_WIDTH);
+  const menuPos = useDropdownPosition(triggerRef, open);
   const selectedLabel = useMemo(() => {
     const match = options.find((o) => o.value === value);
     if (match) return match.label;
     return allowFreeText ? value : "";
   }, [options, value, allowFreeText]);
-  useClickOutside(wrapRef, () => {
-    if (allowFreeText && search.trim() && search.trim() !== value) {
-      onChange(search.trim());
-    }
-    setOpen(false);
-    setSearch("");
-  });
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (wrapRef.current?.contains(t) || menuRef.current?.contains(t)) return;
+      if (allowFreeText && search.trim() && search.trim() !== value) {
+        onChange(search.trim());
+      }
+      setOpen(false);
+      setSearch("");
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, allowFreeText, search, value, onChange]);
   const dedupedOptions = useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     const out = [];
@@ -749,29 +775,45 @@ function SearchableSelect({
       setSearch("");
     } }),
     rightAdornment && !open && /* @__PURE__ */ jsx("div", { ref: adornRef, className: `absolute top-1/2 -translate-y-1/2 ${value && !disabled ? "right-8" : "right-2"} flex items-center gap-1 flex-nowrap justify-end pointer-events-none`, children: rightAdornment }),
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `absolute z-[200] mt-1 rounded-2xl overflow-hidden ${alignRight ? "right-0" : "left-0"} min-w-full max-w-[28rem] w-max`,
-        style: glassStyle(),
-        children: /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: "No matches" }) : filtered.map((o) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onMouseDown: () => {
-              onChange(o.value);
-              setOpen(false);
-              setSearch("");
-            },
-            className: `w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 flex items-center justify-between gap-2 whitespace-nowrap ${value === o.value ? "text-blue-600 font-medium bg-blue-50/50" : "text-gray-700"}`,
-            children: [
-              /* @__PURE__ */ jsx("span", { children: o.label }),
-              o.sublabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 shrink-0", children: o.sublabel })
-            ]
+    open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          className: "fixed z-[400] rounded-2xl overflow-hidden",
+          style: {
+            left: menuPos?.left,
+            right: menuPos?.right,
+            top: menuPos?.top,
+            bottom: menuPos?.bottom,
+            minWidth: menuPos?.minWidth,
+            maxWidth: POPUP_MAX_WIDTH,
+            width: "max-content",
+            // Hidden for the first paint until the layout effect measures the
+            // trigger, so the menu never flashes at (0,0).
+            visibility: menuPos ? void 0 : "hidden",
+            ...glassStyle()
           },
-          o.value
-        )) })
-      }
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", style: { maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: "No matches" }) : filtered.map((o) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onMouseDown: () => {
+                onChange(o.value);
+                setOpen(false);
+                setSearch("");
+              },
+              className: `w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 flex items-center justify-between gap-2 whitespace-nowrap ${value === o.value ? "text-blue-600 font-medium bg-blue-50/50" : "text-gray-700"}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: o.label }),
+                o.sublabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 shrink-0", children: o.sublabel })
+              ]
+            },
+            o.value
+          )) })
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -2574,6 +2616,15 @@ function useTheme() {
   }, [accentColor, customBgColor, customTitleColor, customWindowColor, customButtonColor]);
   return { theme: saved, resolved };
 }
+function useClickOutside(ref, onClose) {
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [ref, onClose]);
+}
 function StartupAnimation({ onComplete, ready = false, productName = "react-os-shell", subtitle }) {
   const [phase, setPhase] = useState("logo");
   const [minTimePassed, setMinTimePassed] = useState(false);
@@ -6436,6 +6487,7 @@ var Radio_default = Radio;
 function FormField({
   label,
   htmlFor,
+  labelId,
   hint,
   error,
   required,
@@ -6443,12 +6495,12 @@ function FormField({
   children
 }) {
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    label && /* @__PURE__ */ jsxs("label", { htmlFor, className: "mb-1 block text-xs font-medium text-gray-600", children: [
+    label && /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor, className: "mb-1 block text-xs font-medium text-gray-600", children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
     ] }),
     children,
-    error ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-gray-400", children: hint }) : null
+    error ? /* @__PURE__ */ jsx("p", { id: htmlFor ? `${htmlFor}-error` : void 0, className: "mt-1 text-[11px] text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { id: htmlFor ? `${htmlFor}-hint` : void 0, className: "mt-1 text-[11px] text-gray-400", children: hint }) : null
   ] });
 }
 function Label({ required, children, className = "", ...rest }) {
@@ -6457,6 +6509,449 @@ function Label({ required, children, className = "", ...rest }) {
     required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
   ] });
 }
+function mediaFileName(url) {
+  const path = (url || "").split("?")[0].split("#")[0];
+  const last = path.substring(path.lastIndexOf("/") + 1);
+  try {
+    return decodeURIComponent(last.replace(/^[0-9a-f]{32}_/i, "")) || last || "media";
+  } catch {
+    return last || "media";
+  }
+}
+var VIDEO_EXT_RE = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?|#|$)/i;
+function isVideoUrl(url, accept = "") {
+  if (!url) return false;
+  const acceptsVideo = accept.includes("video");
+  const acceptsImage = accept.includes("image") || accept === "*" || accept === "";
+  return VIDEO_EXT_RE.test(url) || acceptsVideo && !acceptsImage;
+}
+function Spinner2({ className = "h-5 w-5" }) {
+  return /* @__PURE__ */ jsxs("svg", { className: `${className} animate-spin text-gray-400`, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+  ] });
+}
+function UploadGlyph({ className = "h-6 w-6" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 15V4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 8l4-4 4 4" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" })
+      ]
+    }
+  );
+}
+function MediaUploadField({
+  value,
+  onChange,
+  onPick,
+  label,
+  hint,
+  error,
+  required,
+  className,
+  accept = "image/*",
+  fit = "cover",
+  height = 112,
+  placeholder,
+  cta = "Choose from library or upload",
+  acceptHint,
+  showFilename = true,
+  allowReplace = true,
+  allowRemove = true,
+  replaceLabel = "Replace",
+  removeLabel = "Remove",
+  busy = false,
+  busyLabel = "Uploading\u2026",
+  disabled = false
+}) {
+  const inputRef = useRef(null);
+  const [dragOver, setDragOver] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const fieldId = useId();
+  const objectUrlRef = useRef(null);
+  const [videoBlobUrl, setVideoBlobUrl] = useState(null);
+  useEffect(() => () => {
+    if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+  }, []);
+  const locked = disabled || busy;
+  const acceptsVideo = accept.includes("video");
+  const acceptsImage = accept.includes("image") || accept === "*" || accept === "";
+  const isVideo = !!value && (isVideoUrl(value, accept) || value === videoBlobUrl);
+  const kindWord = acceptsVideo && !acceptsImage ? "video" : acceptsImage && !acceptsVideo ? "image" : "file";
+  const dimLine = placeholder ?? `Upload ${kindWord === "image" ? "an image" : `a ${kindWord}`}`;
+  const emitObjectUrl = (file) => {
+    if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+    const url = URL.createObjectURL(file);
+    objectUrlRef.current = url;
+    setVideoBlobUrl(file.type.startsWith("video/") ? url : null);
+    onChange(url);
+  };
+  const clearValue = () => {
+    if (objectUrlRef.current) {
+      URL.revokeObjectURL(objectUrlRef.current);
+      objectUrlRef.current = null;
+    }
+    setVideoBlobUrl(null);
+    onChange("");
+  };
+  const pick = (file) => {
+    if (locked) return;
+    if (onPick) {
+      onPick(file ?? void 0);
+      return;
+    }
+    if (file) {
+      emitObjectUrl(file);
+      return;
+    }
+    inputRef.current?.click();
+  };
+  const onNativeFile = (e) => {
+    const file = e.target.files?.[0];
+    if (file) emitObjectUrl(file);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const dropHandlers = locked ? {} : {
+    onDragOver: (e) => {
+      e.preventDefault();
+      setDragOver(true);
+    },
+    onDragLeave: () => setDragOver(false),
+    onDrop: (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      const file = e.dataTransfer.files?.[0];
+      if (file) pick(file);
+    }
+  };
+  const previewName = value ? mediaFileName(value) : "";
+  const filled = /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...dropHandlers,
+        className: [
+          "relative overflow-hidden rounded-md border bg-gray-100 transition-colors",
+          dragOver ? "border-blue-500" : "border-gray-200"
+        ].join(" "),
+        style: { height },
+        children: [
+          isVideo ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: value ?? void 0,
+              muted: true,
+              playsInline: true,
+              preload: "metadata",
+              "aria-label": previewName || void 0,
+              className: "h-full w-full",
+              style: { objectFit: fit }
+            }
+          ) : /* @__PURE__ */ jsx("img", { src: value ?? void 0, alt: previewName, className: "h-full w-full", style: { objectFit: fit } }),
+          showFilename && value && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-x-1 bottom-1 truncate rounded px-1.5 py-0.5 text-xs text-white",
+              style: { background: "rgba(0,0,0,0.6)" },
+              children: previewName
+            }
+          ),
+          busy && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "status",
+              className: "absolute inset-0 flex items-center justify-center gap-2",
+              style: { background: "rgba(255,255,255,0.6)" },
+              children: [
+                /* @__PURE__ */ jsx(Spinner2, {}),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: busyLabel })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !disabled && (allowReplace || allowRemove) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
+      allowReplace && /* @__PURE__ */ jsx(Button_default, { id: fieldId, variant: "secondary", size: "sm", onClick: () => pick(), disabled: busy, children: replaceLabel }),
+      allowRemove && /* @__PURE__ */ jsx(Button_default, { variant: "ghost", size: "sm", onClick: clearValue, disabled: busy, children: removeLabel })
+    ] })
+  ] });
+  const empty = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      id: fieldId,
+      onClick: () => pick(),
+      disabled: locked,
+      "aria-label": typeof dimLine === "string" ? dimLine : "Upload media",
+      "aria-busy": busy || void 0,
+      "aria-invalid": error ? true : void 0,
+      "aria-required": required || void 0,
+      "aria-describedby": error ? `${fieldId}-error` : hint ? `${fieldId}-hint` : void 0,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      ...dropHandlers,
+      className: [
+        "flex w-full flex-col items-center justify-center gap-1.5 rounded-lg border-2 border-dashed text-center transition-colors",
+        locked ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        dragOver ? "border-blue-500 bg-blue-50" : "border-gray-300 bg-gray-50 hover:bg-gray-100"
+      ].join(" "),
+      style: {
+        minHeight: height,
+        outline: "none",
+        boxShadow: focused && !locked ? "0 0 0 2px rgba(59,130,246,0.45)" : void 0
+      },
+      children: busy ? /* @__PURE__ */ jsxs("span", { role: "status", className: "flex flex-col items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(Spinner2, {}),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: busyLabel })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: /* @__PURE__ */ jsx(UploadGlyph, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "px-3 text-xs text-gray-500", children: dimLine }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-blue-600", children: cta }),
+        acceptHint && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: acceptHint })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs(FormField, { label, htmlFor: fieldId, hint, error, required, className, children: [
+    value ? filled : empty,
+    !onPick && /* @__PURE__ */ jsx("input", { ref: inputRef, type: "file", accept, className: "hidden", onChange: onNativeFile })
+  ] });
+}
+var REMOVE_ICON = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
+function MediaUploadGrid({
+  items,
+  onPick,
+  onRemove,
+  onReorder,
+  label,
+  hint,
+  error,
+  required,
+  className,
+  accept = "image/*",
+  fit = "cover",
+  thumbSize = 96,
+  placeholder,
+  cta = "Choose from library or upload",
+  acceptHint,
+  showCover = false,
+  coverLabel = "Cover",
+  busy = false,
+  busyLabel = "Uploading\u2026",
+  disabled = false,
+  readOnly = false
+}) {
+  const gridId = useId();
+  const [zoneDragOver, setZoneDragOver] = useState(false);
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const [focusedKey, setFocusedKey] = useState(null);
+  const ringStyle = (key) => ({
+    outline: "none",
+    ...focusedKey === key && !locked ? { boxShadow: "0 0 0 2px rgba(59,130,246,0.45)" } : {}
+  });
+  const blurKey = (key) => setFocusedKey((k) => k === key ? null : k);
+  const locked = disabled || busy;
+  const canAdd = !!onPick && !locked && !readOnly;
+  const canRemove = !!onRemove && !locked && !readOnly;
+  const reorderEnabled = !!onReorder && !locked && !readOnly;
+  const acceptsVideo = accept.includes("video");
+  const acceptsImage = accept.includes("image") || accept === "*" || accept === "";
+  const kindWord = acceptsVideo && !acceptsImage ? "video" : acceptsImage && !acceptsVideo ? "image" : "file";
+  const dimLine = placeholder ?? `Upload ${kindWord === "image" ? "an image" : `a ${kindWord}`}`;
+  const pick = (file) => {
+    if (!canAdd) return;
+    onPick(file ?? void 0);
+  };
+  const isFileDrag = (e) => Array.from(e.dataTransfer.types || []).includes("Files");
+  const zoneHandlers = canAdd ? {
+    onDragOver: (e) => {
+      if (!isFileDrag(e)) return;
+      e.preventDefault();
+      setZoneDragOver(true);
+    },
+    onDragLeave: () => setZoneDragOver(false),
+    onDrop: (e) => {
+      const file = e.dataTransfer.files?.[0];
+      if (!file) return;
+      e.preventDefault();
+      setZoneDragOver(false);
+      pick(file);
+    }
+  } : {};
+  const square = { width: thumbSize, height: thumbSize };
+  const thumb = (item, index) => {
+    const video = item.kind ? item.kind === "video" : isVideoUrl(item.url, accept);
+    const name = mediaFileName(item.url);
+    const isCover = showCover && (item.cover ?? index === 0);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        draggable: reorderEnabled || void 0,
+        onDragStart: reorderEnabled ? (e) => {
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", String(index));
+          setDraggingIndex(index);
+        } : void 0,
+        onDragEnd: reorderEnabled ? () => setDraggingIndex(null) : void 0,
+        onDragOver: reorderEnabled ? (e) => {
+          if (draggingIndex == null) return;
+          e.preventDefault();
+          e.stopPropagation();
+        } : void 0,
+        onDrop: reorderEnabled ? (e) => {
+          if (draggingIndex == null) return;
+          e.preventDefault();
+          e.stopPropagation();
+          if (draggingIndex !== index) onReorder(draggingIndex, index);
+          setDraggingIndex(null);
+        } : void 0,
+        tabIndex: reorderEnabled ? 0 : void 0,
+        "aria-label": reorderEnabled ? `${name}, item ${index + 1} of ${items.length}. Use arrow keys to reorder.` : void 0,
+        onKeyDown: reorderEnabled ? (e) => {
+          if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            if (index > 0) {
+              e.preventDefault();
+              onReorder(index, index - 1);
+            }
+          } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            if (index < items.length - 1) {
+              e.preventDefault();
+              onReorder(index, index + 1);
+            }
+          }
+        } : void 0,
+        onFocus: reorderEnabled ? (e) => {
+          if (e.target === e.currentTarget) setFocusedKey(`thumb:${item.id}`);
+        } : void 0,
+        onBlur: reorderEnabled ? (e) => {
+          if (e.target === e.currentTarget) blurKey(`thumb:${item.id}`);
+        } : void 0,
+        className: [
+          "relative shrink-0 overflow-hidden rounded-md border border-gray-200 bg-gray-100",
+          draggingIndex === index ? "opacity-50" : ""
+        ].join(" "),
+        style: { ...square, cursor: reorderEnabled ? "move" : void 0, ...ringStyle(`thumb:${item.id}`) },
+        children: [
+          video ? /* @__PURE__ */ jsx("video", { src: item.url, muted: true, playsInline: true, preload: "metadata", "aria-label": name, className: "h-full w-full", style: { objectFit: fit } }) : /* @__PURE__ */ jsx("img", { src: item.url, alt: name, className: "h-full w-full", style: { objectFit: fit } }),
+          isCover && /* @__PURE__ */ jsx("span", { className: "absolute left-1 top-1 rounded bg-blue-600 px-1.5 py-0.5 text-xs font-medium text-white", children: coverLabel }),
+          item.caption != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-x-1 bottom-1 truncate rounded px-1.5 py-0.5 text-xs text-white",
+              style: { background: "rgba(0,0,0,0.6)" },
+              children: item.caption
+            }
+          ),
+          canRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(item.id),
+              "aria-label": `Remove ${name}`,
+              onFocus: () => setFocusedKey(`rm:${item.id}`),
+              onBlur: () => blurKey(`rm:${item.id}`),
+              className: "absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full text-white",
+              style: { background: "rgba(0,0,0,0.55)", ...ringStyle(`rm:${item.id}`) },
+              children: REMOVE_ICON
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  };
+  const addTile = canAdd && /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => pick(),
+      "aria-label": "Add media",
+      onFocus: () => setFocusedKey("add"),
+      onBlur: () => blurKey("add"),
+      className: "flex shrink-0 flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-gray-300 bg-gray-50 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500",
+      style: { ...square, ...ringStyle("add") },
+      children: [
+        /* @__PURE__ */ jsx(UploadGlyph, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: "Add" })
+      ]
+    }
+  );
+  const emptyDropzone = canAdd ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => pick(),
+      "aria-label": typeof dimLine === "string" ? dimLine : "Upload media",
+      onFocus: () => setFocusedKey("zone"),
+      onBlur: () => blurKey("zone"),
+      className: [
+        "flex w-full flex-col items-center justify-center gap-1.5 rounded-lg border-2 border-dashed text-center transition-colors cursor-pointer",
+        zoneDragOver ? "border-blue-500 bg-blue-50" : "border-gray-300 bg-gray-50 hover:bg-gray-100"
+      ].join(" "),
+      style: { minHeight: thumbSize + 32, ...ringStyle("zone") },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: /* @__PURE__ */ jsx(UploadGlyph, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "px-3 text-xs text-gray-500", children: dimLine }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-blue-600", children: cta }),
+        acceptHint && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: acceptHint })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-3 text-xs text-gray-400",
+      style: { minHeight: thumbSize + 32 },
+      children: "No media."
+    }
+  );
+  return /* @__PURE__ */ jsx(FormField, { label, labelId: label ? `${gridId}-label` : void 0, htmlFor: gridId, hint, error, required, className, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: gridId,
+      role: "group",
+      "aria-labelledby": label ? `${gridId}-label` : void 0,
+      "aria-describedby": error ? `${gridId}-error` : hint ? `${gridId}-hint` : void 0,
+      "aria-busy": busy || void 0,
+      ...zoneHandlers,
+      className: "relative rounded-lg transition-colors",
+      style: {
+        ...locked ? { opacity: 0.6 } : {},
+        // Inline box-shadow, not `ring-*` — the kit's shipped stylesheet has no
+        // Tailwind ring machinery (see MediaUploadField's focus ring).
+        ...zoneDragOver ? { boxShadow: "0 0 0 2px rgba(59,130,246,0.5)" } : {}
+      },
+      children: [
+        items.length === 0 ? emptyDropzone : /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          items.map(thumb),
+          addTile
+        ] }),
+        busy && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "status",
+            className: "absolute inset-0 flex items-center justify-center gap-2 rounded-lg",
+            style: { background: "rgba(255,255,255,0.6)" },
+            children: [
+              /* @__PURE__ */ jsx(Spinner2, {}),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: busyLabel })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
 function Card({ children, header, footer, padded = true, className = "" }) {
   return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-gray-200 bg-white shadow-sm ${className}`.trim(), children: [
     header && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-100 px-4 py-3 text-sm font-semibold text-gray-900", children: header }),
@@ -8968,6 +9463,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BehaviorPanel, BulkImportGrid, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChangePasswordForm, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, ColoredBadge, ContainerFillChart, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EmptyState, EntityList, ErrorPage, FilterBar, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, Label, Layout, ListFooter, LoadingSpinner2 as LoadingSpinner, MOD, Markdown, MilestoneTimeline, NotificationBell, PageHeader, Pagination, PdfActionButton, Radio_default as Radio, ResizableTable, SHIFT, SearchableSelect, Select_default as Select, ServerStatusIndicator, ShellEntityFetcherProvider, ShortcutHelp, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, findDuplicateKeys, formatDate, inputClasses, isDevEnv, isMac, mergeBulkItems, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useFilters, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BehaviorPanel, BulkImportGrid, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChangePasswordForm, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, ColoredBadge, ContainerFillChart, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EmptyState, EntityList, ErrorPage, FilterBar, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, Label, Layout, ListFooter, LoadingSpinner2 as LoadingSpinner, MOD, Markdown, MediaUploadField, MediaUploadGrid, MilestoneTimeline, NotificationBell, PageHeader, Pagination, PdfActionButton, Radio_default as Radio, ResizableTable, SHIFT, SearchableSelect, Select_default as Select, ServerStatusIndicator, ShellEntityFetcherProvider, ShortcutHelp, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, findDuplicateKeys, formatDate, inputClasses, isDevEnv, isMac, mediaFileName, mergeBulkItems, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useFilters, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map