@flamingo-stack/openframe-frontend-core 0.0.734 → 0.0.736

package/dist/components/ui/snap-carousel.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAutoplay } from "../../hooks/ui/use-autoplay.js";
 import { useInView } from "../../hooks/ui/use-in-view.js";
+import { useResumableTimeout } from "../../hooks/ui/use-resumable-timeout.js";
 import { cn } from "../../utils/cn.js";
 import { Chevron02LeftIcon } from "../icons-v2-generated/arrows/chevron-02-left-icon.js";
 import { Chevron02RightIcon } from "../icons-v2-generated/arrows/chevron-02-right-icon.js";
@@ -11,17 +12,26 @@ function SnapCarouselControlsSkeleton({ className }) {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn(SNAP_CAROUSEL_CONTROLS_CLASS, "h-11", className) });
 }
 const GAP_PX = 12;
-function DotFill({ durationMs }) {
-  const [full, setFull] = useState(false);
+function DotFill({ durationMs, ranMs, running }) {
+  const [going, setGoing] = useState(false);
   useEffect(() => {
-    const frame = requestAnimationFrame(() => setFull(true));
-    return () => cancelAnimationFrame(frame);
-  }, []);
+    if (!running) return void 0;
+    const frame = requestAnimationFrame(() => setGoing(true));
+    return () => {
+      cancelAnimationFrame(frame);
+      setGoing(false);
+    };
+  }, [running]);
+  const moving = running && going;
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "absolute inset-0 origin-left bg-ods-text-primary transition-transform ease-linear",
-      style: { transform: full ? "scaleX(1)" : "scaleX(0)", transitionDuration: `${durationMs}ms` }
+      className: "absolute inset-0 origin-left bg-ods-text-primary ease-linear",
+      style: {
+        transform: `scaleX(${moving ? 1 : durationMs > 0 ? ranMs / durationMs : 0})`,
+        transitionProperty: moving ? "transform" : "none",
+        transitionDuration: `${Math.max(0, durationMs - ranMs)}ms`
+      }
     }
   );
 }
@@ -71,11 +81,13 @@ function SnapCarousel({
   }, [count, slideStep]);
   const canAutoAdvance = autoAdvanceMs > 0 && count > 1;
   const playing = auto.playing && canAutoAdvance;
-  useEffect(() => {
-    if (!playing) return void 0;
-    const timer = setTimeout(() => goTo(index >= count - 1 ? 0 : index + 1), autoAdvanceMs);
-    return () => clearTimeout(timer);
-  }, [playing, index, count, autoAdvanceMs, goTo]);
+  const ranMs = useResumableTimeout({
+    running: playing,
+    durationMs: autoAdvanceMs,
+    resetKey: index,
+    onElapsed: () => goTo(index >= count - 1 ? 0 : index + 1)
+  });
+  const showsWait = canAutoAdvance && !auto.reducedMotion;
   const setRefs = useCallback(
     (node) => {
       trackRef.current = node;
@@ -116,10 +128,11 @@ function SnapCarousel({
           className: cn(
             "relative h-1.5 overflow-hidden rounded-full transition-[width] duration-200 motion-reduce:transition-none",
             dotIndex === index ? "w-6" : "w-1.5",
-            dotIndex === index && !playing ? "bg-ods-text-primary" : "bg-ods-border"
+            // A carousel that never advances by itself marks its slide with a whole dot.
+            dotIndex === index && !showsWait ? "bg-ods-text-primary" : "bg-ods-border"
           ),
-          children: dotIndex === index && playing && // Re-keyed per slide so the fill restarts from empty.
-          /* @__PURE__ */ jsx(DotFill, { durationMs: autoAdvanceMs }, index)
+          children: dotIndex === index && showsWait && // Re-keyed per slide so a NEW slide starts from empty; a pause keeps its place.
+          /* @__PURE__ */ jsx(DotFill, { durationMs: autoAdvanceMs, ranMs, running: playing }, index)
         },
         dotIndex
       )) }),

package/dist/components/unified-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unified-pagination.d.ts","sourceRoot":"","sources":["../../src/components/unified-pagination.tsx"],"names":[],"mappings":"AAMA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAA6C,EAC7C,OAAc,EACd,YAAoB,GACrB,EAAE,sBAAsB,sCAqDxB"}
+{"version":3,"file":"unified-pagination.d.ts","sourceRoot":"","sources":["../../src/components/unified-pagination.tsx"],"names":[],"mappings":"AAMA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAA6C,EAC7C,OAAc,EACd,YAAoB,GACrB,EAAE,sBAAsB,sCAqExB"}

package/dist/components/unified-pagination.js

@@ -13,15 +13,19 @@ function UnifiedPagination({
 }) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
+  const pageHref = (page) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (page <= 1) params.delete("page");
+    else params.set("page", page.toString());
+    return withQuery(pathname, params.toString());
+  };
   const handlePageChange = (page) => {
     const currentScrollY = window.scrollY;
     if (onPageChange) {
       onPageChange(page);
     }
     if (syncUrl) {
-      const params = new URLSearchParams(searchParams.toString());
-      params.set("page", page.toString());
-      window.history.replaceState(null, "", withQuery(pathname, params.toString()));
+      window.history.replaceState(null, "", pageHref(page));
     }
     setTimeout(() => {
       window.scrollTo({
@@ -35,7 +39,15 @@ function UnifiedPagination({
     return reserveSpace ? /* @__PURE__ */ jsx("div", { className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-none invisible", children: /* @__PURE__ */ jsx(Pagination, { currentPage: 1, totalPages: 1, onPageChange: () => {
     } }) }) }) : null;
   }
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Pagination, { currentPage, totalPages, onPageChange: handlePageChange }) });
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      currentPage,
+      totalPages,
+      onPageChange: handlePageChange,
+      getPageHref: syncUrl ? pageHref : void 0
+    }
+  ) });
 }
 export {
   UnifiedPagination

package/dist/{devices-CKLN7BHY.cjs → devices-WWJZFG6E.cjs}

@@ -11,21 +11,21 @@ require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk4V672TEIcjs = require('./chunk-4V672TEI.cjs');
+var _chunkOJUMVOMPcjs = require('./chunk-OJUMVOMP.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BP6R5WDW.cjs');
+require('./chunk-VA7OMDZO.cjs');
 require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-OXJ57643.cjs');
+require('./chunk-MGW5DO6P.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-EMBH2EJO.cjs');
-require('./chunk-HAWQA5FI.cjs');
+require('./chunk-T27CVQBO.cjs');
+require('./chunk-OV6BGMEL.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1826,8 +1826,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-TLQQP2EL.cjs');
-require('./chunk-DHIISS4W.cjs');
+require('./chunk-EX2GYIGW.cjs');
+require('./chunk-EJOXXJJB.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1865,14 +1865,14 @@ require('./chunk-3ATAYP36.cjs');
 // src/components/product-demo/screens/devices.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
-var TOOLBAR = { ..._chunk4V672TEIcjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
+var TOOLBAR = { ..._chunkOJUMVOMPcjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
 var NO_HEADER = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function DevicesScreen({ compact = false }) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => _chunkWFPCCBOMcjs.buildWindowsDevicesFixture.call(void 0, cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4V672TEIcjs.DevicesPanelView,
+    _chunkOJUMVOMPcjs.DevicesPanelView,
     {
       className: "p-[var(--spacing-system-l)]",
       headerSlot: NO_HEADER,