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

package/dist/components/workbench/index.js

@@ -491,6 +491,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",
@@ -2223,6 +2232,16 @@ function getBaseButtonToneClassName(theme, tone = "default", active = false) {
     active && theme.slots.buttonActive
   );
 }
+function getBaseNoticeToneClassName(theme, tone = "default") {
+  return cn(
+    tone === "default" && theme.slots.noticeDefault,
+    tone === "primary" && theme.slots.noticePrimary,
+    tone === "success" && theme.slots.noticeSuccess,
+    tone === "warning" && theme.slots.noticeWarning,
+    tone === "danger" && theme.slots.noticeDanger,
+    tone === "muted" && theme.slots.noticeMuted
+  );
+}
 function getBaseMenuItemToneClassName(theme, tone = "default") {
   return cn(
     tone === "default" && theme.slots.menuItemDefault,
@@ -3456,6 +3475,98 @@ function BaseDescriptionList({
     }
   );
 }
+function DefaultEmptyIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "h-6 w-6",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.8",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "16", height: "12", x: "4", y: "6", rx: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 10h8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 14h5" })
+      ]
+    }
+  );
+}
+var BaseEmptyState = react.forwardRef(
+  function BaseEmptyState2({
+    icon = /* @__PURE__ */ jsxRuntime.jsx(DefaultEmptyIcon, {}),
+    title,
+    description,
+    actions,
+    appearance,
+    className,
+    classNames,
+    style,
+    ...stateProps
+  }, ref) {
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...componentAttributes,
+        ...stateProps,
+        ref,
+        "data-monkeys-component": "empty-state",
+        "data-slot": "root",
+        "data-state": "empty",
+        className: cn(theme.slots.stateRoot, classNames?.root, className),
+        style: {
+          ...theme.styles.stateRoot,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "icon",
+              "data-state": "empty",
+              className: cn(theme.slots.stateIcon, classNames?.icon),
+              style: theme.styles.stateIcon,
+              children: icon
+            }
+          ) : null,
+          hasRenderableNode(title) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "title",
+              "data-state": "empty",
+              className: cn(theme.slots.stateTitle, classNames?.title),
+              children: title
+            }
+          ) : null,
+          hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "description",
+              "data-state": "empty",
+              className: cn(theme.slots.stateDescription, classNames?.description),
+              children: description
+            }
+          ) : null,
+          hasRenderableNode(actions) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "actions",
+              "data-state": "empty",
+              className: cn(theme.slots.stateActions, classNames?.actions),
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 function mergeAriaIds(...values) {
   const ids = values.flatMap(
     (value) => value?.split(/\s+/).filter(Boolean) ?? []
@@ -3814,6 +3925,170 @@ var BaseInput = react.forwardRef(
     );
   }
 );
+function DefaultLoadingIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className,
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9",
+            className: "opacity-25",
+            stroke: "currentColor",
+            strokeWidth: "3"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3Z"
+          }
+        )
+      ]
+    }
+  );
+}
+var BaseLoadingState = react.forwardRef(function BaseLoadingState2({
+  icon,
+  title,
+  description,
+  actions,
+  appearance,
+  className,
+  classNames,
+  style,
+  role = "status",
+  "aria-live": ariaLive = "polite",
+  "aria-busy": ariaBusy = true,
+  "aria-label": nativeAriaLabel,
+  "aria-labelledby": nativeAriaLabelledBy,
+  ...stateProps
+}, ref) {
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const loadingMessages = useMonkeysLocaleMessages().loading;
+  const theme = resolveBaseAppearance(resolvedAppearance);
+  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(DefaultLoadingIcon, { className: theme.slots.loadingSpinner }) : icon;
+  const resolvedAriaLabel = nativeAriaLabel ?? (nativeAriaLabelledBy === void 0 ? loadingMessages.spinner : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...componentAttributes,
+      ...stateProps,
+      ref,
+      role,
+      "aria-live": ariaLive,
+      "aria-busy": ariaBusy,
+      "aria-label": resolvedAriaLabel,
+      "aria-labelledby": nativeAriaLabelledBy,
+      "data-monkeys-component": "loading-state",
+      "data-slot": "root",
+      "data-state": "loading",
+      className: cn(theme.slots.stateRoot, classNames?.root, className),
+      style: {
+        ...theme.styles.stateRoot,
+        ...style
+      },
+      children: [
+        hasRenderableNode(resolvedIcon) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "icon",
+            "data-state": "loading",
+            className: cn(theme.slots.stateIcon, classNames?.icon),
+            style: theme.styles.stateIcon,
+            children: resolvedIcon
+          }
+        ) : null,
+        hasRenderableNode(title) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "title",
+            "data-state": "loading",
+            className: cn(theme.slots.stateTitle, classNames?.title),
+            children: title
+          }
+        ) : null,
+        hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "description",
+            "data-state": "loading",
+            className: cn(theme.slots.stateDescription, classNames?.description),
+            children: description
+          }
+        ) : null,
+        hasRenderableNode(actions) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "actions",
+            "data-state": "loading",
+            className: cn(theme.slots.stateActions, classNames?.actions),
+            children: actions
+          }
+        ) : null
+      ]
+    }
+  );
+});
+function BaseNotice({
+  tone,
+  icon,
+  title,
+  description,
+  actions,
+  children,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...noticeProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const resolvedDescription = children ?? description;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...noticeProps,
+      className: cn(
+        theme.slots.noticeBase,
+        getBaseNoticeToneClassName(theme, tone),
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.notice,
+        ...style
+      },
+      children: [
+        hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.noticeIcon, classNames?.icon), children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          hasRenderableNode(title) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.noticeTitle, classNames?.title), children: title }) : null,
+          hasRenderableNode(resolvedDescription) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                theme.slots.noticeDescription,
+                classNames?.description
+              ),
+              children: resolvedDescription
+            }
+          ) : null,
+          hasRenderableNode(actions) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.noticeActions, classNames?.actions), children: actions }) : null
+        ] })
+      ]
+    }
+  );
+}
 var typeaheadResetDelay = 500;
 function validateSelectProps({
   options,
@@ -7967,6 +8242,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" ? react.useEffect : react.useLayoutEffect;
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -8071,9 +8347,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 = react.useRef(null);
@@ -8104,8 +8383,9 @@ function WorkbenchMasonryLayout({
   }, []);
   react.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;
     });
