react-os-shell 3.10.0 → 3.11.1

package/dist/index.js

@@ -1,26 +1,26 @@
-import { subscribePomo, getPomoSnapshot } from './chunk-YLJY5LDU.js';
-export { setShellTodoProvider } from './chunk-YLJY5LDU.js';
-import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-S6CH5S26.js';
-export { Breadcrumbs } from './chunk-S6CH5S26.js';
+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-XORQ5BQL.js';
+export { Breadcrumbs } from './chunk-XORQ5BQL.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-IIEI3RDA.js';
-export { ImageAnnotator_default as ImageAnnotator } from './chunk-IIEI3RDA.js';
+import { setPdfPreview } from './chunk-PQYTYQ62.js';
+export { ImageAnnotator_default as ImageAnnotator } from './chunk-PQYTYQ62.js';
 import { toast_default } from './chunk-VENYVK3L.js';
 export { toast_default as toast } from './chunk-VENYVK3L.js';
-import { EditableGrid } from './chunk-HUQGQCC7.js';
-export { EditableGrid } from './chunk-HUQGQCC7.js';
+import { EditableGrid } from './chunk-GOT6PRT2.js';
+export { EditableGrid } from './chunk-GOT6PRT2.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
-import { APP_VERSION, VERSION } from './chunk-HMCBPRIZ.js';
-export { VERSION } from './chunk-HMCBPRIZ.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, CancelButton, setWindowPosition, ThumbCard, activateModal } from './chunk-JXW7H3DU.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-JXW7H3DU.js';
+import { APP_VERSION, VERSION } from './chunk-5HBGCZKG.js';
+export { VERSION } from './chunk-5HBGCZKG.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';
@@ -6436,6 +6436,7 @@ var Radio_default = Radio;
 function FormField({
   label,
   htmlFor,
+  labelId,
   hint,
   error,
   required,
@@ -6443,12 +6444,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 +6458,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 +9412,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