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

package/dist/components/workbench/index.mjs

@@ -8667,13 +8667,15 @@ function resolveColumnCount({
   itemCount,
   gap,
   columns,
+  maxColumns,
   minCardWidth,
   idealCardWidth,
   maxCardWidth,
   node
 }) {
   const fixedColumns = resolveResponsiveColumns(columns, containerWidth);
-  if (fixedColumns) return fixedColumns;
+  const resolvedMaxColumns = resolveResponsiveColumns(maxColumns, containerWidth);
+  if (fixedColumns) return resolvedMaxColumns ? Math.min(fixedColumns, resolvedMaxColumns) : fixedColumns;
   if (!containerWidth) return 1;
   const idealWidth = resolveLengthToPixels2(idealCardWidth, DEFAULT_CARD_WIDTH_PX, node);
   const minWidth = resolveLengthToPixels2(minCardWidth, idealWidth * 0.78, node);
@@ -8700,7 +8702,7 @@ function resolveColumnCount({
       bestCount = candidate;
     }
   }
-  return bestCount;
+  return resolvedMaxColumns ? Math.min(bestCount, resolvedMaxColumns) : bestCount;
 }
 function normalizeGap(value) {
   return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : DEFAULT_GAP_PX;
@@ -8767,6 +8769,10 @@ function warnOnDuplicateKeys(keys) {
     console.warn(`WorkbenchCollection received duplicate item keys: ${Array.from(duplicates).join(", ")}`);
   }
 }
