@inf-monkeys-tech/monkeys-design 1.0.38 → 1.0.39

package/dist/index.mjs

@@ -3037,6 +3037,15 @@ var enUS = {
       }
     },
     workbench: {
+      collection: {
+        label: "Collection",
+        loading: "Loading items",
+        empty: "No items",
+        loadError: "Unable to load items",
+        refreshError: "Unable to refresh items",
+        retry: "Retry",
+        loadingMore: "Loading more items"
+      },
       interactiveTable: {
         columnActions: "Column actions",
         freezeColumn: "Freeze to left",
@@ -3308,6 +3317,15 @@ var zhCN = {
       }
     },
     workbench: {
+      collection: {
+        label: "\u5185\u5BB9\u96C6\u5408",
+        loading: "\u6B63\u5728\u52A0\u8F7D\u5185\u5BB9",
+        empty: "\u6682\u65E0\u5185\u5BB9",
+        loadError: "\u65E0\u6CD5\u52A0\u8F7D\u5185\u5BB9",
+        refreshError: "\u65E0\u6CD5\u5237\u65B0\u5185\u5BB9",
+        retry: "\u91CD\u8BD5",
+        loadingMore: "\u6B63\u5728\u52A0\u8F7D\u66F4\u591A\u5185\u5BB9"
+      },
       interactiveTable: {
         columnActions: "\u5217\u64CD\u4F5C",
         freezeColumn: "\u56FA\u5B9A\u5230\u5DE6\u4FA7",
@@ -3599,6 +3617,10 @@ function mergeMonkeysLocaleMessages(base, override) {
       }
     },
     workbench: {
+      collection: {
+        ...base.workbench.collection,
+        ...override.workbench?.collection
+      },
       interactiveTable: {
         ...base.workbench.interactiveTable,
         ...override.workbench?.interactiveTable
@@ -21975,6 +21997,7 @@ var DEFAULT_MASONRY_GAP_PX = 12;
 var DEFAULT_MASONRY_ROW_HEIGHT_PX = 8;
 var DEFAULT_MASONRY_COLUMN_WIDTH_PX = 280;
 var DEFAULT_MASONRY_ITEM_HEIGHT_PX = 240;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function clamp3(value, min5, max5) {
   return Math.min(Math.max(value, min5), max5);
 }
@@ -22079,9 +22102,12 @@ function WorkbenchMasonryLayout({
   getItemKey = (item, index) => item?.id ?? item?.key ?? index,
   getItemSize,
   columnWidth = DEFAULT_MASONRY_COLUMN_WIDTH_PX,
+  columnCount: requestedColumnCount,
   gap = DEFAULT_MASONRY_GAP_PX,
   rowHeight = DEFAULT_MASONRY_ROW_HEIGHT_PX,
   placementStrategy = "shelf",
+  containerProps,
+  getItemProps,
   className
 }) {
   const containerRef = useRef(null);
@@ -22112,8 +22138,9 @@ function WorkbenchMasonryLayout({
   }, []);
   useEffect(() => {
     setMeasuredHeights((prev) => {
+      const currentItemKeys = new Set(itemKeys);
       const next = Object.fromEntries(
-        Object.entries(prev).filter(([key]) => itemKeys.includes(key))
+        Object.entries(prev).filter(([key]) => currentItemKeys.has(key))
       );
       return areMeasurementMapsEqual(prev, next) ? prev : next;
     });
@@ -22124,7 +22151,8 @@ function WorkbenchMasonryLayout({
     containerRef.current
   );
   const isDensePlacement = placementStrategy === "dense";
-  const columnCount = getMasonryColumnCount({
+  const normalizedRequestedColumnCount = Number.isFinite(requestedColumnCount) && Number(requestedColumnCount) > 0 ? clamp3(Math.round(Number(requestedColumnCount)), 1, 24) : void 0;
+  const columnCount = normalizedRequestedColumnCount || getMasonryColumnCount({
     containerWidth,
     itemCount: items.length,
     targetColumnWidth: resolvedTargetColumnWidth,
@@ -22170,7 +22198,7 @@ function WorkbenchMasonryLayout({
     resolvedColumnWidth,
     rowHeight
   ]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const nextMeasurements = {};
     itemNodesRef.current.forEach((node, key) => {
       const nextHeight = Math.ceil(node.getBoundingClientRect().height);
@@ -22232,10 +22260,21 @@ function WorkbenchMasonryLayout({
       const positionedItems = layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => {
         const resolvedSpan = clamp3(columnSpan, 1, columnCount);
         let startColumn = nextColumnIndex;
-        if (startColumn + resolvedSpan > columnCount) {
-          startColumn = 0;
+        if (placementStrategy === "shortest") {
+          let shortestBottom = Number.POSITIVE_INFINITY;
+          for (let candidate = 0; candidate <= columnCount - resolvedSpan; candidate += 1) {
+            const candidateBottom = Math.max(...columnBottoms.slice(candidate, candidate + resolvedSpan));
+            if (candidateBottom < shortestBottom) {
+              shortestBottom = candidateBottom;
+              startColumn = candidate;
+            }
+          }
+        } else {
+          if (startColumn + resolvedSpan > columnCount) {
+            startColumn = 0;
+          }
+          startColumn = Math.min(startColumn, columnCount - resolvedSpan);
         }
-        startColumn = Math.min(startColumn, columnCount - resolvedSpan);
         const itemWidth = resolvedColumnWidth * resolvedSpan + gap * Math.max(resolvedSpan - 1, 0);
         const itemHeight = getResolvedItemHeight({
           size,
@@ -22248,9 +22287,11 @@ function WorkbenchMasonryLayout({
           columnBottoms[columnIndex] = bottom + gap;
         }
         maxBottom = Math.max(maxBottom, bottom);
-        nextColumnIndex = startColumn + resolvedSpan;
-        if (nextColumnIndex >= columnCount) {
-          nextColumnIndex = 0;
+        if (placementStrategy !== "shortest") {
+          nextColumnIndex = startColumn + resolvedSpan;
+          if (nextColumnIndex >= columnCount) {
+            nextColumnIndex = 0;
+          }
         }
         return {
           key,
@@ -22273,33 +22314,38 @@ function WorkbenchMasonryLayout({
       "div",
       {
         ref: containerRef,
-        className: cn("relative w-full", className),
-        style: { height: `${orderedLayout.containerHeight}px` },
+        ...containerProps,
+        className: cn("relative w-full", className, containerProps?.className),
+        style: { ...containerProps?.style, height: `${orderedLayout.containerHeight}px` },
         children: orderedLayout.positionedItems.map(({ key, item, columnSpan, rowSpan, size, itemWidth, left, top }) => {
           const unresolvedSingleColumnWidth = containerWidth <= 0 && columnCount === 1;
           const itemWidthValue = unresolvedSingleColumnWidth ? "100%" : `${itemWidth}px`;
+          const layoutContext = {
+            columnCount,
+            columnSpan,
+            columnWidth: resolvedColumnWidth,
+            containerWidth,
+            gap,
+            itemWidth,
+            placementStrategy,
+            rowSpan,
+            rowHeight,
+            size
+          };
+          const itemProps = getItemProps?.(item, layoutContext);
           return /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute min-w-0",
+              ...itemProps,
+              className: cn("absolute min-w-0", itemProps?.className),
               style: {
+                ...itemProps?.style,
                 left: unresolvedSingleColumnWidth ? 0 : `${left}px`,
                 top: `${top}px`,
                 width: itemWidthValue,
                 maxWidth: itemWidthValue
               },
-              children: /* @__PURE__ */ jsx("div", { ref: (node) => registerItemNode(key, node), className: "min-w-0", children: renderItem(item, {
-                columnCount,
-                columnSpan,
-                columnWidth: resolvedColumnWidth,
-                containerWidth,
-                gap,
-                itemWidth,
-                placementStrategy,
-                rowSpan,
-                rowHeight,
-                size
-              }) })
+              children: /* @__PURE__ */ jsx("div", { ref: (node) => registerItemNode(key, node), role: "presentation", className: "min-w-0", children: renderItem(item, layoutContext) })
             },
             key
           );
@@ -22311,35 +22357,717 @@ function WorkbenchMasonryLayout({
     "div",
     {
       ref: containerRef,
-      className: cn("grid w-full items-start", className),
+      ...containerProps,
+      className: cn("grid w-full items-start", className, containerProps?.className),
       style: {
+        ...containerProps?.style,
         gap: `${gap}px`,
         gridAutoFlow: "row dense",
         gridAutoRows: `${rowHeight}px`,
         gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`
       },
-      children: layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => /* @__PURE__ */ jsx(
-        "div",
+      children: layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => {
+        const layoutContext = {
+          columnCount,
+          columnSpan,
+          columnWidth: resolvedColumnWidth,
+          containerWidth,
+          gap,
+          placementStrategy,
+          rowSpan,
+          rowHeight,
+          size
+        };
+        const itemProps = getItemProps?.(item, layoutContext);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...itemProps,
+            className: cn("min-w-0", itemProps?.className),
+            style: {
+              ...itemProps?.style,
+              gridColumn: `span ${columnSpan}`,
+              gridRow: `span ${rowSpan}`
+            },
+            children: /* @__PURE__ */ jsx("div", { ref: (node) => registerItemNode(key, node), role: "presentation", className: "min-w-0", children: renderItem(item, layoutContext) })
+          },
+          key
+        );
+      })
+    }
+  );
+}
+var DEFAULT_GAP_PX = 12;
+var DEFAULT_ROW_HEIGHT_PX = 8;
+var DEFAULT_CARD_WIDTH_PX = 280;
+var BREAKPOINT_TABLET_PX = 640;
+var BREAKPOINT_DESKTOP_PX = 1024;
+var MAX_COLUMN_COUNT = 24;
+function clamp4(value, min5, max5) {
+  return Math.min(Math.max(value, min5), max5);
+}
+function resolveRenderableSlot(slot, context) {
+  return typeof slot === "function" ? slot(context) : slot;
+}
+function resolveLengthToPixels2(value, fallback, node) {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+  if (typeof value !== "string") return fallback;
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) return fallback;
+  if (/^\d+(\.\d+)?(px)?$/.test(normalized)) {
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  }
+  if (normalized.endsWith("rem")) {
+    const parsed = Number.parseFloat(normalized);
+    const rootFontSize = typeof window === "undefined" ? 16 : Number.parseFloat(window.getComputedStyle(node || document.documentElement).fontSize) || 16;
+    return Number.isFinite(parsed) && parsed > 0 ? parsed * rootFontSize : fallback;
+  }
+  return fallback;
+}
+function normalizeColumns(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return void 0;
+  return clamp4(Math.round(value), 1, MAX_COLUMN_COUNT);
+}
+function resolveResponsiveColumns(columns, containerWidth) {
+  if (columns === "auto" || columns === void 0) return void 0;
+  if (typeof columns === "number") return normalizeColumns(columns);
+  const mobile = normalizeColumns(columns.mobile);
+  const tablet = normalizeColumns(columns.tablet);
+  const desktop = normalizeColumns(columns.desktop);
+  if (containerWidth >= BREAKPOINT_DESKTOP_PX) return desktop ?? tablet ?? mobile;
+  if (containerWidth >= BREAKPOINT_TABLET_PX) return tablet ?? mobile ?? desktop;
+  return mobile ?? tablet ?? desktop;
+}
+function resolveColumnCount({
+  containerWidth,
+  itemCount,
+  gap,
+  columns,
+  minCardWidth,
+  idealCardWidth,
+  maxCardWidth,
+  node
+}) {
+  const fixedColumns = resolveResponsiveColumns(columns, containerWidth);
+  if (fixedColumns) return fixedColumns;
+  if (!containerWidth) return 1;
+  const idealWidth = resolveLengthToPixels2(idealCardWidth, DEFAULT_CARD_WIDTH_PX, node);
+  const minWidth = resolveLengthToPixels2(minCardWidth, idealWidth * 0.78, node);
+  const maxWidth = Math.max(
+    minWidth,
+    resolveLengthToPixels2(maxCardWidth, idealWidth * 1.35, node)
+  );
+  const safeItemCount = Math.max(itemCount, 1);
+  const maxCandidate = Math.max(
+    1,
+    Math.min(
+      safeItemCount,
+      Math.ceil((containerWidth + gap) / (Math.max(minWidth * 0.75, 1) + gap))
+    )
+  );
+  let bestCount = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let candidate = 1; candidate <= maxCandidate; candidate += 1) {
+    const width = (containerWidth - gap * Math.max(candidate - 1, 0)) / candidate;
+    if (!Number.isFinite(width) || width <= 0) continue;
+    const score = Math.abs(width - idealWidth) + Math.max(0, minWidth - width) * 3 + Math.max(0, width - maxWidth) * 2;
+    if (score < bestScore) {
+      bestScore = score;
+      bestCount = candidate;
+    }
+  }
+  return bestCount;
+}
+function normalizeGap(value) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : DEFAULT_GAP_PX;
+}
+function normalizeRowHeight(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : DEFAULT_ROW_HEIGHT_PX;
+}
+function normalizeThreshold(value) {
+  return typeof value === "number" && Number.isFinite(value) ? clamp4(value, 0, 1) : 0;
+}
+function normalizeItemSize(size, aspectRatio, columnWidth) {
+  const normalizedAspectRatio = Number.isFinite(aspectRatio) && Number(aspectRatio) > 0 ? Number(aspectRatio) : void 0;
+  const normalizedHeight = size?.height ?? (normalizedAspectRatio ? Math.max(1, columnWidth / normalizedAspectRatio) : void 0);
+  return {
+    ...size,
+    height: normalizedHeight
+  };
+}
+function getDefaultItemKey(item, index) {
+  if (item && typeof item === "object") {
+    const candidate = item;
+    if (typeof candidate.id === "string" || typeof candidate.id === "number") return candidate.id;
+    if (typeof candidate.key === "string" || typeof candidate.key === "number") return candidate.key;
+  }
+  return index;
+}
+function getScrollStorageKey(key) {
+  return `@inf-monkeys-tech/monkeys-design:workbench-collection:${key}`;
+}
+function getParentScrollOwner(node) {
+  let current = node?.parentElement ?? null;
+  while (current) {
+    if (typeof window === "undefined") return current;
+    const overflowY = window.getComputedStyle(current).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") return current;
+    current = current.parentElement;
+  }
+  return null;
+}
+function setsEqual(left, right) {
+  if (left.size !== right.size) return false;
+  for (const value of left) {
+    if (!right.has(value)) return false;
+  }
+  return true;
+}
+function isInteractiveEventTarget(target, currentTarget) {
+  if (typeof Element === "undefined" || !(target instanceof Element) || target === currentTarget) return false;
+  const control = target.closest(
+    'a, button, input, select, textarea, summary, [contenteditable="true"], [data-collection-action]'
+  );
+  return Boolean(control && currentTarget.contains(control));
+}
+function warnOnDuplicateKeys(keys) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  const seen = /* @__PURE__ */ new Set();
+  const duplicates = /* @__PURE__ */ new Set();
+  keys.forEach((key) => {
+    const stringKey = String(key);
+    if (seen.has(stringKey)) duplicates.add(stringKey);
+    seen.add(stringKey);
+  });
+  if (duplicates.size) {
+    console.warn(`WorkbenchCollection received duplicate item keys: ${Array.from(duplicates).join(", ")}`);
+  }
+}
+function WorkbenchCollection({
+  items,
+  config,
+  renderItem,
+  slots,
+  callbacks,
+  className,
+  classNames,
+  style,
+  ariaLabel
+}) {
+  const componentAttributes = useMonkeysComponentAttributes();
+  const localeMessages = useMonkeysLocaleMessages().workbench.collection;
+  const componentId = useId().replace(/:/g, "");
+  const rootRef = useRef(null);
+  const itemsRef = useRef(null);
+  const loadMoreRef = useRef(null);
+  const lastSelectedIndexRef = useRef(null);
+  const loadMoreLockedRef = useRef(false);
+  const layoutReadyRef = useRef(false);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [itemsNode, setItemsNode] = useState(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(
+    () => new Set(config.selection?.defaultSelectedKeys ?? [])
+  );
+  const callbacksRef = useRef(callbacks);
+  callbacksRef.current = callbacks;
+  const registerItemsNode = useCallback((node) => {
+    itemsRef.current = node;
+    setItemsNode(node);
+  }, []);
+  const mode = config.layout.mode;
+  if (mode !== "grid" && mode !== "masonry" && mode !== "dense" && mode !== "rail") {
+    throw new TypeError(`WorkbenchCollection layout.mode "${String(mode)}" is not supported.`);
+  }
+  const gap = normalizeGap(config.layout.gap);
+  const rowHeight = normalizeRowHeight(config.layout.rowHeight);
+  const getItemKey = config.getItemKey ?? getDefaultItemKey;
+  const normalizedItems = useMemo(() => items.map((item, index) => {
+    const key = getItemKey(item, index);
+    return { item, index, key, stringKey: String(key) };
+  }), [getItemKey, items]);
+  const keys = useMemo(
+    () => normalizedItems.map(({ key }) => key),
+    [normalizedItems]
+  );
+  const keysSignature = normalizedItems.map(({ stringKey }) => stringKey).join("
");
+  useEffect(() => warnOnDuplicateKeys(keys), [keys, keysSignature]);
+  const selectionMode = config.selection?.mode ?? "none";
+  const controlledSelection = config.selection?.selectedKeys !== void 0;
+  const selectedKeys = useMemo(
+    () => selectionMode === "none" ? /* @__PURE__ */ new Set() : controlledSelection ? new Set(config.selection?.selectedKeys ?? []) : internalSelectedKeys,
+    [config.selection?.selectedKeys, controlledSelection, internalSelectedKeys, selectionMode]
+  );
+  useEffect(() => {
+    if (controlledSelection) return;
+    const availableKeys = new Set(keys);
+    setInternalSelectedKeys((previous) => {
+      const next = new Set(Array.from(previous).filter((key) => availableKeys.has(key)));
+      return setsEqual(previous, next) ? previous : next;
+    });
+  }, [controlledSelection, keys, keysSignature]);
+  useEffect(() => {
+    const node = itemsNode;
+    if (!node) return void 0;
+    const updateWidth = () => {
+      const nextWidth = Math.round(node.getBoundingClientRect().width);
+      setContainerWidth((previous) => previous === nextWidth ? previous : nextWidth);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "function") {
+      const observer = new ResizeObserver(updateWidth);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+    if (typeof window === "undefined") return void 0;
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [itemsNode]);
+  const columnCount = resolveColumnCount({
+    containerWidth,
+    itemCount: normalizedItems.length,
+    gap,
+    columns: config.layout.columns,
+    minCardWidth: config.layout.minCardWidth,
+    idealCardWidth: config.layout.idealCardWidth ?? config.layout.columnWidth,
+    maxCardWidth: config.layout.maxCardWidth,
+    node: itemsRef.current
+  });
+  const columnWidth = containerWidth > 0 ? Math.max(0, (containerWidth - gap * Math.max(columnCount - 1, 0)) / columnCount) : resolveLengthToPixels2(
+    config.layout.cardWidth ?? config.layout.columnWidth ?? config.layout.idealCardWidth,
+    DEFAULT_CARD_WIDTH_PX,
+    itemsRef.current
+  );
+  const placementStrategy = config.layout.placementStrategy ?? (mode === "dense" ? "dense" : mode === "masonry" ? "shortest" : "shelf");
+  const labels = useMemo(() => ({
+    collection: config.labels?.collection ?? localeMessages.label,
+    loading: config.labels?.loading ?? localeMessages.loading,
+    empty: config.labels?.empty ?? localeMessages.empty,
+    loadError: config.labels?.loadError ?? localeMessages.loadError,
+    refreshError: config.labels?.refreshError ?? localeMessages.refreshError,
+    retry: config.labels?.retry ?? localeMessages.retry,
+    loadingMore: config.labels?.loadingMore ?? localeMessages.loadingMore
+  }), [config.labels, localeMessages]);
+  const virtualizationError = useMemo(() => {
+    const virtualization = config.virtualization;
+    if (virtualization?.enabled !== true || virtualization.fallback !== "error") return null;
+    if (!virtualization.adapter) {
+      return new Error("WorkbenchCollection virtualization requires an adapter.");
+    }
+    if (virtualization.adapter.supports?.(mode) === false) {
+      return new Error(`WorkbenchCollection virtualization adapter does not support mode "${mode}".`);
+    }
+    return null;
+  }, [config.virtualization, mode]);
+  const layoutSnapshot = useMemo(() => ({
+    mode,
+    columnCount,
+    columnWidth,
+    containerWidth,
+    gap,
+    itemCount: normalizedItems.length
+  }), [columnCount, columnWidth, containerWidth, gap, mode, normalizedItems.length]);
+  useEffect(() => {
+    callbacksRef.current?.onLayoutChange?.(layoutSnapshot);
+    if (containerWidth > 0 && !layoutReadyRef.current) {
+      layoutReadyRef.current = true;
+      callbacksRef.current?.onLayoutReady?.(layoutSnapshot);
+    }
+  }, [layoutSnapshot, containerWidth]);
+  useEffect(() => {
+    layoutReadyRef.current = false;
+  }, [mode]);
+  const resolveScrollOwner = useCallback(() => {
+    const requestedOwner = config.layout.scrollOwner;
+    if (requestedOwner && requestedOwner !== "self" && requestedOwner !== "parent") return requestedOwner;
+    if (requestedOwner === "parent") return getParentScrollOwner(rootRef.current);
+    return rootRef.current;
+  }, [config.layout.scrollOwner]);
+  useEffect(() => {
+    const restorationKey = config.scrollRestorationKey?.trim();
+    if (!restorationKey || typeof window === "undefined") return void 0;
+    const owner = resolveScrollOwner();
+    if (!owner) return void 0;
+    const storageKey = getScrollStorageKey(restorationKey);
+    try {
+      const stored = Number.parseFloat(window.sessionStorage.getItem(storageKey) ?? "");
+      if (Number.isFinite(stored) && stored >= 0) owner.scrollTop = stored;
+    } catch {
+    }
+    const saveScrollPosition = () => {
+      try {
+        window.sessionStorage.setItem(storageKey, String(owner.scrollTop));
+      } catch {
+      }
+    };
+    owner.addEventListener("scroll", saveScrollPosition, { passive: true });
+    return () => {
+      saveScrollPosition();
+      owner.removeEventListener("scroll", saveScrollPosition);
+    };
+  }, [config.scrollRestorationKey, resolveScrollOwner]);
+  const state = config.state;
+  const loading = state?.loading === true;
+  const loadingMore = state?.loadingMore === true;
+  const hasMore = state?.hasMore === true;
+  const canLoadMore = typeof callbacks?.onLoadMore === "function";
+  const effectiveError = state?.error ?? virtualizationError;
+  useEffect(() => {
+    if (!loadingMore || !hasMore) loadMoreLockedRef.current = false;
+  }, [hasMore, loadingMore, normalizedItems.length, keysSignature]);
+  useEffect(() => {
+    const sentinel = loadMoreRef.current;
+    if (!sentinel || !canLoadMore || !hasMore || loadingMore) return void 0;
+    if (typeof IntersectionObserver !== "function") return void 0;
+    const owner = resolveScrollOwner();
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting) || loadMoreLockedRef.current) return;
+      loadMoreLockedRef.current = true;
+      try {
+        const result = callbacksRef.current?.onLoadMore?.();
+        if (result && typeof result.then === "function") {
+          void result.catch(() => {
+            loadMoreLockedRef.current = false;
+          });
+        }
+      } catch (error) {
+        loadMoreLockedRef.current = false;
+        throw error;
+      }
+    }, {
+      root: owner === rootRef.current ? owner : owner || null,
+      rootMargin: config.loading?.rootMargin ?? "240px",
+      threshold: normalizeThreshold(config.loading?.threshold)
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [canLoadMore, config.loading?.rootMargin, config.loading?.threshold, hasMore, keysSignature, loadingMore, normalizedItems.length, resolveScrollOwner]);
+  const groups = useMemo(() => {
+    if (!config.grouping) {
+      return [{ key: "__all__", stringKey: "__all__", items: normalizedItems }];
+    }
+    const grouped = /* @__PURE__ */ new Map();
+    normalizedItems.forEach((entry) => {
+      const groupKey = config.grouping?.getGroupKey(entry.item, entry.index) ?? "__all__";
+      const stringKey = String(groupKey);
+      const existing = grouped.get(stringKey);
+      if (existing) {
+        existing.items.push(entry);
+        return;
+      }
+      grouped.set(stringKey, {
+        key: groupKey,
+        stringKey,
+        label: config.grouping?.getGroupLabel?.(groupKey, entry.item),
+        items: [entry]
+      });
+    });
+    return Array.from(grouped.values());
+  }, [config.grouping, normalizedItems]);
+  const setSelection = useCallback((entry, behavior = config.selection?.behavior ?? (selectionMode === "multiple" ? "toggle" : "replace")) => {
+    if (selectionMode === "none" || config.selection?.isItemDisabled?.(entry.item, entry.index)) return;
+    const current = new Set(selectedKeys);
+    const next = /* @__PURE__ */ new Set();
+    if (selectionMode === "single") {
+      if (!(behavior === "toggle" && current.has(entry.key))) next.add(entry.key);
+    } else if (behavior === "range" && lastSelectedIndexRef.current !== null) {
+      current.forEach((key) => next.add(key));
+      const start = Math.min(lastSelectedIndexRef.current, entry.index);
+      const end = Math.max(lastSelectedIndexRef.current, entry.index);
+      normalizedItems.slice(start, end + 1).forEach((candidate) => {
+        if (!config.selection?.isItemDisabled?.(candidate.item, candidate.index)) next.add(candidate.key);
+      });
+    } else if (behavior === "replace") {
+      next.add(entry.key);
+    } else {
+      current.forEach((key) => next.add(key));
+      if (next.has(entry.key)) next.delete(entry.key);
+      else next.add(entry.key);
+    }
+    lastSelectedIndexRef.current = entry.index;
+    if (!controlledSelection) setInternalSelectedKeys(next);
+    callbacks?.onSelectionChange?.(next, { item: entry.item, key: entry.key, behavior });
+  }, [callbacks, config.selection, controlledSelection, normalizedItems, selectedKeys, selectionMode]);
+  const createItemContext = useCallback((entry, layout) => {
+    const disabled = config.selection?.isItemDisabled?.(entry.item, entry.index) ?? false;
+    const context = {
+      item: entry.item,
+      index: entry.index,
+      key: entry.key,
+      status: config.getItemStatus?.(entry.item, entry.index) ?? "idle",
+      disabled,
+      selected: selectedKeys.has(entry.key),
+      selectionMode,
+      layout,
+      select: (behavior) => setSelection(entry, behavior),
+      preview: () => callbacks?.onItemPreview?.(entry.item, context),
+      detail: () => callbacks?.onItemDetail?.(entry.item, context),
+      renderSlot: (name) => {
+        return slots?.item?.[name]?.(entry.item, context);
+      },
+      notifyMediaLoad: () => callbacks?.onMediaLoad?.(entry.item, context),
+      notifyMediaError: (error) => callbacks?.onMediaError?.(entry.item, context, error)
+    };
+    return context;
+  }, [callbacks, config.getItemStatus, config.selection, selectedKeys, selectionMode, setSelection, slots?.item]);
+  const getItemInteractionProps = useCallback((entry, context) => {
+    const handleKeyboard = (event) => {
+      if (event.target !== event.currentTarget || event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      if (selectionMode !== "none") context.select(event.shiftKey ? "range" : void 0);
+      else callbacks?.onItemClick?.(entry.item, context, event);
+    };
+    return {
+      id: `${componentId}-item-${entry.index}`,
+      "data-monkeys-collection-item": "",
+      "data-item-key": entry.stringKey,
+      "data-selected": context.selected || void 0,
+      "data-disabled": context.disabled || void 0,
+      "data-status": context.status,
+      role: selectionMode === "none" ? "listitem" : "option",
+      "aria-selected": selectionMode === "none" ? void 0 : context.selected,
+      "aria-disabled": context.disabled || void 0,
+      tabIndex: callbacks?.onItemClick || selectionMode !== "none" ? 0 : void 0,
+      draggable: callbacks?.onItemDragStart ? true : void 0,
+      className: cn(
+        "min-w-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        config.appearance?.hover === "lift" && "transition-transform hover:-translate-y-0.5 motion-reduce:transform-none",
+        config.appearance?.selection === "ring" && context.selected && "ring-2 ring-primary",
+        config.appearance?.selection === "outline" && context.selected && "outline outline-2 outline-primary",
+        classNames?.item
+      ),
+      onClick: (event) => {
+        if (isInteractiveEventTarget(event.target, event.currentTarget)) return;
+        if (selectionMode !== "none") context.select(event.shiftKey ? "range" : void 0);
+        callbacks?.onItemClick?.(entry.item, context, event);
+      },
+      onDoubleClick: (event) => {
+        if (isInteractiveEventTarget(event.target, event.currentTarget)) return;
+        callbacks?.onItemDoubleClick?.(entry.item, context, event);
+      },
+      onKeyDown: handleKeyboard,
+      onDragStart: (event) => callbacks?.onItemDragStart?.(entry.item, context, event),
+      onDragOver: callbacks?.onItemDrop ? (event) => event.preventDefault() : void 0,
+      onDrop: (event) => callbacks?.onItemDrop?.(entry.item, context, event)
+    };
+  }, [callbacks, classNames?.item, componentId, config.appearance, selectionMode]);
+  const renderEntry = useCallback((entry, layout, includeShell = true) => {
+    const context = createItemContext(entry, layout);
+    if (!includeShell) return renderItem(entry.item, context);
+    return /* @__PURE__ */ jsx("div", { ...getItemInteractionProps(entry, context), children: renderItem(entry.item, context) });
+  }, [createItemContext, getItemInteractionProps, renderItem]);
+  const baseLayoutContext = useMemo(() => ({
+    mode,
+    columnCount,
+    columnWidth,
+    containerWidth,
+    gap,
+    placementStrategy,
+    rowHeight
+  }), [columnCount, columnWidth, containerWidth, gap, mode, placementStrategy, rowHeight]);
+  const renderGroupItems = (group) => {
+    const virtualization = config.virtualization;
+    const adapter = virtualization?.adapter;
+    const virtualizationRequested = virtualization?.enabled === true;
+    if (virtualizationRequested && (!adapter || adapter.supports?.(mode) === false)) {
+      if (virtualization?.fallback === "error") {
+        return null;
+      }
+    }
+    if (virtualizationRequested && adapter && adapter.supports?.(mode) !== false) {
+      return adapter.render({
+        items: group.items.map(({ item }) => item),
+        keys: group.items.map(({ key }) => key),
+        layout: config.layout,
+        scrollOwner: resolveScrollOwner(),
+        renderItem: (item, localIndex, layout) => {
+          const entry = group.items[localIndex];
+          return entry ? renderEntry(entry, layout) : null;
+        }
+      });
+    }
+    if (mode === "masonry" || mode === "dense") {
+      return /* @__PURE__ */ jsx(
+        WorkbenchMasonryLayout,
         {
-          className: "min-w-0",
-          style: {
-            gridColumn: `span ${columnSpan}`,
-            gridRow: `span ${rowSpan}`
+          items: group.items,
+          columnCount,
+          columnWidth: config.layout.cardWidth ?? config.layout.columnWidth ?? config.layout.idealCardWidth,
+          gap,
+          rowHeight,
+          placementStrategy: mode === "dense" ? "dense" : placementStrategy,
+          className: classNames?.layout,
+          containerProps: {
+            role: selectionMode === "none" ? "list" : "listbox",
+            "aria-label": ariaLabel ?? labels.collection,
+            "aria-multiselectable": selectionMode === "multiple" || void 0
           },
-          children: /* @__PURE__ */ jsx("div", { ref: (node) => registerItemNode(key, node), className: "h-full", children: renderItem(item, {
-            columnCount,
-            columnSpan,
-            columnWidth: resolvedColumnWidth,
-            containerWidth,
-            gap,
-            placementStrategy,
-            rowSpan,
-            rowHeight,
-            size
-          }) })
+          getItemProps: (entry, masonryLayout) => {
+            const context = createItemContext(entry, { ...masonryLayout, mode });
+            return getItemInteractionProps(entry, context);
+          },
+          getItemKey: (entry) => entry.key,
+          getItemSize: (entry, masonryLayout) => {
+            const layout = {
+              ...masonryLayout,
+              mode
+            };
+            const customSize = config.layout.getItemSize?.(entry.item, layout);
+            const aspectRatio = config.layout.getItemAspectRatio?.(entry.item, entry.index);
+            return normalizeItemSize(customSize, aspectRatio, masonryLayout.columnWidth);
+          },
+          renderItem: (entry, masonryLayout) => renderEntry(entry, {
+            ...masonryLayout,
+            mode
+          }, false)
+        }
+      );
+    }
+    if (mode === "rail") {
+      const cardWidth = config.layout.cardWidth ?? config.layout.idealCardWidth ?? DEFAULT_CARD_WIDTH_PX;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: selectionMode === "none" ? "list" : "listbox",
+          "aria-label": ariaLabel ?? labels.collection,
+          "aria-multiselectable": selectionMode === "multiple" || void 0,
+          className: cn("grid min-w-0 grid-flow-col items-start overflow-x-auto", classNames?.layout),
+          style: { gap, gridAutoColumns: typeof cardWidth === "number" ? `${cardWidth}px` : cardWidth },
+          children: group.items.map((entry) => /* @__PURE__ */ jsx(Fragment$1, { children: renderEntry(entry, baseLayoutContext) }, entry.stringKey))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: selectionMode === "none" ? "list" : "listbox",
+        "aria-label": ariaLabel ?? labels.collection,
+        "aria-multiselectable": selectionMode === "multiple" || void 0,
+        className: cn("grid min-w-0 items-start", classNames?.layout),
+        style: {
+          gap,
+          gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`
         },
-        key
-      ))
+        children: group.items.map((entry) => {
+          const customSize = config.layout.getItemSize?.(entry.item, baseLayoutContext);
+          const span = clamp4(Math.round(Number(customSize?.columnSpan) || 1), 1, columnCount);
+          const aspectRatio = config.layout.getItemAspectRatio?.(entry.item, entry.index);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...getItemInteractionProps(
+                entry,
+                createItemContext(entry, { ...baseLayoutContext, columnSpan: span, size: customSize })
+              ),
+              style: {
+                gridColumn: span > 1 ? `span ${span}` : void 0,
+                aspectRatio: Number.isFinite(aspectRatio) && Number(aspectRatio) > 0 ? String(aspectRatio) : void 0
+              },
+              children: renderEntry(entry, { ...baseLayoutContext, columnSpan: span, size: customSize }, false)
+            },
+            entry.stringKey
+          );
+        })
+      }
+    );
+  };
+  const slotContext = {
+    items,
+    error: effectiveError,
+    loading,
+    loadingMore,
+    selectedKeys,
+    retry: () => callbacks?.onRetry?.()
+  };
+  const header = resolveRenderableSlot(slots?.header, slotContext);
+  const toolbar = resolveRenderableSlot(slots?.toolbar, slotContext);
+  const selectionToolbar = selectedKeys.size > 0 ? resolveRenderableSlot(slots?.selectionToolbar, slotContext) : null;
+  const beforeItems = resolveRenderableSlot(slots?.beforeItems, slotContext);
+  const footer = resolveRenderableSlot(slots?.footer, slotContext);
+  const showInitialLoading = loading && items.length === 0;
+  const showInitialError = Boolean(effectiveError) && items.length === 0 && !showInitialLoading;
+  const showEmpty = !showInitialLoading && !showInitialError && (state?.empty === true || items.length === 0);
+  const loadingSlot = resolveRenderableSlot(slots?.loading, slotContext);
+  const errorSlot = resolveRenderableSlot(slots?.error, slotContext);
+  const emptySlot = resolveRenderableSlot(slots?.empty, slotContext);
+  const loadMoreSlot = resolveRenderableSlot(slots?.loadMore, slotContext);
+  const selfScrollable = config.layout.scrollOwner === "self" || config.layout.scrollOwner === void 0 && (config.layout.fillHeight || config.layout.maxHeight);
+  const rootStyle = {
+    ...style,
+    padding: config.layout.padding ?? style?.padding,
+    height: config.layout.fillHeight ? "100%" : style?.height,
+    maxHeight: config.layout.maxHeight ?? style?.maxHeight,
+    overflow: selfScrollable ? "auto" : style?.overflow
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: rootRef,
+      ...componentAttributes,
+      "data-monkeys-component": "workbench-collection",
+      "data-layout-mode": mode,
+      "data-density": config.appearance?.density,
+      "data-radius": config.appearance?.radius,
+      "data-media-fit": config.appearance?.mediaFit,
+      "aria-label": ariaLabel ?? labels.collection,
+      "aria-busy": loading || loadingMore || void 0,
+      className: cn("min-h-0 min-w-0", config.layout.fillHeight && "h-full", classNames?.root, className),
+      style: rootStyle,
+      children: [
+        hasRenderableNode(header) ? /* @__PURE__ */ jsx("div", { className: classNames?.header, children: header }) : null,
+        hasRenderableNode(toolbar) ? /* @__PURE__ */ jsx("div", { className: classNames?.toolbar, children: toolbar }) : null,
+        hasRenderableNode(selectionToolbar) ? /* @__PURE__ */ jsx("div", { className: classNames?.selectionToolbar, children: selectionToolbar }) : null,
+        hasRenderableNode(beforeItems) ? /* @__PURE__ */ jsx("div", { className: classNames?.beforeItems, children: beforeItems }) : null,
+        showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loading }) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
+          BaseNotice,
+          {
+            tone: "danger",
+            role: "alert",
+            "aria-live": "assertive",
+            title: labels.loadError,
+            actions: callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+          }
+        ) : showEmpty ? hasRenderableNode(emptySlot) ? emptySlot : /* @__PURE__ */ jsx(BaseEmptyState, { title: labels.empty }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: registerItemsNode,
+            className: cn("min-w-0", classNames?.items),
+            children: groups.map((group, groupIndex) => {
+              const groupContext = {
+                key: group.key,
+                label: group.label,
+                items: group.items.map(({ item }) => item),
+                groupIndex
+              };
+              const heading = config.grouping ? slots?.groupHeading?.(groupContext, slotContext) ?? group.label : null;
+              const headingId = `${componentId}-group-${groupIndex}`;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-collection-group": group.stringKey,
+                  className: classNames?.group,
+                  children: [
+                    hasRenderableNode(heading) ? /* @__PURE__ */ jsx("div", { id: headingId, role: "heading", "aria-level": 2, className: classNames?.groupHeading, children: heading }) : null,
+                    renderGroupItems(group)
+                  ]
+                },
+                group.stringKey
+              );
+            })
+          }
+        ),
+        items.length > 0 && effectiveError ? /* @__PURE__ */ jsx("div", { className: classNames?.status, children: hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
+          BaseNotice,
+          {
+            tone: "danger",
+            role: "alert",
+            title: labels.refreshError,
+            actions: callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+          }
+        ) }) : null,
+        items.length > 0 && (hasMore || loadingMore) ? /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: classNames?.loadMore, "data-collection-load-more": "", children: hasRenderableNode(loadMoreSlot) ? loadMoreSlot : loadingMore ? /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loadingMore }) : null }) : null,
+        hasRenderableNode(footer) ? /* @__PURE__ */ jsx("div", { className: classNames?.footer, children: footer }) : null
+      ]
     }
   );
 }
@@ -22780,45 +23508,54 @@ function WorkbenchGalleryView({
   );
   if (isMasonry) {
     return /* @__PURE__ */ jsx(
-      WorkbenchMasonryLayout,
+      WorkbenchCollection,
       {
         items: rows,
-        className,
-        gap: GALLERY_GRID_GAP_PX,
-        columnWidth: resolvedMasonryColumnWidth,
-        placementStrategy: masonryPlacementStrategy,
-        getItemKey: (row, rowIndex) => row?.id || row?.linkKey || rowIndex,
-        getItemSize: (row, layout) => {
-          const defaultSize = getDefaultGalleryMasonryItemSize({
-            row,
-            columns,
-            galleryFieldKey,
-            galleryDensity,
-            galleryBentoColumns,
-            galleryDetailVisibility,
-            galleryDetailLimit,
-            getFieldValue: resolvedGetFieldValue,
-            isMediaColumn: resolvedIsMediaColumn,
-            isTitleCandidate: resolvedIsTitleCandidate,
-            isSummaryCandidate: resolvedIsSummaryCandidate,
-            getDisplayText: resolvedGetDisplayText,
-            isImageField: resolvedIsImageField,
-            isAudioField: resolvedIsAudioField,
-            cardVariant,
-            renderPreview,
-            renderLeadingVisual,
-            hiddenDetailFieldKeys,
-            layout,
-            resolveRecordVisual
-          });
-          if (typeof getMasonryItemSize !== "function") return defaultSize;
-          const customSize = getMasonryItemSize(row, { ...layout, defaultSize }) || {};
-          return {
-            ...defaultSize,
-            ...customSize
-          };
+        classNames: { layout: className },
+        config: {
+          getItemKey: (row, rowIndex) => row?.id || row?.linkKey || rowIndex,
+          layout: {
+            mode: masonryPlacementStrategy === "dense" ? "dense" : "masonry",
+            gap: GALLERY_GRID_GAP_PX,
+            idealCardWidth: resolvedMasonryColumnWidth,
+            placementStrategy: masonryPlacementStrategy,
+            getItemSize: (row, layout) => {
+              const defaultSize = getDefaultGalleryMasonryItemSize({
+                row,
+                columns,
+                galleryFieldKey,
+                galleryDensity,
+                galleryBentoColumns,
+                galleryDetailVisibility,
+                galleryDetailLimit,
+                getFieldValue: resolvedGetFieldValue,
+                isMediaColumn: resolvedIsMediaColumn,
+                isTitleCandidate: resolvedIsTitleCandidate,
+                isSummaryCandidate: resolvedIsSummaryCandidate,
+                getDisplayText: resolvedGetDisplayText,
+                isImageField: resolvedIsImageField,
+                isAudioField: resolvedIsAudioField,
+                cardVariant,
+                renderPreview,
+                renderLeadingVisual,
+                hiddenDetailFieldKeys,
+                layout,
+                resolveRecordVisual
+              });
+              if (typeof getMasonryItemSize !== "function") return defaultSize;
+              const customSize = getMasonryItemSize(row, {
+                ...layout,
+                placementStrategy: layout.placementStrategy === "dense" ? "dense" : "shelf",
+                defaultSize
+              }) || {};
+              return {
+                ...defaultSize,
+                ...customSize
+              };
+            }
+          }
         },
-        renderItem: (row) => renderGalleryCard(row, rows.indexOf(row))
+        renderItem: (row, context) => renderGalleryCard(row, context.index)
       }
     );
   }
@@ -23336,7 +24073,7 @@ var getDomain = (values, min5, max5) => {
   return lower < upper ? [lower, upper] : [upper, lower];
 };
 var scale = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
-var clamp4 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
+var clamp5 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
 var activatePoint = (event, point, onPointSelect) => {
   if (!onPointSelect || event.key !== "Enter" && event.key !== " ") return;
   event.preventDefault();
@@ -23418,9 +24155,9 @@ function WorkbenchScatterPlot({
             xThreshold === void 0 ? null : /* @__PURE__ */ jsx(
               "line",
               {
-                x1: clamp4(xThreshold, plotLeft, plotRight),
+                x1: clamp5(xThreshold, plotLeft, plotRight),
                 y1: plotTop,
-                x2: clamp4(xThreshold, plotLeft, plotRight),
+                x2: clamp5(xThreshold, plotLeft, plotRight),
                 y2: plotBottom,
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
@@ -23430,9 +24167,9 @@ function WorkbenchScatterPlot({
               "line",
               {
                 x1: plotLeft,
-                y1: clamp4(yThreshold, plotTop, plotBottom),
+                y1: clamp5(yThreshold, plotTop, plotBottom),
                 x2: plotRight,
-                y2: clamp4(yThreshold, plotTop, plotBottom),
+                y2: clamp5(yThreshold, plotTop, plotBottom),
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
               }
@@ -23459,17 +24196,17 @@ function WorkbenchScatterPlot({
               }
             ),
             validPoints.map((point) => {
-              const x = clamp4(
+              const x = clamp5(
                 scale(point.x, xDomain, plotLeft, plotRight),
                 plotLeft,
                 plotRight
               );
-              const y = clamp4(
+              const y = clamp5(
                 scale(point.y, yDomain, plotBottom, plotTop),
                 plotTop,
                 plotBottom
               );
-              const radius = point.size === void 0 ? 9 : clamp4(scale(point.size, sizeDomain, 7, 18), 7, 18);
+              const radius = point.size === void 0 ? 9 : clamp5(scale(point.size, sizeDomain, 7, 18), 7, 18);
               const selected = selectedPointId === point.id;
               return /* @__PURE__ */ jsxs(
                 "g",
@@ -24001,7 +24738,7 @@ var getDomain2 = (values, min5, max5) => {
   return lower < upper ? [lower, upper] : [upper, lower];
 };
 var scale2 = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
-var clamp5 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
+var clamp6 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
 var toneVariable = {
   primary: "--radar-series-one",
   secondary: "--radar-series-two",
@@ -24064,7 +24801,7 @@ function WorkbenchRadarMatrix({
   const plotRight = width;
   const plotTop = 0;
   const plotBottom = height;
-  const xThreshold = clamp5(
+  const xThreshold = clamp6(
     scale2(
       Number.isFinite(thresholds?.x) ? Number(thresholds?.x) : (xDomain[0] + xDomain[1]) / 2,
       xDomain,
@@ -24074,7 +24811,7 @@ function WorkbenchRadarMatrix({
     plotLeft,
     plotRight
   );
-  const yThreshold = clamp5(
+  const yThreshold = clamp6(
     scale2(
       Number.isFinite(thresholds?.y) ? Number(thresholds?.y) : (yDomain[0] + yDomain[1]) / 2,
       yDomain,
@@ -24182,13 +24919,13 @@ function WorkbenchRadarMatrix({
                 ] }, quadrant.id);
               }),
               validPoints.map((point, index) => {
-                const x = clamp5(scale2(point.x, xDomain, 40, width - 40), 40, width - 40);
-                const y = clamp5(scale2(point.y, yDomain, height - 48, 54), 54, height - 48);
+                const x = clamp6(scale2(point.x, xDomain, 40, width - 40), 40, width - 40);
+                const y = clamp6(scale2(point.y, yDomain, height - 48, 54), 54, height - 48);
                 const tone = point.tone || (index % 2 === 0 ? "primary" : "accent");
                 const selected = selectedPointId === point.id;
                 const labelled = labelledPointIds.has(point.id);
-                const radius = labelled ? clamp5(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
-                const fontSize = labelled ? clamp5(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
+                const radius = labelled ? clamp6(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
+                const fontSize = labelled ? clamp6(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
                 const pointStyle = {
                   fill: toneColor(tone),
                   stroke: "hsl(var(--foreground) / 0.74)"
@@ -24290,8 +25027,8 @@ function WorkbenchRadarMatrix({
                 validPoints.map((point, index) => /* @__PURE__ */ jsx(
                   "circle",
                   {
-                    cx: clamp5(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
-                    cy: clamp5(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
+                    cx: clamp6(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
+                    cy: clamp6(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
                     r: "8",
                     style: { fill: toneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
                   },
@@ -27776,7 +28513,7 @@ var DEFAULT_ZOOM_STEP = 1.18;
 var DEFAULT_STAGE_PADDING = 16;
 var MAX_SAFE_SCALE = 1e6;
 var MIN_SAFE_SCALE = 1e-6;
-var clamp6 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
+var clamp7 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
 var isNoDragTarget = (target) => target instanceof Element && Boolean(target.closest('[data-no-drag="true"]'));
 function ResetIcon() {
   return /* @__PURE__ */ jsxs(
@@ -27900,7 +28637,7 @@ function DataExplorerImagePreview({
         availableWidth / size.width,
         availableHeight / size.height
       );
-      const nextScale = clamp6(
+      const nextScale = clamp7(
         fitScale,
         normalizedMinScale,
         normalizedMaxScale
@@ -27954,7 +28691,7 @@ function DataExplorerImagePreview({
       if (!Number.isFinite(factor) || factor === 1) return;
       if (!Number.isFinite(stageX) || !Number.isFinite(stageY)) return;
       setView((current) => {
-        const nextScale = clamp6(
+        const nextScale = clamp7(
           current.scale * factor,
           normalizedMinScale,
           normalizedMaxScale
@@ -29794,6 +30531,6 @@ function useDarkMode() {
   return { mode, setMode, resolvedMode };
 }
 
-export { AgentWorkbenchActivity, AgentWorkbenchSidebar, 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, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, 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, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysProvider, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, OverlayNodeHost, RenderNodeHost, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UserAccountMenu, WorkbenchAssetGallery, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchEvidenceList, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchJourneyNavigation, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchMetricGrid, WorkbenchRadarFilterChip, 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, resolveBaseAppearance, resolveDataExplorerAppearance, resolveMonkeysLocale, resolveRenderNodePolicyState, resolveToastVariantForMessage, sessionRenderNodeScrollRestoration, setTailwindTheme, toast, useDarkMode, useMonkeysBaseAppearance, useMonkeysComponentAttributes, useMonkeysDataExplorerAppearance, useMonkeysDirection, useMonkeysEnvironment, useMonkeysLocale, useMonkeysLocaleMessages, useMonkeysPortalOptions, useMonkeysResolvedTheme, useToastFeed, useToastOnValue, zhCN };
+export { AgentWorkbenchActivity, AgentWorkbenchSidebar, 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, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, 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, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysProvider, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, OverlayNodeHost, RenderNodeHost, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UserAccountMenu, WorkbenchAssetGallery, WorkbenchCollection, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchEvidenceList, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchJourneyNavigation, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchMetricGrid, WorkbenchRadarFilterChip, 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, resolveBaseAppearance, resolveDataExplorerAppearance, resolveMonkeysLocale, resolveRenderNodePolicyState, resolveToastVariantForMessage, sessionRenderNodeScrollRestoration, setTailwindTheme, toast, useDarkMode, useMonkeysBaseAppearance, useMonkeysComponentAttributes, useMonkeysDataExplorerAppearance, useMonkeysDirection, useMonkeysEnvironment, useMonkeysLocale, useMonkeysLocaleMessages, useMonkeysPortalOptions, useMonkeysResolvedTheme, useToastFeed, useToastOnValue, zhCN };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map