@flowsterix/react 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kevin Graf
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/{chunk-U757YVZP.mjs → chunk-B6OJ26VH.mjs}

@@ -1,6 +1,6 @@
 import {
   useTanStackRouterTourAdapter
-} from "./chunk-RCASLQRS.mjs";
+} from "./chunk-LQFOZS4Y.mjs";
 
 // src/router/tanstackRouterSync.tsx
 import * as TanStackRouter from "@tanstack/react-router";

package/dist/{chunk-RCASLQRS.mjs → chunk-LQFOZS4Y.mjs}

@@ -1,7 +1,7 @@
 import {
   createPathString,
   notifyRouteChange
-} from "./chunk-RPA2S5UP.mjs";
+} from "./chunk-WTGQUDPT.mjs";
 
 // src/router/tanstackRouterAdapter.tsx
 import { useRouterState } from "@tanstack/react-router";

package/dist/{chunk-RPA2S5UP.mjs → chunk-WTGQUDPT.mjs}

@@ -37,15 +37,17 @@ var getViewportRect = () => {
 var expandRect = (rect, padding) => {
   if (!isBrowser) return rect;
   const viewport = getViewportRect();
-  const top = Math.max(0, rect.top - padding);
-  const left = Math.max(0, rect.left - padding);
-  const width = Math.min(viewport.width - left, rect.width + padding * 2);
-  const height = Math.min(viewport.height - top, rect.height + padding * 2);
+  const spaceTop = rect.top;
+  const spaceBottom = viewport.height - rect.bottom;
+  const spaceLeft = rect.left;
+  const spaceRight = viewport.width - rect.right;
+  const verticalPadding = Math.min(padding, spaceTop, spaceBottom);
+  const horizontalPadding = Math.min(padding, spaceLeft, spaceRight);
   return createRect({
-    top,
-    left,
-    width: Math.max(0, width),
-    height: Math.max(0, height)
+    top: rect.top - verticalPadding,
+    left: rect.left - horizontalPadding,
+    width: rect.width + horizontalPadding * 2,
+    height: rect.height + verticalPadding * 2
   });
 };
 var getClientRect = (element) => toClientRect(element.getBoundingClientRect());

package/dist/components/TourFocusManager.d.ts

@@ -5,7 +5,9 @@ export interface TourFocusManagerProps {
     target: TourTargetInfo;
     popoverNode: HTMLElement | null;
     highlightRect?: TourOverlayRect | null;
-    targetRingOffset?: number;
+    guardElementFocusRing?: {
+        boxShadow: string;
+    };
 }
-export declare const TourFocusManager: ({ active, target, popoverNode, highlightRect, targetRingOffset, }: TourFocusManagerProps) => import("react").ReactPortal | null;
+export declare const TourFocusManager: ({ active, target, popoverNode, highlightRect, guardElementFocusRing, }: TourFocusManagerProps) => import("react").ReactPortal | null;
 //# sourceMappingURL=TourFocusManager.d.ts.map

package/dist/components/TourFocusManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourFocusManager.d.ts","sourceRoot":"","sources":["../../src/components/TourFocusManager.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAgB5D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,gBAAgB,GAAI,mEAM9B,qBAAqB,uCAkVvB,CAAA"}
+{"version":3,"file":"TourFocusManager.d.ts","sourceRoot":"","sources":["../../src/components/TourFocusManager.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAgB5D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACtC,qBAAqB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;CAC9C;AAKD,eAAO,MAAM,gBAAgB,GAAI,wEAM9B,qBAAqB,uCA0VvB,CAAA"}

package/dist/hooks/useTourHud.d.ts

@@ -45,6 +45,9 @@ export interface TourHudFocusManagerState {
     target: TourTargetInfo;
     popoverNode: HTMLElement | null;
     setPopoverNode: (node: HTMLElement | null) => void;
+    guardElementFocusRing?: {
+        boxShadow: string;
+    };
 }
 export interface UseTourHudResult {
     hudState: UseHudStateResult;

package/dist/hooks/useTourHud.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTourHud.d.ts","sourceRoot":"","sources":["../../src/hooks/useTourHud.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAA;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,uBAAuB,CAAA;CACzC;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAA;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,YAAY,EAAE,wBAAwB,CAAA;IACtC,WAAW,EAAE,uBAAuB,CAAA;IACpC,oBAAoB,EAAE,OAAO,CAAA;IAC7B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAKD,eAAO,MAAM,UAAU,GACrB,UAAS,iBAAsB,KAC9B,gBAwFF,CAAA"}
+{"version":3,"file":"useTourHud.d.ts","sourceRoot":"","sources":["../../src/hooks/useTourHud.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAA;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,uBAAuB,CAAA;CACzC;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAA;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAClD,qBAAqB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;CAC9C;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,YAAY,EAAE,wBAAwB,CAAA;IACtC,WAAW,EAAE,uBAAuB,CAAA;IACpC,oBAAoB,EAAE,OAAO,CAAA;IAC7B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAKD,eAAO,MAAM,UAAU,GACrB,UAAS,iBAAsB,KAC9B,gBA+FF,CAAA"}

package/dist/index.cjs

@@ -250,15 +250,17 @@ var getViewportRect = () => {
 var expandRect = (rect, padding) => {
   if (!isBrowser) return rect;
   const viewport = getViewportRect();
-  const top = Math.max(0, rect.top - padding);
-  const left = Math.max(0, rect.left - padding);
-  const width = Math.min(viewport.width - left, rect.width + padding * 2);
-  const height = Math.min(viewport.height - top, rect.height + padding * 2);
+  const spaceTop = rect.top;
+  const spaceBottom = viewport.height - rect.bottom;
+  const spaceLeft = rect.left;
+  const spaceRight = viewport.width - rect.right;
+  const verticalPadding = Math.min(padding, spaceTop, spaceBottom);
+  const horizontalPadding = Math.min(padding, spaceLeft, spaceRight);
   return createRect({
-    top,
-    left,
-    width: Math.max(0, width),
-    height: Math.max(0, height)
+    top: rect.top - verticalPadding,
+    left: rect.left - horizontalPadding,
+    width: rect.width + horizontalPadding * 2,
+    height: rect.height + verticalPadding * 2
   });
 };
 var getClientRect = (element) => toClientRect(element.getBoundingClientRect());
@@ -2403,9 +2405,16 @@ var useTourHud = (options = {}) => {
       active: hudState.focusTrapActive,
       target: hudState.hudTarget,
       popoverNode,
-      setPopoverNode
+      setPopoverNode,
+      guardElementFocusRing: hudState.flowHudOptions?.guardElementFocusRing
     }),
-    [hudState.focusTrapActive, hudState.hudTarget, popoverNode, setPopoverNode]
+    [
+      hudState.focusTrapActive,
+      hudState.hudTarget,
+      popoverNode,
+      setPopoverNode,
+      hudState.flowHudOptions?.guardElementFocusRing
+    ]
   );
   return {
     hudState,
@@ -3736,12 +3745,13 @@ var runMicrotask = (callback) => {
     setTimeout(callback, 0);
   }
 };
+var DEFAULT_BOX_SHADOW = "0 0 0 2px var(--primary), 0 0 8px 2px color-mix(in srgb, var(--primary) 40%, transparent)";
 var TourFocusManager = ({
   active,
   target,
   popoverNode,
   highlightRect,
-  targetRingOffset = -2
+  guardElementFocusRing
 }) => {
   const previousFocusRef = (0, import_react21.useRef)(null);
   const guardNodesRef = (0, import_react21.useRef)({
@@ -3752,10 +3762,9 @@ var TourFocusManager = ({
   });
   const lastTabDirectionRef = (0, import_react21.useRef)("forward");
   const suppressGuardHopRef = (0, import_react21.useRef)(null);
-  const ringStylesRef = (0, import_react21.useRef)(
-    /* @__PURE__ */ new WeakMap()
-  );
   const [targetRingActive, setTargetRingActive] = (0, import_react21.useState)(false);
+  const [popoverRingActive, setPopoverRingActive] = (0, import_react21.useState)(false);
+  const [popoverRect, setPopoverRect] = (0, import_react21.useState)(null);
   const restoreFocus = () => {
     const previous = previousFocusRef.current;
     previousFocusRef.current = null;
@@ -3807,33 +3816,9 @@ var TourFocusManager = ({
       });
       return node;
     };
-    const applyRing = (element, activeRing) => {
-      if (!element) return;
-      const cache = ringStylesRef.current;
-      if (activeRing) {
-        if (!cache.has(element)) {
-          cache.set(element, {
-            outline: element.style.outline,
-            outlineOffset: element.style.outlineOffset
-          });
-        }
-        element.style.outline = "2px solid var(--tour-focus-ring-color, rgba(59, 130, 246, 0.8))";
-        element.style.outlineOffset = "3px";
-        return;
-      }
-      const previous = cache.get(element);
-      if (previous) {
-        element.style.outline = previous.outline;
-        element.style.outlineOffset = previous.outlineOffset;
-        cache.delete(element);
-      } else {
-        element.style.outline = "";
-        element.style.outlineOffset = "";
-      }
-    };
     const clearRings = () => {
       setTargetRingActive(false);
-      applyRing(popoverNode, false);
+      setPopoverRingActive(false);
     };
     const removeGuards = () => {
       for (const key of Object.keys(guardNodesRef.current)) {
@@ -3970,10 +3955,10 @@ var TourFocusManager = ({
         const key = targetNode.getAttribute("data-tour-focus-guard");
         if (key?.startsWith("target")) {
           setTargetRingActive(true);
-          applyRing(popoverNode, false);
+          setPopoverRingActive(false);
         } else if (key?.startsWith("popover")) {
           setTargetRingActive(false);
-          applyRing(popoverNode, true);
+          setPopoverRingActive(true);
         }
         return;
       }
@@ -3999,25 +3984,59 @@ var TourFocusManager = ({
     target.stepId,
     target.visibility
   ]);
+  (0, import_react21.useLayoutEffect)(() => {
+    if (popoverRingActive && popoverNode) {
+      setPopoverRect(popoverNode.getBoundingClientRect());
+    } else {
+      setPopoverRect(null);
+    }
+  }, [popoverRingActive, popoverNode]);
   if (!isBrowser) return null;
   const host = portalHost();
-  if (!host || !highlightRect || !targetRingActive) return null;
-  const offset = Math.max(0, targetRingOffset);
-  const ringStyle = {
-    position: "fixed",
-    top: highlightRect.top - offset,
-    left: highlightRect.left - offset,
-    width: highlightRect.width + offset * 2,
-    height: highlightRect.height + offset * 2,
-    borderRadius: highlightRect.radius + offset,
-    boxShadow: [
-      "0 0 0 2px var(--tour-focus-ring-offset-color, transparent)",
-      "0 0 0 2px var(--tour-focus-ring-color, rgba(59, 130, 246, 0.8))"
-    ].join(", "),
-    pointerEvents: "none",
-    zIndex: 2001
-  };
-  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: ringStyle, "aria-hidden": true }), host);
+  if (!host) return null;
+  const boxShadow = guardElementFocusRing?.boxShadow ?? DEFAULT_BOX_SHADOW;
+  const showTargetRing = targetRingActive && highlightRect;
+  const showPopoverRing = popoverRingActive && popoverRect;
+  if (!showTargetRing && !showPopoverRing) return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      showTargetRing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: highlightRect.top,
+            left: highlightRect.left,
+            width: highlightRect.width,
+            height: highlightRect.height,
+            borderRadius: highlightRect.radius,
+            boxShadow,
+            pointerEvents: "none",
+            zIndex: 2001
+          },
+          "aria-hidden": true
+        }
+      ),
+      showPopoverRing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: popoverRect.top,
+            left: popoverRect.left,
+            width: popoverRect.width,
+            height: popoverRect.height,
+            borderRadius: 12,
+            boxShadow,
+            pointerEvents: "none",
+            zIndex: 2001
+          },
+          "aria-hidden": true
+        }
+      )
+    ] }),
+    host
+  );
 };
 
 // src/motion/useHudMotion.ts