@@ -8116,7 +8396,8 @@ function WorkbenchMasonryLayout({
     containerRef.current
   );
   const isDensePlacement = placementStrategy === "dense";
-  const columnCount = getMasonryColumnCount({
+  const normalizedRequestedColumnCount = Number.isFinite(requestedColumnCount) && Number(requestedColumnCount) > 0 ? clamp(Math.round(Number(requestedColumnCount)), 1, 24) : void 0;
+  const columnCount = normalizedRequestedColumnCount || getMasonryColumnCount({
     containerWidth,
     itemCount: items.length,
     targetColumnWidth: resolvedTargetColumnWidth,
@@ -8162,7 +8443,7 @@ function WorkbenchMasonryLayout({
     resolvedColumnWidth,
     rowHeight
   ]);
-  react.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const nextMeasurements = {};
     itemNodesRef.current.forEach((node, key) => {
       const nextHeight = Math.ceil(node.getBoundingClientRect().height);
@@ -8224,10 +8505,21 @@ function WorkbenchMasonryLayout({
       const positionedItems = layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => {
         const resolvedSpan = clamp(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,
@@ -8240,9 +8532,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,
@@ -8265,33 +8559,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: (node) => registerItemNode(key, node), role: "presentation", className: "min-w-0", children: renderItem(item, layoutContext) })
             },
             key
           );
@@ -8303,35 +8602,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...itemProps,
+            className: cn("min-w-0", itemProps?.className),
+            style: {
+              ...itemProps?.style,
+              gridColumn: `span ${columnSpan}`,
+              gridRow: `span ${rowSpan}`
+            },
+            children: /* @__PURE__ */ jsxRuntime.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 clamp2(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+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 clamp2(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) ? clamp2(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 = react.useId().replace(/:/g, "");
+  const rootRef = react.useRef(null);
+  const itemsRef = react.useRef(null);
+  const loadMoreRef = react.useRef(null);
+  const lastSelectedIndexRef = react.useRef(null);
+  const loadMoreLockedRef = react.useRef(false);
+  const layoutReadyRef = react.useRef(false);
+  const [containerWidth, setContainerWidth] = react.useState(0);
+  const [itemsNode, setItemsNode] = react.useState(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = react.useState(
+    () => new Set(config.selection?.defaultSelectedKeys ?? [])
+  );
+  const callbacksRef = react.useRef(callbacks);
+  callbacksRef.current = callbacks;
+  const registerItemsNode = react.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 = react.useMemo(() => items.map((item, index) => {
+    const key = getItemKey(item, index);
+    return { item, index, key, stringKey: String(key) };
+  }), [getItemKey, items]);
+  const keys = react.useMemo(
+    () => normalizedItems.map(({ key }) => key),
+    [normalizedItems]
+  );
+  const keysSignature = normalizedItems.map(({ stringKey }) => stringKey).join("
");
+  react.useEffect(() => warnOnDuplicateKeys(keys), [keys, keysSignature]);
+  const selectionMode = config.selection?.mode ?? "none";
+  const controlledSelection = config.selection?.selectedKeys !== void 0;
+  const selectedKeys = react.useMemo(
+    () => selectionMode === "none" ? /* @__PURE__ */ new Set() : controlledSelection ? new Set(config.selection?.selectedKeys ?? []) : internalSelectedKeys,
+    [config.selection?.selectedKeys, controlledSelection, internalSelectedKeys, selectionMode]
+  );
+  react.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]);
+  react.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 = react.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 = react.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 = react.useMemo(() => ({
+    mode,
+    columnCount,
+    columnWidth,
+    containerWidth,
+    gap,
+    itemCount: normalizedItems.length
+  }), [columnCount, columnWidth, containerWidth, gap, mode, normalizedItems.length]);
+  react.useEffect(() => {
+    callbacksRef.current?.onLayoutChange?.(layoutSnapshot);
+    if (containerWidth > 0 && !layoutReadyRef.current) {
+      layoutReadyRef.current = true;
+      callbacksRef.current?.onLayoutReady?.(layoutSnapshot);
+    }
+  }, [layoutSnapshot, containerWidth]);
+  react.useEffect(() => {
+    layoutReadyRef.current = false;
+  }, [mode]);
+  const resolveScrollOwner = react.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]);
+  react.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;
+  react.useEffect(() => {
+    if (!loadingMore || !hasMore) loadMoreLockedRef.current = false;
+  }, [hasMore, loadingMore, normalizedItems.length, keysSignature]);
+  react.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 = react.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 = react.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 = react.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 = react.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 = react.useCallback((entry, layout, includeShell = true) => {
+    const context = createItemContext(entry, layout);
+    if (!includeShell) return renderItem(entry.item, context);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...getItemInteractionProps(entry, context), children: renderItem(entry.item, context) });
+  }, [createItemContext, getItemInteractionProps, renderItem]);
+  const baseLayoutContext = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.Fragment, { children: renderEntry(entry, baseLayoutContext) }, entry.stringKey))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.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 = clamp2(Math.round(Number(customSize?.columnSpan) || 1), 1, columnCount);
+          const aspectRatio = config.layout.getItemAspectRatio?.(entry.item, entry.index);
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: classNames?.header, children: header }) : null,
+        hasRenderableNode(toolbar) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames?.toolbar, children: toolbar }) : null,
+        hasRenderableNode(selectionToolbar) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames?.selectionToolbar, children: selectionToolbar }) : null,
+        hasRenderableNode(beforeItems) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames?.beforeItems, children: beforeItems }) : null,
+        showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : /* @__PURE__ */ jsxRuntime.jsx(BaseLoadingState, { title: labels.loading }) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsxRuntime.jsx(
+          BaseNotice,
+          {
+            tone: "danger",
+            role: "alert",
+            "aria-live": "assertive",
+            title: labels.loadError,
+            actions: callbacks?.onRetry ? /* @__PURE__ */ jsxRuntime.jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+          }
+        ) : showEmpty ? hasRenderableNode(emptySlot) ? emptySlot : /* @__PURE__ */ jsxRuntime.jsx(BaseEmptyState, { title: labels.empty }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-collection-group": group.stringKey,
+                  className: classNames?.group,
+                  children: [
+                    hasRenderableNode(heading) ? /* @__PURE__ */ jsxRuntime.jsx("div", { id: headingId, role: "heading", "aria-level": 2, className: classNames?.groupHeading, children: heading }) : null,
+                    renderGroupItems(group)
+                  ]
+                },
+                group.stringKey
+              );
+            })
+          }
+        ),
+        items.length > 0 && effectiveError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames?.status, children: hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsxRuntime.jsx(
+          BaseNotice,
+          {
+            tone: "danger",
+            role: "alert",
+            title: labels.refreshError,
+            actions: callbacks?.onRetry ? /* @__PURE__ */ jsxRuntime.jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+          }
+        ) }) : null,
+        items.length > 0 && (hasMore || loadingMore) ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: classNames?.loadMore, "data-collection-load-more": "", children: hasRenderableNode(loadMoreSlot) ? loadMoreSlot : loadingMore ? /* @__PURE__ */ jsxRuntime.jsx(BaseLoadingState, { title: labels.loadingMore }) : null }) : null,
+        hasRenderableNode(footer) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames?.footer, children: footer }) : null
+      ]
     }
   );
 }
