@archie/devtools 0.1.13 → 0.1.15

package/dist/client/client.d.mts

@@ -46,8 +46,22 @@ type InjectOptions = {
     localScriptUrl?: string;
 };
 
+type ArchieRouteFrame = 'phone' | 'tablet' | 'desktop';
+/**
+ * Whitelisted subset of a React Router `handle` that is forwarded in
+ * ARCHIE_ROUTE_UPDATE. The router's `handle` is free-form (functions, React
+ * elements...) and is NOT structured-cloneable in general, so only `surface`
+ * (non-empty string) and `frame` ('phone' | 'tablet' | 'desktop') are copied;
+ * any other key and any invalid value is dropped. When neither survives the
+ * `handle` key is omitted from the entry entirely.
+ */
+type ArchieRouteHandle = {
+    surface?: string;
+    frame?: ArchieRouteFrame;
+};
 interface ArchieRouteObjectLike {
     id?: string;
+    handle?: unknown;
     path?: string;
     index?: boolean;
     Component?: unknown;
@@ -58,6 +72,7 @@ interface ArchieRouteObjectLike {
 interface ArchieRouteMatchLike {
     route: {
         id?: string;
+        handle?: unknown;
     };
     pathname: string;
     params: Record<string, string | undefined>;
@@ -84,6 +99,46 @@ interface ArchieRouterLike {
     }): Promise<void> | void;
     subscribe(listener: (state: ArchieRouterStateLike) => void): () => void;
 }
+/**
+ * Route information for the sitemap
+ */
+interface ArchieGuardEvidence {
+    componentName: string;
+    roles?: string[];
+    source: 'self' | 'ancestor';
+    ancestorId?: string;
+}
+interface RouteInfo {
+    id: string | undefined;
+    path: string;
+    handle?: ArchieRouteHandle;
+    hasChildren: boolean;
+    parentId: string | null;
+    index: boolean;
+    isLayout: boolean;
+    componentName: string | null;
+    guardEvidence: ArchieGuardEvidence[];
+}
+/**
+ * Type definition for the route update message
+ */
+interface ArchieRouteUpdateMessage {
+    type: 'ARCHIE_ROUTE_UPDATE';
+    payload: {
+        path: string;
+        search: string;
+        hash: string;
+        matches: Array<{
+            id: string | undefined;
+            pathname: string;
+            params: Record<string, string | undefined>;
+            handle?: ArchieRouteHandle;
+        }>;
+        allRoutes: RouteInfo[];
+        layoutRoutes: RouteInfo[];
+        timestamp: number;
+    };
+}
 
 interface ArchieDevToolsRuntimeOptions {
     router: ArchieRouterLike;
@@ -103,4 +158,4 @@ interface DndProviderProps {
 }
 declare function DndProvider({ children }: DndProviderProps): react_jsx_runtime.JSX.Element;
 
-export { ArchieDevToolProvider, type ArchieDevToolProviderProps, DndProvider };
+export { ArchieDevToolProvider, type ArchieDevToolProviderProps, type ArchieRouteFrame, type ArchieRouteHandle, type ArchieRouteUpdateMessage, DndProvider, type RouteInfo };

package/dist/client/client.d.ts

@@ -46,8 +46,22 @@ type InjectOptions = {
     localScriptUrl?: string;
 };
 
+type ArchieRouteFrame = 'phone' | 'tablet' | 'desktop';
+/**
+ * Whitelisted subset of a React Router `handle` that is forwarded in
+ * ARCHIE_ROUTE_UPDATE. The router's `handle` is free-form (functions, React
+ * elements...) and is NOT structured-cloneable in general, so only `surface`
+ * (non-empty string) and `frame` ('phone' | 'tablet' | 'desktop') are copied;
+ * any other key and any invalid value is dropped. When neither survives the
+ * `handle` key is omitted from the entry entirely.
+ */
+type ArchieRouteHandle = {
+    surface?: string;
+    frame?: ArchieRouteFrame;
+};
 interface ArchieRouteObjectLike {
     id?: string;
+    handle?: unknown;
     path?: string;
     index?: boolean;
     Component?: unknown;
@@ -58,6 +72,7 @@ interface ArchieRouteObjectLike {
 interface ArchieRouteMatchLike {
     route: {
         id?: string;
+        handle?: unknown;
     };
     pathname: string;
     params: Record<string, string | undefined>;
@@ -84,6 +99,46 @@ interface ArchieRouterLike {
     }): Promise<void> | void;
     subscribe(listener: (state: ArchieRouterStateLike) => void): () => void;
 }
+/**
+ * Route information for the sitemap
+ */
+interface ArchieGuardEvidence {
+    componentName: string;
+    roles?: string[];
+    source: 'self' | 'ancestor';
+    ancestorId?: string;
+}
+interface RouteInfo {
+    id: string | undefined;
+    path: string;
+    handle?: ArchieRouteHandle;
+    hasChildren: boolean;
+    parentId: string | null;
+    index: boolean;
+    isLayout: boolean;
+    componentName: string | null;
+    guardEvidence: ArchieGuardEvidence[];
+}
+/**
+ * Type definition for the route update message
+ */
+interface ArchieRouteUpdateMessage {
+    type: 'ARCHIE_ROUTE_UPDATE';
+    payload: {
+        path: string;
+        search: string;
+        hash: string;
+        matches: Array<{
+            id: string | undefined;
+            pathname: string;
+            params: Record<string, string | undefined>;
+            handle?: ArchieRouteHandle;
+        }>;
+        allRoutes: RouteInfo[];
+        layoutRoutes: RouteInfo[];
+        timestamp: number;
+    };
+}
 
 interface ArchieDevToolsRuntimeOptions {
     router: ArchieRouterLike;
@@ -103,4 +158,4 @@ interface DndProviderProps {
 }
 declare function DndProvider({ children }: DndProviderProps): react_jsx_runtime.JSX.Element;
 
-export { ArchieDevToolProvider, type ArchieDevToolProviderProps, DndProvider };
+export { ArchieDevToolProvider, type ArchieDevToolProviderProps, type ArchieRouteFrame, type ArchieRouteHandle, type ArchieRouteUpdateMessage, DndProvider, type RouteInfo };

package/dist/client/client.js

@@ -2503,37 +2503,37 @@ function getInitialState() {
     }
   };
 }
-function reducer(state, action) {
+function reducer(state2, action) {
   switch (action.type) {
     case Action.DragStart:
       return {
-        ...state,
+        ...state2,
         draggable: {
-          ...state.draggable,
+          ...state2.draggable,
           initialCoordinates: action.initialCoordinates,
           active: action.active
         }
       };
     case Action.DragMove:
-      if (state.draggable.active == null) {
-        return state;
+      if (state2.draggable.active == null) {
+        return state2;
       }
       return {
-        ...state,
+        ...state2,
         draggable: {
-          ...state.draggable,
+          ...state2.draggable,
           translate: {
-            x: action.coordinates.x - state.draggable.initialCoordinates.x,
-            y: action.coordinates.y - state.draggable.initialCoordinates.y
+            x: action.coordinates.x - state2.draggable.initialCoordinates.x,
+            y: action.coordinates.y - state2.draggable.initialCoordinates.y
           }
         }
       };
     case Action.DragEnd:
     case Action.DragCancel:
       return {
-        ...state,
+        ...state2,
         draggable: {
-          ...state.draggable,
+          ...state2.draggable,
           active: null,
           initialCoordinates: {
             x: 0,
@@ -2552,12 +2552,12 @@ function reducer(state, action) {
       const {
         id
       } = element;
-      const containers = new DroppableContainersMap(state.droppable.containers);
+      const containers = new DroppableContainersMap(state2.droppable.containers);
       containers.set(id, element);
       return {
-        ...state,
+        ...state2,
         droppable: {
-          ...state.droppable,
+          ...state2.droppable,
           containers
         }
       };
@@ -2568,19 +2568,19 @@ function reducer(state, action) {
         key: key2,
         disabled
       } = action;
-      const element = state.droppable.containers.get(id);
+      const element = state2.droppable.containers.get(id);
       if (!element || key2 !== element.key) {
-        return state;
+        return state2;
       }
-      const containers = new DroppableContainersMap(state.droppable.containers);
+      const containers = new DroppableContainersMap(state2.droppable.containers);
       containers.set(id, {
         ...element,
         disabled
       });
       return {
-        ...state,
+        ...state2,
         droppable: {
-          ...state.droppable,
+          ...state2.droppable,
           containers
         }
       };
@@ -2590,22 +2590,22 @@ function reducer(state, action) {
         id,
         key: key2
       } = action;
-      const element = state.droppable.containers.get(id);
+      const element = state2.droppable.containers.get(id);
       if (!element || key2 !== element.key) {
-        return state;
+        return state2;
       }
-      const containers = new DroppableContainersMap(state.droppable.containers);
+      const containers = new DroppableContainersMap(state2.droppable.containers);
       containers.delete(id);
       return {
-        ...state,
+        ...state2,
         droppable: {
-          ...state.droppable,
+          ...state2.droppable,
           containers
         }
       };
     }
     default: {
-      return state;
+      return state2;
     }
   }
 }
@@ -2763,7 +2763,7 @@ var DndContext = /* @__PURE__ */ (0, import_react3.memo)(function DndContext2(_r
     ...props
   } = _ref;
   const store = (0, import_react3.useReducer)(reducer, void 0, getInitialState);
-  const [state, dispatch] = store;
+  const [state2, dispatch] = store;
   const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
   const [status, setStatus] = (0, import_react3.useState)(Status.Uninitialized);
   const isInitialized = status === Status.Initialized;
@@ -2776,7 +2776,7 @@ var DndContext = /* @__PURE__ */ (0, import_react3.memo)(function DndContext2(_r
     droppable: {
       containers: droppableContainers
     }
-  } = state;
+  } = state2;
   const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = (0, import_react3.useRef)({
     initial: null,
@@ -3937,24 +3937,24 @@ function isAfter(a, b) {
 
 // node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
-  let state;
+  let state2;
   const listeners = /* @__PURE__ */ new Set();
   const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
+    const nextState = typeof partial === "function" ? partial(state2) : partial;
+    if (!Object.is(nextState, state2)) {
+      const previousState = state2;
+      state2 = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state2, nextState);
+      listeners.forEach((listener) => listener(state2, previousState));
     }
   };
-  const getState = () => state;
+  const getState = () => state2;
   const getInitialState2 = () => initialState;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
   const api = { setState, getState, getInitialState: getInitialState2, subscribe };
-  const initialState = state = createState(setState, getState, api);
+  const initialState = state2 = createState(setState, getState, api);
   return api;
 };
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
@@ -3988,33 +3988,33 @@ var useDndStore = create((set) => ({
   overlayRenderers: /* @__PURE__ */ new Map(),
   dragEndHandlers: /* @__PURE__ */ new Map(),
   setActive: (id, data, element) => set({ activeId: id, activeData: data, activeElement: element ?? null }),
-  registerContainer: (container) => set((state) => {
-    const next = new Map(state.containers);
+  registerContainer: (container) => set((state2) => {
+    const next = new Map(state2.containers);
     next.set(container.id, container);
     return { containers: next };
   }),
-  unregisterContainer: (id) => set((state) => {
-    const next = new Map(state.containers);
+  unregisterContainer: (id) => set((state2) => {
+    const next = new Map(state2.containers);
     next.delete(id);
     return { containers: next };
   }),
-  registerOverlayRenderer: (type, renderer) => set((state) => {
-    const next = new Map(state.overlayRenderers);
+  registerOverlayRenderer: (type, renderer) => set((state2) => {
+    const next = new Map(state2.overlayRenderers);
     next.set(type, renderer);
     return { overlayRenderers: next };
   }),
-  unregisterOverlayRenderer: (type) => set((state) => {
-    const next = new Map(state.overlayRenderers);
+  unregisterOverlayRenderer: (type) => set((state2) => {
+    const next = new Map(state2.overlayRenderers);
     next.delete(type);
     return { overlayRenderers: next };
   }),
-  registerDragEndHandler: (key2, handler) => set((state) => {
-    const next = new Map(state.dragEndHandlers);
+  registerDragEndHandler: (key2, handler) => set((state2) => {
+    const next = new Map(state2.dragEndHandlers);
     next.set(key2, handler);
     return { dragEndHandlers: next };
   }),
-  unregisterDragEndHandler: (key2) => set((state) => {
-    const next = new Map(state.dragEndHandlers);
+  unregisterDragEndHandler: (key2) => set((state2) => {
+    const next = new Map(state2.dragEndHandlers);
     next.delete(key2);
     return { dragEndHandlers: next };
   })
@@ -10271,7 +10271,7 @@ function isPreviewOrigin(origin) {
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
 var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
 function readBuildVersion() {
-  return "0.1.13" ? "0.1.13" : null;
+  return "0.1.15" ? "0.1.15" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;
@@ -10351,6 +10351,163 @@ function injectInspector(opts = {}) {
   document.head.appendChild(script);
 }
 
+// src/client/route-listener/pageSettle.ts
+var QUIET_MS = 300;
+var POLL_MS = 50;
+var PAGE_QUIET_TIMEOUT_MS = 5e3;
+var MAX_TRACKED_REQUEST_AGE_MS = 4e3;
+var IGNORED_URL_RE = /^wss?:|\/@vite\/|\/@react-refresh|\/__vite|\.hot-update\.|\/_next\/webpack-hmr|\/sockjs-node|\/__webpack_hmr/;
+var LOADING_SELECTOR = [
+  '[aria-busy="true"]',
+  '[role="progressbar"]',
+  '[class*="animate-spin"]',
+  '[class*="animate-pulse"]',
+  '[class*="skeleton" i]'
+].join(",");
+var LOADING_TEXT_RE = /^(loading|cargando)(\.{3}|…)?$/i;
+var NON_RENDERED_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE"]);
+var state = {
+  refs: 0,
+  inflight: /* @__PURE__ */ new Map(),
+  nextId: 0,
+  lastActivityAt: 0
+};
+function urlOf(input) {
+  if (typeof input === "string") return input;
+  if (input instanceof URL) return input.href;
+  return input?.url ?? "";
+}
+function begin(url) {
+  if (IGNORED_URL_RE.test(url)) return void 0;
+  const id = state.nextId++;
+  state.inflight.set(id, Date.now());
+  state.lastActivityAt = Date.now();
+  return () => {
+    if (state.inflight.delete(id)) state.lastActivityAt = Date.now();
+  };
+}
+function patchNetwork() {
+  const originalFetch = window.fetch;
+  const xhrProto = window.XMLHttpRequest?.prototype;
+  const originalOpen = xhrProto?.open;
+  const originalSend = xhrProto?.send;
+  const patchedFetch = function(...args) {
+    const end = begin(urlOf(args[0]));
+    let result;
+    try {
+      result = originalFetch.apply(this, args);
+    } catch (error) {
+      end?.();
+      throw error;
+    }
+    if (end) result.then(end, end);
+    return result;
+  };
+  if (typeof originalFetch === "function") window.fetch = patchedFetch;
+  if (xhrProto && originalOpen && originalSend) {
+    xhrProto.open = function(...args) {
+      this.__archieUrl = urlOf(args[1]);
+      return originalOpen.apply(this, args);
+    };
+    xhrProto.send = function(body) {
+      const end = begin(this.__archieUrl ?? "");
+      if (end) this.addEventListener("loadend", end, { once: true });
+      try {
+        return originalSend.call(this, body);
+      } catch (error) {
+        end?.();
+        throw error;
+      }
+    };
+  }
+  return () => {
+    if (window.fetch === patchedFetch) window.fetch = originalFetch;
+    if (xhrProto && originalOpen && originalSend) {
+      xhrProto.open = originalOpen;
+      xhrProto.send = originalSend;
+    }
+  };
+}
+function installPageActivityTracker() {
+  if (state.refs++ === 0) {
+    state.lastActivityAt = Date.now();
+    state.restore = patchNetwork();
+    state.observer = new MutationObserver(() => {
+      state.lastActivityAt = Date.now();
+    });
+    state.observer.observe(document, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--state.refs === 0) {
+      state.restore?.();
+      state.observer?.disconnect();
+      state.restore = void 0;
+      state.observer = void 0;
+      state.inflight.clear();
+    }
+  };
+}
+function isVisible(el) {
+  if (el.closest('[hidden],[aria-hidden="true"]')) return false;
+  try {
+    const style = getComputedStyle(el);
+    return style.display !== "none" && style.visibility !== "hidden";
+  } catch {
+    return true;
+  }
+}
+function hasLoadingIndicator() {
+  const root = document.body;
+  if (!root) return false;
+  for (const el of Array.from(root.querySelectorAll(LOADING_SELECTOR))) {
+    if (isVisible(el)) return true;
+  }
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const parent = node.parentElement;
+    if (!parent || NON_RENDERED_TAGS.has(parent.tagName)) continue;
+    if (LOADING_TEXT_RE.test((node.textContent ?? "").trim()) && isVisible(parent)) {
+      return true;
+    }
+  }
+  return false;
+}
+function hasPendingRequests(now) {
+  for (const startedAt of state.inflight.values()) {
+    if (now - startedAt < MAX_TRACKED_REQUEST_AGE_MS) return true;
+  }
+  return false;
+}
+function waitForPageQuiet(timeoutMs = PAGE_QUIET_TIMEOUT_MS) {
+  return new Promise((resolve) => {
+    const startedAt = Date.now();
+    const untracked = state.refs === 0;
+    const isQuiet = (now) => !hasPendingRequests(now) && now - (untracked ? startedAt : state.lastActivityAt) >= QUIET_MS && !hasLoadingIndicator();
+    if (isQuiet(startedAt) && !untracked) {
+      resolve(true);
+      return;
+    }
+    const timer = setInterval(() => {
+      const now = Date.now();
+      if (isQuiet(now)) {
+        clearInterval(timer);
+        resolve(true);
+      } else if (now - startedAt >= timeoutMs) {
+        clearInterval(timer);
+        resolve(false);
+      }
+    }, POLL_MS);
+  });
+}
+
 // src/client/route-listener/domSnapshot.ts
 var STRIP_SELECTOR = [
   "script",
@@ -10433,6 +10590,7 @@ async function captureDomSnapshot() {
   if (document.fonts?.ready) {
     await document.fonts.ready;
   }
+  const settled = await waitForPageQuiet();
   await waitForIdle();
   const inlinedHrefs = /* @__PURE__ */ new Set();
   const css = await collectDocumentCss(inlinedHrefs);
@@ -10470,11 +10628,29 @@ async function captureDomSnapshot() {
     html: "<!doctype html>" + clone.outerHTML,
     path: location.pathname + location.search + location.hash,
     viewport: { width: window.innerWidth, height: window.innerHeight },
-    capturedAt: Date.now()
+    capturedAt: Date.now(),
+    settled
   };
 }
 
 // src/client/route-listener/routeListener.ts
+var ROUTE_FRAMES = ["phone", "tablet", "desktop"];
+function pickRouteHandle(h) {
+  try {
+    if (typeof h !== "object" || h === null) return void 0;
+    const raw = h;
+    const surface = raw.surface;
+    const frame = raw.frame;
+    const out = {};
+    if (typeof surface === "string" && surface !== "") out.surface = surface;
+    if (typeof frame === "string" && ROUTE_FRAMES.includes(frame)) {
+      out.frame = frame;
+    }
+    return out.surface !== void 0 || out.frame !== void 0 ? out : void 0;
+  } catch {
+    return void 0;
+  }
+}
 var GUARD_NAME_RE = /guard|protect|require|auth(?!or)/i;
 var GUARD_PRIVATE_RE = /\bprivate|Private(?=[A-Z]|$)/;
 var NON_GUARD_SUFFIX_RE = /(Layout|Provider|Context|Page|Form|Screen|View)$/;
@@ -10544,10 +10720,12 @@ function extractAllRoutes(routes, parentPath = "", parentId = null, inheritedGua
     const isLayout = !route.path && !route.index && hasChildren;
     const own = [];
     collectGuards(route.element, 0, own);
+    const handle = pickRouteHandle(route.handle);
     if (route.path !== void 0 || route.index || isLayout) {
       result.push({
         id: route.id,
         path: route.index ? parentPath || "/" : path,
+        ...handle ? { handle } : {},
         hasChildren,
         parentId,
         index: !!route.index,
@@ -10582,19 +10760,23 @@ function extractAllRoutes(routes, parentPath = "", parentId = null, inheritedGua
   }
   return result;
 }
-function broadcastRouteState(target, state, routes) {
+function broadcastRouteState(target, state2, routes) {
   try {
     const message = {
       type: "ARCHIE_ROUTE_UPDATE",
       payload: {
-        path: state.location.pathname,
-        search: state.location.search,
-        hash: state.location.hash,
-        matches: state.matches.map((m) => ({
-          id: m.route.id,
-          pathname: m.pathname,
-          params: m.params
-        })),
+        path: state2.location.pathname,
+        search: state2.location.search,
+        hash: state2.location.hash,
+        matches: state2.matches.map((m) => {
+          const handle = pickRouteHandle(m.route.handle);
+          return {
+            id: m.route.id,
+            pathname: m.pathname,
+            params: m.params,
+            ...handle ? { handle } : {}
+          };
+        }),
         // Layouts stay out of allRoutes so consumers that predate them don't list duplicates.
         allRoutes: routes.filter((r) => !r.isLayout),
         layoutRoutes: routes.filter((r) => r.isLayout),
@@ -10609,7 +10791,7 @@ var SETTLE_QUIET_MS = 400;
 var SETTLE_TIMEOUT_MS = 8e3;
 var SETTLE_POLL_MS = 50;
 function readPackageVersion() {
-  return true ? "0.1.13" : "unknown";
+  return true ? "0.1.15" : "unknown";
 }
 var DEFAULT_ARCHIE_COMMAND_ORIGINS = getAllowedOrigins(true);
 function originPatternToRegExp(pattern) {
@@ -10743,11 +10925,12 @@ function setupArchieRouteListener(router, options = {}) {
     return () => {
     };
   }
+  const releaseTracker = installPageActivityTracker();
   broadcastRouteState(target, router.state, extractAllRoutes(router.routes));
   broadcastCapabilities(router, target);
-  const unsubscribe = router.subscribe((state) => {
+  const unsubscribe = router.subscribe((state2) => {
     const currentRoutes = extractAllRoutes(router.routes);
-    broadcastRouteState(target, state, currentRoutes);
+    broadcastRouteState(target, state2, currentRoutes);
   });
   const handleMessage = (event) => {
     if (event.source !== target) return;
@@ -10779,6 +10962,7 @@ function setupArchieRouteListener(router, options = {}) {
   return () => {
     unsubscribe();
     window.removeEventListener("message", handleMessage);
+    releaseTracker();
   };
 }
 

package/dist/client/client.mjs

@@ -2468,37 +2468,37 @@ function getInitialState() {
     }
   };
 }
-function reducer(state, action) {
+function reducer(state2, action) {
   switch (action.type) {
     case Action.DragStart:
       return {
-        ...state,
+        ...state2,
         draggable: {
-          ...state.draggable,
+          ...state2.draggable,
           initialCoordinates: action.initialCoordinates,
           active: action.active
         }
       };
     case Action.DragMove:
-      if (state.draggable.active == null) {
-        return state;
+      if (state2.draggable.active == null) {
+        return state2;
       }
       return {
-        ...state,
+        ...state2,
         draggable: {
-          ...state.draggable,
+          ...state2.draggable,
           translate: {
-            x: action.coordinates.x - state.draggable.initialCoordinates.x,
-            y: action.coordinates.y - state.draggable.initialCoordinates.y
+            x: action.coordinates.x - state2.draggable.initialCoordinates.x,
+            y: action.coordinates.y - state2.draggable.initialCoordinates.y
           }
         }
       };
     case Action.DragEnd:
     case Action.DragCancel:
       return {
-        ...state,
+        ...state2,
         draggable: {
-          ...state.draggable,
+          ...state2.draggable,
           active: null,
           initialCoordinates: {
             x: 0,
@@ -2517,12 +2517,12 @@ function reducer(state, action) {
       const {
         id
       } = element;
-      const containers = new DroppableContainersMap(state.droppable.containers);
+      const containers = new DroppableContainersMap(state2.droppable.containers);
       containers.set(id, element);
       return {
-        ...state,
+        ...state2,
         droppable: {
-          ...state.droppable,
+          ...state2.droppable,
           containers
         }
       };
@@ -2533,19 +2533,19 @@ function reducer(state, action) {
         key: key2,
         disabled
       } = action;
-      const element = state.droppable.containers.get(id);
+      const element = state2.droppable.containers.get(id);
       if (!element || key2 !== element.key) {
-        return state;
+        return state2;
       }
-      const containers = new DroppableContainersMap(state.droppable.containers);
+      const containers = new DroppableContainersMap(state2.droppable.containers);
       containers.set(id, {
         ...element,
         disabled
       });
       return {
-        ...state,
+        ...state2,
         droppable: {
-          ...state.droppable,
+          ...state2.droppable,
           containers
         }
       };
@@ -2555,22 +2555,22 @@ function reducer(state, action) {
         id,
         key: key2
       } = action;
-      const element = state.droppable.containers.get(id);
+      const element = state2.droppable.containers.get(id);
       if (!element || key2 !== element.key) {
-        return state;
+        return state2;
       }
-      const containers = new DroppableContainersMap(state.droppable.containers);
+      const containers = new DroppableContainersMap(state2.droppable.containers);
       containers.delete(id);
       return {
-        ...state,
+        ...state2,
         droppable: {
-          ...state.droppable,
+          ...state2.droppable,
           containers
         }
       };
     }
     default: {
-      return state;
+      return state2;
     }
   }
 }
@@ -2728,7 +2728,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     ...props
   } = _ref;
   const store = useReducer(reducer, void 0, getInitialState);
-  const [state, dispatch] = store;
+  const [state2, dispatch] = store;
   const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
   const [status, setStatus] = useState2(Status.Uninitialized);
   const isInitialized = status === Status.Initialized;
@@ -2741,7 +2741,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     droppable: {
       containers: droppableContainers
     }
-  } = state;
+  } = state2;
   const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = useRef2({
     initial: null,
@@ -3902,24 +3902,24 @@ function isAfter(a, b) {
 
 // node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
-  let state;
+  let state2;
   const listeners = /* @__PURE__ */ new Set();
   const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
+    const nextState = typeof partial === "function" ? partial(state2) : partial;
+    if (!Object.is(nextState, state2)) {
+      const previousState = state2;
+      state2 = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state2, nextState);
+      listeners.forEach((listener) => listener(state2, previousState));
     }
   };
-  const getState = () => state;
+  const getState = () => state2;
   const getInitialState2 = () => initialState;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
   const api = { setState, getState, getInitialState: getInitialState2, subscribe };
-  const initialState = state = createState(setState, getState, api);
+  const initialState = state2 = createState(setState, getState, api);
   return api;
 };
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
@@ -3953,33 +3953,33 @@ var useDndStore = create((set) => ({
   overlayRenderers: /* @__PURE__ */ new Map(),
   dragEndHandlers: /* @__PURE__ */ new Map(),
   setActive: (id, data, element) => set({ activeId: id, activeData: data, activeElement: element ?? null }),
-  registerContainer: (container) => set((state) => {
-    const next = new Map(state.containers);
+  registerContainer: (container) => set((state2) => {
+    const next = new Map(state2.containers);
     next.set(container.id, container);
     return { containers: next };
   }),
-  unregisterContainer: (id) => set((state) => {
-    const next = new Map(state.containers);
+  unregisterContainer: (id) => set((state2) => {
+    const next = new Map(state2.containers);
     next.delete(id);
     return { containers: next };
   }),
-  registerOverlayRenderer: (type, renderer) => set((state) => {
-    const next = new Map(state.overlayRenderers);
+  registerOverlayRenderer: (type, renderer) => set((state2) => {
+    const next = new Map(state2.overlayRenderers);
     next.set(type, renderer);
     return { overlayRenderers: next };
   }),
-  unregisterOverlayRenderer: (type) => set((state) => {
-    const next = new Map(state.overlayRenderers);
+  unregisterOverlayRenderer: (type) => set((state2) => {
+    const next = new Map(state2.overlayRenderers);
     next.delete(type);
     return { overlayRenderers: next };
   }),
-  registerDragEndHandler: (key2, handler) => set((state) => {
-    const next = new Map(state.dragEndHandlers);
+  registerDragEndHandler: (key2, handler) => set((state2) => {
+    const next = new Map(state2.dragEndHandlers);
     next.set(key2, handler);
     return { dragEndHandlers: next };
   }),
-  unregisterDragEndHandler: (key2) => set((state) => {
-    const next = new Map(state.dragEndHandlers);
+  unregisterDragEndHandler: (key2) => set((state2) => {
+    const next = new Map(state2.dragEndHandlers);
     next.delete(key2);
     return { dragEndHandlers: next };
   })
@@ -10236,7 +10236,7 @@ function isPreviewOrigin(origin) {
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
 var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
 function readBuildVersion() {
-  return "0.1.13" ? "0.1.13" : null;
+  return "0.1.15" ? "0.1.15" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;
@@ -10316,6 +10316,163 @@ function injectInspector(opts = {}) {
   document.head.appendChild(script);
 }
 
+// src/client/route-listener/pageSettle.ts
+var QUIET_MS = 300;
+var POLL_MS = 50;
+var PAGE_QUIET_TIMEOUT_MS = 5e3;
+var MAX_TRACKED_REQUEST_AGE_MS = 4e3;
+var IGNORED_URL_RE = /^wss?:|\/@vite\/|\/@react-refresh|\/__vite|\.hot-update\.|\/_next\/webpack-hmr|\/sockjs-node|\/__webpack_hmr/;
+var LOADING_SELECTOR = [
+  '[aria-busy="true"]',
+  '[role="progressbar"]',
+  '[class*="animate-spin"]',
+  '[class*="animate-pulse"]',
+  '[class*="skeleton" i]'
+].join(",");
+var LOADING_TEXT_RE = /^(loading|cargando)(\.{3}|…)?$/i;
+var NON_RENDERED_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE"]);
+var state = {
+  refs: 0,
+  inflight: /* @__PURE__ */ new Map(),
+  nextId: 0,
+  lastActivityAt: 0
+};
+function urlOf(input) {
+  if (typeof input === "string") return input;
+  if (input instanceof URL) return input.href;
+  return input?.url ?? "";
+}
+function begin(url) {
+  if (IGNORED_URL_RE.test(url)) return void 0;
+  const id = state.nextId++;
+  state.inflight.set(id, Date.now());
+  state.lastActivityAt = Date.now();
+  return () => {
+    if (state.inflight.delete(id)) state.lastActivityAt = Date.now();
+  };
+}
+function patchNetwork() {
+  const originalFetch = window.fetch;
+  const xhrProto = window.XMLHttpRequest?.prototype;
+  const originalOpen = xhrProto?.open;
+  const originalSend = xhrProto?.send;
+  const patchedFetch = function(...args) {
+    const end = begin(urlOf(args[0]));
+    let result;
+    try {
+      result = originalFetch.apply(this, args);
+    } catch (error) {
+      end?.();
+      throw error;
+    }
+    if (end) result.then(end, end);
+    return result;
+  };
+  if (typeof originalFetch === "function") window.fetch = patchedFetch;
+  if (xhrProto && originalOpen && originalSend) {
+    xhrProto.open = function(...args) {
+      this.__archieUrl = urlOf(args[1]);
+      return originalOpen.apply(this, args);
+    };
+    xhrProto.send = function(body) {
+      const end = begin(this.__archieUrl ?? "");
+      if (end) this.addEventListener("loadend", end, { once: true });
+      try {
+        return originalSend.call(this, body);
+      } catch (error) {
+        end?.();
+        throw error;
+      }
+    };
+  }
+  return () => {
+    if (window.fetch === patchedFetch) window.fetch = originalFetch;
+    if (xhrProto && originalOpen && originalSend) {
+      xhrProto.open = originalOpen;
+      xhrProto.send = originalSend;
+    }
+  };
+}
+function installPageActivityTracker() {
+  if (state.refs++ === 0) {
+    state.lastActivityAt = Date.now();
+    state.restore = patchNetwork();
+    state.observer = new MutationObserver(() => {
+      state.lastActivityAt = Date.now();
+    });
+    state.observer.observe(document, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--state.refs === 0) {
+      state.restore?.();
+      state.observer?.disconnect();
+      state.restore = void 0;
+      state.observer = void 0;
+      state.inflight.clear();
+    }
+  };
+}
+function isVisible(el) {
+  if (el.closest('[hidden],[aria-hidden="true"]')) return false;
+  try {
+    const style = getComputedStyle(el);
+    return style.display !== "none" && style.visibility !== "hidden";
+  } catch {
+    return true;
+  }
+}
+function hasLoadingIndicator() {
+  const root = document.body;
+  if (!root) return false;
+  for (const el of Array.from(root.querySelectorAll(LOADING_SELECTOR))) {
+    if (isVisible(el)) return true;
+  }
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const parent = node.parentElement;
+    if (!parent || NON_RENDERED_TAGS.has(parent.tagName)) continue;
+    if (LOADING_TEXT_RE.test((node.textContent ?? "").trim()) && isVisible(parent)) {
+      return true;
+    }
+  }
+  return false;
+}
+function hasPendingRequests(now) {
+  for (const startedAt of state.inflight.values()) {
+    if (now - startedAt < MAX_TRACKED_REQUEST_AGE_MS) return true;
+  }
+  return false;
+}
+function waitForPageQuiet(timeoutMs = PAGE_QUIET_TIMEOUT_MS) {
+  return new Promise((resolve) => {
+    const startedAt = Date.now();
+    const untracked = state.refs === 0;
+    const isQuiet = (now) => !hasPendingRequests(now) && now - (untracked ? startedAt : state.lastActivityAt) >= QUIET_MS && !hasLoadingIndicator();
+    if (isQuiet(startedAt) && !untracked) {
+      resolve(true);
+      return;
+    }
+    const timer = setInterval(() => {
+      const now = Date.now();
+      if (isQuiet(now)) {
+        clearInterval(timer);
+        resolve(true);
+      } else if (now - startedAt >= timeoutMs) {
+        clearInterval(timer);
+        resolve(false);
+      }
+    }, POLL_MS);
+  });
+}
+
 // src/client/route-listener/domSnapshot.ts
 var STRIP_SELECTOR = [
   "script",
@@ -10398,6 +10555,7 @@ async function captureDomSnapshot() {
   if (document.fonts?.ready) {
     await document.fonts.ready;
   }
+  const settled = await waitForPageQuiet();
   await waitForIdle();
   const inlinedHrefs = /* @__PURE__ */ new Set();
   const css = await collectDocumentCss(inlinedHrefs);
@@ -10435,11 +10593,29 @@ async function captureDomSnapshot() {
     html: "<!doctype html>" + clone.outerHTML,
     path: location.pathname + location.search + location.hash,
     viewport: { width: window.innerWidth, height: window.innerHeight },
-    capturedAt: Date.now()
+    capturedAt: Date.now(),
+    settled
   };
 }
 
 // src/client/route-listener/routeListener.ts
+var ROUTE_FRAMES = ["phone", "tablet", "desktop"];
+function pickRouteHandle(h) {
+  try {
+    if (typeof h !== "object" || h === null) return void 0;
+    const raw = h;
+    const surface = raw.surface;
+    const frame = raw.frame;
+    const out = {};
+    if (typeof surface === "string" && surface !== "") out.surface = surface;
+    if (typeof frame === "string" && ROUTE_FRAMES.includes(frame)) {
+      out.frame = frame;
+    }
+    return out.surface !== void 0 || out.frame !== void 0 ? out : void 0;
+  } catch {
+    return void 0;
+  }
+}
 var GUARD_NAME_RE = /guard|protect|require|auth(?!or)/i;
 var GUARD_PRIVATE_RE = /\bprivate|Private(?=[A-Z]|$)/;
 var NON_GUARD_SUFFIX_RE = /(Layout|Provider|Context|Page|Form|Screen|View)$/;
@@ -10509,10 +10685,12 @@ function extractAllRoutes(routes, parentPath = "", parentId = null, inheritedGua
     const isLayout = !route.path && !route.index && hasChildren;
     const own = [];
     collectGuards(route.element, 0, own);
+    const handle = pickRouteHandle(route.handle);
     if (route.path !== void 0 || route.index || isLayout) {
       result.push({
         id: route.id,
         path: route.index ? parentPath || "/" : path,
+        ...handle ? { handle } : {},
         hasChildren,
         parentId,
         index: !!route.index,
@@ -10547,19 +10725,23 @@ function extractAllRoutes(routes, parentPath = "", parentId = null, inheritedGua
   }
   return result;
 }
-function broadcastRouteState(target, state, routes) {
+function broadcastRouteState(target, state2, routes) {
   try {
     const message = {
       type: "ARCHIE_ROUTE_UPDATE",
       payload: {
-        path: state.location.pathname,
-        search: state.location.search,
-        hash: state.location.hash,
-        matches: state.matches.map((m) => ({
-          id: m.route.id,
-          pathname: m.pathname,
-          params: m.params
-        })),
+        path: state2.location.pathname,
+        search: state2.location.search,
+        hash: state2.location.hash,
+        matches: state2.matches.map((m) => {
+          const handle = pickRouteHandle(m.route.handle);
+          return {
+            id: m.route.id,
+            pathname: m.pathname,
+            params: m.params,
+            ...handle ? { handle } : {}
+          };
+        }),
         // Layouts stay out of allRoutes so consumers that predate them don't list duplicates.
         allRoutes: routes.filter((r) => !r.isLayout),
         layoutRoutes: routes.filter((r) => r.isLayout),
@@ -10574,7 +10756,7 @@ var SETTLE_QUIET_MS = 400;
 var SETTLE_TIMEOUT_MS = 8e3;
 var SETTLE_POLL_MS = 50;
 function readPackageVersion() {
-  return true ? "0.1.13" : "unknown";
+  return true ? "0.1.15" : "unknown";
 }
 var DEFAULT_ARCHIE_COMMAND_ORIGINS = getAllowedOrigins(true);
 function originPatternToRegExp(pattern) {
@@ -10708,11 +10890,12 @@ function setupArchieRouteListener(router, options = {}) {
     return () => {
     };
   }
+  const releaseTracker = installPageActivityTracker();
   broadcastRouteState(target, router.state, extractAllRoutes(router.routes));
   broadcastCapabilities(router, target);
-  const unsubscribe = router.subscribe((state) => {
+  const unsubscribe = router.subscribe((state2) => {
     const currentRoutes = extractAllRoutes(router.routes);
-    broadcastRouteState(target, state, currentRoutes);
+    broadcastRouteState(target, state2, currentRoutes);
   });
   const handleMessage = (event) => {
     if (event.source !== target) return;
@@ -10744,6 +10927,7 @@ function setupArchieRouteListener(router, options = {}) {
   return () => {
     unsubscribe();
     window.removeEventListener("message", handleMessage);
+    releaseTracker();
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "sideEffects": false,
   "repository": {