+function normalizeTitleMaxLines(value) {
+  if (!Number.isFinite(value) || Number(value) <= 0) return void 0;
+  return clamp2(Math.round(Number(value)), 1, 12);
+}
 function WorkbenchCollection({
   items,
   config,
@@ -8851,6 +8857,7 @@ function WorkbenchCollection({
     itemCount: normalizedItems.length,
     gap,
     columns: config.layout.columns,
+    maxColumns: config.layout.maxColumns,
     minCardWidth: config.layout.minCardWidth,
     idealCardWidth: config.layout.idealCardWidth ?? config.layout.columnWidth,
     maxCardWidth: config.layout.maxCardWidth,
@@ -8938,25 +8945,29 @@ function WorkbenchCollection({
   useEffect(() => {
     if (!loadingMore || !hasMore) loadMoreLockedRef.current = false;
   }, [hasMore, loadingMore, normalizedItems.length, keysSignature]);
+  const requestLoadMore = useCallback(() => {
+    if (!canLoadMore || !hasMore || loadingMore || 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;
+    }
+  }, [canLoadMore, hasMore, loadingMore]);
   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;
-      }
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      requestLoadMore();
     }, {
       root: owner === rootRef.current ? owner : owner || null,
       rootMargin: config.loading?.rootMargin ?? "240px",
@@ -8964,7 +8975,25 @@ function WorkbenchCollection({
     });
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [canLoadMore, config.loading?.rootMargin, config.loading?.threshold, hasMore, keysSignature, loadingMore, normalizedItems.length, resolveScrollOwner]);
+  }, [canLoadMore, config.loading?.rootMargin, config.loading?.threshold, hasMore, keysSignature, loadingMore, normalizedItems.length, requestLoadMore, resolveScrollOwner]);
+  useEffect(() => {
+    if (!config.loading?.autoFill || !canLoadMore || !hasMore || loadingMore) return;
+    const sentinel = loadMoreRef.current;
+    if (!sentinel) return;
+    const owner = resolveScrollOwner() ?? (config.layout.scrollOwner === "parent" ? rootRef.current?.parentElement ?? null : null) ?? rootRef.current;
+    if (!owner || owner.clientHeight <= 0) return;
+    if (owner.scrollHeight <= owner.clientHeight + 1) requestLoadMore();
+  }, [
+    canLoadMore,
+    config.layout.scrollOwner,
+    config.loading?.autoFill,
+    hasMore,
+    keysSignature,
+    loadingMore,
+    normalizedItems.length,
+    requestLoadMore,
+    resolveScrollOwner
+  ]);
   const groups = useMemo(() => {
     if (!config.grouping) {
       return [{ key: "__all__", stringKey: "__all__", items: normalizedItems }];
@@ -9050,11 +9079,16 @@ function WorkbenchCollection({
       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,
+      tabIndex: callbacks?.onItemClick || selectionMode !== "none" || config.item?.title?.visibility === "hover" ? 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",
+        "min-w-0 group/workbench-collection-item outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        config.appearance?.hover && config.appearance.hover !== "none" && "transition-[transform,box-shadow,background-color] duration-200",
+        config.appearance?.hover === "highlight" && "hover:bg-muted/30",
+        config.appearance?.hover === "lift" && "hover:-translate-y-0.5 motion-reduce:transform-none",
+        config.appearance?.hover === "scale" && "hover:scale-[1.01] motion-reduce:transform-none",
+        config.appearance?.hover === "shadow" && "hover:shadow-md",
+        config.appearance?.hover === "lift-shadow" && "hover:-translate-y-0.5 hover:shadow-md 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
@@ -9068,17 +9102,70 @@ function WorkbenchCollection({
         if (isInteractiveEventTarget(event.target, event.currentTarget)) return;
         callbacks?.onItemDoubleClick?.(entry.item, context, event);
       },
+      onMouseEnter: (event) => callbacks?.onItemHoverChange?.(entry.item, context, true, event),
+      onMouseLeave: (event) => callbacks?.onItemHoverChange?.(entry.item, context, false, 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]);
+  }, [callbacks, classNames?.item, componentId, config.appearance, config.item?.title?.visibility, selectionMode]);
+  const renderItemContent2 = useCallback((entry, context) => {
+    const content = renderItem(entry.item, context);
+    const titleConfig = config.item?.title;
+    const visibility = titleConfig?.visibility ?? "always";
+    if (!titleConfig || visibility === "never") return content;
+    const title = titleConfig.getContent?.(entry.item, context) ?? context.renderSlot("title");
+    if (!hasRenderableNode(title)) return content;
+    const placement = titleConfig.placement ?? "below";
+    const overlay = placement.startsWith("overlay-");
+    const maxLines = normalizeTitleMaxLines(titleConfig.maxLines);
+    const surface = titleConfig.surface ?? (overlay ? "scrim" : "none");
+    const titleNode = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-collection-item-title": "",
+        "data-title-placement": placement,
+        "data-title-visibility": visibility,
+        className: cn(
+          "min-w-0 px-1 py-2 text-sm font-medium text-foreground",
+          titleConfig.align === "center" && "text-center",
+          titleConfig.align === "end" && "text-right",
+          visibility === "hover" && "opacity-0 transition-opacity group-hover/workbench-collection-item:opacity-100 group-focus-within/workbench-collection-item:opacity-100",
+          overlay && "pointer-events-none absolute inset-x-0 z-10 px-3 py-2",
+          placement === "overlay-top" && "top-0",
+          placement === "overlay-center" && "top-1/2 -translate-y-1/2 motion-reduce:transform-none",
+          placement === "overlay-bottom" && "bottom-0",
+          surface === "surface" && "bg-background/90 backdrop-blur-sm",
+          surface === "scrim" && placement === "overlay-top" && "bg-gradient-to-b from-background/90 to-transparent pb-8",
+          surface === "scrim" && placement === "overlay-bottom" && "bg-gradient-to-t from-background/90 to-transparent pt-8",
+          surface === "scrim" && placement === "overlay-center" && "bg-background/75 backdrop-blur-sm",
+          Boolean(maxLines) && "overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical]",
+          classNames?.itemTitle
+        ),
+        style: maxLines ? { WebkitLineClamp: maxLines } : void 0,
+        children: title
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("min-w-0", overlay && "relative", classNames?.itemContent),
+        "data-collection-item-content": "",
+        children: [
+          placement === "above" ? titleNode : null,
+          content,
+          placement === "below" || overlay ? titleNode : null
+        ]
+      }
+    );
+  }, [classNames?.itemContent, classNames?.itemTitle, config.item?.title, renderItem]);
   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 content = renderItemContent2(entry, context);
+    if (!includeShell) return content;
+    return /* @__PURE__ */ jsx("div", { ...getItemInteractionProps(entry, context), children: content });
+  }, [createItemContext, getItemInteractionProps, renderItemContent2]);
   const baseLayoutContext = useMemo(() => ({
     mode,
     columnCount,
@@ -9105,7 +9192,7 @@ function WorkbenchCollection({
         scrollOwner: resolveScrollOwner(),
         renderItem: (item, localIndex, layout) => {
           const entry = group.items[localIndex];
-          return entry ? renderEntry(entry, layout) : null;
+          return entry ? /* @__PURE__ */ jsx(Fragment$1, { children: renderEntry(entry, layout) }, entry.stringKey) : null;
         }
       });
     }
@@ -9232,6 +9319,7 @@ function WorkbenchCollection({
       "data-density": config.appearance?.density,
       "data-radius": config.appearance?.radius,
       "data-media-fit": config.appearance?.mediaFit,
+      "data-hover-effect": config.appearance?.hover,
       "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),
@@ -9328,14 +9416,6 @@ function getGalleryCardWidthMetrics(density) {
   if (density === "detailed") return { min: 320, ideal: 372, max: 420 };
   return { min: 260, ideal: 304, max: 348 };
 }
-function getGalleryCardWidthForColumnCount({
-  containerWidth,
-  columnCount,
-  gap
-}) {
-  if (!containerWidth || !columnCount) return 0;
-  return (containerWidth - gap * Math.max(columnCount - 1, 0)) / columnCount;
-}
 function getNormalizedGalleryGridColumns(columns) {
   if (columns === void 0 || columns === null || columns === "" || columns === "auto") {
     return void 0;
@@ -9344,90 +9424,6 @@ function getNormalizedGalleryGridColumns(columns) {
   if (!Number.isFinite(parsedColumns) || parsedColumns <= 0) return void 0;
   return Math.max(1, Math.min(parsedColumns, 8));
 }
-function getGalleryGridColumnCount({
-  containerWidth,
-  rowCount,
-  minCardWidth,
-  idealCardWidth,
-  maxCardWidth,
-  gap
-}) {
-  if (!containerWidth) return 1;
-  const safeRowCount = Math.max(rowCount, 1);
-  const lowerBound = Math.max(1, Math.ceil((containerWidth + gap) / (maxCardWidth + gap)));
-  const upperBound = Math.max(1, Math.floor((containerWidth + gap) / (minCardWidth + gap)));
-  const idealCount = Math.max(1, Math.round((containerWidth + gap) / (idealCardWidth + gap)));
-  const phantomPenalty = Math.round((idealCardWidth - minCardWidth) / 2) + gap;
-  const maxCandidate = Math.max(1, lowerBound, upperBound + 1, idealCount + 1);
-  let bestCount = 1;
-  let bestScore = Number.POSITIVE_INFINITY;
-  for (let candidateCount = 1; candidateCount <= maxCandidate; candidateCount += 1) {
-    const cardWidth = getGalleryCardWidthForColumnCount({ containerWidth, columnCount: candidateCount, gap });
-    const overflowPenalty = Math.max(0, cardWidth - maxCardWidth);
-    const underflowPenalty = Math.max(0, minCardWidth - cardWidth);
-    const idealPenalty = Math.abs(cardWidth - idealCardWidth);
-    const phantomColumns = Math.max(0, candidateCount - safeRowCount);
-    const candidateScore = overflowPenalty * 3 + underflowPenalty * 2 + idealPenalty + phantomColumns * phantomPenalty;
-    if (candidateScore < bestScore) {
-      bestScore = candidateScore;
-      bestCount = candidateCount;
-    }
-  }
-  return bestCount;
-}
-function getGalleryGridLayoutStyle({
-  isRailLayout,
-  railCardWidth,
-  fixedCardWidth,
-  fixedColumnCount,
-  containerWidth,
-  rowCount,
-  minCardWidth,
-  idealCardWidth,
-  maxCardWidth
-}) {
-  if (isRailLayout) {
-    return { gridAutoColumns: `${railCardWidth}px` };
-  }
-  if (fixedColumnCount) {
-    const responsiveColumnCount = containerWidth ? Math.max(1, Math.min(
-      fixedColumnCount,
-      Math.floor((containerWidth + GALLERY_GRID_GAP_PX) / (minCardWidth + GALLERY_GRID_GAP_PX)) || 1
-    )) : fixedColumnCount;
-    return {
-      gridTemplateColumns: `repeat(${responsiveColumnCount}, minmax(0, 1fr))`,
-      justifyContent: "start",
-      alignContent: "start"
-    };
-  }
-  if (fixedCardWidth) {
-    return {
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${fixedCardWidth}), ${fixedCardWidth}))`,
-      justifyContent: "start",
-      alignContent: "start"
-    };
-  }
-  if (!containerWidth) {
-    return {
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minCardWidth}px), min(100%, ${maxCardWidth}px)))`,
-      justifyContent: "start",
-      alignContent: "start"
-    };
-  }
-  const columnCount = getGalleryGridColumnCount({
-    containerWidth,
-    rowCount,
-    minCardWidth,
-    idealCardWidth,
-    maxCardWidth,
-    gap: GALLERY_GRID_GAP_PX
-  });
-  return {
-    gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
-    justifyContent: "start",
-    alignContent: "start"
-  };
-}
 function getGalleryTextLength(value) {
   if (value === null || value === void 0) return 0;
   const text = String(value).trim();
@@ -9635,8 +9631,6 @@ function WorkbenchGalleryView({
   formatLabel,
   getMasonryItemSize
 }) {
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
   const { min: resolvedMinCardWidth, ideal: resolvedIdealCardWidth, max: resolvedMaxCardWidth } = getGalleryCardWidthMetrics(galleryDensity);
   const resolvedRailCardWidth = galleryRailCardWidth || resolvedMinCardWidth;
   const resolvedGridColumnCount = getNormalizedGalleryGridColumns(galleryGridColumns);
@@ -9656,44 +9650,6 @@ function WorkbenchGalleryView({
   const resolvedIsTitleCandidate = isTitleCandidate || ((column, row) => isDefaultGalleryTitleCandidate(column, row, { isMediaColumn: resolvedIsMediaColumn }));
   const resolvedIsSummaryCandidate = isSummaryCandidate || ((column, row) => isDefaultGallerySummaryCandidate(column, row, { isMediaColumn: resolvedIsMediaColumn }));
   const resolvedRenderFieldValue = renderFieldValue || ((column, row, { compact } = {}) => /* @__PURE__ */ jsx("span", { children: resolvedGetDisplayText(resolvedGetFieldValue(column, row)) }));
-  useEffect(() => {
-    if (isMasonry || isRailLayout || resolvedGridCardWidth) return void 0;
-    const node = containerRef.current;
-    if (!node) return void 0;
-    const updateWidth = () => {
-      const nextWidth = Math.round(node.getBoundingClientRect().width);
-      setContainerWidth((prevWidth) => prevWidth === nextWidth ? prevWidth : nextWidth);
-    };
-    updateWidth();
-    if (typeof ResizeObserver === "function") {
-      const observer = new ResizeObserver(() => updateWidth());
-      observer.observe(node);
-      return () => observer.disconnect();
-    }
-    window.addEventListener("resize", updateWidth);
-    return () => window.removeEventListener("resize", updateWidth);
-  }, [isMasonry, isRailLayout, resolvedGridCardWidth]);
-  const layoutStyle = useMemo(() => getGalleryGridLayoutStyle({
-    isRailLayout,
-    railCardWidth: resolvedRailCardWidth,
-    fixedCardWidth: resolvedGridCardWidth,
-    fixedColumnCount: resolvedGridColumnCount,
-    containerWidth,
-    rowCount: rows.length,
-    minCardWidth: resolvedMinCardWidth,
-    idealCardWidth: resolvedIdealCardWidth,
-    maxCardWidth: resolvedMaxCardWidth
-  }), [
-    containerWidth,
-    isRailLayout,
-    resolvedGridCardWidth,
-    resolvedGridColumnCount,
-    resolvedIdealCardWidth,
-    resolvedMaxCardWidth,
-    resolvedMinCardWidth,
-    resolvedRailCardWidth,
-    rows.length
-  ]);
   const renderGalleryCard = (row, rowIndex) => /* @__PURE__ */ jsx(
     WorkbenchGalleryCard,
     {
@@ -9729,69 +9685,64 @@ function WorkbenchGalleryView({
     },
     row?.id || row?.linkKey || rowIndex
   );
-  if (isMasonry) {
-    return /* @__PURE__ */ jsx(
-      WorkbenchCollection,
-      {
-        items: rows,
-        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, context) => renderGalleryCard(row, context.index)
-      }
-    );
-  }
+  const collectionMode = isMasonry ? masonryPlacementStrategy === "dense" ? "dense" : "masonry" : isRailLayout ? "rail" : "grid";
   return /* @__PURE__ */ jsx(
-    "div",
+    WorkbenchCollection,
     {
-      ref: containerRef,
-      className: cn(
-        isRailLayout ? "grid grid-flow-col items-center gap-3" : "grid items-start gap-3",
-        className
-      ),
-      style: layoutStyle,
-      children: rows.map((row, rowIndex) => renderGalleryCard(row, rowIndex))
+      items: rows,
+      classNames: { layout: className },
+      config: {
+        getItemKey: (row, rowIndex) => row?.id || row?.linkKey || rowIndex,
+        layout: {
+          mode: collectionMode,
+          gap: GALLERY_GRID_GAP_PX,
+          columns: isMasonry ? "auto" : resolvedGridColumnCount ? {
+            mobile: 1,
+            tablet: Math.min(2, resolvedGridColumnCount),
+            desktop: resolvedGridColumnCount
+          } : "auto",
+          cardWidth: isRailLayout ? resolvedRailCardWidth : void 0,
+          minCardWidth: resolvedGridCardWidth ?? resolvedMinCardWidth,
+          idealCardWidth: isMasonry ? resolvedMasonryColumnWidth : resolvedGridCardWidth ?? resolvedIdealCardWidth,
+          maxCardWidth: resolvedGridCardWidth ?? resolvedMaxCardWidth,
+          placementStrategy: masonryPlacementStrategy,
+          getItemSize: isMasonry ? (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
+            };
+          } : void 0
+        }
+      },
+      renderItem: (row, context) => renderGalleryCard(row, context.index)
     }
   );
 }
@@ -10708,18 +10659,26 @@ function WorkbenchAssetGallery({
   if (!items.length) {
     return hasRenderableNode(emptyState) ? /* @__PURE__ */ jsx(Fragment, { children: emptyState }) : null;
   }
-  return /* @__PURE__ */ jsx(
-    "ul",
+  return /* @__PURE__ */ jsx("div", { "data-monkeys-component": "workbench-asset-gallery", children: /* @__PURE__ */ jsx(
+    WorkbenchCollection,
     {
-      "aria-label": ariaLabel,
-      "data-monkeys-component": "workbench-asset-gallery",
-      className: cn(
-        "grid min-w-0 gap-3 [grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))]",
-        className
-      ),
-      children: items.map((item) => {
+      items,
+      config: {
+        getItemKey: (item) => item.id,
+        layout: {
+          mode: "grid",
+          columns: "auto",
+          minCardWidth: "12rem",
+          idealCardWidth: "16rem",
+          gap: 12
+        },
+        appearance: { hover: "none" }
+      },
+      ariaLabel,
+      className,
+      renderItem: (item) => {
         const selected = selectedItemId === item.id;
-        return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -10755,10 +10714,10 @@ function WorkbenchAssetGallery({
               ] })
             ]
           }
-        ) }, item.id);
-      })
+        );
+      }
     }
-  );
+  ) });
 }
 var radarWorkspaceStyle = {
   backgroundColor: "hsl(var(--radar-canvas, var(--background)))",