package/dist/index.mjs

@@ -4,10 +4,10 @@ import {
   getTourRouter,
   setTanStackRouter,
   setTourRouter
-} from "./chunk-U757YVZP.mjs";
+} from "./chunk-B6OJ26VH.mjs";
 import {
   useTanStackRouterTourAdapter
-} from "./chunk-RCASLQRS.mjs";
+} from "./chunk-LQFOZS4Y.mjs";
 import {
   createPathString,
   expandRect,
@@ -20,7 +20,7 @@ import {
   portalHost,
   subscribeToRouteChanges,
   supportsMasking
-} from "./chunk-RPA2S5UP.mjs";
+} from "./chunk-WTGQUDPT.mjs";
 
 // src/context.tsx
 import {
@@ -2140,9 +2140,16 @@ var useTourHud = (options = {}) => {
       active: hudState.focusTrapActive,
       target: hudState.hudTarget,
       popoverNode,
-      setPopoverNode
+      setPopoverNode,
+      guardElementFocusRing: hudState.flowHudOptions?.guardElementFocusRing
     }),
-    [hudState.focusTrapActive, hudState.hudTarget, popoverNode, setPopoverNode]
+    [
+      hudState.focusTrapActive,
+      hudState.hudTarget,
+      popoverNode,
+      setPopoverNode,
+      hudState.flowHudOptions?.guardElementFocusRing
+    ]
   );
   return {
     hudState,
@@ -3471,7 +3478,7 @@ var focusElement = (element, options) => {
 };
 
 // src/components/TourFocusManager.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var runMicrotask = (callback) => {
   if (typeof queueMicrotask === "function") {
     queueMicrotask(callback);
@@ -3479,12 +3486,13 @@ var runMicrotask = (callback) => {
     setTimeout(callback, 0);
   }
 };
+var DEFAULT_BOX_SHADOW = "0 0 0 2px var(--primary), 0 0 8px 2px color-mix(in srgb, var(--primary) 40%, transparent)";
 var TourFocusManager = ({
   active,
   target,
   popoverNode,
   highlightRect,
-  targetRingOffset = -2
+  guardElementFocusRing
 }) => {
   const previousFocusRef = useRef8(null);
   const guardNodesRef = useRef8({
@@ -3495,10 +3503,9 @@ var TourFocusManager = ({
   });
   const lastTabDirectionRef = useRef8("forward");
   const suppressGuardHopRef = useRef8(null);
-  const ringStylesRef = useRef8(
-    /* @__PURE__ */ new WeakMap()
-  );
   const [targetRingActive, setTargetRingActive] = useState11(false);
+  const [popoverRingActive, setPopoverRingActive] = useState11(false);
+  const [popoverRect, setPopoverRect] = useState11(null);
   const restoreFocus = () => {
     const previous = previousFocusRef.current;
     previousFocusRef.current = null;
@@ -3550,33 +3557,9 @@ var TourFocusManager = ({
       });
       return node;
     };
-    const applyRing = (element, activeRing) => {
-      if (!element) return;
-      const cache = ringStylesRef.current;
-      if (activeRing) {
-        if (!cache.has(element)) {
-          cache.set(element, {
-            outline: element.style.outline,
-            outlineOffset: element.style.outlineOffset
-          });
-        }
-        element.style.outline = "2px solid var(--tour-focus-ring-color, rgba(59, 130, 246, 0.8))";
-        element.style.outlineOffset = "3px";
-        return;
-      }
-      const previous = cache.get(element);
-      if (previous) {
-        element.style.outline = previous.outline;
-        element.style.outlineOffset = previous.outlineOffset;
-        cache.delete(element);
-      } else {
-        element.style.outline = "";
-        element.style.outlineOffset = "";
-      }
-    };
     const clearRings = () => {
       setTargetRingActive(false);
-      applyRing(popoverNode, false);
+      setPopoverRingActive(false);
     };
     const removeGuards = () => {
       for (const key of Object.keys(guardNodesRef.current)) {
@@ -3713,10 +3696,10 @@ var TourFocusManager = ({
         const key = targetNode.getAttribute("data-tour-focus-guard");
         if (key?.startsWith("target")) {
           setTargetRingActive(true);
-          applyRing(popoverNode, false);
+          setPopoverRingActive(false);
         } else if (key?.startsWith("popover")) {
           setTargetRingActive(false);
-          applyRing(popoverNode, true);
+          setPopoverRingActive(true);
         }
         return;
       }
@@ -3742,25 +3725,59 @@ var TourFocusManager = ({
     target.stepId,
     target.visibility
   ]);
+  useLayoutEffect3(() => {
+    if (popoverRingActive && popoverNode) {
+      setPopoverRect(popoverNode.getBoundingClientRect());
+    } else {
+      setPopoverRect(null);
+    }
+  }, [popoverRingActive, popoverNode]);
   if (!isBrowser) return null;
   const host = portalHost();
-  if (!host || !highlightRect || !targetRingActive) return null;
-  const offset = Math.max(0, targetRingOffset);
-  const ringStyle = {
-    position: "fixed",
-    top: highlightRect.top - offset,
-    left: highlightRect.left - offset,
-    width: highlightRect.width + offset * 2,
-    height: highlightRect.height + offset * 2,
-    borderRadius: highlightRect.radius + offset,
-    boxShadow: [
-      "0 0 0 2px var(--tour-focus-ring-offset-color, transparent)",
-      "0 0 0 2px var(--tour-focus-ring-color, rgba(59, 130, 246, 0.8))"
-    ].join(", "),
-    pointerEvents: "none",
-    zIndex: 2001
-  };
-  return createPortal3(/* @__PURE__ */ jsx4("div", { style: ringStyle, "aria-hidden": true }), host);
+  if (!host) return null;
+  const boxShadow = guardElementFocusRing?.boxShadow ?? DEFAULT_BOX_SHADOW;
+  const showTargetRing = targetRingActive && highlightRect;
+  const showPopoverRing = popoverRingActive && popoverRect;
+  if (!showTargetRing && !showPopoverRing) return null;
+  return createPortal3(
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      showTargetRing && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: highlightRect.top,
+            left: highlightRect.left,
+            width: highlightRect.width,
+            height: highlightRect.height,
+            borderRadius: highlightRect.radius,
+            boxShadow,
+            pointerEvents: "none",
+            zIndex: 2001
+          },
+          "aria-hidden": true
+        }
+      ),
+      showPopoverRing && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: popoverRect.top,
+            left: popoverRect.left,
+            width: popoverRect.width,
+            height: popoverRect.height,
+            borderRadius: 12,
+            boxShadow,
+            pointerEvents: "none",
+            zIndex: 2001
+          },
+          "aria-hidden": true
+        }
+      )
+    ] }),
+    host
+  );
 };
 
 // src/motion/useHudMotion.ts

