@inf-monkeys-tech/monkeys-design 1.0.99 → 1.0.100

package/dist/components/data-explorer/index.js

@@ -1,15 +1,15 @@
 'use strict';
 
 var DropdownMenu4 = require('@radix-ui/react-dropdown-menu');
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var tailwindMerge = require('tailwind-merge');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var reactDom = require('react-dom');
-var Popover = require('@radix-ui/react-popover');
 var lucideReact = require('lucide-react');
+var Popover = require('@radix-ui/react-popover');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,6 +30,7 @@ function _interopNamespace(e) {
 }
 
 var DropdownMenu4__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu4);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 
 // src/components/data-explorer/DataExplorerToolbarActions.tsx
@@ -589,7 +590,7 @@ function LoadingIcon() {
     }
   );
 }
-var DataExplorerButton = react.forwardRef(function DataExplorerButton2({
+var DataExplorerButton = React.forwardRef(function DataExplorerButton2({
   children,
   label,
   icon,
@@ -1445,17 +1446,17 @@ var MONKEYS_PROVIDER_CONTEXTS_KEY = /* @__PURE__ */ Symbol.for(
 );
 function createMonkeysProviderContexts() {
   return Object.freeze({
-    locale: react.createContext({
+    locale: React.createContext({
       ...defaultMonkeysLocale,
       provided: false
     }),
-    theme: react.createContext({
+    theme: React.createContext({
       provided: false
     }),
-    direction: react.createContext({
+    direction: React.createContext({
       provided: false
     }),
-    environment: react.createContext({
+    environment: React.createContext({
       provided: false,
       environment: EMPTY_ENVIRONMENT,
       portal: EMPTY_PORTAL
@@ -1491,24 +1492,24 @@ function mergeAppearance(inherited, explicit) {
   };
 }
 function useMonkeysLocaleMessages() {
-  return react.useContext(MonkeysLocaleContext).messages;
+  return React.useContext(MonkeysLocaleContext).messages;
 }
 function useMonkeysBaseAppearance(explicit) {
-  const inherited = react.useContext(MonkeysThemeContext).baseAppearance;
-  return react.useMemo(
+  const inherited = React.useContext(MonkeysThemeContext).baseAppearance;
+  return React.useMemo(
     () => mergeAppearance(inherited, explicit),
     [explicit, inherited]
   );
 }
 function useMonkeysListFooter() {
-  return react.useContext(MonkeysThemeContext).listFooter ?? {};
+  return React.useContext(MonkeysThemeContext).listFooter ?? {};
 }
 function useMonkeysComponentAttributes() {
-  const locale = react.useContext(MonkeysLocaleContext);
-  const theme = react.useContext(MonkeysThemeContext);
-  const direction = react.useContext(MonkeysDirectionContext);
+  const locale = React.useContext(MonkeysLocaleContext);
+  const theme = React.useContext(MonkeysThemeContext);
+  const direction = React.useContext(MonkeysDirectionContext);
   const providerActive = locale.provided || theme.provided || direction.provided;
-  return react.useMemo(
+  return React.useMemo(
     () => providerActive ? {
       dir: direction.direction,
       "data-monkeys-direction": direction.direction,
@@ -3043,7 +3044,7 @@ function getPageItems(currentPage, pageCount, boundaryCount, siblingCount) {
   });
   return items;
 }
-var BasePagination = react.forwardRef(
+var BasePagination = React.forwardRef(
   function BasePagination2({
     page,
     defaultPage,
@@ -3074,7 +3075,7 @@ var BasePagination = react.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const [uncontrolledPage, setUncontrolledPage] = react.useState(
+    const [uncontrolledPage, setUncontrolledPage] = React.useState(
       () => defaultPage ?? 1
     );
     if (page !== void 0) assertPositiveInteger(page, "page");
@@ -3429,7 +3430,7 @@ function DataExplorerSplitButton({
   className,
   classNames
 }) {
-  const [open, setOpen] = react.useState(false);
+  const [open, setOpen] = React.useState(false);
   const theme = resolveDataExplorerAppearance(appearance);
   const hasItems = items.length > 0;
   const resolvedActive = active || open;
@@ -4195,7 +4196,7 @@ function DraggableTreeItem({
     transform: utilities.CSS.Transform.toString(transform),
     transition
   };
-  const setRowRef = react.useCallback(
+  const setRowRef = React.useCallback(
     (element) => {
       setNodeRef(element);
       registerNodeElement?.(node.id, element);
@@ -4415,13 +4416,13 @@ function DataExplorerDraggableTree({
   onDragEnd
 }) {
   const theme = resolveDataExplorerAppearance(appearance);
-  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = react.useState(
+  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = React.useState(
     () => buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
   );
-  const [activeNodeId, setActiveNodeId] = react.useState();
-  const [dragPreviewLayout, setDragPreviewLayout] = react.useState();
-  const [overNodeId, setOverNodeId] = react.useState();
-  const nodeElementsRef = react.useRef(/* @__PURE__ */ new Map());
+  const [activeNodeId, setActiveNodeId] = React.useState();
+  const [dragPreviewLayout, setDragPreviewLayout] = React.useState();
+  const [overNodeId, setOverNodeId] = React.useState();
+  const nodeElementsRef = React.useRef(/* @__PURE__ */ new Map());
   const itemBorderRadius = resolveTreeItemBorderRadius(itemRadius, theme.radius);
   const itemStyle = itemBorderRadius ? { borderRadius: itemBorderRadius } : void 0;
   const overlayStyle = {
@@ -4433,24 +4434,24 @@ function DataExplorerDraggableTree({
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
     core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     setInternalExpandedNodeIds(
       buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
     );
   }, [defaultExpandedNodeIds, resetExpansionKey]);
   const resolvedExpandedNodeIds = expandedNodeIds !== void 0 ? new Set(expandedNodeIds) : internalExpandedNodeIds;
-  const flattenedNodes = react.useMemo(
+  const flattenedNodes = React.useMemo(
     () => buildFlattenedTree(nodes, resolvedExpandedNodeIds),
     [nodes, resolvedExpandedNodeIds]
   );
-  const flattenedNodeMap = react.useMemo(() => {
+  const flattenedNodeMap = React.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of flattenedNodes) map.set(entry.node.id, entry);
     return map;
   }, [flattenedNodes]);
   const activeEntry = activeNodeId ? flattenedNodeMap.get(activeNodeId) : void 0;
   const sortableIds = flattenedNodes.map((entry) => entry.node.id);
-  const registerNodeElement = react.useCallback(
+  const registerNodeElement = React.useCallback(
     (nodeId, element) => {
       if (element) {
         nodeElementsRef.current.set(nodeId, element);
@@ -4460,7 +4461,7 @@ function DataExplorerDraggableTree({
     },
     []
   );
-  const clearDragState = react.useCallback(() => {
+  const clearDragState = React.useCallback(() => {
     setActiveNodeId(void 0);
     setDragPreviewLayout(void 0);
     setOverNodeId(void 0);
@@ -4699,7 +4700,7 @@ function DataExplorerDisplayActionMenu({
   className,
   classNames
 }) {
-  const [open, setOpen] = react.useState(false);
+  const [open, setOpen] = React.useState(false);
   const theme = resolveDataExplorerAppearance(appearance);
   const context = {
     itemId,
@@ -5360,13 +5361,13 @@ function DataExplorerViewCollection({
   );
   const measuredGridGap = resolveNonNegativeNumber(measuredGridOptions?.gap, 8);
   const measuredGridMinColumnWidth = measuredGridOptions?.minColumnWidth ?? "220px";
-  const measuredElementsRef = react.useRef(/* @__PURE__ */ new Map());
-  const measuredCallbacksRef = react.useRef(/* @__PURE__ */ new Map());
-  const measuredSpansRef = react.useRef(/* @__PURE__ */ new Map());
-  const resizeObserverRef = react.useRef(null);
-  const [, setMeasuredLayoutVersion] = react.useState(0);
+  const measuredElementsRef = React.useRef(/* @__PURE__ */ new Map());
+  const measuredCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
+  const measuredSpansRef = React.useRef(/* @__PURE__ */ new Map());
+  const resizeObserverRef = React.useRef(null);
+  const [, setMeasuredLayoutVersion] = React.useState(0);
   const resolveItemStyle = typeof itemStyle === "function" ? (props) => itemStyle(props) : () => itemStyle;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!measuredGridEnabled || typeof ResizeObserver === "undefined") {
       return void 0;
     }
@@ -5402,7 +5403,7 @@ function DataExplorerViewCollection({
       }
     };
   }, [measuredGridEnabled, measuredGridGap, measuredGridRowHeight]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!measuredGridEnabled) {
       measuredElementsRef.current.clear();
       measuredCallbacksRef.current.clear();
@@ -5429,7 +5430,7 @@ function DataExplorerViewCollection({
       setMeasuredLayoutVersion((version) => version + 1);
     }
   }, [measuredGridEnabled, resolvedItems, resolveItemId]);
-  const getMeasuredRef = react.useCallback((itemId) => {
+  const getMeasuredRef = React.useCallback((itemId) => {
     const cached = measuredCallbacksRef.current.get(itemId);
     if (cached) return cached;
     const callback = (node) => {
@@ -5540,7 +5541,7 @@ function DataExplorerViewCollection({
               } : resolvedStyle;
               if (!wrapItems) {
                 if (!measuredGridEnabled) {
-                  return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderedItem }, itemId);
+                  return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderedItem }, itemId);
                 }
                 return /* @__PURE__ */ jsxRuntime.jsx("div", { className: itemClassName, style: measuredStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: getMeasuredRef(itemId), children: renderedItem }) }, itemId);
               }
@@ -5792,21 +5793,21 @@ function DataExplorerImagePreview({
     appearance ?? { background: "dark-stage" }
   );
   const imageSrc = typeof src === "string" ? src.trim() : "";
-  const stageRef = react.useRef(null);
-  const stageSizeRef = react.useRef(null);
-  const viewRef = react.useRef({ scale: 1, translateX: stagePadding, translateY: stagePadding });
-  const draggingRef = react.useRef(void 0);
-  const [naturalSize, setNaturalSize] = react.useState(null);
-  const [dragging, setDragging] = react.useState(false);
-  const [{ scale, translateX, translateY }, setView] = react.useState(() => ({
+  const stageRef = React.useRef(null);
+  const stageSizeRef = React.useRef(null);
+  const viewRef = React.useRef({ scale: 1, translateX: stagePadding, translateY: stagePadding });
+  const draggingRef = React.useRef(void 0);
+  const [naturalSize, setNaturalSize] = React.useState(null);
+  const [dragging, setDragging] = React.useState(false);
+  const [{ scale, translateX, translateY }, setView] = React.useState(() => ({
     scale: 1,
     translateX: stagePadding,
     translateY: stagePadding
   }));
-  react.useEffect(() => {
+  React.useEffect(() => {
     viewRef.current = { scale, translateX, translateY };
   }, [scale, translateX, translateY]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     setNaturalSize(null);
     setView({ scale: 1, translateX: stagePadding, translateY: stagePadding });
   }, [imageSrc, stagePadding]);
@@ -5814,7 +5815,7 @@ function DataExplorerImagePreview({
   const normalizedMaxScale = Number.isFinite(maxScale) ? Math.max(normalizedMinScale, maxScale) : MAX_SAFE_SCALE;
   const normalizedZoomStep = Number.isFinite(zoomStep) && zoomStep > 1 ? zoomStep : DEFAULT_ZOOM_STEP;
   const normalizedStagePadding = Number.isFinite(stagePadding) && stagePadding >= 0 ? stagePadding : DEFAULT_STAGE_PADDING;
-  const resetView = react.useCallback(
+  const resetView = React.useCallback(
     (nextNaturalSize) => {
       const stage = stageRef.current;
       const size = nextNaturalSize ?? naturalSize;
@@ -5849,7 +5850,7 @@ function DataExplorerImagePreview({
     },
     [naturalSize, normalizedMaxScale, normalizedMinScale, normalizedStagePadding]
   );
-  const compensateStageResize = react.useCallback((width, height) => {
+  const compensateStageResize = React.useCallback((width, height) => {
     if (!Number.isFinite(width) || !Number.isFinite(height)) return;
     if (width <= 0 || height <= 0) return;
     const previous = stageSizeRef.current;
@@ -5864,7 +5865,7 @@ function DataExplorerImagePreview({
       translateY: current.translateY + deltaY
     }));
   }, [imageSrc]);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     const stage = stageRef.current;
     if (!stage) return;
     compensateStageResize(stage.clientWidth, stage.clientHeight);
@@ -5883,7 +5884,7 @@ function DataExplorerImagePreview({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [compensateStageResize]);
-  const zoomAtPoint = react.useCallback(
+  const zoomAtPoint = React.useCallback(
     (factor, stageX, stageY) => {
       if (!Number.isFinite(factor) || factor === 1) return;
       if (!Number.isFinite(stageX) || !Number.isFinite(stageY)) return;
@@ -5906,7 +5907,7 @@ function DataExplorerImagePreview({
     },
     [normalizedMaxScale, normalizedMinScale]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     const stage = stageRef.current;
     if (!stage || !imageSrc || !naturalSize) return;
     const handleWheel = (event) => {
@@ -5921,7 +5922,7 @@ function DataExplorerImagePreview({
     stage.addEventListener("wheel", handleWheel, { passive: false });
     return () => stage.removeEventListener("wheel", handleWheel);
   }, [imageSrc, naturalSize, normalizedZoomStep, zoomAtPoint]);
-  const handlePointerDown = react.useCallback(
+  const handlePointerDown = React.useCallback(
     (event) => {
       if (event.button !== 0) return;
       if (!imageSrc || !naturalSize) return;
@@ -5941,7 +5942,7 @@ function DataExplorerImagePreview({
     },
     [imageSrc, naturalSize]
   );
-  const handlePointerMove = react.useCallback((event) => {
+  const handlePointerMove = React.useCallback((event) => {
     const drag = draggingRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     event.preventDefault();
@@ -5951,7 +5952,7 @@ function DataExplorerImagePreview({
       translateY: drag.startTranslateY + event.clientY - drag.startClientY
     });
   }, []);
-  const endDrag = react.useCallback((event) => {
+  const endDrag = React.useCallback((event) => {
     const drag = draggingRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     draggingRef.current = void 0;
@@ -5961,7 +5962,7 @@ function DataExplorerImagePreview({
       stage.releasePointerCapture(event.pointerId);
     }
   }, []);
-  const handleDoubleClick = react.useCallback(
+  const handleDoubleClick = React.useCallback(
     (event) => {
       if (!imageSrc || !naturalSize) return;
       if (isNoDragTarget(event.target)) return;
@@ -5969,7 +5970,7 @@ function DataExplorerImagePreview({
     },
     [imageSrc, naturalSize, resetView]
   );
-  const handleZoomButtonClick = react.useCallback(
+  const handleZoomButtonClick = React.useCallback(
     (factor) => {
       const stage = stageRef.current;
       if (!stage || !naturalSize) return;
@@ -6134,6 +6135,145 @@ function DataExplorerImagePreview({
     }
   );
 }
+var mediaPreviewFrameClassName = ({
+  aspectRatio = "square",
+  maxSquareHeight = true,
+  className
+} = {}) => cn2(
+  "w-full overflow-hidden bg-muted",
+  (aspectRatio === "square" || aspectRatio === "1:1") && "aspect-square",
+  (aspectRatio === "square" || aspectRatio === "1:1") && maxSquareHeight && "max-h-[300px]",
+  aspectRatio === "4:3" && "aspect-[4/3]",
+  aspectRatio === "3:4" && "aspect-[3/4]",
+  (aspectRatio === "video" || aspectRatio === "16:9") && "aspect-video",
+  aspectRatio === "9:16" && "aspect-[9/16]",
+  className
+);
+var MediaPreviewFrame = React__namespace.forwardRef(
+  ({ aspectRatio = "square", maxSquareHeight = true, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: mediaPreviewFrameClassName({ aspectRatio, maxSquareHeight, className }), ...props })
+);
+MediaPreviewFrame.displayName = "MediaPreviewFrame";
+var MediaPreviewImage = React__namespace.forwardRef(
+  ({ fit = "contain", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ref,
+      className: cn2("block size-full", fit === "contain" ? "object-contain" : "object-cover", className),
+      ...props
+    }
+  )
+);
+MediaPreviewImage.displayName = "MediaPreviewImage";
+function PreviewIcon({ kind }) {
+  const Icon = kind === "image" ? lucideReact.Image : kind === "video" ? lucideReact.Video : kind === "audio" ? lucideReact.Music2 : lucideReact.FileText;
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-6 w-6", "aria-hidden": "true" });
+}
+function DataExplorerMediaPreview({
+  src,
+  kind = "image",
+  alt = "Preview",
+  title,
+  aspectRatio = "auto",
+  fit = "contain",
+  controls = true,
+  loading = false,
+  empty = "No preview available",
+  error = "Preview is unavailable right now.",
+  className,
+  classNames,
+  onLoad,
+  onError
+}) {
+  const [hasError, setHasError] = React.useState(false);
+  const resolvedSrc = typeof src === "string" ? src.trim() : "";
+  React.useEffect(() => {
+    setHasError(false);
+  }, [resolvedSrc, kind]);
+  const renderPlaceholder = (content, placeholderClassName) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-h-24 flex-col items-center justify-center gap-2 bg-muted/30 p-4 text-center text-sm text-muted-foreground",
+        classNames?.placeholder,
+        placeholderClassName
+      ),
+      role: loading ? "status" : "img",
+      "aria-label": typeof content === "string" ? content : void 0,
+      children: content
+    }
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-w-0 overflow-hidden", classNames?.root, className), "aria-busy": "true", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-24 flex-col items-center justify-center gap-2 bg-muted/30 p-4 text-sm text-muted-foreground",
+          classNames?.loading
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin", "aria-hidden": "true" }),
+          title || "Loading preview..."
+        ]
+      }
+    ) });
+  }
+  if (!resolvedSrc || hasError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-w-0 overflow-hidden", classNames?.root, className), children: renderPlaceholder(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PreviewIcon, { kind }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-full truncate", hasError ? classNames?.error : void 0), children: hasError ? error : empty }),
+        title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate text-xs", children: title }) : null
+      ] })
+    ) });
+  }
+  const handleError = () => {
+    setHasError(true);
+    onError?.();
+  };
+  const media = kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+    MediaPreviewImage,
+    {
+      src: resolvedSrc,
+      alt,
+      fit,
+      className: classNames?.media,
+      loading: "lazy",
+      decoding: "async",
+      draggable: false,
+      onLoad,
+      onError: handleError
+    }
+  ) : kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "video",
+    {
+      src: resolvedSrc,
+      className: cn("block h-auto w-full", fit === "cover" ? "object-cover" : "object-contain", classNames?.media),
+      controls,
+      preload: "metadata",
+      onLoadedData: onLoad,
+      onError: handleError
+    }
+  ) : kind === "audio" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "audio",
+    {
+      src: resolvedSrc,
+      className: cn("w-full", classNames?.media),
+      controls,
+      preload: "metadata",
+      onCanPlay: onLoad,
+      onError: handleError
+    }
+  ) : renderPlaceholder(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PreviewIcon, { kind: "file" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate", children: title || resolvedSrc })
+    ] })
+  );
+  if (kind === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MediaPreviewFrame, { aspectRatio, className: cn(classNames?.root, className), children: media });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-w-0 overflow-hidden", classNames?.root, className), children: media });
+}
 function DataExplorerPage({
   sidebar,
   tree,
@@ -6481,18 +6621,18 @@ function DataExplorerRecordPicker({
   onValueChange
 }) {
   const theme = resolveDataExplorerAppearance(appearance);
-  const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
-  const [uncontrolledSearch, setUncontrolledSearch] = react.useState(defaultSearchValue);
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const [uncontrolledSearch, setUncontrolledSearch] = React.useState(defaultSearchValue);
   const isControlledOpen = open !== void 0;
   const isOpen = isControlledOpen ? open : uncontrolledOpen;
   const isControlledSearch = searchValue !== void 0;
   const query = isControlledSearch ? searchValue : uncontrolledSearch;
-  const selectedValues = react.useMemo(() => normalizeValues(value, multiple), [multiple, value]);
-  const selectedSet = react.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedValues = React.useMemo(() => normalizeValues(value, multiple), [multiple, value]);
+  const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
   const selectedOptions = selectedValues.map((selectedValue) => options.find((option) => option.value === selectedValue)).filter((option) => Boolean(option));
   const visibleOptions = createOption ? [createOption, ...options] : options;
   const triggerValue = selectedOptions.length ? multiple && selectedOptions.length > 1 ? `${selectedOptions.slice(0, 2).map((option) => getOptionText(option)).join(", ")} +${selectedOptions.length - 2}` : getOptionText(selectedOptions[0]) : placeholder;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onOpenChange?.(false);
@@ -6625,6 +6765,90 @@ function DataExplorerRecordPicker({
     ] }, option.value)) }) : null
   ] });
 }
+function DataExplorerUploadSurface({
+  accept,
+  multiple = false,
+  disabled = false,
+  busy = false,
+  title = "Upload files",
+  description,
+  hint,
+  busyLabel = "Uploading...",
+  icon,
+  className,
+  classNames,
+  onFilesSelected
+}) {
+  const inputRef = React.useRef(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const emitFiles = (files) => {
+    if (disabled || busy) return;
+    const selected = Array.from(files);
+    if (selected.length > 0) onFilesSelected?.(selected);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+    emitFiles(event.dataTransfer.files);
+  };
+  const renderText = (value, fallbackClassName, slot) => value ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": slot, className: cn(fallbackClassName), children: value }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-monkeys-component": "data-explorer-upload-surface",
+      "data-state": busy ? "busy" : isDragging ? "dragging" : "idle",
+      className: cn(
+        "rounded-[var(--radius)] border border-dashed border-border bg-muted/20 p-6 text-center transition-colors",
+        isDragging && "border-primary/60 bg-primary/5",
+        (disabled || busy) && "pointer-events-none opacity-60",
+        classNames?.root,
+        className
+      ),
+      onDragEnter: (event) => {
+        event.preventDefault();
+        if (!disabled && !busy) setIsDragging(true);
+      },
+      onDragOver: (event) => event.preventDefault(),
+      onDragLeave: (event) => {
+        event.preventDefault();
+        if (event.currentTarget === event.target) setIsDragging(false);
+      },
+      onDrop: handleDrop,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "sr-only",
+            type: "file",
+            accept,
+            multiple,
+            disabled: disabled || busy,
+            onChange: (event) => {
+              emitFiles(event.target.files ?? []);
+              event.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn("mx-auto flex min-w-0 flex-col items-center gap-2 text-center", classNames?.button),
+            disabled: disabled || busy,
+            onClick: () => inputRef.current?.click(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", classNames?.icon), children: busy ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-7 w-7 animate-spin rounded-full border-2 border-primary/25 border-t-primary", "aria-hidden": "true" }) : icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "h-7 w-7", "aria-hidden": "true" }) }),
+              renderText(busy ? busyLabel : title, "text-sm font-semibold text-foreground", "title"),
+              renderText(description, "max-w-xl text-xs leading-5 text-muted-foreground", "description"),
+              renderText(hint, "max-w-xl text-xs leading-5 text-muted-foreground", "hint")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function DefaultSearchIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -7030,7 +7254,7 @@ function DataExplorerViewTree({
   const loadingContent = loadingNode ?? labels?.loading ?? internalLabels.loading;
   const emptyContent = empty ?? labels?.empty ?? internalLabels.empty;
   const hasExplicitGroups = Array.isArray(groups);
-  const resolvedGroups = react.useMemo(
+  const resolvedGroups = React.useMemo(
     () => {
       if (hasExplicitGroups) {
         return groups;
@@ -7046,19 +7270,19 @@ function DataExplorerViewTree({
     },
     [groups, hasExplicitGroups, nodes]
   );
-  const flattenedNodeMap = react.useMemo(
+  const flattenedNodeMap = React.useMemo(
     () => buildFlattenedNodeMap(resolvedGroups),
     [resolvedGroups]
   );
-  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = react.useState(
+  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = React.useState(
     () => buildDefaultNodeExpandedSet(resolvedGroups, defaultExpandedNodeIds)
   );
-  const [internalExpandedGroupIds, setInternalExpandedGroupIds] = react.useState(
+  const [internalExpandedGroupIds, setInternalExpandedGroupIds] = React.useState(
     () => buildDefaultGroupExpandedSet(resolvedGroups, defaultExpandedGroupIds)
   );
-  const [draggingNodeId, setDraggingNodeId] = react.useState();
-  const [dragOverNodeId, setDragOverNodeId] = react.useState();
-  react.useEffect(() => {
+  const [draggingNodeId, setDraggingNodeId] = React.useState();
+  const [dragOverNodeId, setDragOverNodeId] = React.useState();
+  React.useEffect(() => {
     setInternalExpandedNodeIds(
       buildDefaultNodeExpandedSet(resolvedGroups, defaultExpandedNodeIds)
     );
@@ -7722,6 +7946,7 @@ exports.DataExplorerDisplayMedia = DataExplorerDisplayMedia;
 exports.DataExplorerDraggableTree = DataExplorerDraggableTree;
 exports.DataExplorerFilterBar = DataExplorerFilterBar;
 exports.DataExplorerImagePreview = DataExplorerImagePreview;
+exports.DataExplorerMediaPreview = DataExplorerMediaPreview;
 exports.DataExplorerPage = DataExplorerPage;
 exports.DataExplorerRecordCard = DataExplorerRecordCard;
 exports.DataExplorerRecordPicker = DataExplorerRecordPicker;
@@ -7731,6 +7956,7 @@ exports.DataExplorerToolbarActions = DataExplorerToolbarActions;
 exports.DataExplorerToolbarShell = DataExplorerToolbarShell;
 exports.DataExplorerTree = DataExplorerTree;
 exports.DataExplorerTreeShell = DataExplorerTreeShell;
+exports.DataExplorerUploadSurface = DataExplorerUploadSurface;
 exports.DataExplorerView = DataExplorerView;
 exports.DataExplorerViewCollection = DataExplorerViewCollection;
 exports.DataExplorerViewItem = DataExplorerViewItem;