@archie/devtools 0.1.13 → 0.1.14

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

@@ -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.14" ? "0.1.14" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;
@@ -10475,6 +10475,23 @@ async function captureDomSnapshot() {
 }
 
 // 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 +10561,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,
@@ -10590,11 +10609,15 @@ function broadcastRouteState(target, state, routes) {
         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
-        })),
+        matches: state.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 +10632,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.14" : "unknown";
 }
 var DEFAULT_ARCHIE_COMMAND_ORIGINS = getAllowedOrigins(true);
 function originPatternToRegExp(pattern) {

package/dist/client/client.mjs

@@ -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.14" ? "0.1.14" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;
@@ -10440,6 +10440,23 @@ async function captureDomSnapshot() {
 }
 
 // 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 +10526,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,
@@ -10555,11 +10574,15 @@ function broadcastRouteState(target, state, routes) {
         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
-        })),
+        matches: state.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 +10597,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.14" : "unknown";
 }
 var DEFAULT_ARCHIE_COMMAND_ORIGINS = getAllowedOrigins(true);
 function originPatternToRegExp(pattern) {

package/package.json

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