@archie/devtools 0.1.14 → 0.1.16

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.14" ? "0.1.14" : null;
+  return "0.1.16" ? "0.1.16" : 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,7 +10628,8 @@ 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
   };
 }
 
@@ -10601,15 +10760,15 @@ 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) => {
+        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,
@@ -10632,7 +10791,7 @@ var SETTLE_QUIET_MS = 400;
 var SETTLE_TIMEOUT_MS = 8e3;
 var SETTLE_POLL_MS = 50;
 function readPackageVersion() {
-  return true ? "0.1.14" : "unknown";
+  return true ? "0.1.16" : "unknown";
 }
 var DEFAULT_ARCHIE_COMMAND_ORIGINS = getAllowedOrigins(true);
 function originPatternToRegExp(pattern) {
@@ -10766,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;
@@ -10802,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.14" ? "0.1.14" : null;
+  return "0.1.16" ? "0.1.16" : 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,7 +10593,8 @@ 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
   };
 }
 
@@ -10566,15 +10725,15 @@ 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) => {
+        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,
@@ -10597,7 +10756,7 @@ var SETTLE_QUIET_MS = 400;
 var SETTLE_TIMEOUT_MS = 8e3;
 var SETTLE_POLL_MS = 50;
 function readPackageVersion() {
-  return true ? "0.1.14" : "unknown";
+  return true ? "0.1.16" : "unknown";
 }
 var DEFAULT_ARCHIE_COMMAND_ORIGINS = getAllowedOrigins(true);
 function originPatternToRegExp(pattern) {
@@ -10731,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;
@@ -10767,6 +10927,7 @@ function setupArchieRouteListener(router, options = {}) {
   return () => {
     unsubscribe();
     window.removeEventListener("message", handleMessage);
+    releaseTracker();
   };
 }
 

package/dist/inspector.standalone.js

@@ -3976,6 +3976,13 @@
         })
       }
 
+      // SVG-as-image never advances animations, so entrance animations would
+      // rasterize at their first frame; a huge negative delay renders the end.
+      var CAPTURE_FREEZE_ANIMATIONS_CSS =
+        "*,*::before,*::after{animation-delay:-1e6s!important;" +
+        "animation-duration:1s!important;animation-iteration-count:1!important;" +
+        "transition:none!important}"
+
       /**
        * CSS text for the capture clone: same-origin sheets have their
        * `@media` flattened against the LIVE viewport (see `flattenStyleRules`)
@@ -4048,7 +4055,11 @@
           CSS_INLINE_TIMEOUT_MS,
           null
         ).then(function () {
-          return renderNodes(topNodes, pieces).replace(/:root\b/g, "html")
+          return (
+            renderNodes(topNodes, pieces).replace(/:root\b/g, "html") +
+            "\n" +
+            CAPTURE_FREEZE_ANIMATIONS_CSS
+          )
         })
       }
 

package/dist/{inspector.standalone@0.1.14.js → inspector.standalone@0.1.16.js}

@@ -3976,6 +3976,13 @@
         })
       }
 
+      // SVG-as-image never advances animations, so entrance animations would
+      // rasterize at their first frame; a huge negative delay renders the end.
+      var CAPTURE_FREEZE_ANIMATIONS_CSS =
+        "*,*::before,*::after{animation-delay:-1e6s!important;" +
+        "animation-duration:1s!important;animation-iteration-count:1!important;" +
+        "transition:none!important}"
+
       /**
        * CSS text for the capture clone: same-origin sheets have their
        * `@media` flattened against the LIVE viewport (see `flattenStyleRules`)
@@ -4048,7 +4055,11 @@
           CSS_INLINE_TIMEOUT_MS,
           null
         ).then(function () {
-          return renderNodes(topNodes, pieces).replace(/:root\b/g, "html")
+          return (
+            renderNodes(topNodes, pieces).replace(/:root\b/g, "html") +
+            "\n" +
+            CAPTURE_FREEZE_ANIMATIONS_CSS
+          )
         })
       }
 

package/package.json

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