package/dist/router/index.mjs

@@ -4,17 +4,17 @@ import {
   getTourRouter,
   setTanStackRouter,
   setTourRouter
-} from "../chunk-U757YVZP.mjs";
+} from "../chunk-B6OJ26VH.mjs";
 import {
   useTanStackRouterTourAdapter
-} from "../chunk-RCASLQRS.mjs";
+} from "../chunk-LQFOZS4Y.mjs";
 import {
   createPathString,
   getCurrentRoutePath,
   notifyRouteChange,
   routeGatingChannel,
   subscribeToRouteChanges
-} from "../chunk-RPA2S5UP.mjs";
+} from "../chunk-WTGQUDPT.mjs";
 export {
   TanStackRouterSync,
   createPathString,

package/dist/router/nextAppRouterAdapter.mjs

@@ -1,7 +1,7 @@
 import {
   createPathString,
   notifyRouteChange
-} from "../chunk-RPA2S5UP.mjs";
+} from "../chunk-WTGQUDPT.mjs";
 
 // src/router/nextAppRouterAdapter.tsx
 import * as NextNavigation from "next/navigation";

package/dist/router/nextPagesRouterAdapter.mjs

@@ -1,7 +1,7 @@
 import {
   createPathString,
   notifyRouteChange
-} from "../chunk-RPA2S5UP.mjs";
+} from "../chunk-WTGQUDPT.mjs";
 
 // src/router/nextPagesRouterAdapter.tsx
 import * as NextRouter from "next/router";

