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

package/dist/index.mjs

@@ -4,7 +4,7 @@ import * as React4 from 'react';
 import React4__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, createElement, createContext, useCallback, useContext, Children, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { ChevronDown, Search, Circle, Check, ChevronRight, ChevronUp, Plus, Pin, Blocks, Settings, TerminalSquare, FileOutput, Download, X, PanelLeft, PanelRight, Loader2, RefreshCw, Bot, SquarePen, MessageSquare, Clock3, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Ellipsis, Trash2, Pencil, Image } from 'lucide-react';
+import { ChevronDown, Search, Circle, Check, ChevronRight, ChevronUp, Plus, Pin, Blocks, Settings, TerminalSquare, FileOutput, Download, X, PanelLeft, PanelRight, Loader2, UploadCloud, RefreshCw, Bot, SquarePen, MessageSquare, Clock3, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Image, Video, Music2, FileText, Ellipsis, Trash2, Pencil } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -18409,6 +18409,35 @@ var SelectSeparator = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
+var mediaPreviewFrameClassName = ({
+  aspectRatio = "square",
+  maxSquareHeight = true,
+  className
+} = {}) => cn(
+  "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 = React4.forwardRef(
+  ({ aspectRatio = "square", maxSquareHeight = true, className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: mediaPreviewFrameClassName({ aspectRatio, maxSquareHeight, className }), ...props })
+);
+MediaPreviewFrame.displayName = "MediaPreviewFrame";
+var MediaPreviewImage = React4.forwardRef(
+  ({ fit = "contain", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: cn("block size-full", fit === "contain" ? "object-contain" : "object-cover", className),
+      ...props
+    }
+  )
+);
+MediaPreviewImage.displayName = "MediaPreviewImage";
 var Sheet = Dialog.Root;
 var SheetPortal = Dialog.Portal;
 var SheetOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -24771,6 +24800,116 @@ function DataExplorerImagePreview({
     }
   );
 }
