@flowsterix/react 0.10.1 → 0.11.1

package/dist/index.mjs

@@ -1,3 +1,6 @@
+import {
+  DevToolsContext
+} from "./chunk-AJZMUYBN.mjs";
 import "./chunk-Y5EAQSU3.mjs";
 import {
   createPathString,
@@ -332,6 +335,7 @@ var usePreferredAnimationAdapter = (options) => {
 
 // src/context.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DEVTOOLS_BRIDGE_KEY = "__FLOWSTERIX_DEVTOOLS_BRIDGE__";
 var TourContext = createContext4(void 0);
 var DEFAULT_STORAGE_PREFIX = "tour";
 var useFlowMap = (flows) => {
@@ -432,9 +436,9 @@ var TourProvider = ({
       if (!storageAdapter && !fallbackStorageRef.current && isBrowser) {
         fallbackStorageRef.current = createLocalStorageAdapter();
       }
-      const resolvedStorageAdapter = storageAdapter ? storageAdapter : fallbackStorageRef.current;
+      const resolvedStorageAdapter2 = storageAdapter ? storageAdapter : fallbackStorageRef.current;
       const store = createFlowStore(definition, {
-        storageAdapter: resolvedStorageAdapter,
+        storageAdapter: resolvedStorageAdapter2,
         storageKey: storageNamespace ? `${storageNamespace}:${definition.id}` : void 0,
         persistOnChange,
         analytics,
@@ -588,8 +592,8 @@ var TourProvider = ({
     if (!storageAdapter && !fallbackStorageRef.current && isBrowser) {
       fallbackStorageRef.current = createLocalStorageAdapter();
     }
-    const resolvedStorageAdapter = storageAdapter ?? fallbackStorageRef.current;
-    if (!resolvedStorageAdapter) {
+    const resolvedStorageAdapter2 = storageAdapter ?? fallbackStorageRef.current;
+    if (!resolvedStorageAdapter2) {
       setEligibleFlows(
         autoStartFlows.map((flow) => ({
           flow,
@@ -606,7 +610,7 @@ var TourProvider = ({
       );
       const snapshots = await Promise.all(
         storageKeys.map(
-          (key) => resolveMaybePromise(resolvedStorageAdapter.get(key))
+          (key) => resolveMaybePromise(resolvedStorageAdapter2.get(key))
         )
       );
       if (cancelled) return;
@@ -742,6 +746,48 @@ var TourProvider = ({
     pendingResumeRef.current.delete(activeFlowId);
     void runResumeHooks(definition, state, resumeStrategy);
   }, [activeFlowId, flowMap, resolveResumeStrategy, runResumeHooks, state]);
+  const resolvedStorageAdapter = useMemo3(() => {
+    if (storageAdapter) return storageAdapter;
+    return fallbackStorageRef.current ?? null;
+  }, [storageAdapter]);
+  const getStorageKey = useCallback2(
+    (flowId) => storageNamespace ? `${storageNamespace}:${flowId}` : `${DEFAULT_STORAGE_PREFIX}:${flowId}`,
+    [storageNamespace]
+  );
+  const getFlowState = useCallback2(
+    async (flowId) => {
+      if (!resolvedStorageAdapter) return null;
+      const key = getStorageKey(flowId);
+      const snapshot = await resolveMaybePromise(resolvedStorageAdapter.get(key));
+      if (!snapshot) return null;
+      return snapshot.value;
+    },
+    [resolvedStorageAdapter, getStorageKey]
+  );
+  const deleteFlowStorage = useCallback2(
+    async (flowId) => {
+      if (!resolvedStorageAdapter) return;
+      const key = getStorageKey(flowId);
+      await resolveMaybePromise(resolvedStorageAdapter.remove(key));
+    },
+    [resolvedStorageAdapter, getStorageKey]
+  );
+  const updateFlowStorage = useCallback2(
+    async (flowId, newState) => {
+      if (!resolvedStorageAdapter) return;
+      const key = getStorageKey(flowId);
+      const definition = flowMap.get(flowId);
+      if (!definition) return;
+      await resolveMaybePromise(
+        resolvedStorageAdapter.set(key, {
+          version: newState.version,
+          value: newState,
+          updatedAt: Date.now()
+        })
+      );
+    },
+    [resolvedStorageAdapter, getStorageKey, flowMap]
+  );
   const contextValue = useMemo3(
     () => ({
       flows: flowMap,
@@ -765,7 +811,10 @@ var TourProvider = ({
       delayInfo,
       setDelayInfo,
       backdropInteraction: backdropInteractionProp,
-      lockBodyScroll: lockBodyScrollProp
+      lockBodyScroll: lockBodyScrollProp,
+      getFlowState,
+      deleteFlowStorage,
+      updateFlowStorage
     }),
     [
       activeFlowId,
@@ -789,7 +838,10 @@ var TourProvider = ({
       state,
       toggleDebug,
       backdropInteractionProp,
-      lockBodyScrollProp
+      lockBodyScrollProp,
+      getFlowState,
+      deleteFlowStorage,
+      updateFlowStorage
     ]
   );
   const resolvedAnimationAdapter = usePreferredAnimationAdapter({
@@ -797,7 +849,70 @@ var TourProvider = ({
     reducedMotionAdapter,
     enabled: autoDetectReducedMotion
   });
-  return /* @__PURE__ */ jsx3(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ jsx3(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ jsx3(DialogRegistryProvider, { children: /* @__PURE__ */ jsxs(TourContext.Provider, { value: contextValue, children: [
+  const devToolsContextValue = useMemo3(() => {
+    return {
+      flows: flowMap,
+      activeFlowId,
+      state,
+      storageAdapter: resolvedStorageAdapter,
+      storageNamespace: storageNamespace ?? DEFAULT_STORAGE_PREFIX,
+      cancelFlow: (flowId) => {
+        if (activeFlowId === flowId && storeRef.current) {
+          storeRef.current.cancel();
+        }
+      },
+      deleteFlowStorage,
+      updateFlowStorage,
+      getFlowState
+    };
+  }, [
+    flowMap,
+    activeFlowId,
+    state,
+    resolvedStorageAdapter,
+    storageNamespace,
+    deleteFlowStorage,
+    updateFlowStorage,
+    getFlowState
+  ]);
+  useEffect3(() => {
+    if (typeof window === "undefined") return;
+    const bridgeValue = {
+      flows: flowMap,
+      activeFlowId,
+      state,
+      cancel: () => {
+        if (storeRef.current) {
+          storeRef.current.cancel();
+        }
+      },
+      getFlowState,
+      deleteFlowStorage,
+      updateFlowStorage
+    };
+    const w = window;
+    if (!w[DEVTOOLS_BRIDGE_KEY]) {
+      w[DEVTOOLS_BRIDGE_KEY] = { value: null, listeners: /* @__PURE__ */ new Set() };
+    }
+    const bridge = w[DEVTOOLS_BRIDGE_KEY];
+    bridge.value = bridgeValue;
+    for (const listener of bridge.listeners) {
+      listener(bridgeValue);
+    }
+  }, [flowMap, activeFlowId, state, getFlowState, deleteFlowStorage, updateFlowStorage]);
+  useEffect3(() => {
+    return () => {
+      if (typeof window === "undefined") return;
+      const w = window;
+      if (w[DEVTOOLS_BRIDGE_KEY]) {
+        w[DEVTOOLS_BRIDGE_KEY].value = null;
+        for (const listener of w[DEVTOOLS_BRIDGE_KEY].listeners) {
+          listener(null);
+        }
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ jsx3(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ jsx3(DialogRegistryProvider, { children: /* @__PURE__ */ jsx3(TourContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(DevToolsContext.Provider, { value: devToolsContextValue, children: [
     /* @__PURE__ */ jsx3(
       DialogAutomationBridge,
       {
@@ -807,7 +922,7 @@ var TourProvider = ({
       }
     ),
     children
-  ] }) }) }) });
+  ] }) }) }) }) });
 };
 var DialogAutomationBridge = ({
   flow,
@@ -1854,10 +1969,12 @@ var useHiddenTargetFallback = ({
       graceTimeoutRef.current = null;
     }
   };
+  const stepChangeTimeRef = useRef5(0);
   useEffect6(() => {
+    stepChangeTimeRef.current = Date.now();
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
-    setIsInGracePeriod(false);
+    setIsInGracePeriod(true);
     clearPendingTimeout();
     clearGraceTimeout();
     return () => {
@@ -1874,11 +1991,22 @@ var useHiddenTargetFallback = ({
     const isMissingWithNoRect = target.visibility === "missing" && target.status === "resolving" && target.rect === null && target.lastResolvedRect === null;
     const isMissingAfterNavigation = target.visibility === "missing" && target.status === "resolving" && target.rect === null;
     const shouldHandleHiddenTarget = !target.isScreen && (isHiddenOrDetached || isMissingWithNoRect || isMissingAfterNavigation);
-    if (!shouldHandleHiddenTarget) {
+    const timeSinceStepChange = Date.now() - stepChangeTimeRef.current;
+    const MIN_GRACE_AFTER_STEP_CHANGE = 300;
+    if (!shouldHandleHiddenTarget && target.visibility !== "unknown") {
+      if (timeSinceStepChange < MIN_GRACE_AFTER_STEP_CHANGE) {
+        graceTimeoutRef.current = globalThis.setTimeout(() => {
+          setIsInGracePeriod(false);
+        }, MIN_GRACE_AFTER_STEP_CHANGE - timeSinceStepChange);
+        return void 0;
+      }
       setUsingScreenFallback(false);
       setIsInGracePeriod(false);
       return void 0;
     }
+    if (target.visibility === "unknown") {
+      return void 0;
+    }
     setIsInGracePeriod(true);
     if (hiddenMode !== "screen") {
       setUsingScreenFallback(false);
@@ -2533,11 +2661,11 @@ var useTourOverlay = (options) => {
       };
       return;
     }
-    if (target.status === "idle") {
+    if (target.status === "idle" && !isInGracePeriod) {
       hasShownRef.current = false;
       lastReadyTargetRef.current = null;
     }
-  }, [target]);
+  }, [target, isInGracePeriod]);
   const viewport = getViewportRect();
   const cachedTarget = lastReadyTargetRef.current;
   const highlightTarget = target.status === "ready" ? target : cachedTarget;
@@ -3414,7 +3542,8 @@ var TourPopoverPortal = ({
   layoutId,
   containerComponent,
   contentComponent,
-  transitionsOverride
+  transitionsOverride,
+  isInGracePeriod = false
 }) => {
   if (!isBrowser) return null;
   const host = portalHost();
@@ -3438,10 +3567,10 @@ var TourPopoverPortal = ({
         rect: { ...target.rect },
         isScreen: target.isScreen
       };
-    } else if (target.status === "idle") {
+    } else if (target.status === "idle" && !isInGracePeriod) {
       lastReadyTargetRef.current = null;
     }
-  }, [target.isScreen, target.rect, target.status]);
+  }, [target.isScreen, target.rect, target.status, isInGracePeriod]);
   const cachedTarget = lastReadyTargetRef.current;
   const resolvedRect = target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null;
   const resolvedIsScreen = target.status === "ready" ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;

package/dist/router/index.cjs

@@ -1,206 +1,17 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-HPVLOLCD.cjs');
 
-// src/router/index.ts
-var router_exports = {};
-__export(router_exports, {
-  createPathString: () => createPathString,
-  getCurrentRoutePath: () => getCurrentRoutePath,
-  matchRoute: () => matchRoute,
-  notifyRouteChange: () => notifyRouteChange,
-  routeGatingChannel: () => routeGatingChannel,
-  subscribeToRouteChanges: () => subscribeToRouteChanges
-});
-module.exports = __toCommonJS(router_exports);
 
-// src/utils/dom.ts
-var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
 
-// src/router/routeGating.ts
-var DEFAULT_POLL_MS = 150;
-var normalizePathname = (pathname) => {
-  if (typeof pathname !== "string" || pathname.length === 0) {
-    return "/";
-  }
-  return pathname.startsWith("/") ? pathname : `/${pathname}`;
-};
-var normalizePrefixedSegment = (value, prefix) => {
-  if (typeof value !== "string" || value.length === 0) {
-    return "";
-  }
-  return value.startsWith(prefix) ? value : `${prefix}${value}`;
-};
-var getWindowPath = () => {
-  if (!isBrowser) return "/";
-  const { pathname, search, hash } = window.location;
-  return normalizePathname(pathname) + normalizePrefixedSegment(search, "?") + normalizePrefixedSegment(hash, "#");
-};
-var normalizeExternalPath = (path) => {
-  if (path.length === 0) {
-    return "/";
-  }
-  try {
-    const parsed = new URL(path, "http://flowsterix.local");
-    return normalizePathname(parsed.pathname) + normalizePrefixedSegment(parsed.search, "?") + normalizePrefixedSegment(parsed.hash, "#");
-  } catch {
-    const [withoutHash, hash = ""] = path.split("#");
-    const [base, search = ""] = withoutHash.split("?");
-    return normalizePathname(base) + normalizePrefixedSegment(search ? `?${search}` : "", "?") + normalizePrefixedSegment(hash ? `#${hash}` : "", "#");
-  }
-};
-var RouteGatingChannel = class {
-  #listeners = /* @__PURE__ */ new Set();
-  #currentPath = getWindowPath();
-  #teardown = null;
-  #attachDefaultListeners() {
-    if (!isBrowser) return;
-    if (this.#teardown) return;
-    let lastPath = getWindowPath();
-    const emitIfChanged = () => {
-      const nextPath = getWindowPath();
-      if (nextPath === lastPath) return;
-      lastPath = nextPath;
-      this.notify(nextPath);
-    };
-    const handler = () => emitIfChanged();
-    window.addEventListener("popstate", handler);
-    window.addEventListener("hashchange", handler);
-    const pollId = window.setInterval(emitIfChanged, DEFAULT_POLL_MS);
-    this.#teardown = () => {
-      window.removeEventListener("popstate", handler);
-      window.removeEventListener("hashchange", handler);
-      window.clearInterval(pollId);
-      this.#teardown = null;
-    };
-  }
-  #detachDefaultListeners() {
-    if (this.#listeners.size > 0) return;
-    this.#teardown?.();
-    this.#teardown = null;
-  }
-  getCurrentPath() {
-    if (isBrowser) {
-      this.#currentPath = getWindowPath();
-    }
-    return this.#currentPath;
-  }
-  notify(path) {
-    const resolved = typeof path === "string" && path.length > 0 ? normalizeExternalPath(path) : this.getCurrentPath();
-    if (resolved === this.#currentPath) {
-      this.#currentPath = resolved;
-      return;
-    }
-    this.#currentPath = resolved;
-    for (const listener of Array.from(this.#listeners)) {
-      try {
-        listener(resolved);
-      } catch (error) {
-        console.warn("[tour][route-gating] listener error", error);
-      }
-    }
-  }
-  subscribe(listener) {
-    if (this.#listeners.has(listener)) {
-      return () => {
-        this.#listeners.delete(listener);
-        this.#detachDefaultListeners();
-      };
-    }
-    this.#listeners.add(listener);
-    if (this.#listeners.size === 1) {
-      this.#attachDefaultListeners();
-    }
-    const current = this.getCurrentPath();
-    try {
-      listener(current);
-    } catch (error) {
-      console.warn("[tour][route-gating] listener error", error);
-    }
-    return () => {
-      this.#listeners.delete(listener);
-      this.#detachDefaultListeners();
-    };
-  }
-};
-var routeGatingChannel = new RouteGatingChannel();
-var getCurrentRoutePath = () => routeGatingChannel.getCurrentPath();
-var notifyRouteChange = (path) => {
-  routeGatingChannel.notify(path);
-};
-var subscribeToRouteChanges = (listener) => {
-  return routeGatingChannel.subscribe(listener);
-};
-var matchRoute = (params) => {
-  const { pattern, path } = params;
-  if (!pattern) return true;
-  if (typeof pattern === "string") return path === pattern;
-  return pattern.test(path);
-};
 
-// src/router/utils.ts
-var ensurePrefix = (value, prefix) => value.startsWith(prefix) ? value : `${prefix}${value}`;
-var isNonEmptyString = (value) => typeof value === "string" && value.length > 0;
-var toSearchString = (value) => {
-  if (!isNonEmptyString(value)) {
-    if (value instanceof URLSearchParams) {
-      const serialized = value.toString();
-      return serialized.length > 0 ? `?${serialized}` : "";
-    }
-    if (typeof value === "object" && value !== null) {
-      try {
-        const params = new URLSearchParams();
-        for (const [key, raw] of Object.entries(
-          value
-        )) {
-          if (raw === void 0 || raw === null) continue;
-          params.set(key, String(raw));
-        }
-        const serialized = params.toString();
-        return serialized.length > 0 ? `?${serialized}` : "";
-      } catch {
-        return "";
-      }
-    }
-    return "";
-  }
-  if (value === "?") return "";
-  return value.startsWith("?") ? value : ensurePrefix(value, "?");
-};
-var toHashString = (value) => {
-  if (!isNonEmptyString(value)) {
-    return "";
-  }
-  if (value === "#") return "";
-  return value.startsWith("#") ? value : ensurePrefix(value, "#");
-};
-var createPathString = (pathname, search, hash) => {
-  const normalizedPath = isNonEmptyString(pathname) ? pathname.startsWith("/") ? pathname : `/${pathname}` : "/";
-  const searchPart = toSearchString(search);
-  const hashPart = toHashString(hash);
-  return `${normalizedPath}${searchPart}${hashPart}`;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createPathString,
-  getCurrentRoutePath,
-  matchRoute,
-  notifyRouteChange,
-  routeGatingChannel,
-  subscribeToRouteChanges
-});
+
+
+
+var _chunkD5LQLRSUcjs = require('../chunk-D5LQLRSU.cjs');
+
+
+
+
+
+
+
+exports.createPathString = _chunkD5LQLRSUcjs.createPathString; exports.getCurrentRoutePath = _chunkD5LQLRSUcjs.getCurrentRoutePath; exports.matchRoute = _chunkD5LQLRSUcjs.matchRoute; exports.notifyRouteChange = _chunkD5LQLRSUcjs.notifyRouteChange; exports.routeGatingChannel = _chunkD5LQLRSUcjs.routeGatingChannel; exports.subscribeToRouteChanges = _chunkD5LQLRSUcjs.subscribeToRouteChanges;