@flowsterix/react 0.1.1 → 0.2.0

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

@@ -2405,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,
@@ -3738,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)({
@@ -3754,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;
@@ -3809,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)) {
@@ -3972,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;
       }
@@ -4001,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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.1.1",
+  "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",