@inf-monkeys-tech/monkeys-design 1.0.44 → 1.0.45

package/dist/components/workbench/index.mjs

@@ -8769,13 +8769,146 @@ function WorkbenchMasonryLayout({
     }
   );
 }
+var DEFAULT_PROVISIONAL_CAPACITY = 12;
+var DEFAULT_GRID_ASPECT_RATIOS = [1];
+var DEFAULT_RAIL_ASPECT_RATIOS = [4 / 3];
+var DEFAULT_MASONRY_ASPECT_RATIOS = [1, 4 / 5, 3 / 2, 3 / 4, 5 / 4];
+var MIN_SKELETON_ASPECT_RATIO = 0.5;
+var MAX_SKELETON_ASPECT_RATIO = 2;
+var SKELETON_BACKGROUND_COLOR = "hsl(var(--monkeys-color-muted, var(--muted)))";
+function clamp2(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function normalizeCount(value, fallback, max) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return fallback;
+  return clamp2(Math.round(value), 1, max);
+}
+function getDefaultAspectRatios(mode) {
+  if (mode === "masonry" || mode === "dense") return DEFAULT_MASONRY_ASPECT_RATIOS;
+  if (mode === "rail") return DEFAULT_RAIL_ASPECT_RATIOS;
+  return DEFAULT_GRID_ASPECT_RATIOS;
+}
+function resolveAspectRatios(mode, values) {
+  const normalized = values?.filter((value) => typeof value === "number" && Number.isFinite(value) && value > 0).map((value) => clamp2(value, MIN_SKELETON_ASPECT_RATIO, MAX_SKELETON_ASPECT_RATIO));
+  return normalized?.length ? normalized : getDefaultAspectRatios(mode);
+}
+function resolveWorkbenchCollectionSkeletonCapacity(config) {
+  return normalizeCount(config?.count, DEFAULT_PROVISIONAL_CAPACITY, 48);
+}
+function resolveWorkbenchCollectionLoadingVariant(value) {
+  if (value === void 0) return "skeleton";
+  if (value === "skeleton" || value === "spinner") return value;
+  throw new TypeError('WorkbenchCollection loading.variant must be "skeleton" or "spinner".');
+}
+function resolveSkeletonCount({
+  columnCount,
+  config,
+  phase
+}) {
+  if (phase === "initial") {
+    const fallback2 = clamp2(columnCount * 2, 6, 24);
+    return normalizeCount(config?.count, fallback2, 48);
+  }
+  const fallback = clamp2(columnCount, 1, 12);
+  return normalizeCount(config?.loadMoreCount, fallback, 24);
+}
+function getSkeletonHeight(columnWidth, aspectRatio) {
+  return Math.max(1, columnWidth / aspectRatio);
+}
+function WorkbenchCollectionSkeleton({
+  mode,
+  phase,
+  columnCount,
+  columnWidth,
+  cardWidth,
+  gap,
+  rowHeight,
+  config,
+  ariaLabel,
+  className
+}) {
+  const count = resolveSkeletonCount({ columnCount, config, phase });
+  const aspectRatios = resolveAspectRatios(mode, config?.aspectRatios);
+  const animated = config?.animated ?? true;
+  const items = useMemo(
+    () => Array.from({ length: count }, (_, index) => ({
+      aspectRatio: aspectRatios[index % aspectRatios.length],
+      key: `${phase}-${index}`
+    })),
+    [aspectRatios, count, phase]
+  );
+  const renderSkeleton = (item, style) => /* @__PURE__ */ jsx(
+    BaseSkeleton,
+    {
+      variant: "block",
+      animated,
+      className: "h-auto w-full",
+      style: {
+        backgroundColor: SKELETON_BACKGROUND_COLOR,
+        ...style ?? { aspectRatio: String(item.aspectRatio) }
+      },
+      "data-collection-skeleton-item": "",
+      "data-skeleton-aspect-ratio": item.aspectRatio
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-atomic": "true",
+      "data-collection-loading": phase,
+      "data-layout-mode": mode,
+      className: "min-w-0",
+      children: mode === "masonry" || mode === "dense" ? /* @__PURE__ */ jsx(
+        WorkbenchMasonryLayout,
+        {
+          items,
+          columnCount,
+          columnWidth,
+          gap,
+          rowHeight,
+          placementStrategy: mode === "dense" ? "dense" : "shortest",
+          className,
+          containerProps: { "aria-hidden": true },
+          getItemKey: (item) => item.key,
+          getItemSize: (item, layout) => ({
+            height: getSkeletonHeight(layout.columnWidth, item.aspectRatio)
+          }),
+          renderItem: (item, layout) => renderSkeleton(item, {
+            height: `${getSkeletonHeight(layout.columnWidth, item.aspectRatio)}px`
+          })
+        }
+      ) : mode === "rail" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn("grid min-w-0 grid-flow-col items-start overflow-x-auto", className),
+          style: {
+            gap,
+            gridAutoColumns: typeof cardWidth === "number" ? `${cardWidth}px` : cardWidth ?? `${columnWidth}px`
+          },
+          children: items.map((item) => /* @__PURE__ */ jsx("div", { children: renderSkeleton(item) }, item.key))
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn("grid min-w-0 items-start", className),
+          style: { gap, gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` },
+          children: items.map((item) => /* @__PURE__ */ jsx("div", { children: renderSkeleton(item) }, item.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) {
+function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function resolveRenderableSlot(slot, context) {
@@ -8799,7 +8932,7 @@ function resolveLengthToPixels2(value, fallback, node) {
 }
 function normalizeColumns(value) {
   if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return void 0;
-  return clamp2(Math.round(value), 1, MAX_COLUMN_COUNT);
+  return clamp3(Math.round(value), 1, MAX_COLUMN_COUNT);
 }
 function resolveResponsiveColumns(columns, containerWidth) {
   if (columns === "auto" || columns === void 0) return void 0;
@@ -8860,7 +8993,7 @@ 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;
+  return typeof value === "number" && Number.isFinite(value) ? clamp3(value, 0, 1) : 0;
 }
 function normalizeItemSize(size, aspectRatio, columnWidth) {
   const normalizedAspectRatio = Number.isFinite(aspectRatio) && Number(aspectRatio) > 0 ? Number(aspectRatio) : void 0;
@@ -8920,7 +9053,7 @@ function warnOnDuplicateKeys(keys) {
 }
 function normalizeTitleMaxLines(value) {
   if (!Number.isFinite(value) || Number(value) <= 0) return void 0;
-  return clamp2(Math.round(Number(value)), 1, 12);
+  return clamp3(Math.round(Number(value)), 1, 12);
 }
 function WorkbenchCollection({
   items,
@@ -8970,6 +9103,12 @@ function WorkbenchCollection({
     [normalizedItems]
   );
   const keysSignature = normalizedItems.map(({ stringKey }) => stringKey).join("
");
+  const state = config.state;
+  const loading = state?.loading === true;
+  const loadingMore = state?.loadingMore === true;
+  const hasMore = state?.hasMore === true;
+  const loadingVariant = resolveWorkbenchCollectionLoadingVariant(config.loading?.variant);
+  const layoutItemCount = loading && normalizedItems.length === 0 && loadingVariant === "skeleton" ? resolveWorkbenchCollectionSkeletonCapacity(config.loading?.skeleton) : normalizedItems.length;
   useEffect(() => warnOnDuplicateKeys(keys), [keys, keysSignature]);
   const selectionMode = config.selection?.mode ?? "none";
   const controlledSelection = config.selection?.selectedKeys !== void 0;
@@ -9004,7 +9143,7 @@ function WorkbenchCollection({
   }, [itemsNode]);
   const columnCount = resolveColumnCount({
     containerWidth,
-    itemCount: normalizedItems.length,
+    itemCount: layoutItemCount,
     gap,
     columns: config.layout.columns,
     maxColumns: config.layout.maxColumns,
@@ -9089,10 +9228,6 @@ function WorkbenchCollection({
       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(() => {
@@ -9443,7 +9578,7 @@ function WorkbenchCollection({
         },
         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 span = clamp3(Math.round(Number(customSize?.columnSpan) || 1), 1, columnCount);
           const aspectRatio = config.layout.getItemAspectRatio?.(entry.item, entry.index);
           return /* @__PURE__ */ jsx(
             "div",
@@ -9530,7 +9665,28 @@ function WorkbenchCollection({
             title: labels.offline,
             actions: statusStates.error?.showRetry !== false && callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
           }
-        ) : showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loading }) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
+        ) : showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : loadingVariant === "spinner" ? /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loading, variant: "spinner" }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: registerItemsNode,
+            className: cn("min-w-0", classNames?.items),
+            children: /* @__PURE__ */ jsx(
+              WorkbenchCollectionSkeleton,
+              {
+                mode,
+                phase: "initial",
+                columnCount,
+                columnWidth,
+                cardWidth: config.layout.cardWidth ?? config.layout.idealCardWidth,
+                gap,
+                rowHeight,
+                config: config.loading?.skeleton,
+                ariaLabel: labels.loading,
+                className: classNames?.layout
+              }
+            )
+          }
+        ) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
           BaseSystemState,
           {
             kind: "error",
@@ -9574,7 +9730,21 @@ function WorkbenchCollection({
             actions: statusStates.error?.showRetry !== false && 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,
+        items.length > 0 && (hasMore || loadingMore) ? /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: classNames?.loadMore, "data-collection-load-more": "", children: hasRenderableNode(loadMoreSlot) ? loadMoreSlot : loadingMore ? loadingVariant === "spinner" ? /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loadingMore, variant: "spinner" }) : /* @__PURE__ */ jsx(
+          WorkbenchCollectionSkeleton,
+          {
+            mode,
+            phase: "load-more",
+            columnCount,
+            columnWidth,
+            cardWidth: config.layout.cardWidth ?? config.layout.idealCardWidth,
+            gap,
+            rowHeight,
+            config: config.loading?.skeleton,
+            ariaLabel: labels.loadingMore,
+            className: classNames?.layout
+          }
+        ) : null }) : null,
         hasRenderableNode(footer) ? /* @__PURE__ */ jsx("div", { className: classNames?.footer, children: footer }) : null
       ]
     }
@@ -10445,7 +10615,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 clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp4 = (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();
@@ -10527,9 +10697,9 @@ function WorkbenchScatterPlot({
             xThreshold === void 0 ? null : /* @__PURE__ */ jsx(
               "line",
               {
-                x1: clamp3(xThreshold, plotLeft, plotRight),
+                x1: clamp4(xThreshold, plotLeft, plotRight),
                 y1: plotTop,
-                x2: clamp3(xThreshold, plotLeft, plotRight),
+                x2: clamp4(xThreshold, plotLeft, plotRight),
                 y2: plotBottom,
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
@@ -10539,9 +10709,9 @@ function WorkbenchScatterPlot({
               "line",
               {
                 x1: plotLeft,
-                y1: clamp3(yThreshold, plotTop, plotBottom),
+                y1: clamp4(yThreshold, plotTop, plotBottom),
                 x2: plotRight,
-                y2: clamp3(yThreshold, plotTop, plotBottom),
+                y2: clamp4(yThreshold, plotTop, plotBottom),
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
               }
@@ -10568,17 +10738,17 @@ function WorkbenchScatterPlot({
               }
             ),
             validPoints.map((point) => {
-              const x = clamp3(
+              const x = clamp4(
                 scale(point.x, xDomain, plotLeft, plotRight),
                 plotLeft,
                 plotRight
               );
-              const y = clamp3(
+              const y = clamp4(
                 scale(point.y, yDomain, plotBottom, plotTop),
                 plotTop,
                 plotBottom
               );
-              const radius = point.size === void 0 ? 9 : clamp3(scale(point.size, sizeDomain, 7, 18), 7, 18);
+              const radius = point.size === void 0 ? 9 : clamp4(scale(point.size, sizeDomain, 7, 18), 7, 18);
               const selected = selectedPointId === point.id;
               return /* @__PURE__ */ jsxs(
                 "g",
@@ -11118,7 +11288,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 clamp4 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp5 = (value, min, max) => Math.min(max, Math.max(min, value));
 var toneVariable = {
   primary: "--radar-series-one",
   secondary: "--radar-series-two",
@@ -11181,7 +11351,7 @@ function WorkbenchRadarMatrix({
   const plotRight = width;
   const plotTop = 0;
   const plotBottom = height;
-  const xThreshold = clamp4(
+  const xThreshold = clamp5(
     scale2(
       Number.isFinite(thresholds?.x) ? Number(thresholds?.x) : (xDomain[0] + xDomain[1]) / 2,
       xDomain,
@@ -11191,7 +11361,7 @@ function WorkbenchRadarMatrix({
     plotLeft,
     plotRight
   );
-  const yThreshold = clamp4(
+  const yThreshold = clamp5(
     scale2(
       Number.isFinite(thresholds?.y) ? Number(thresholds?.y) : (yDomain[0] + yDomain[1]) / 2,
       yDomain,
@@ -11299,13 +11469,13 @@ function WorkbenchRadarMatrix({
                 ] }, quadrant.id);
               }),
               validPoints.map((point, index) => {
-                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 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 tone = point.tone || (index % 2 === 0 ? "primary" : "accent");
                 const selected = selectedPointId === point.id;
                 const labelled = labelledPointIds.has(point.id);
-                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 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 pointStyle = {
                   fill: toneColor(tone),
                   stroke: "hsl(var(--foreground) / 0.74)"
@@ -11407,8 +11577,8 @@ function WorkbenchRadarMatrix({
                 validPoints.map((point, index) => /* @__PURE__ */ jsx(
                   "circle",
                   {
-                    cx: clamp4(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
-                    cy: clamp4(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
+                    cx: clamp5(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
+                    cy: clamp5(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
                     r: "8",
                     style: { fill: toneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
                   },