package/dist/router/reactRouterAdapter.mjs

@@ -1,7 +1,7 @@
 import {
   createPathString,
   notifyRouteChange
-} from "../chunk-RPA2S5UP.mjs";
+} from "../chunk-WTGQUDPT.mjs";
 
 // src/router/reactRouterAdapter.tsx
 import { useEffect } from "react";

package/dist/router/tanstackRouterAdapter.mjs

@@ -1,7 +1,7 @@
 import {
   useTanStackRouterTourAdapter
-} from "../chunk-RCASLQRS.mjs";
-import "../chunk-RPA2S5UP.mjs";
+} from "../chunk-LQFOZS4Y.mjs";
+import "../chunk-WTGQUDPT.mjs";
 export {
   useTanStackRouterTourAdapter
 };

package/dist/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,SAC4C,CAAA;AAElE,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,+BAKxB,QAAQ,KAAG,cAOZ,CAAA;AAEF,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,GAAG,eAAe,KAAG,cAM3D,CAAA;AAEJ,eAAO,MAAM,eAAe,QAAO,cAgBlC,CAAA;AAED,eAAO,MAAM,UAAU,GACrB,MAAM,cAAc,EACpB,SAAS,MAAM,KACd,cAeF,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,MAAM,cAAc,EAAE,eAAU,YAUhE,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,cACF,CAAA;AAe/C,eAAO,MAAM,gBAAgB,GAAI,SAAS,OAAO,KAAG,KAAK,CAAC,OAAO,CA4BhE,CAAA;AAED,eAAO,MAAM,UAAU,0BAA2C,CAAA;AA4BlE,eAAO,MAAM,eAAe,eAM3B,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,SAC4C,CAAA;AAElE,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,+BAKxB,QAAQ,KAAG,cAOZ,CAAA;AAEF,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,GAAG,eAAe,KAAG,cAM3D,CAAA;AAEJ,eAAO,MAAM,eAAe,QAAO,cAgBlC,CAAA;AAED,eAAO,MAAM,UAAU,GACrB,MAAM,cAAc,EACpB,SAAS,MAAM,KACd,cAqBF,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,MAAM,cAAc,EAAE,eAAU,YAUhE,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,KAAG,cACF,CAAA;AAe/C,eAAO,MAAM,gBAAgB,GAAI,SAAS,OAAO,KAAG,KAAK,CAAC,OAAO,CA4BhE,CAAA;AAED,eAAO,MAAM,UAAU,0BAA2C,CAAA;AA4BlE,eAAO,MAAM,eAAe,eAM3B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
-    "@flowsterix/core": "0.1.0"
+    "@flowsterix/core": "0.2.0"
   },
   "peerDependencies": {
     "react": ">=18",