@@ -8772,45 +9753,54 @@ function WorkbenchGalleryView({
   );
   if (isMasonry) {
     return /* @__PURE__ */ jsxRuntime.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)
       }
     );
   }
@@ -9328,7 +10318,7 @@ var getDomain = (values, min, max) => {
   return lower < upper ? [lower, upper] : [upper, lower];
 };
 var scale = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
-var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
 var activatePoint = (event, point, onPointSelect) => {
   if (!onPointSelect || event.key !== "Enter" && event.key !== " ") return;
   event.preventDefault();
@@ -9410,9 +10400,9 @@ function WorkbenchScatterPlot({
             xThreshold === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
               "line",
               {
-                x1: clamp2(xThreshold, plotLeft, plotRight),
+                x1: clamp3(xThreshold, plotLeft, plotRight),
                 y1: plotTop,
-                x2: clamp2(xThreshold, plotLeft, plotRight),
+                x2: clamp3(xThreshold, plotLeft, plotRight),
                 y2: plotBottom,
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
@@ -9422,9 +10412,9 @@ function WorkbenchScatterPlot({
               "line",
               {
                 x1: plotLeft,
-                y1: clamp2(yThreshold, plotTop, plotBottom),
+                y1: clamp3(yThreshold, plotTop, plotBottom),
                 x2: plotRight,
-                y2: clamp2(yThreshold, plotTop, plotBottom),
+                y2: clamp3(yThreshold, plotTop, plotBottom),
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
               }
@@ -9451,17 +10441,17 @@ function WorkbenchScatterPlot({
               }
             ),
             validPoints.map((point) => {
-              const x = clamp2(
+              const x = clamp3(
                 scale(point.x, xDomain, plotLeft, plotRight),
                 plotLeft,
                 plotRight
               );
-              const y = clamp2(
+              const y = clamp3(
                 scale(point.y, yDomain, plotBottom, plotTop),
                 plotTop,
                 plotBottom
               );
-              const radius = point.size === void 0 ? 9 : clamp2(scale(point.size, sizeDomain, 7, 18), 7, 18);
+              const radius = point.size === void 0 ? 9 : clamp3(scale(point.size, sizeDomain, 7, 18), 7, 18);
               const selected = selectedPointId === point.id;
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "g",
@@ -9993,7 +10983,7 @@ var getDomain2 = (values, min, max) => {
   return lower < upper ? [lower, upper] : [upper, lower];
 };
 var scale2 = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
-var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp4 = (value, min, max) => Math.min(max, Math.max(min, value));
 var toneVariable = {
   primary: "--radar-series-one",
   secondary: "--radar-series-two",
@@ -10056,7 +11046,7 @@ function WorkbenchRadarMatrix({
   const plotRight = width;
   const plotTop = 0;
   const plotBottom = height;
-  const xThreshold = clamp3(
+  const xThreshold = clamp4(
     scale2(
       Number.isFinite(thresholds?.x) ? Number(thresholds?.x) : (xDomain[0] + xDomain[1]) / 2,
       xDomain,
@@ -10066,7 +11056,7 @@ function WorkbenchRadarMatrix({
     plotLeft,
     plotRight
   );
-  const yThreshold = clamp3(
+  const yThreshold = clamp4(
     scale2(
       Number.isFinite(thresholds?.y) ? Number(thresholds?.y) : (yDomain[0] + yDomain[1]) / 2,
       yDomain,
@@ -10174,13 +11164,13 @@ function WorkbenchRadarMatrix({
                 ] }, quadrant.id);
               }),
               validPoints.map((point, index) => {
-                const x = clamp3(scale2(point.x, xDomain, 40, width - 40), 40, width - 40);
-                const y = clamp3(scale2(point.y, yDomain, height - 48, 54), 54, height - 48);
+                const x = clamp4(scale2(point.x, xDomain, 40, width - 40), 40, width - 40);
+                const y = clamp4(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 ? clamp3(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
-                const fontSize = labelled ? clamp3(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
+                const radius = labelled ? clamp4(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
+                const fontSize = labelled ? clamp4(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
                 const pointStyle = {
                   fill: toneColor(tone),
                   stroke: "hsl(var(--foreground) / 0.74)"
@@ -10282,8 +11272,8 @@ function WorkbenchRadarMatrix({
                 validPoints.map((point, index) => /* @__PURE__ */ jsxRuntime.jsx(
                   "circle",
                   {
-                    cx: clamp3(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
-                    cy: clamp3(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
+                    cx: clamp4(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
+                    cy: clamp4(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
                     r: "8",
                     style: { fill: toneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
                   },
@@ -10322,6 +11312,7 @@ exports.InteractiveTableEditableTextCell = InteractiveTableEditableTextCell;
 exports.InteractiveTableReadonlyCell = InteractiveTableReadonlyCell;
 exports.InteractiveTableSelectCell = InteractiveTableSelectCell;
 exports.WorkbenchAssetGallery = WorkbenchAssetGallery;
+exports.WorkbenchCollection = WorkbenchCollection;
 exports.WorkbenchContentPane = WorkbenchContentPane;
 exports.WorkbenchContentToolbar = WorkbenchContentToolbar;
 exports.WorkbenchDetailSidebar = WorkbenchDetailSidebar;