+function PreviewIcon({ kind }) {
+  const Icon2 = kind === "image" ? Image : kind === "video" ? Video : kind === "audio" ? Music2 : FileText;
+  return /* @__PURE__ */ jsx(Icon2, { 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] = useState(false);
+  const resolvedSrc = typeof src === "string" ? src.trim() : "";
+  useEffect(() => {
+    setHasError(false);
+  }, [resolvedSrc, kind]);
+  const renderPlaceholder = (content, placeholderClassName) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn3(
+        "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__ */ jsx("div", { className: cn3("min-w-0 overflow-hidden", classNames?.root, className), "aria-busy": "true", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn3(
+          "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__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin", "aria-hidden": "true" }),
+          title || "Loading preview..."
+        ]
+      }
+    ) });
+  }
+  if (!resolvedSrc || hasError) {
+    return /* @__PURE__ */ jsx("div", { className: cn3("min-w-0 overflow-hidden", classNames?.root, className), children: renderPlaceholder(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PreviewIcon, { kind }),
+        /* @__PURE__ */ jsx("span", { className: cn3("max-w-full truncate", hasError ? classNames?.error : void 0), children: hasError ? error : empty }),
+        title ? /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-xs", children: title }) : null
+      ] })
+    ) });
+  }
+  const handleError = () => {
+    setHasError(true);
+    onError?.();
+  };
+  const media = kind === "image" ? /* @__PURE__ */ jsx(
+    MediaPreviewImage,
+    {
+      src: resolvedSrc,
+      alt,
+      fit,
+      className: classNames?.media,
+      loading: "lazy",
+      decoding: "async",
+      draggable: false,
+      onLoad,
+      onError: handleError
+    }
+  ) : kind === "video" ? /* @__PURE__ */ jsx(
+    "video",
+    {
+      src: resolvedSrc,
+      className: cn3("block h-auto w-full", fit === "cover" ? "object-cover" : "object-contain", classNames?.media),
+      controls,
+      preload: "metadata",
+      onLoadedData: onLoad,
+      onError: handleError
+    }
+  ) : kind === "audio" ? /* @__PURE__ */ jsx(
+    "audio",
+    {
+      src: resolvedSrc,
+      className: cn3("w-full", classNames?.media),
+      controls,
+      preload: "metadata",
+      onCanPlay: onLoad,
+      onError: handleError
+    }
+  ) : renderPlaceholder(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PreviewIcon, { kind: "file" }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-full truncate", children: title || resolvedSrc })
+    ] })
+  );
+  if (kind === "image") {
+    return /* @__PURE__ */ jsx(MediaPreviewFrame, { aspectRatio, className: cn3(classNames?.root, className), children: media });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn3("min-w-0 overflow-hidden", classNames?.root, className), children: media });
+}
 function DataExplorerPage({
   sidebar,
   tree,
@@ -25262,6 +25401,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 = useRef(null);
+  const [isDragging, setIsDragging] = 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__ */ jsx("span", { "data-slot": slot, className: cn3(fallbackClassName), children: value }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-monkeys-component": "data-explorer-upload-surface",
+      "data-state": busy ? "busy" : isDragging ? "dragging" : "idle",
+      className: cn3(
+        "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__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "sr-only",
+            type: "file",
+            accept,
+            multiple,
+            disabled: disabled || busy,
+            onChange: (event) => {
+              emitFiles(event.target.files ?? []);
+              event.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn3("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__ */ jsx("span", { className: cn3("text-muted-foreground", classNames?.icon), children: busy ? /* @__PURE__ */ 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__ */ jsx(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__ */ jsxs(
     "svg",
@@ -34239,6 +34462,6 @@ function useDarkMode() {
   return { mode, setMode, resolvedMode };
 }
 
-export { AGENT_WORKBENCH_SHELL_BREAKPOINTS, AgentWorkbenchActivity, AgentWorkbenchExploreSidebar, AgentWorkbenchShell, AgentWorkbenchSidebar, AgentWorkbenchSidebarContainer, AgentWorkbenchTaskDetails, AgentWorkbenchTool, AppHeader, AppLayout, AppShellSidebar, AppSidebar, ApplicationHandoffLink, BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListFooter, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerFilterBar, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerRecordPicker, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysProvider, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, NavigationSidebar, OverlayNodeHost, RenderNodeHost, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UnifiedDropdown, UserAccountMenu, WorkbenchAssetGallery, WorkbenchCollection, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchEvidenceList, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchJourneyNavigation, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchMetricGrid, WorkbenchRadarFilterChip, WorkbenchRadarFilterRow, WorkbenchRadarInspectorSection, WorkbenchRadarMatrix, WorkbenchRadarNavigation, WorkbenchRadarWorkspace, WorkbenchRankedList, WorkbenchRelationshipGraph, WorkbenchResizableSidebar, WorkbenchScatterPlot, WorkbenchSelectionTray, WorkbenchTableView, applyThemeTokens, browserOverlayHistoryAdapter, buildOverlayUrl, calculateHue, calculateLightness, calculateSaturation, cn2 as cn, compileThemeTokens, createAgentWorkbenchActivityModel, createAgentWorkbenchDetailsModel, createSolidColorScale, defaultMonkeysLocale, enUS, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getOverlayPresentationClassNames, getOverlayZIndex, getRenderNodeDataAttributes, getThemeTokenCssValue, isOverlayUrlActive, markDarkColor, mergeMonkeysLocaleMessages, resolveAgentWorkbenchShellLayout, resolveBaseAppearance, resolveDataExplorerAppearance, resolveMonkeysLocale, resolveRenderNodePolicyState, resolveToastVariantForMessage, sessionRenderNodeScrollRestoration, setTailwindTheme, toast, useDarkMode, useMonkeysBaseAppearance, useMonkeysComponentAttributes, useMonkeysDataExplorerAppearance, useMonkeysDirection, useMonkeysEnvironment, useMonkeysListFooter, useMonkeysLocale, useMonkeysLocaleMessages, useMonkeysPortalOptions, useMonkeysResolvedTheme, useMonkeysStatusStates, useToastFeed, useToastOnValue, zhCN };
+export { AGENT_WORKBENCH_SHELL_BREAKPOINTS, AgentWorkbenchActivity, AgentWorkbenchExploreSidebar, AgentWorkbenchShell, AgentWorkbenchSidebar, AgentWorkbenchSidebarContainer, AgentWorkbenchTaskDetails, AgentWorkbenchTool, AppHeader, AppLayout, AppShellSidebar, AppSidebar, ApplicationHandoffLink, BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListFooter, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerFilterBar, DataExplorerImagePreview, DataExplorerMediaPreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerRecordPicker, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerUploadSurface, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysProvider, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, NavigationSidebar, OverlayNodeHost, RenderNodeHost, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UnifiedDropdown, UserAccountMenu, WorkbenchAssetGallery, WorkbenchCollection, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchEvidenceList, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchJourneyNavigation, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchMetricGrid, WorkbenchRadarFilterChip, WorkbenchRadarFilterRow, WorkbenchRadarInspectorSection, WorkbenchRadarMatrix, WorkbenchRadarNavigation, WorkbenchRadarWorkspace, WorkbenchRankedList, WorkbenchRelationshipGraph, WorkbenchResizableSidebar, WorkbenchScatterPlot, WorkbenchSelectionTray, WorkbenchTableView, applyThemeTokens, browserOverlayHistoryAdapter, buildOverlayUrl, calculateHue, calculateLightness, calculateSaturation, cn2 as cn, compileThemeTokens, createAgentWorkbenchActivityModel, createAgentWorkbenchDetailsModel, createSolidColorScale, defaultMonkeysLocale, enUS, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getOverlayPresentationClassNames, getOverlayZIndex, getRenderNodeDataAttributes, getThemeTokenCssValue, isOverlayUrlActive, markDarkColor, mergeMonkeysLocaleMessages, resolveAgentWorkbenchShellLayout, resolveBaseAppearance, resolveDataExplorerAppearance, resolveMonkeysLocale, resolveRenderNodePolicyState, resolveToastVariantForMessage, sessionRenderNodeScrollRestoration, setTailwindTheme, toast, useDarkMode, useMonkeysBaseAppearance, useMonkeysComponentAttributes, useMonkeysDataExplorerAppearance, useMonkeysDirection, useMonkeysEnvironment, useMonkeysListFooter, useMonkeysLocale, useMonkeysLocaleMessages, useMonkeysPortalOptions, useMonkeysResolvedTheme, useMonkeysStatusStates, useToastFeed, useToastOnValue, zhCN };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map