@flamingo-stack/openframe-frontend-core 0.0.730 → 0.0.732

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-X72Z4QMT.cjs → devices-A6SFNGE4.cjs}

@@ -11,24 +11,24 @@ require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkSKDQ2SLJcjs = require('./chunk-SKDQ2SLJ.cjs');
-require('./chunk-CD5YBUJK.cjs');
-require('./chunk-2V62Y67F.cjs');
-require('./chunk-24KWUFWA.cjs');
+var _chunk22ZK7BA3cjs = require('./chunk-22ZK7BA3.cjs');
+require('./chunk-QMTC3BK3.cjs');
+require('./chunk-MEDDKM3A.cjs');
+require('./chunk-G37LT2ID.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-2I3XU2IB.cjs');
-require('./chunk-UG7Q3HQH.cjs');
+require('./chunk-SJRR745G.cjs');
+require('./chunk-GID62YEN.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-AIW4KZQT.cjs');
-require('./chunk-4NFVFTD6.cjs');
-require('./chunk-KMMV562E.cjs');
+require('./chunk-6KDGIOLP.cjs');
+require('./chunk-ZWMPAFGB.cjs');
+require('./chunk-HH4BMYDX.cjs');
 require('./chunk-HZJRERJW.cjs');
-require('./chunk-YHFXQ5OR.cjs');
+require('./chunk-E3N24573.cjs');
 require('./chunk-MJGX357L.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
@@ -47,7 +47,7 @@ require('./chunk-EW6JDYIJ.cjs');
 require('./chunk-RIYAW5XQ.cjs');
 require('./chunk-V625LXMX.cjs');
 require('./chunk-QZDWF4TP.cjs');
-require('./chunk-VQMWBQUJ.cjs');
+require('./chunk-R4QMR6S4.cjs');
 require('./chunk-3XTNLCTC.cjs');
 require('./chunk-WK6GYVD5.cjs');
 require('./chunk-3EGCNO7J.cjs');
@@ -697,8 +697,8 @@ require('./chunk-QFE6P63F.cjs');
 require('./chunk-O7V5GAHE.cjs');
 require('./chunk-OCN4FL5Q.cjs');
 require('./chunk-3ATL7GDU.cjs');
-require('./chunk-UYKL2AXE.cjs');
-require('./chunk-4XQXTQUK.cjs');
+require('./chunk-OKW5OAFJ.cjs');
+require('./chunk-6N5NQRQA.cjs');
 require('./chunk-ZAOFZVLY.cjs');
 require('./chunk-V5KXAQX4.cjs');
 require('./chunk-PFRJIX7A.cjs');
@@ -931,7 +931,7 @@ require('./chunk-N72UPI7O.cjs');
 require('./chunk-DXD6RXHR.cjs');
 require('./chunk-4WBXPA7T.cjs');
 require('./chunk-SSDZ2GXZ.cjs');
-require('./chunk-FRET5WH3.cjs');
+require('./chunk-CKR42OBK.cjs');
 require('./chunk-5C2FFRM3.cjs');
 require('./chunk-W4GNRZNW.cjs');
 require('./chunk-I3XDST6Q.cjs');
@@ -940,8 +940,8 @@ require('./chunk-7V4BJPWN.cjs');
 require('./chunk-PV5XWLHS.cjs');
 require('./chunk-GBYDOBZJ.cjs');
 require('./chunk-IVUEBSZI.cjs');
-require('./chunk-YJXUJWHN.cjs');
-require('./chunk-GVTCHXW2.cjs');
+require('./chunk-J7SZOZOS.cjs');
+require('./chunk-ZWUIRQNY.cjs');
 require('./chunk-OISNGOVI.cjs');
 require('./chunk-UTEMC6QY.cjs');
 require('./chunk-JZCNK6ID.cjs');
@@ -965,7 +965,7 @@ require('./chunk-KJVUT6TC.cjs');
 require('./chunk-SI3C5MSE.cjs');
 require('./chunk-BQKIC2L7.cjs');
 require('./chunk-KWI6PZDR.cjs');
-require('./chunk-6KD2XUQZ.cjs');
+require('./chunk-LRQITIEC.cjs');
 require('./chunk-IP7BBNC3.cjs');
 require('./chunk-3VK4NLWK.cjs');
 require('./chunk-ILYW6BQN.cjs');
@@ -1115,7 +1115,7 @@ require('./chunk-DLIEZ3RI.cjs');
 require('./chunk-GTOJIVUG.cjs');
 require('./chunk-EDVT7OAS.cjs');
 require('./chunk-J2J46RD7.cjs');
-require('./chunk-NDHQ7JLZ.cjs');
+require('./chunk-GKHWXI25.cjs');
 require('./chunk-Y37GQ7LY.cjs');
 require('./chunk-UPORNW7Y.cjs');
 require('./chunk-XVBSIZZZ.cjs');
@@ -1128,7 +1128,7 @@ require('./chunk-5MW5L3KP.cjs');
 require('./chunk-KNJJGFRS.cjs');
 require('./chunk-ZKCVXV65.cjs');
 require('./chunk-PJBY4WDP.cjs');
-require('./chunk-NB5BYOTM.cjs');
+require('./chunk-RC32WBPL.cjs');
 require('./chunk-QKEK7C3C.cjs');
 require('./chunk-YWM3EATD.cjs');
 require('./chunk-AKDG3XFL.cjs');
@@ -1138,7 +1138,7 @@ require('./chunk-S2Y6AJPY.cjs');
 require('./chunk-YTV4JDXK.cjs');
 require('./chunk-R4PYEXRG.cjs');
 require('./chunk-KVTWTWGG.cjs');
-require('./chunk-2T2TH5DF.cjs');
+require('./chunk-52HFGZCI.cjs');
 require('./chunk-HNTGOS3G.cjs');
 require('./chunk-SWHUL32W.cjs');
 require('./chunk-NEZ4MXDS.cjs');
@@ -1153,7 +1153,7 @@ require('./chunk-5YRFUDAS.cjs');
 require('./chunk-FRHJNL4W.cjs');
 require('./chunk-4JRGMN4B.cjs');
 require('./chunk-Q6GXWFMW.cjs');
-require('./chunk-TW2SES5W.cjs');
+require('./chunk-NCGAP3U4.cjs');
 require('./chunk-JAWIFYB2.cjs');
 require('./chunk-6YS2NSKP.cjs');
 require('./chunk-6BDBASLK.cjs');
@@ -1319,9 +1319,9 @@ require('./chunk-4FMA4KTH.cjs');
 require('./chunk-5IGDSOIL.cjs');
 require('./chunk-44MFW2JL.cjs');
 require('./chunk-TQ6NZO6F.cjs');
-require('./chunk-GJPAS4RJ.cjs');
+require('./chunk-CT342EJU.cjs');
 require('./chunk-U7CBIAE7.cjs');
-require('./chunk-5RMCAY6Y.cjs');
+require('./chunk-27TMRMOM.cjs');
 require('./chunk-DCC5FRWG.cjs');
 require('./chunk-WNUEWOSH.cjs');
 require('./chunk-6BYUCDU7.cjs');
@@ -1787,7 +1787,7 @@ require('./chunk-TMHPQ4E5.cjs');
 require('./chunk-7WT2C5YY.cjs');
 require('./chunk-BHUIUHJF.cjs');
 require('./chunk-KLM7TDPH.cjs');
-require('./chunk-HVZBIXCZ.cjs');
+require('./chunk-O2RPIGSG.cjs');
 require('./chunk-D6XEZN4K.cjs');
 require('./chunk-DM7KP3VO.cjs');
 require('./chunk-HZYC3G6E.cjs');
@@ -1818,20 +1818,20 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-CDLDAQBA.cjs');
-require('./chunk-UHJG2BDI.cjs');
-require('./chunk-73MDSN5A.cjs');
+require('./chunk-RIXGLS5Y.cjs');
+require('./chunk-CC3LINHF.cjs');
+require('./chunk-HELVKMRG.cjs');
 require('./chunk-JKX2C3I2.cjs');
 require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-XSPL7RXL.cjs');
-require('./chunk-3YHVQ34L.cjs');
-require('./chunk-BE2WAMG5.cjs');
+require('./chunk-TLDCSTTQ.cjs');
+require('./chunk-XOQ2UUVS.cjs');
+require('./chunk-AEVGCB3Y.cjs');
 require('./chunk-YADG5Q7C.cjs');
-require('./chunk-DINGZJ37.cjs');
-require('./chunk-NXCV35RR.cjs');
+require('./chunk-NYY25425.cjs');
+require('./chunk-KLXHCNDC.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-5KLNEFZZ.cjs');
-require('./chunk-SI24RMI5.cjs');
+require('./chunk-7DUXR4HL.cjs');
+require('./chunk-MANNIJ42.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 = { ..._chunkSKDQ2SLJcjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
+var TOOLBAR = { ..._chunk22ZK7BA3cjs.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, 
-    _chunkSKDQ2SLJcjs.DevicesPanelView,
+    _chunk22ZK7BA3cjs.DevicesPanelView,
     {
       className: "p-[var(--spacing-system-l)]",
       headerSlot: NO_HEADER,

package/dist/elestio-logo-grey-icon-DV7P3JLT.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkNCGAP3U4cjs = require('./chunk-NCGAP3U4.cjs');
+
+
+exports.ElestioLogoGreyIcon = _chunkNCGAP3U4cjs.ElestioLogoGreyIcon;

package/dist/elestio-logo-icon-34ILAIDI.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunk52HFGZCIcjs = require('./chunk-52HFGZCI.cjs');
+
+
+exports.ElestioLogoIcon = _chunk52HFGZCIcjs.ElestioLogoIcon;