@inf-monkeys-tech/monkeys-design 1.0.53 → 1.0.54

package/dist/components/workbench/index.js

@@ -9097,7 +9097,11 @@ function WorkbenchCollection({
   const itemsRef = react.useRef(null);
   const loadMoreRef = react.useRef(null);
   const lastSelectedIndexRef = react.useRef(null);
-  const loadMoreLockedRef = react.useRef(false);
+  const loadMoreRequestPendingRef = react.useRef(false);
+  const loadMoreIntersectionActiveRef = react.useRef(false);
+  const loadMoreIntersectionConsumedRef = react.useRef(false);
+  const loadMoreScrollValidationPendingRef = react.useRef(false);
+  const observedLoadMoreTargetRef = react.useRef(null);
   const layoutReadyRef = react.useRef(false);
   const [containerWidth, setContainerWidth] = react.useState(0);
   const [itemsNode, setItemsNode] = react.useState(null);
@@ -9255,38 +9259,91 @@ function WorkbenchCollection({
   const canLoadMore = typeof callbacks?.onLoadMore === "function";
   const effectiveError = state?.error ?? virtualizationError;
   react.useEffect(() => {
-    if (!loadingMore || !hasMore) loadMoreLockedRef.current = false;
-  }, [hasMore, loadingMore, normalizedItems.length, keysSignature]);
+    if (!canLoadMore || !hasMore) {
+      loadMoreIntersectionActiveRef.current = false;
+      loadMoreIntersectionConsumedRef.current = false;
+      loadMoreScrollValidationPendingRef.current = false;
+    }
+  }, [canLoadMore, hasMore]);
   const requestLoadMore = react.useCallback(() => {
-    if (!canLoadMore || !hasMore || loadingMore || loadMoreLockedRef.current) return;
-    loadMoreLockedRef.current = true;
+    if (!canLoadMore || !hasMore || loadingMore || loadMoreRequestPendingRef.current) return;
+    loadMoreRequestPendingRef.current = true;
+    const releaseRequest = () => {
+      loadMoreRequestPendingRef.current = false;
+    };
     try {
       const result = callbacksRef.current?.onLoadMore?.();
       if (result && typeof result.then === "function") {
-        void result.catch(() => {
-          loadMoreLockedRef.current = false;
-        });
+        void result.then(releaseRequest, releaseRequest);
+      } else {
+        releaseRequest();
       }
     } catch (error) {
-      loadMoreLockedRef.current = false;
+      releaseRequest();
       throw error;
     }
   }, [canLoadMore, hasMore, loadingMore]);
   react.useEffect(() => {
     const sentinel = loadMoreRef.current;
-    if (!sentinel || !canLoadMore || !hasMore || loadingMore) return void 0;
+    if (observedLoadMoreTargetRef.current !== sentinel) {
+      observedLoadMoreTargetRef.current = sentinel;
+      loadMoreIntersectionActiveRef.current = false;
+      loadMoreIntersectionConsumedRef.current = false;
+      loadMoreScrollValidationPendingRef.current = false;
+    }
+    if (!sentinel || !canLoadMore || !hasMore) return void 0;
     if (typeof IntersectionObserver !== "function") return void 0;
     const owner = resolveScrollOwner();
+    let observerHasDelivered = false;
     const observer = new IntersectionObserver((entries) => {
-      if (!entries.some((entry) => entry.isIntersecting)) return;
+      const isIntersecting = entries.some((entry) => entry.isIntersecting);
+      if (loadMoreScrollValidationPendingRef.current) {
+        observerHasDelivered = true;
+        loadMoreScrollValidationPendingRef.current = false;
+        loadMoreIntersectionActiveRef.current = isIntersecting;
+        if (!isIntersecting) {
+          loadMoreIntersectionConsumedRef.current = false;
+          return;
+        }
+        if (loadMoreIntersectionConsumedRef.current) return;
+        loadMoreIntersectionConsumedRef.current = true;
+        requestLoadMore();
+        return;
+      }
+      if (!observerHasDelivered) {
+        observerHasDelivered = true;
+        loadMoreIntersectionActiveRef.current = isIntersecting;
+        if (!isIntersecting) loadMoreIntersectionConsumedRef.current = false;
+        return;
+      }
+      if (!isIntersecting) {
+        loadMoreIntersectionActiveRef.current = false;
+        loadMoreIntersectionConsumedRef.current = false;
+        return;
+      }
+      if (loadMoreIntersectionActiveRef.current) return;
+      loadMoreIntersectionActiveRef.current = true;
+      loadMoreIntersectionConsumedRef.current = true;
       requestLoadMore();
     }, {
       root: owner === rootRef.current ? owner : owner || null,
       rootMargin: config.loading?.rootMargin ?? "240px",
       threshold: normalizeThreshold(config.loading?.threshold)
     });
+    const scrollTarget = owner ?? (typeof window === "undefined" ? null : window);
+    const validateActiveIntersection = () => {
+      if (!loadMoreIntersectionActiveRef.current || loadMoreIntersectionConsumedRef.current || loadMoreScrollValidationPendingRef.current) return;
+      loadMoreScrollValidationPendingRef.current = true;
+      observer.unobserve(sentinel);
+      observer.takeRecords();
+      observer.observe(sentinel);
+    };
     observer.observe(sentinel);
-    return () => observer.disconnect();
+    scrollTarget?.addEventListener("scroll", validateActiveIntersection, { passive: true });
+    return () => {
+      observer.disconnect();
+      scrollTarget?.removeEventListener("scroll", validateActiveIntersection);
+    };
   }, [canLoadMore, config.loading?.rootMargin, config.loading?.threshold, hasMore, keysSignature, loadingMore, normalizedItems.length, requestLoadMore, resolveScrollOwner]);
   react.useEffect(() => {
     if (!config.loading?.autoFill || !canLoadMore || !hasMore || loadingMore) return;
@@ -9294,7 +9351,10 @@ function WorkbenchCollection({
     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();
+    if (owner.scrollHeight <= owner.clientHeight + 1) {
+      loadMoreIntersectionConsumedRef.current = true;
+      requestLoadMore();
+    }
   }, [
     canLoadMore,
     config.layout.scrollOwner,
@@ -10138,6 +10198,187 @@ function WorkbenchGalleryView({
     }
   );
 }
+var DEFAULT_SECTIONS = [
+  {
+    id: "primary",
+    layout: "rail",
+    filterCount: 2,
+    cardCount: 4,
+    aspectRatios: [16 / 11]
+  },
+  {
+    id: "secondary",
+    layout: "grid",
+    filterCount: 3,
+    cardCount: 5,
+    aspectRatios: [4 / 5, 1, 3 / 4, 5 / 4, 1]
+  }
+];
+function normalizeCount2(value, fallback, maximum) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0)
+    return fallback;
+  return Math.min(Math.round(value), maximum);
+}
+function normalizeAspectRatio(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0)
+    return 1;
+  return Math.min(Math.max(value, 0.5), 2);
+}
+function WorkbenchGallerySkeletonHeading({
+  animated,
+  filterCount
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10 flex-wrap items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BaseSkeleton,
+        {
+          variant: "line",
+          animated,
+          className: "h-6 w-36 rounded-md"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(BaseSkeleton, { variant: "line", animated, className: "h-3 w-12" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-2", children: Array.from({ length: filterCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      BaseSkeleton,
+      {
+        variant: "block",
+        animated,
+        className: "h-9 w-28 rounded-lg"
+      },
+      index
+    )) })
+  ] });
+}
+function WorkbenchGallerySkeleton({
+  sections = DEFAULT_SECTIONS,
+  animated = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading gallery",
+      "data-monkeys-component": "workbench-gallery-skeleton",
+      className: cn("grid w-full gap-4", className),
+      children: sections.map((section, sectionIndex) => {
+        const layout = section.layout ?? "grid";
+        const filterCount = normalizeCount2(section.filterCount, 2, 8);
+        const cardCount = normalizeCount2(
+          section.cardCount,
+          layout === "rail" ? 4 : 5,
+          24
+        );
+        const ratios = section.aspectRatios?.length ? section.aspectRatios : [layout === "rail" ? 16 / 11 : 1];
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            className: "grid gap-4",
+            "data-skeleton-section": section.id,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                WorkbenchGallerySkeletonHeading,
+                {
+                  animated,
+                  filterCount
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid items-start gap-4",
+                    layout === "rail" ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4" : "grid-cols-2 md:grid-cols-3 xl:grid-cols-5"
+                  ),
+                  "data-skeleton-layout": layout,
+                  children: Array.from({ length: cardCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "overflow-hidden rounded-[var(--radius)] border border-border bg-card",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        BaseSkeleton,
+                        {
+                          variant: "block",
+                          animated,
+                          className: "h-auto w-full rounded-none",
+                          style: {
+                            aspectRatio: String(
+                              normalizeAspectRatio(ratios[index % ratios.length])
+                            )
+                          }
+                        }
+                      )
+                    },
+                    index
+                  ))
+                }
+              )
+            ]
+          },
+          section.id || sectionIndex
+        );
+      })
+    }
+  );
+}
+function WorkbenchPageSkeleton({
+  animated = true,
+  className,
+  ...props
+}) {
+  const skeleton = (classNames) => /* @__PURE__ */ jsxRuntime.jsx(BaseSkeleton, { variant: "block", animated, className: classNames });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading page",
+      "data-monkeys-component": "workbench-page-skeleton",
+      className: cn(
+        "flex size-full min-h-0 flex-col gap-4 overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-10 shrink-0 items-center justify-between gap-4 rounded-lg border border-border bg-card px-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            skeleton("h-5 w-20"),
+            skeleton("h-5 w-16"),
+            skeleton("h-5 w-24")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            skeleton("h-7 w-20"),
+            skeleton("size-7")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid shrink-0 grid-cols-1 gap-4 md:grid-cols-3", children: [
+          skeleton("h-40 md:col-span-2"),
+          skeleton("h-40")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(14rem,1fr)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col gap-4 rounded-lg border border-border bg-card p-4", children: [
+            skeleton("h-6 w-40"),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              skeleton("h-4 w-20"),
+              skeleton("h-9 w-full")
+            ] }, index)) }),
+            skeleton("min-h-32 flex-1")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-40 flex-col gap-4 rounded-lg border border-border bg-card p-4", children: [
+            skeleton("h-6 w-28"),
+            skeleton("min-h-28 flex-1"),
+            skeleton("h-9 w-full")
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 function toCssSize4(value) {
   if (value === void 0) return void 0;
   return typeof value === "number" ? `${value}px` : value;
@@ -11649,11 +11890,13 @@ exports.WorkbenchEvidenceList = WorkbenchEvidenceList;
 exports.WorkbenchGalleryCard = WorkbenchGalleryCard;
 exports.WorkbenchGallerySettingsButton = WorkbenchGallerySettingsButton;
 exports.WorkbenchGallerySettingsPanel = WorkbenchGallerySettingsPanel;
+exports.WorkbenchGallerySkeleton = WorkbenchGallerySkeleton;
 exports.WorkbenchGalleryView = WorkbenchGalleryView;
 exports.WorkbenchJourneyNavigation = WorkbenchJourneyNavigation;
 exports.WorkbenchLaneView = WorkbenchLaneView;
 exports.WorkbenchMasonryLayout = WorkbenchMasonryLayout;
 exports.WorkbenchMetricGrid = WorkbenchMetricGrid;
+exports.WorkbenchPageSkeleton = WorkbenchPageSkeleton;
 exports.WorkbenchRadarFilterChip = WorkbenchRadarFilterChip;
 exports.WorkbenchRadarInspectorSection = WorkbenchRadarInspectorSection;
 exports.WorkbenchRadarMatrix = WorkbenchRadarMatrix;