@sesionario/blocks 1.22.2 → 1.23.0

package/dist/index.cjs

@@ -5181,7 +5181,7 @@ function VideoPlayer({
               setUserStarted(true);
               revealControls();
             },
-            className: "absolute inset-0 flex items-center justify-center bg-cover bg-center",
+            className: "absolute inset-0 flex items-center justify-center bg-black bg-contain bg-center bg-no-repeat",
             style: poster ? { backgroundImage: `url(${poster})` } : void 0,
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-16 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm transition group-hover:bg-black/70", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "size-8 translate-x-0.5", fill: "currentColor" }) })
           }
@@ -5646,6 +5646,340 @@ function useSearchHotkey(options = {}) {
   return { open, setOpen, toggle };
 }
 
+// src/lib/scroll-restoration/store.ts
+var MAX_MARKS = 30;
+var MAX_SNAPSHOT_ROUTES = 3;
+var PENDING_TRAVERSAL_TTL_MS = 1e3;
+var scrollMarks = /* @__PURE__ */ new Map();
+var snapshotsByRoute = /* @__PURE__ */ new Map();
+var pendingTraversalKey = null;
+var pendingTraversalTimeout = null;
+var popstateInstalled = false;
+function touchMapEntry(map, key, value, max) {
+  if (map.has(key)) map.delete(key);
+  map.set(key, value);
+  while (map.size > max) {
+    const oldest = map.keys().next().value;
+    if (oldest === void 0) break;
+    map.delete(oldest);
+  }
+}
+function getScrollMark(routeKey) {
+  const mark = scrollMarks.get(routeKey);
+  if (!mark) return void 0;
+  scrollMarks.delete(routeKey);
+  scrollMarks.set(routeKey, mark);
+  return mark;
+}
+function setScrollMark(routeKey, mark) {
+  touchMapEntry(scrollMarks, routeKey, mark, MAX_MARKS);
+}
+function deleteScrollMark(routeKey) {
+  scrollMarks.delete(routeKey);
+}
+function getSnapshot(routeKey, subKey) {
+  const route = snapshotsByRoute.get(routeKey);
+  if (!route) return void 0;
+  snapshotsByRoute.delete(routeKey);
+  snapshotsByRoute.set(routeKey, route);
+  return route.get(subKey);
+}
+function setSnapshot(routeKey, subKey, value) {
+  let route = snapshotsByRoute.get(routeKey);
+  if (route) {
+    snapshotsByRoute.delete(routeKey);
+  } else {
+    route = /* @__PURE__ */ new Map();
+  }
+  route.set(subKey, value);
+  snapshotsByRoute.set(routeKey, route);
+  while (snapshotsByRoute.size > MAX_SNAPSHOT_ROUTES) {
+    const oldest = snapshotsByRoute.keys().next().value;
+    if (oldest === void 0) break;
+    snapshotsByRoute.delete(oldest);
+  }
+}
+function deleteSnapshotsForRoute(routeKey) {
+  snapshotsByRoute.delete(routeKey);
+}
+function clearRoute(routeKey) {
+  deleteScrollMark(routeKey);
+  deleteSnapshotsForRoute(routeKey);
+}
+function clearPendingTraversalTimer() {
+  if (pendingTraversalTimeout !== null) {
+    clearTimeout(pendingTraversalTimeout);
+    pendingTraversalTimeout = null;
+  }
+}
+function schedulePendingTraversalClear() {
+  clearPendingTraversalTimer();
+  pendingTraversalTimeout = setTimeout(() => {
+    pendingTraversalKey = null;
+    pendingTraversalTimeout = null;
+  }, PENDING_TRAVERSAL_TTL_MS);
+}
+function ensurePopstateListener() {
+  if (popstateInstalled || typeof window === "undefined") return;
+  popstateInstalled = true;
+  window.addEventListener("popstate", () => {
+    pendingTraversalKey = window.location.pathname + window.location.search;
+    schedulePendingTraversalClear();
+  });
+}
+function isPendingTraversal(routeKey) {
+  ensurePopstateListener();
+  return pendingTraversalKey === routeKey;
+}
+function consumePendingTraversal(routeKey) {
+  ensurePopstateListener();
+  if (pendingTraversalKey !== routeKey) return false;
+  pendingTraversalKey = null;
+  clearPendingTraversalTimer();
+  return true;
+}
+function getScrollTop(container) {
+  if (!container) {
+    return window.scrollY || document.documentElement.scrollTop || 0;
+  }
+  return container.scrollTop;
+}
+function setScrollTop(container, top) {
+  if (!container) {
+    window.scrollTo(0, top);
+    return;
+  }
+  container.scrollTop = top;
+}
+function scrollportTop(container) {
+  return container ? container.getBoundingClientRect().top : 0;
+}
+function scrollportBottom(container) {
+  if (!container) return window.innerHeight;
+  return container.getBoundingClientRect().bottom;
+}
+function escapeAttrValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function resolveAnchor(container, attribute) {
+  const scope = container ?? document;
+  const nodes = scope.querySelectorAll(`[${attribute}]`);
+  if (nodes.length === 0) return null;
+  const portTop = scrollportTop(container);
+  const portBottom = scrollportBottom(container);
+  let bestId = null;
+  let bestTop = 0;
+  let bestScore = Infinity;
+  for (const node of nodes) {
+    if (!(node instanceof HTMLElement)) continue;
+    const id = node.getAttribute(attribute);
+    if (!id) continue;
+    const rect = node.getBoundingClientRect();
+    if (rect.bottom <= portTop || rect.top >= portBottom) continue;
+    const relativeTop = rect.top - portTop;
+    const score = Math.abs(relativeTop);
+    if (score < bestScore) {
+      bestScore = score;
+      bestId = id;
+      bestTop = relativeTop;
+    }
+  }
+  if (!bestId) return null;
+  return { id: bestId, top: bestTop };
+}
+function captureMark(container, attribute) {
+  const anchor = resolveAnchor(container, attribute);
+  return {
+    top: getScrollTop(container),
+    anchorId: anchor?.id ?? null,
+    anchorTop: anchor?.top ?? 0
+  };
+}
+function applyMark(container, mark, attribute) {
+  if (mark.anchorId) {
+    const scope = container ?? document;
+    const el = scope.querySelector(
+      `[${attribute}="${escapeAttrValue(mark.anchorId)}"]`
+    );
+    if (el instanceof HTMLElement) {
+      const portTop = scrollportTop(container);
+      const currentRelativeTop = el.getBoundingClientRect().top - portTop;
+      const delta = currentRelativeTop - mark.anchorTop;
+      setScrollTop(container, getScrollTop(container) + delta);
+      return true;
+    }
+  }
+  setScrollTop(container, mark.top);
+  return false;
+}
+function getScrollHeight(container) {
+  if (!container) {
+    return Math.max(
+      document.documentElement.scrollHeight,
+      document.body?.scrollHeight ?? 0
+    );
+  }
+  return container.scrollHeight;
+}
+var DEFAULT_ANCHOR_ATTRIBUTE = "data-scroll-anchor";
+var STABILIZE_MS = 600;
+var ScrollRestorationContext = React7.createContext(null);
+function useScrollRestorationContext() {
+  return React7.useContext(ScrollRestorationContext);
+}
+function readContainer(containerRef) {
+  return containerRef?.current ?? null;
+}
+function ScrollRestorationProvider({
+  routeKey,
+  containerRef,
+  anchorAttribute = DEFAULT_ANCHOR_ATTRIBUTE,
+  children
+}) {
+  ensurePopstateListener();
+  const traversalForRouteRef = React7.useRef({ routeKey: "", isTraversal: false });
+  if (traversalForRouteRef.current.routeKey !== routeKey) {
+    traversalForRouteRef.current = {
+      routeKey,
+      isTraversal: isPendingTraversal(routeKey)
+    };
+  }
+  const isTraversal = traversalForRouteRef.current.isTraversal;
+  const value = React7.useMemo(
+    () => ({
+      routeKey,
+      isTraversal,
+      anchorAttribute
+    }),
+    [routeKey, isTraversal, anchorAttribute]
+  );
+  React7.useEffect(() => {
+    if (typeof window === "undefined" || !("scrollRestoration" in history)) {
+      return;
+    }
+    const previous = history.scrollRestoration;
+    history.scrollRestoration = "manual";
+    return () => {
+      history.scrollRestoration = previous;
+    };
+  }, []);
+  const prevRouteKeyRef = React7.useRef(routeKey);
+  const anchorAttributeRef = React7.useRef(anchorAttribute);
+  anchorAttributeRef.current = anchorAttribute;
+  React7.useEffect(() => {
+    const container = readContainer(containerRef);
+    const target = container ?? window;
+    let rafId = 0;
+    const onScroll = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        setScrollMark(
+          routeKey,
+          captureMark(readContainer(containerRef), anchorAttribute)
+        );
+      });
+    };
+    target.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      target.removeEventListener("scroll", onScroll);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [routeKey, containerRef, anchorAttribute]);
+  React7.useLayoutEffect(() => {
+    const container = readContainer(containerRef);
+    const prevKey = prevRouteKeyRef.current;
+    if (prevKey !== routeKey) {
+      setScrollMark(
+        prevKey,
+        captureMark(container, anchorAttributeRef.current)
+      );
+      prevRouteKeyRef.current = routeKey;
+    }
+    const hasHash = typeof window !== "undefined" && window.location.hash.length > 1;
+    if (isTraversal) {
+      consumePendingTraversal(routeKey);
+      const mark = getScrollMark(routeKey);
+      if (!mark) return void 0;
+      applyMark(container, mark, anchorAttribute);
+      return startStabilizationLoop(container, mark, anchorAttribute);
+    }
+    clearRoute(routeKey);
+    if (!hasHash) {
+      setScrollTop(container, 0);
+    }
+    return void 0;
+  }, [routeKey, isTraversal, containerRef, anchorAttribute]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollRestorationContext.Provider, { value, children });
+}
+function startStabilizationLoop(container, mark, attribute) {
+  const startedAt = performance.now();
+  let lastHeight = getScrollHeight(container);
+  let rafId = 0;
+  let aborted = false;
+  const abort = () => {
+    aborted = true;
+  };
+  const onUserIntent = () => {
+    abort();
+  };
+  window.addEventListener("wheel", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("touchstart", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("keydown", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("pointerdown", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  const tick = () => {
+    if (aborted) return;
+    if (performance.now() - startedAt > STABILIZE_MS) return;
+    const height = getScrollHeight(container);
+    if (height !== lastHeight) {
+      lastHeight = height;
+      applyMark(container, mark, attribute);
+    }
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+  return () => {
+    abort();
+    if (rafId) cancelAnimationFrame(rafId);
+    window.removeEventListener("wheel", onUserIntent);
+    window.removeEventListener("touchstart", onUserIntent);
+    window.removeEventListener("keydown", onUserIntent);
+    window.removeEventListener("pointerdown", onUserIntent);
+  };
+}
+
+// src/hooks/useRestorableState.ts
+function useRestorableState(subKey, initializer) {
+  const ctx = useScrollRestorationContext();
+  const [state, setState] = React7.useState(() => {
+    if (!ctx) return initializer();
+    const traversal = ctx.isTraversal || isPendingTraversal(ctx.routeKey);
+    if (!traversal) return initializer();
+    const snap = getSnapshot(ctx.routeKey, subKey);
+    return snap !== void 0 ? snap : initializer();
+  });
+  React7.useEffect(() => {
+    if (!ctx) return;
+    setSnapshot(ctx.routeKey, subKey, state);
+  }, [ctx, subKey, state]);
+  return [state, setState];
+}
+
 // src/components/search/fuzzy.ts
 function normalize(value) {
   return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -8767,6 +9101,7 @@ exports.PaymentIcon = PaymentIcon;
 exports.PhoneInput = PhoneInput;
 exports.PlatformAccountMenu = PlatformAccountMenu;
 exports.PlatformNavbar = PlatformNavbar;
+exports.ScrollRestorationProvider = ScrollRestorationProvider;
 exports.SearchCommand = SearchCommand;
 exports.SearchablePicker = SearchablePicker;
 exports.SupportMessengerProvider = SupportMessengerProvider;
@@ -8803,7 +9138,9 @@ exports.useLanguageContext = useLanguageContext;
 exports.useMediaQuery = useMediaQuery2;
 exports.usePlaybackStats = usePlaybackStats;
 exports.useRealtimeChannel = useRealtimeChannel;
+exports.useRestorableState = useRestorableState;
 exports.useScrollFadeXEdges = useScrollFadeXEdges;
+exports.useScrollRestorationContext = useScrollRestorationContext;
 exports.useSearchHotkey = useSearchHotkey;
 exports.useSupportConversation = useSupportConversation;
 exports.useSupportMessenger = useSupportMessenger;