@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.733

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

@@ -6,7 +6,6 @@ import { useInView } from "../../hooks/ui/use-in-view.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";
-import { PlaybackToggle } from "./playback-toggle.js";
 const SNAP_CAROUSEL_CONTROLS_CLASS = "mt-3 flex items-center gap-2";
 function SnapCarouselControlsSkeleton({ className }) {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn(SNAP_CAROUSEL_CONTROLS_CLASS, "h-11", className) });
@@ -32,8 +31,6 @@ function SnapCarousel({
   getKey,
   label,
   autoAdvanceMs = 5e3,
-  playLabel,
-  pauseLabel,
   slideClassName = "basis-[300px]",
   prevLabel = "Previous",
   nextLabel = "Next",
@@ -42,7 +39,6 @@ function SnapCarousel({
 }) {
   const trackRef = useRef(null);
   const [index, setIndex] = useState(0);
-  const [pressed, setPressed] = useState(false);
   const { ref: viewRef, inView } = useInView({ threshold: 0.5 });
   const auto = useAutoplay(inView);
   const count = items.length;
@@ -73,20 +69,8 @@ function SnapCarousel({
     if (!track || step === 0) return;
     setIndex(Math.min(count - 1, Math.round(track.scrollLeft / step)));
   }, [count, slideStep]);
-  useEffect(() => {
-    if (!pressed) return void 0;
-    const release = () => setPressed(false);
-    window.addEventListener("pointerup", release);
-    window.addEventListener("pointercancel", release);
-    window.addEventListener("blur", release);
-    return () => {
-      window.removeEventListener("pointerup", release);
-      window.removeEventListener("pointercancel", release);
-      window.removeEventListener("blur", release);
-    };
-  }, [pressed]);
   const canAutoAdvance = autoAdvanceMs > 0 && count > 1;
-  const playing = auto.playing && canAutoAdvance && !pressed;
+  const playing = auto.playing && canAutoAdvance;
   useEffect(() => {
     if (!playing) return void 0;
     const timer = setTimeout(() => goTo(index >= count - 1 ? 0 : index + 1), autoAdvanceMs);
@@ -100,7 +84,7 @@ function SnapCarousel({
     [viewRef]
   );
   if (count === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className, onPointerDown: () => setPressed(true), children: [
+  return /* @__PURE__ */ jsxs("div", { className, ...auto.holdProps, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -151,15 +135,6 @@ function SnapCarousel({
           ]
         }
       ),
-      canAutoAdvance && !auto.reducedMotion && /* @__PURE__ */ jsx(
-        PlaybackToggle,
-        {
-          paused: auto.paused,
-          onChange: auto.setPaused,
-          playLabel,
-          pauseLabel
-        }
-      ),
       /* @__PURE__ */ jsx(
         "button",
         {

package/dist/components/ui/tab-navigation.d.ts

@@ -41,10 +41,17 @@ export interface TabItem {
     /**
      * 0..1. Set on the ACTIVE tab, the underline stops being a selection marker
      * and becomes a progress line: its width is this fraction of the tab, and it
-     * moves there linearly over `progressTransitionMs`. A timed, auto-advancing
+     * moves there linearly over `progressTransitionMs`. Start it above 0 (the
+     * first step of N is 1/N): at 0 the open tab has no underline at all. A timed, auto-advancing
      * strip (a looping demo) uses it; `0` snaps back with no animation.
      */
     progress?: number;
+    /**
+     * The tab's own colour (a CSS colour, such as the hex an agent's identity
+     * stores): its underline and its icon take it while the tab is open. Omitted,
+     * they are the platform's accent.
+     */
+    accent?: string;
 }
 export interface TabNavigationUrlSyncOptions {
     paramName?: string;

package/dist/components/ui/tab-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tab-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1D;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC5C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,kBAAkB;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,yFAAyF;IACzF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAG9B,OAAO,CAAC,EAAE,OAAO,GAAG,2BAA2B,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CAChF;AA8YD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EAAE,mBAAmB,EAC9B,WAAW,EAAE,qBAAqB,EAClC,IAAI,EACJ,SAAS,EACT,eAAe,EACf,iBAAyB,EACzB,gBAAwB,EACxB,WAAmB,EACnB,QAAmB,EACnB,oBAA0B,EAC1B,OAAe,EACf,UAAU,EACV,QAAQ,GACT,EAAE,kBAAkB,qBAkLpB;AAGD,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,EAAE,EAAE,OAAO,MAAM,KAAG,OAAO,GAAG,SAA+C,CAAC;AAGtH,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,EAAE,EAAE,OAAO,MAAM,KAAG,OAAO,CAAC,WAAW,CAAC,GAAG,IAGvF,CAAC"}
+{"version":3,"file":"tab-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tab-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1D;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC5C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,kBAAkB;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,yFAAyF;IACzF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAG9B,OAAO,CAAC,EAAE,OAAO,GAAG,2BAA2B,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CAChF;AAmaD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EAAE,mBAAmB,EAC9B,WAAW,EAAE,qBAAqB,EAClC,IAAI,EACJ,SAAS,EACT,eAAe,EACf,iBAAyB,EACzB,gBAAwB,EACxB,WAAmB,EACnB,QAAmB,EACnB,oBAA0B,EAC1B,OAAe,EACf,UAAU,EACV,QAAQ,GACT,EAAE,kBAAkB,qBAkLpB;AAGD,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,EAAE,EAAE,OAAO,MAAM,KAAG,OAAO,GAAG,SAA+C,CAAC;AAGtH,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,EAAE,EAAE,OAAO,MAAM,KAAG,OAAO,CAAC,WAAW,CAAC,GAAG,IAGvF,CAAC"}

package/dist/components/ui/tab-navigation.js

@@ -130,7 +130,23 @@ const TabBar = memo(function TabBarImpl({
   const isPlaced = indicator.width > 0;
   const activeProgress = tabs.find((tab) => tab.id === activeTab)?.progress;
   const hasProgress = typeof activeProgress === "number";
-  const progress = hasProgress ? Math.max(0, Math.min(1, activeProgress)) : 1;
+  const target = hasProgress ? Math.max(0, Math.min(1, activeProgress)) : 1;
+  const [run, setRun] = useState({ tab: null, progress: 0 });
+  const startsOver = hasProgress && (run.tab !== activeTab || target < run.progress);
+  if (hasProgress && !startsOver && run.progress !== target) setRun({ tab: activeTab, progress: target });
+  useEffect(() => {
+    if (!startsOver) return void 0;
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setRun({ tab: activeTab, progress: target }));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [startsOver, activeTab, target]);
+  const progress = startsOver ? 0 : target;
+  const activeAccent = tabs.find((tab) => tab.id === activeTab)?.accent;
   const indicatorStyle = {
     width: `${indicator.width * progress}px`,
     transform: `translateX(${indicator.left}px)`,
@@ -152,7 +168,7 @@ const TabBar = memo(function TabBarImpl({
       "div",
       {
         ref: scrollRef,
-        className: "scrollbar-hide relative flex h-full items-center justify-start gap-[var(--spacing-system-xxs)] overflow-x-auto overflow-y-hidden",
+        className: "scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden",
         children: [
           tabs.map((tab) => {
             const isActive = activeTab === tab.id;
@@ -164,26 +180,19 @@ const TabBar = memo(function TabBarImpl({
                 onClick: () => onTabChange(tab.id),
                 "aria-label": tab.badge ? `${tab.label} (${tab.badge})` : void 0,
                 className: cn(
-                  "relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
+                  "group relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
                   tabAlign === "start" ? "justify-start text-left" : "justify-center",
                   // Named rather than `transition-all`: the only thing that moves
-                  // here is colour. `all` also made the browser re-check every
-                  // property each frame, including the background GRADIENT — which
-                  // never animated anyway, since the inactive state has no
-                  // background-image to interpolate from.
+                  // here is colour.
                   "border-none bg-transparent outline-none transition-colors duration-200",
                   // `outline-none` above drops the browser's own focus ring, so
                   // put one back or the strip is un-navigable by keyboard — you
                   // can tab through it with nothing to show where you are. Inset,
-                  // so it stays within the button instead of overlapping the tab
-                  // sitting 4px away.
+                  // so it stays within the button: the tabs touch.
                   "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus",
                   stretchTabs && "flex-1",
-                  tab.avatar && "gap-[var(--spacing-system-xsf)]",
-                  // Known limitation: ODS color vars hold hex values, so Tailwind
-                  // alpha modifiers (to-ods-accent/10) silently produce no CSS.
-                  // color-mix() accepts hex, so we derive the 10%-alpha stop from the token.
-                  isActive ? "bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]" : "hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]"
+                  tab.avatar && "gap-[var(--spacing-system-xsf)]"
+                  // The open tab is marked by the underline alone: no surface of its own.
                 ),
                 children: [
                   tab.avatar ? /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0 items-center justify-center", children: [
@@ -195,8 +204,9 @@ const TabBar = memo(function TabBarImpl({
                       {
                         className: cn(
                           "h-4 w-4 transition-colors content-md:h-6 content-md:w-6",
-                          isActive ? "text-ods-accent" : "text-ods-text-secondary"
-                        )
+                          isActive ? !tab.accent && "text-ods-accent" : "text-ods-text-secondary group-hover:text-ods-text-primary"
+                        ),
+                        style: isActive && tab.accent ? { color: tab.accent } : void 0
                       }
                     ),
                     tab.indicator && /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "absolute right-0 top-[-3px]" })
@@ -211,7 +221,7 @@ const TabBar = memo(function TabBarImpl({
                       {
                         className: cn(
                           "whitespace-nowrap transition-colors text-h4",
-                          isActive ? "text-ods-text-primary" : "text-ods-text-secondary"
+                          isActive ? "text-ods-text-primary" : "text-ods-text-secondary group-hover:text-ods-text-primary"
                         ),
                         children: tab.label
                       }
@@ -252,11 +262,11 @@ const TabBar = memo(function TabBarImpl({
               "aria-hidden": true,
               "data-testid": "tab-navigation-underline",
               className: cn(
-                "pointer-events-none absolute bottom-0 left-0 bg-ods-accent motion-reduce:transition-none",
-                hasProgress ? "h-0.5" : "h-1",
+                "pointer-events-none absolute bottom-0 left-0 h-1 motion-reduce:transition-none",
+                !activeAccent && "bg-ods-accent",
                 !hasProgress && shouldAnimateIndicator && "transition-[transform,width,opacity] duration-200 ease-out"
               ),
-              style: indicatorStyle
+              style: activeAccent ? { ...indicatorStyle, backgroundColor: activeAccent } : indicatorStyle
             }
           )
         ]

package/dist/{devices-7MHSJNXS.cjs → devices-POZXTP7X.cjs}

@@ -11,24 +11,24 @@ require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk2UNQJVYNcjs = require('./chunk-2UNQJVYN.cjs');
-require('./chunk-HLIJ3U2T.cjs');
-require('./chunk-RAHRDJBP.cjs');
-require('./chunk-FKKUQK4C.cjs');
+var _chunk3KGICRH7cjs = require('./chunk-3KGICRH7.cjs');
+require('./chunk-ZJNYWNCB.cjs');
+require('./chunk-3HPB4H4C.cjs');
+require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BFHLGEJK.cjs');
-require('./chunk-GID62YEN.cjs');
+require('./chunk-BP6R5WDW.cjs');
+require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-A4HNF4MP.cjs');
-require('./chunk-HY2KTQSL.cjs');
-require('./chunk-HEOD765R.cjs');
+require('./chunk-3UTPZW36.cjs');
+require('./chunk-YIXKH2JO.cjs');
+require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
-require('./chunk-E3N24573.cjs');
+require('./chunk-DUXLZPMJ.cjs');
 require('./chunk-MJGX357L.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
@@ -1818,20 +1818,20 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-YJFN2W7A.cjs');
-require('./chunk-YUXRIR45.cjs');
-require('./chunk-2WXLQ5R5.cjs');
+require('./chunk-DUVOQHQI.cjs');
+require('./chunk-SA7LDEVJ.cjs');
+require('./chunk-NTJE6SM6.cjs');
 require('./chunk-JKX2C3I2.cjs');
 require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-6V4GEE55.cjs');
-require('./chunk-RBOIGJYF.cjs');
-require('./chunk-BE2WAMG5.cjs');
+require('./chunk-J7JKPTGO.cjs');
+require('./chunk-P3R23TOE.cjs');
+require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
-require('./chunk-NYY25425.cjs');
-require('./chunk-KLXHCNDC.cjs');
+require('./chunk-MYBTNOS6.cjs');
+require('./chunk-FTTLBMHU.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
 require('./chunk-OOYBIS7D.cjs');
@@ -1841,10 +1841,10 @@ require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
 require('./chunk-BLH2SFOO.cjs');
 require('./chunk-EAY6ZUES.cjs');
-require('./chunk-LCTDHLDL.cjs');
+require('./chunk-PX7FY655.cjs');
 require('./chunk-CW3ML76U.cjs');
-require('./chunk-7DUXR4HL.cjs');
-require('./chunk-MANNIJ42.cjs');
+require('./chunk-GVTDVS5U.cjs');
+require('./chunk-FICJS5OA.cjs');
 require('./chunk-VOX4E6AX.cjs');
 require('./chunk-UR4K2NSL.cjs');
 require('./chunk-UJ7AXHRZ.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 = { ..._chunk2UNQJVYNcjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
+var TOOLBAR = { ..._chunk3KGICRH7cjs.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, 
-    _chunk2UNQJVYNcjs.DevicesPanelView,
+    _chunk3KGICRH7cjs.DevicesPanelView,
     {
       className: "p-[var(--spacing-system-l)]",
       headerSlot: NO_HEADER,