@abbox/inspector 0.2.1 → 0.4.1

package/dist/browser.d.ts

@@ -1,9 +1,9 @@
 /** Browser / Viewer-safe entry (no Babel, Vite, or Next build tooling). */
-export * from "./protocol.js";
-export * from "./ir-match.js";
-export * from "./instrument/constants.js";
 export { createInspectorClient } from "./host/client-bridge.js";
 export { createInspectorHost } from "./host/host-bridge.js";
 export { validateIncomingMessage } from "./host/validate.js";
+export * from "./instrument/constants.js";
+export * from "./ir-match.js";
+export * from "./protocol.js";
 export { createInspectorRuntime } from "./runtime/inspector.js";
 //# sourceMappingURL=browser.d.ts.map

package/dist/browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAE3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/browser.js

@@ -1,8 +1,8 @@
 /** Browser / Viewer-safe entry (no Babel, Vite, or Next build tooling). */
-export * from "./protocol.js";
-export * from "./ir-match.js";
-export * from "./instrument/constants.js";
 export { createInspectorClient } from "./host/client-bridge.js";
 export { createInspectorHost } from "./host/host-bridge.js";
 export { validateIncomingMessage } from "./host/validate.js";
+export * from "./instrument/constants.js";
+export * from "./ir-match.js";
+export * from "./protocol.js";
 export { createInspectorRuntime } from "./runtime/inspector.js";

package/dist/host/client-bridge.js

@@ -1,6 +1,6 @@
 import { ABBBOX_INSPECTOR_CHANNEL, PROTOCOL_VERSION, } from "../protocol.js";
-import { withLocalhostAliases } from "./origin-aliases.js";
 import { createInspectorRuntime } from "../runtime/inspector.js";
+import { withLocalhostAliases } from "./origin-aliases.js";
 import { validateIncomingMessage } from "./validate.js";
 export function createInspectorClient(options) {
     const win = options.window ?? globalThis.window;

package/dist/host/host-bridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"host-bridge.d.ts","sourceRoot":"","sources":["../../src/host/host-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,mBAAmB,EAGzB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,CACzB,mBAAmB,EACnB;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC,SAAS,CAAC,CAAC;AACb,KAAK,aAAa,GAAG,OAAO,CAC1B,mBAAmB,EACnB;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,CAC7B,CAAC,SAAS,CAAC,CAAC;AAEb,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACtD,0EAA0E;IAC1E,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,qBAAqB,GAC9B,aAAa,CAwDf"}
+{"version":3,"file":"host-bridge.d.ts","sourceRoot":"","sources":["../../src/host/host-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,mBAAmB,EAGzB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,CACzB,mBAAmB,EACnB;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC,SAAS,CAAC,CAAC;AACb,KAAK,aAAa,GAAG,OAAO,CAC1B,mBAAmB,EACnB;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,CAC7B,CAAC,SAAS,CAAC,CAAC;AAEb,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACtD,0EAA0E;IAC1E,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,qBAAqB,GAC9B,aAAa,CA4Df"}

package/dist/host/host-bridge.js

@@ -53,7 +53,11 @@ export function createInspectorHost(options, handlers) {
             send({ ...base(), type: "APPLY_CHANGE_MARKERS", markers });
         },
         pingPreview: () => {
-            send({ ...base(), type: "INSPECTOR_HOST_HELLO" });
+            send({
+                ...base(),
+                type: "INSPECTOR_HOST_HELLO",
+                hostOrigin: options.hostOrigin,
+            });
         },
     };
 }

package/dist/host/origin-aliases.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"origin-aliases.d.ts","sourceRoot":"","sources":["../../src/host/origin-aliases.ts"],"names":[],"mappings":"AAAA,sFAAsF;AACtF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,EAAE,CAWV"}
+{"version":3,"file":"origin-aliases.d.ts","sourceRoot":"","sources":["../../src/host/origin-aliases.ts"],"names":[],"mappings":"AAAA,sFAAsF;AACtF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,CAWzE"}

package/dist/next/abbox-pre-swc-loader.cjs

@@ -0,0 +1,44 @@
+/**
+ * Runs Abbox JSX instrumentation on TSX/JSX before Next's SWC pass.
+ * No-ops for paths outside configured app source directories.
+ */
+const babel = require("@babel/core");
+const { shouldInstrumentResource } = require("./webpack-instrumentation.cjs");
+
+/**
+ * @this {import('webpack').LoaderContext<unknown>}
+ */
+module.exports = function abboxPreSwcLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions();
+  const rootDir = options.rootDir ?? this.rootContext;
+  const resourcePath = this.resourcePath;
+
+  if (!shouldInstrumentResource(resourcePath, rootDir)) {
+    callback(null, source);
+    return;
+  }
+
+  babel.transform(
+    source,
+    {
+      filename: resourcePath,
+      babelrc: false,
+      configFile: false,
+      parserOpts: { plugins: ["jsx", "typescript"] },
+      plugins: options.plugins,
+      sourceMaps: this.sourceMap,
+    },
+    (error, result) => {
+      if (error) {
+        callback(error);
+        return;
+      }
+      if (!result?.code) {
+        callback(null, source);
+        return;
+      }
+      callback(null, result.code, result.map);
+    },
+  );
+};

package/dist/next/babel-config.cjs

@@ -10,6 +10,7 @@ function createNextBabelConfig(options = {}) {
   const enabled =
     options.enabled ??
     (process.env.ABBBOX_INSPECTOR === "1" ||
+      process.env.ABBBOX_INSPECTION_MODE === "production" ||
       process.env.NEXT_PUBLIC_ABBOX_INSPECTOR === "1" ||
       process.env.VERCEL_ENV === "preview");
 

package/dist/next/index.d.ts

@@ -1,3 +1,3 @@
-export { type WithAbboxInspectorOptions, withAbboxInspector, DEFAULT_VIEWER_FRAME_ANCESTORS, } from "./with-abbox-inspector.js";
-export { isAbboxInspectorBuildEnabled, isAbboxInspectorRuntimeEnabled, } from "./preview-env.js";
+export { type AbboxInspectionMode, getBakedInspectionMode, getBakedViewerOrigin, isAbboxInspectorBuildEnabled, isAbboxInspectorProductionRuntime, isAbboxInspectorRuntimeEnabled, } from "./preview-env.js";
+export { DEFAULT_VIEWER_FRAME_ANCESTORS, type WithAbboxInspectorOptions, withAbboxInspector, } from "./with-abbox-inspector.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/next/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,yBAAyB,EAC9B,kBAAkB,EAClB,8BAA8B,GAC/B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,4BAA4B,EAC5B,8BAA8B,GAC/B,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,mBAAmB,EACxB,sBAAsB,EACtB,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,8BAA8B,GAC/B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,8BAA8B,EAC9B,KAAK,yBAAyB,EAC9B,kBAAkB,GACnB,MAAM,2BAA2B,CAAC"}

package/dist/next/index.js

@@ -1,2 +1,2 @@
-export { withAbboxInspector, DEFAULT_VIEWER_FRAME_ANCESTORS, } from "./with-abbox-inspector.js";
-export { isAbboxInspectorBuildEnabled, isAbboxInspectorRuntimeEnabled, } from "./preview-env.js";
+export { getBakedInspectionMode, getBakedViewerOrigin, isAbboxInspectorBuildEnabled, isAbboxInspectorProductionRuntime, isAbboxInspectorRuntimeEnabled, } from "./preview-env.js";
+export { DEFAULT_VIEWER_FRAME_ANCESTORS, withAbboxInspector, } from "./with-abbox-inspector.js";

package/dist/next/preview-env.d.ts

@@ -1,8 +1,15 @@
+export type AbboxInspectionMode = "preview" | "production";
 /**
  * When true, Inspector instrumentation, CSP frame-ancestors, and client bootstrap are allowed.
- * Production Vercel deploys (VERCEL_ENV=production) stay off unless ABBBOX_INSPECTOR=1 is set explicitly.
+ * Preview Vercel deploys stay on by default; production deploys require explicit
+ * `ABBBOX_INSPECTION_MODE=production` (set by @abbox/cli production mode).
  */
 export declare function isAbboxInspectorBuildEnabled(): boolean;
+/** Baked inspection mode in the client bundle (not query parameters). */
+export declare function getBakedInspectionMode(): AbboxInspectionMode | "off";
 /** Client-side: Inspector may connect to the Viewer iframe host. */
 export declare function isAbboxInspectorRuntimeEnabled(): boolean;
+export declare function isAbboxInspectorProductionRuntime(): boolean;
+/** Primary Viewer origin baked at install time (production mode host validation). */
+export declare function getBakedViewerOrigin(): string | undefined;
 //# sourceMappingURL=preview-env.d.ts.map

package/dist/next/preview-env.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-env.d.ts","sourceRoot":"","sources":["../../src/next/preview-env.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,4BAA4B,IAAI,OAAO,CAItD;AAED,oEAAoE;AACpE,wBAAgB,8BAA8B,IAAI,OAAO,CAOxD"}
+{"version":3,"file":"preview-env.d.ts","sourceRoot":"","sources":["../../src/next/preview-env.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,YAAY,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,4BAA4B,IAAI,OAAO,CAKtD;AAED,yEAAyE;AACzE,wBAAgB,sBAAsB,IAAI,mBAAmB,GAAG,KAAK,CAOpE;AAED,oEAAoE;AACpE,wBAAgB,8BAA8B,IAAI,OAAO,CAExD;AAED,wBAAgB,iCAAiC,IAAI,OAAO,CAE3D;AAED,qFAAqF;AACrF,wBAAgB,oBAAoB,IAAI,MAAM,GAAG,SAAS,CAGzD"}

package/dist/next/preview-env.js

@@ -1,22 +1,39 @@
 /**
  * When true, Inspector instrumentation, CSP frame-ancestors, and client bootstrap are allowed.
- * Production Vercel deploys (VERCEL_ENV=production) stay off unless ABBBOX_INSPECTOR=1 is set explicitly.
+ * Preview Vercel deploys stay on by default; production deploys require explicit
+ * `ABBBOX_INSPECTION_MODE=production` (set by @abbox/cli production mode).
  */
 export function isAbboxInspectorBuildEnabled() {
     if (process.env.ABBBOX_INSPECTOR === "1")
         return true;
+    if (process.env.ABBBOX_INSPECTION_MODE === "production")
+        return true;
     if (process.env.VERCEL_ENV === "preview")
         return true;
     return false;
 }
+/** Baked inspection mode in the client bundle (not query parameters). */
+export function getBakedInspectionMode() {
+    const explicit = process.env.NEXT_PUBLIC_ABBOX_INSPECTION_MODE;
+    if (explicit === "production")
+        return "production";
+    if (explicit === "preview")
+        return "preview";
+    if (process.env.NEXT_PUBLIC_ABBOX_INSPECTOR === "1")
+        return "preview";
+    if (process.env.NEXT_PUBLIC_VERCEL_ENV === "preview")
+        return "preview";
+    return "off";
+}
 /** Client-side: Inspector may connect to the Viewer iframe host. */
 export function isAbboxInspectorRuntimeEnabled() {
-    if (process.env.NEXT_PUBLIC_ABBOX_INSPECTOR === "1")
-        return true;
-    if (process.env.VERCEL_ENV === "preview")
-        return true;
-    if (typeof process.env.NEXT_PUBLIC_VERCEL_ENV === "string") {
-        return process.env.NEXT_PUBLIC_VERCEL_ENV === "preview";
-    }
-    return false;
+    return getBakedInspectionMode() !== "off";
+}
+export function isAbboxInspectorProductionRuntime() {
+    return getBakedInspectionMode() === "production";
+}
+/** Primary Viewer origin baked at install time (production mode host validation). */
+export function getBakedViewerOrigin() {
+    const raw = process.env.NEXT_PUBLIC_ABBOX_VIEWER_ORIGIN;
+    return raw?.trim() ? raw.replace(/\/$/, "") : undefined;
 }

package/dist/next/webpack-instrumentation.cjs

@@ -2,6 +2,10 @@
  * Apply Abbox JSX instrumentation via webpack + babel-loader on selected app sources.
  * Does not use babel.config.js, so Next.js keeps SWC (and next/font) for excluded files
  * such as app/layout.tsx.
+ *
+ * Next.js App Router client layers compile with SWC before the default Babel pass, so a
+ * top-level babel rule is not enough. We prepend an Abbox babel-loader step on the App
+ * Router browser/SSR layer rules (before SWC runs).
  */
 const fs = require("node:fs");
 const path = require("node:path");
@@ -9,6 +13,11 @@ const { createRequire } = require("node:module");
 
 const LAYOUT_BASENAMES = new Set(["layout.tsx", "layout.jsx"]);
 
+/** Layers where Next compiles client/app TSX through SWC (must instrument before SWC). */
+const APP_CLIENT_ISSUER_LAYERS = new Set(["app-pages-browser", "ssr"]);
+
+const ABBBOX_LOADER_IDENT = "abbox-source-instrumentation";
+
 function resolveInspectorBabelPlugin(rootDir) {
   const req = createRequire(path.join(rootDir, "package.json"));
   try {
@@ -18,29 +27,93 @@ function resolveInspectorBabelPlugin(rootDir) {
   }
 }
 
-function resolveBabelLoader(rootDir) {
-  const req = createRequire(path.join(rootDir, "package.json"));
-  return req.resolve("babel-loader");
-}
-
-function resolveNextBabelPreset(rootDir) {
-  const req = createRequire(path.join(rootDir, "package.json"));
-  return req.resolve("next/babel");
-}
-
 function collectIncludeDirs(rootDir) {
-  return ["app", "components", "src", "pages"]
+  return ["app", "components", "src", "pages", "lib", "hooks", "features"]
     .map((segment) => path.join(rootDir, segment))
     .filter((dir) => fs.existsSync(dir));
 }
 
 function isRootLayoutResource(resourcePath) {
-  const base = path.basename(resourcePath);
+  const clean = resourcePath.split("?")[0];
+  const base = path.basename(clean);
   if (!LAYOUT_BASENAMES.has(base)) return false;
-  const parent = path.basename(path.dirname(resourcePath));
+  const parent = path.basename(path.dirname(clean));
   return parent === "app" || parent === "src/app";
 }
 
+function shouldInstrumentResource(resourcePath, rootDir) {
+  const clean = resourcePath.split("?")[0];
+  const includeDirs = collectIncludeDirs(rootDir);
+  if (!/\.(tsx|jsx)$/.test(clean)) return false;
+  return (
+    includeDirs.some((dir) => clean.startsWith(dir)) &&
+    !isRootLayoutResource(clean)
+  );
+}
+
+function loaderIdent(entry) {
+  if (!entry) return "";
+  if (typeof entry === "string") return entry;
+  return String(entry.loader ?? entry.ident ?? "");
+}
+
+function resolvePreSwcLoader() {
+  return path.join(__dirname, "abbox-pre-swc-loader.cjs");
+}
+
+function createAbboxBabelLoaderUse(pluginPath, rootDir) {
+  return {
+    loader: resolvePreSwcLoader(),
+    ident: ABBBOX_LOADER_IDENT,
+    options: {
+      rootDir,
+      plugins: [[pluginPath, { rootDir }]],
+    },
+  };
+}
+
+function ruleUsesSwc(rule) {
+  const uses = rule.use
+    ? Array.isArray(rule.use)
+      ? rule.use
+      : [rule.use]
+    : [];
+  return uses.some((u) => loaderIdent(u).includes("next-swc-loader"));
+}
+
+function ruleHasAbboxLoader(rule) {
+  const uses = rule.use
+    ? Array.isArray(rule.use)
+      ? rule.use
+      : [rule.use]
+    : [];
+  return uses.some((u) => loaderIdent(u) === ABBBOX_LOADER_IDENT);
+}
+
+/**
+ * @param {unknown[]} rules
+ * @param {object} abboxUse
+ */
+function patchAppRouterLayerRules(rules, abboxUse) {
+  if (!Array.isArray(rules)) return;
+  for (const rule of rules) {
+    if (!rule || typeof rule !== "object") continue;
+    if (Array.isArray(rule.oneOf)) {
+      patchAppRouterLayerRules(rule.oneOf, abboxUse);
+    }
+    const layer = rule.issuerLayer;
+    if (
+      typeof layer === "string" &&
+      APP_CLIENT_ISSUER_LAYERS.has(layer) &&
+      ruleUsesSwc(rule) &&
+      !ruleHasAbboxLoader(rule)
+    ) {
+      const uses = Array.isArray(rule.use) ? rule.use : [rule.use];
+      rule.use = [...uses, abboxUse];
+    }
+  }
+}
+
 /**
  * @param {import('webpack').Configuration} webpackConfig
  * @param {{ dir: string }} options
@@ -48,35 +121,40 @@ function isRootLayoutResource(resourcePath) {
 function applyAbboxWebpackInstrumentation(webpackConfig, options) {
   const rootDir = options.dir ?? process.cwd();
   const pluginPath = resolveInspectorBabelPlugin(rootDir);
-  const babelLoader = resolveBabelLoader(rootDir);
-  const nextBabel = resolveNextBabelPreset(rootDir);
   const includeDirs = collectIncludeDirs(rootDir);
 
   if (includeDirs.length === 0) {
     return webpackConfig;
   }
 
+  const abboxUse = createAbboxBabelLoaderUse(pluginPath, rootDir);
+
+  webpackConfig.module = webpackConfig.module ?? { rules: [] };
+  webpackConfig.module.rules = webpackConfig.module.rules ?? [];
+
+  patchAppRouterLayerRules(webpackConfig.module.rules, abboxUse);
+
+  // Pages Router and non-layered TSX: top-level rule runs before Next's oneOf chains.
   const rule = {
     test: /\.(tsx|jsx)$/,
-    include: (resourcePath) =>
-      includeDirs.some((dir) => resourcePath.startsWith(dir)) &&
-      !isRootLayoutResource(resourcePath),
+    include: (resourcePath) => shouldInstrumentResource(resourcePath, rootDir),
     exclude: [/node_modules/],
     use: {
-      loader: babelLoader,
+      loader: resolvePreSwcLoader(),
       options: {
-        babelrc: false,
-        configFile: false,
-        presets: [nextBabel],
+        rootDir,
         plugins: [[pluginPath, { rootDir }]],
       },
     },
   };
-
-  webpackConfig.module = webpackConfig.module ?? { rules: [] };
-  webpackConfig.module.rules = webpackConfig.module.rules ?? [];
   webpackConfig.module.rules.unshift(rule);
+
   return webpackConfig;
 }
 
-module.exports = { applyAbboxWebpackInstrumentation, isRootLayoutResource };
+module.exports = {
+  applyAbboxWebpackInstrumentation,
+  isRootLayoutResource,
+  shouldInstrumentResource,
+  APP_CLIENT_ISSUER_LAYERS,
+};

package/dist/next/with-abbox-inspector.d.ts

@@ -6,18 +6,23 @@ export type NextConfigLike = {
     [key: string]: unknown;
 };
 export type WithAbboxInspectorOptions = {
-    /** When false, returns config unchanged (default: ABBBOX_INSPECTOR=1). */
+    /** When false, returns config unchanged (default: build gate in preview-env). */
     enabled?: boolean;
     /**
      * Origins allowed to embed this app in an iframe (Abbox Viewer).
-     * Defaults to common local Viewer ports.
+     * Defaults to hosted viewer + common local Viewer ports.
      */
     frameAncestors?: string[];
+    /**
+     * Primary Viewer origin for production-mode postMessage validation.
+     * Defaults to the first `frameAncestors` entry.
+     */
+    viewerOrigin?: string;
 };
 export declare const DEFAULT_VIEWER_FRAME_ANCESTORS: string[];
 /**
- * Merge Next.js config for local Abbox Live Preview: iframe embedding headers
- * and public env flag for client bootstrap.
+ * Merge Next.js config for Abbox inspection: iframe embedding headers
+ * and public env flags for client bootstrap.
  *
  * JSX instrumentation uses a webpack babel-loader rule (no root babel.config.js),
  * so `next/font` in app/layout.tsx can keep using SWC.

package/dist/next/with-abbox-inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-abbox-inspector.d.ts","sourceRoot":"","sources":["../../src/next/with-abbox-inspector.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CACR,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,8BAA8B,UAM1C,CAAC;AAOF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,MAAM,EAAE,CAAC,EACT,OAAO,GAAE,yBAA8B,GACtC,CAAC,CA0EH"}
+{"version":3,"file":"with-abbox-inspector.d.ts","sourceRoot":"","sources":["../../src/next/with-abbox-inspector.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CACR,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,UAM1C,CAAC;AAcF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,MAAM,EAAE,CAAC,EACT,OAAO,GAAE,yBAA8B,GACtC,CAAC,CAgFH"}

package/dist/next/with-abbox-inspector.js

@@ -14,9 +14,15 @@ function inspectorEnabled(explicit) {
         return explicit;
     return isAbboxInspectorBuildEnabled();
 }
+function bakedInspectionMode() {
+    if (process.env.ABBBOX_INSPECTION_MODE === "production") {
+        return "production";
+    }
+    return "preview";
+}
 /**
- * Merge Next.js config for local Abbox Live Preview: iframe embedding headers
- * and public env flag for client bootstrap.
+ * Merge Next.js config for Abbox inspection: iframe embedding headers
+ * and public env flags for client bootstrap.
  *
  * JSX instrumentation uses a webpack babel-loader rule (no root babel.config.js),
  * so `next/font` in app/layout.tsx can keep using SWC.
@@ -28,7 +34,11 @@ export function withAbboxInspector(config, options = {}) {
     const base = config;
     const { applyAbboxWebpackInstrumentation } = require("./webpack-instrumentation.cjs");
     const ancestors = options.frameAncestors ?? DEFAULT_VIEWER_FRAME_ANCESTORS;
+    const viewerOrigin = options.viewerOrigin?.replace(/\/$/, "") ??
+        ancestors.find((a) => a.startsWith("https://")) ??
+        ancestors[0];
     const csp = `frame-ancestors 'self' ${ancestors.join(" ")}`;
+    const mode = bakedInspectionMode();
     const headers = async () => {
         const existing = typeof base.headers === "function"
             ? await base.headers()
@@ -72,6 +82,8 @@ export function withAbboxInspector(config, options = {}) {
         env: {
             ...(base.env ?? {}),
             NEXT_PUBLIC_ABBOX_INSPECTOR: "1",
+            NEXT_PUBLIC_ABBOX_INSPECTION_MODE: mode,
+            NEXT_PUBLIC_ABBOX_VIEWER_ORIGIN: viewerOrigin,
             NEXT_PUBLIC_VERCEL_ENV: process.env.VERCEL_ENV ?? "",
         },
         headers,

package/dist/protocol.d.ts

@@ -19,6 +19,8 @@ export type InspectorDisableMessage = InspectorMessageBase & {
 /** Host asks the preview client to resend INSPECTOR_READY (e.g. after iframe load). */
 export type InspectorHostHelloMessage = InspectorMessageBase & {
     type: "INSPECTOR_HOST_HELLO";
+    /** Viewer origin that opened the preview (validated by the client in production). */
+    hostOrigin: string;
 };
 export type ElementRect = {
     x: number;
@@ -42,6 +44,8 @@ export type ElementMetadata = {
     role: string | null;
     ariaLabel: string | null;
     textPreview: string | null;
+    /** Native disabled state when the element supports it (e.g. button, input). */
+    disabled: boolean | null;
     attributes: Record<string, string>;
 };
 export type RuntimeElementRef = {

package/dist/protocol.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"protocol.d.ts","sourceRoot":"","sources":["../src/protocol.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"protocol.d.ts","sourceRoot":"","sources":["../src/protocol.ts"],"names":[],"mappings":"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"}

package/dist/runtime/bootstrap-standby.d.ts

@@ -0,0 +1,3 @@
+import type { InspectorHostHelloMessage } from "../protocol.js";
+export declare function parseValidatedHostHello(data: unknown, eventOrigin: string, allowedViewerOrigins: readonly string[]): InspectorHostHelloMessage | null;
+//# sourceMappingURL=bootstrap-standby.d.ts.map

package/dist/runtime/bootstrap-standby.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap-standby.d.ts","sourceRoot":"","sources":["../../src/runtime/bootstrap-standby.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAGhE,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,MAAM,EACnB,oBAAoB,EAAE,SAAS,MAAM,EAAE,GACtC,yBAAyB,GAAG,IAAI,CAkBlC"}

package/dist/runtime/bootstrap-standby.js

@@ -0,0 +1,20 @@
+import { withLocalhostAliases } from "../host/origin-aliases.js";
+import { getBakedViewerOrigin } from "../next/preview-env.js";
+import { isInspectorMessage } from "../protocol.js";
+export function parseValidatedHostHello(data, eventOrigin, allowedViewerOrigins) {
+    if (!allowedViewerOrigins.includes(eventOrigin))
+        return null;
+    if (!isInspectorMessage(data) || data.type !== "INSPECTOR_HOST_HELLO") {
+        return null;
+    }
+    const hello = data;
+    if (!hello.hostOrigin?.trim())
+        return null;
+    const bakedViewer = getBakedViewerOrigin();
+    const allowedHostOrigins = withLocalhostAliases(bakedViewer ? [bakedViewer] : allowedViewerOrigins);
+    const normalizedHost = hello.hostOrigin.replace(/\/$/, "");
+    const hostOk = allowedHostOrigins.some((o) => o.replace(/\/$/, "") === normalizedHost);
+    if (!hostOk)
+        return null;
+    return hello;
+}

package/dist/runtime/bootstrap.d.ts

@@ -3,8 +3,11 @@ export type BootstrapOptions = {
     allowedHostOrigins?: string[];
 };
 /**
- * Entry for instrumented preview apps. Activates when `abboxSession` is in the
- * URL on authorized preview deployments (Vercel preview or local `dev:abbox`).
+ * Entry for instrumented apps. Activates when the build baked an authorized
+ * inspection mode and either URL session params are present or (production only)
+ * a validated INSPECTOR_HOST_HELLO arrives from the Viewer.
  */
 export declare function bootstrapInspectorPreview(options?: BootstrapOptions): void;
+/** Test-only reset for vitest isolation. */
+export declare function resetInspectorBootstrapForTests(): void;
 //# sourceMappingURL=bootstrap.d.ts.map

package/dist/runtime/bootstrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/runtime/bootstrap.ts"],"names":[],"mappings":"AAsBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gBAAqB,GAC7B,IAAI,CAyBN"}
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/runtime/bootstrap.ts"],"names":[],"mappings":"AAuCA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B,CAAC;AA8CF;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gBAAqB,GAC7B,IAAI,CAyCN;AAED,4CAA4C;AAC5C,wBAAgB,+BAA+B,IAAI,IAAI,CAMtD"}

package/dist/runtime/bootstrap.js

@@ -1,7 +1,8 @@
+import { createInspectorClient, } from "../host/client-bridge.js";
 import { withLocalhostAliases } from "../host/origin-aliases.js";
-import { createInspectorClient } from "../host/client-bridge.js";
-import { isAbboxInspectorRuntimeEnabled } from "../next/preview-env.js";
-/** Viewer origins used when `abboxHostOrigin` is missing from the iframe URL. */
+import { getBakedViewerOrigin, isAbboxInspectorProductionRuntime, isAbboxInspectorRuntimeEnabled, } from "../next/preview-env.js";
+import { parseValidatedHostHello } from "./bootstrap-standby.js";
+/** Viewer origins used when `abboxHostOrigin` is missing (preview mode only). */
 const DEFAULT_VIEWER_ORIGINS = [
     "https://viewer.abbox.com",
     "http://localhost:5173",
@@ -19,31 +20,94 @@ function viewerOriginsFromReferrer() {
         return [];
     }
 }
+function normalizeOrigin(origin) {
+    return origin.replace(/\/$/, "");
+}
+function isAllowedHostOrigin(hostOrigin, allowed) {
+    const normalized = normalizeOrigin(hostOrigin);
+    return allowed.some((o) => normalizeOrigin(o) === normalized);
+}
+let activeClient = null;
+let standbyMessageListener = null;
+function allowedViewerOriginsForStandby() {
+    const bakedViewer = getBakedViewerOrigin();
+    return withLocalhostAliases(bakedViewer ? [bakedViewer] : DEFAULT_VIEWER_ORIGINS);
+}
+function removeStandbyListener(win) {
+    if (!standbyMessageListener)
+        return;
+    win.removeEventListener("message", standbyMessageListener);
+    standbyMessageListener = null;
+}
+function startInspectorClient(sessionId, allowedHostOrigins) {
+    if (activeClient || typeof window === "undefined")
+        return;
+    removeStandbyListener(window);
+    activeClient = createInspectorClient({
+        sessionId,
+        allowedHostOrigins,
+    });
+    activeClient.start();
+}
+function installStandbySessionListener(win) {
+    if (standbyMessageListener)
+        return;
+    const allowedViewerOrigins = allowedViewerOriginsForStandby();
+    standbyMessageListener = (event) => {
+        const hello = parseValidatedHostHello(event.data, event.origin, allowedViewerOrigins);
+        if (!hello)
+            return;
+        startInspectorClient(hello.sessionId, withLocalhostAliases([hello.hostOrigin]));
+    };
+    win.addEventListener("message", standbyMessageListener);
+}
 /**
- * Entry for instrumented preview apps. Activates when `abboxSession` is in the
- * URL on authorized preview deployments (Vercel preview or local `dev:abbox`).
+ * Entry for instrumented apps. Activates when the build baked an authorized
+ * inspection mode and either URL session params are present or (production only)
+ * a validated INSPECTOR_HOST_HELLO arrives from the Viewer.
  */
 export function bootstrapInspectorPreview(options = {}) {
     if (typeof window === "undefined")
         return;
     if (!isAbboxInspectorRuntimeEnabled())
         return;
-    const params = new URLSearchParams(window.location.search);
+    const win = window;
+    const params = new URLSearchParams(win.location.search);
     const sessionFromUrl = params.get("abboxSession");
-    if (!sessionFromUrl)
-        return;
-    const sessionId = options.sessionId ?? sessionFromUrl ?? "local-dev";
     const hostParam = params.get("abboxHostOrigin");
-    const allowedHostOrigins = withLocalhostAliases(options.allowedHostOrigins ??
-        (hostParam
-            ? [hostParam]
-            : [
-                ...viewerOriginsFromReferrer(),
-                ...DEFAULT_VIEWER_ORIGINS,
-            ]));
-    const client = createInspectorClient({
-        sessionId,
-        allowedHostOrigins,
-    });
-    client.start();
+    if (!sessionFromUrl) {
+        if (isAbboxInspectorProductionRuntime()) {
+            installStandbySessionListener(win);
+        }
+        return;
+    }
+    const sessionId = options.sessionId ?? sessionFromUrl;
+    let allowedHostOrigins;
+    if (isAbboxInspectorProductionRuntime()) {
+        if (!hostParam) {
+            installStandbySessionListener(win);
+            return;
+        }
+        const bakedViewer = getBakedViewerOrigin();
+        const allowed = withLocalhostAliases(options.allowedHostOrigins ??
+            (bakedViewer ? [bakedViewer] : DEFAULT_VIEWER_ORIGINS));
+        if (!isAllowedHostOrigin(hostParam, allowed))
+            return;
+        allowedHostOrigins = withLocalhostAliases([hostParam]);
+    }
+    else {
+        allowedHostOrigins = withLocalhostAliases(options.allowedHostOrigins ??
+            (hostParam
+                ? [hostParam]
+                : [...viewerOriginsFromReferrer(), ...DEFAULT_VIEWER_ORIGINS]));
+    }
+    startInspectorClient(sessionId, allowedHostOrigins);
+}
+/** Test-only reset for vitest isolation. */
+export function resetInspectorBootstrapForTests() {
+    if (typeof window !== "undefined") {
+        removeStandbyListener(window);
+    }
+    activeClient?.stop();
+    activeClient = null;
 }

package/dist/runtime/inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../src/runtime/inspector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAgBxE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CAoIlB"}
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../src/runtime/inspector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAgBxE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CAsIlB"}

package/dist/runtime/inspector.js

@@ -12,7 +12,7 @@ export function createInspectorRuntime(options) {
     let pendingTarget = null;
     const teardownListeners = () => {
         win.removeEventListener("mousemove", onMove, true);
-        win.removeEventListener("click", onClickCapture, true);
+        win.removeEventListener("pointerdown", onPointerDownCapture, true);
         win.removeEventListener("scroll", onScrollOrResize, true);
         win.removeEventListener("resize", onScrollOrResize);
     };
@@ -33,9 +33,12 @@ export function createInspectorRuntime(options) {
             pendingTarget = null;
         });
     };
-    const onClickCapture = (event) => {
+    /** Disabled controls do not dispatch `click`; use pointer + hit-testing. */
+    const onPointerDownCapture = (event) => {
         if (!enabled)
             return;
+        if (event.button !== 0)
+            return;
         event.preventDefault();
         event.stopPropagation();
         const target = deepestElementAt(doc, event.clientX, event.clientY, event.target);
@@ -86,7 +89,7 @@ export function createInspectorRuntime(options) {
                 return;
             enabled = true;
             win.addEventListener("mousemove", onMove, true);
-            win.addEventListener("click", onClickCapture, true);
+            win.addEventListener("pointerdown", onPointerDownCapture, true);
             win.addEventListener("scroll", onScrollOrResize, true);
             win.addEventListener("resize", onScrollOrResize);
         },

package/dist/runtime/metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../src/runtime/metadata.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAYxB,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAarE;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,cAAc,GAAG,IAAI,GAC5B,mBAAmB,CAGrB;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,OAAO,GAAG,eAAe,CAgC5D;AAcD,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAGzE"}
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../src/runtime/metadata.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAYxB,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAarE;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,cAAc,GAAG,IAAI,GAC5B,mBAAmB,CAGrB;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,OAAO,GAAG,eAAe,CAiC5D;AA+BD,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAGzE"}

package/dist/runtime/metadata.js

@@ -58,9 +58,24 @@ export function extractMetadata(el) {
         role,
         ariaLabel,
         textPreview,
+        disabled: readDisabledState(el),
         attributes,
     };
 }
+function readDisabledState(el) {
+    if (el instanceof HTMLButtonElement ||
+        el instanceof HTMLInputElement ||
+        el instanceof HTMLSelectElement ||
+        el instanceof HTMLOptionElement ||
+        el instanceof HTMLTextAreaElement ||
+        el instanceof HTMLFieldSetElement) {
+        return el.disabled;
+    }
+    if (el instanceof HTMLElement && el.hasAttribute("disabled")) {
+        return true;
+    }
+    return null;
+}
 function textPreviewFor(el) {
     const own = Array.from(el.childNodes)
         .filter((n) => n.nodeType === Node.TEXT_NODE)

package/docs/TRUST.md

@@ -1,18 +1,25 @@
-# Trust model (Live Preview)
+# Trust model (Live Preview & production inspection)
 
 ## What is protected
 
-- **Production deployments** (`VERCEL_ENV=production`): no JSX instrumentation, no `frame-ancestors` for the viewer, client bootstrap does not run (even if `?abboxSession` is present).
-- **Preview deployments** (`VERCEL_ENV=preview`): instrumentation and iframe embedding headers are enabled at build time.
+- **Default (preview-only install)**: `VERCEL_ENV=production` deploys have no JSX instrumentation, no `frame-ancestors` for the viewer, and client bootstrap does not run.
+- **Preview deployments** (`VERCEL_ENV=preview`): instrumentation and iframe embedding headers at build time; runtime follows baked preview mode.
+- **Production inspection (explicit opt-in via `@abbox/cli init --mode production`)**: production Vercel builds use webpack instrumentation and bake `NEXT_PUBLIC_ABBOX_INSPECTION_MODE=production`. Runtime still requires a baked mode flag — query parameters alone cannot enable inspection.
+- **Production runtime**: requires `abboxSession` **and** `abboxHostOrigin` matching the Viewer origin configured at install (`NEXT_PUBLIC_ABBOX_VIEWER_ORIGIN`). No broad Viewer fallback list.
 - **postMessage**: channel, version, session id, and origin allow-lists on host and client. No `targetOrigin: "*"`.
-- **Viewer**: preview URL host allow-list (configurable via `VITE_ABBOX_PREVIEW_HOST_ALLOWLIST`).
+- **Viewer**: preview targets use a host allow-list; production website mode accepts customer HTTPS origins (customer must have opted in on their site).
 
 ## What is not authentication
 
 - `VERCEL_ENV=preview` only means “this build was a Vercel preview deployment.” Anyone with the preview URL can load that deployment.
-- `abboxSession` in the query string is a protocol correlation id, not a secret.
-- Customers should treat Vercel preview URLs as capability URLs (protect with Vercel access controls if needed).
+- `abboxSession` is a protocol correlation id generated by the Viewer, not proof that the Viewer user owns the embedded site.
+- **Production inspection opt-in** means the site owner deliberately ships instrumentation and `frame-ancestors` allowing the configured Viewer. That is explicit capability exposure, not cryptographic proof of ownership.
+- Abbox does not receive page contents or credentials in this milestone; inspection stays between the Viewer and the customer origin via `postMessage`.
 
 ## CSP
 
 `withAbboxInspector` adds `Content-Security-Policy: frame-ancestors …` without removing other CSP headers you configure. Remove conflicting `X-Frame-Options: DENY` in your platform if embedding fails.
+
+## Server-side authorization
+
+This milestone does **not** include a backend that verifies domain ownership. Customers who need stronger guarantees should treat production inspection as a controlled internal tool or wait for a future domain-verification flow.

package/docs/nextjs-integration.md

@@ -28,7 +28,8 @@ npm run dev:abbox
 ## Vercel
 
 - **Preview**: `VERCEL_ENV=preview` → `next build --webpack` + inspector headers/runtime.
-- **Production**: default `next build` (Turbopack) without instrumentation.
+- **Production (inspectable)**: use `@abbox/cli` production mode (`inspectionMode: "production"` in `.abbox/install.json`) so the build script sets `ABBBOX_INSPECTION_MODE=production` and runs `next build --webpack`. App Router client layers are instrumented **before** SWC via a dedicated babel-loader step.
+- **Production (default)**: plain `next build` without Abbox env → no instrumentation (by design).
 
 ## Trust
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abbox/inspector",
-  "version": "0.2.1",
+  "version": "0.4.1",
   "publishConfig": {
     "access": "public"
   },
@@ -52,11 +52,12 @@
     "dist",
     "src/next/babel-config.cjs",
     "src/next/webpack-instrumentation.cjs",
+    "src/next/abbox-pre-swc-loader.cjs",
     "docs",
     "README.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && node -e \"const fs=require('fs');const p='dist/next';fs.mkdirSync(p,{recursive:true});fs.copyFileSync('src/next/webpack-instrumentation.cjs',p+'/webpack-instrumentation.cjs');fs.copyFileSync('src/next/babel-config.cjs',p+'/babel-config.cjs');\"",
+    "build": "tsc -p tsconfig.build.json && node -e \"const fs=require('fs');const p='dist/next';fs.mkdirSync(p,{recursive:true});fs.copyFileSync('src/next/webpack-instrumentation.cjs',p+'/webpack-instrumentation.cjs');fs.copyFileSync('src/next/abbox-pre-swc-loader.cjs',p+'/abbox-pre-swc-loader.cjs');fs.copyFileSync('src/next/babel-config.cjs',p+'/babel-config.cjs');\"",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "npm run build && vitest run",
     "lint": "biome ci .",

package/src/next/abbox-pre-swc-loader.cjs

@@ -0,0 +1,44 @@
+/**
+ * Runs Abbox JSX instrumentation on TSX/JSX before Next's SWC pass.
+ * No-ops for paths outside configured app source directories.
+ */
+const babel = require("@babel/core");
+const { shouldInstrumentResource } = require("./webpack-instrumentation.cjs");
+
+/**
+ * @this {import('webpack').LoaderContext<unknown>}
+ */
+module.exports = function abboxPreSwcLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions();
+  const rootDir = options.rootDir ?? this.rootContext;
+  const resourcePath = this.resourcePath;
+
+  if (!shouldInstrumentResource(resourcePath, rootDir)) {
+    callback(null, source);
+    return;
+  }
+
+  babel.transform(
+    source,
+    {
+      filename: resourcePath,
+      babelrc: false,
+      configFile: false,
+      parserOpts: { plugins: ["jsx", "typescript"] },
+      plugins: options.plugins,
+      sourceMaps: this.sourceMap,
+    },
+    (error, result) => {
+      if (error) {
+        callback(error);
+        return;
+      }
+      if (!result?.code) {
+        callback(null, source);
+        return;
+      }
+      callback(null, result.code, result.map);
+    },
+  );
+};

package/src/next/babel-config.cjs

@@ -10,6 +10,7 @@ function createNextBabelConfig(options = {}) {
   const enabled =
     options.enabled ??
     (process.env.ABBBOX_INSPECTOR === "1" ||
+      process.env.ABBBOX_INSPECTION_MODE === "production" ||
       process.env.NEXT_PUBLIC_ABBOX_INSPECTOR === "1" ||
       process.env.VERCEL_ENV === "preview");
 

package/src/next/webpack-instrumentation.cjs

@@ -2,6 +2,10 @@
  * Apply Abbox JSX instrumentation via webpack + babel-loader on selected app sources.
  * Does not use babel.config.js, so Next.js keeps SWC (and next/font) for excluded files
  * such as app/layout.tsx.
+ *
+ * Next.js App Router client layers compile with SWC before the default Babel pass, so a
+ * top-level babel rule is not enough. We prepend an Abbox babel-loader step on the App
+ * Router browser/SSR layer rules (before SWC runs).
  */
 const fs = require("node:fs");
 const path = require("node:path");
@@ -9,6 +13,11 @@ const { createRequire } = require("node:module");
 
 const LAYOUT_BASENAMES = new Set(["layout.tsx", "layout.jsx"]);
 
+/** Layers where Next compiles client/app TSX through SWC (must instrument before SWC). */
+const APP_CLIENT_ISSUER_LAYERS = new Set(["app-pages-browser", "ssr"]);
+
+const ABBBOX_LOADER_IDENT = "abbox-source-instrumentation";
+
 function resolveInspectorBabelPlugin(rootDir) {
   const req = createRequire(path.join(rootDir, "package.json"));
   try {
@@ -18,29 +27,93 @@ function resolveInspectorBabelPlugin(rootDir) {
   }
 }
 
-function resolveBabelLoader(rootDir) {
-  const req = createRequire(path.join(rootDir, "package.json"));
-  return req.resolve("babel-loader");
-}
-
-function resolveNextBabelPreset(rootDir) {
-  const req = createRequire(path.join(rootDir, "package.json"));
-  return req.resolve("next/babel");
-}
-
 function collectIncludeDirs(rootDir) {
-  return ["app", "components", "src", "pages"]
+  return ["app", "components", "src", "pages", "lib", "hooks", "features"]
     .map((segment) => path.join(rootDir, segment))
     .filter((dir) => fs.existsSync(dir));
 }
 
 function isRootLayoutResource(resourcePath) {
-  const base = path.basename(resourcePath);
+  const clean = resourcePath.split("?")[0];
+  const base = path.basename(clean);
   if (!LAYOUT_BASENAMES.has(base)) return false;
-  const parent = path.basename(path.dirname(resourcePath));
+  const parent = path.basename(path.dirname(clean));
   return parent === "app" || parent === "src/app";
 }
 
+function shouldInstrumentResource(resourcePath, rootDir) {
+  const clean = resourcePath.split("?")[0];
+  const includeDirs = collectIncludeDirs(rootDir);
+  if (!/\.(tsx|jsx)$/.test(clean)) return false;
+  return (
+    includeDirs.some((dir) => clean.startsWith(dir)) &&
+    !isRootLayoutResource(clean)
+  );
+}
+
+function loaderIdent(entry) {
+  if (!entry) return "";
+  if (typeof entry === "string") return entry;
+  return String(entry.loader ?? entry.ident ?? "");
+}
+
+function resolvePreSwcLoader() {
+  return path.join(__dirname, "abbox-pre-swc-loader.cjs");
+}
+
+function createAbboxBabelLoaderUse(pluginPath, rootDir) {
+  return {
+    loader: resolvePreSwcLoader(),
+    ident: ABBBOX_LOADER_IDENT,
+    options: {
+      rootDir,
+      plugins: [[pluginPath, { rootDir }]],
+    },
+  };
+}
+
+function ruleUsesSwc(rule) {
+  const uses = rule.use
+    ? Array.isArray(rule.use)
+      ? rule.use
+      : [rule.use]
+    : [];
+  return uses.some((u) => loaderIdent(u).includes("next-swc-loader"));
+}
+
+function ruleHasAbboxLoader(rule) {
+  const uses = rule.use
+    ? Array.isArray(rule.use)
+      ? rule.use
+      : [rule.use]
+    : [];
+  return uses.some((u) => loaderIdent(u) === ABBBOX_LOADER_IDENT);
+}
+
+/**
+ * @param {unknown[]} rules
+ * @param {object} abboxUse
+ */
+function patchAppRouterLayerRules(rules, abboxUse) {
+  if (!Array.isArray(rules)) return;
+  for (const rule of rules) {
+    if (!rule || typeof rule !== "object") continue;
+    if (Array.isArray(rule.oneOf)) {
+      patchAppRouterLayerRules(rule.oneOf, abboxUse);
+    }
+    const layer = rule.issuerLayer;
+    if (
+      typeof layer === "string" &&
+      APP_CLIENT_ISSUER_LAYERS.has(layer) &&
+      ruleUsesSwc(rule) &&
+      !ruleHasAbboxLoader(rule)
+    ) {
+      const uses = Array.isArray(rule.use) ? rule.use : [rule.use];
+      rule.use = [...uses, abboxUse];
+    }
+  }
+}
+
 /**
  * @param {import('webpack').Configuration} webpackConfig
  * @param {{ dir: string }} options
@@ -48,35 +121,40 @@ function isRootLayoutResource(resourcePath) {
 function applyAbboxWebpackInstrumentation(webpackConfig, options) {
   const rootDir = options.dir ?? process.cwd();
   const pluginPath = resolveInspectorBabelPlugin(rootDir);
-  const babelLoader = resolveBabelLoader(rootDir);
-  const nextBabel = resolveNextBabelPreset(rootDir);
   const includeDirs = collectIncludeDirs(rootDir);
 
   if (includeDirs.length === 0) {
     return webpackConfig;
   }
 
+  const abboxUse = createAbboxBabelLoaderUse(pluginPath, rootDir);
+
+  webpackConfig.module = webpackConfig.module ?? { rules: [] };
+  webpackConfig.module.rules = webpackConfig.module.rules ?? [];
+
+  patchAppRouterLayerRules(webpackConfig.module.rules, abboxUse);
+
+  // Pages Router and non-layered TSX: top-level rule runs before Next's oneOf chains.
   const rule = {
     test: /\.(tsx|jsx)$/,
-    include: (resourcePath) =>
-      includeDirs.some((dir) => resourcePath.startsWith(dir)) &&
-      !isRootLayoutResource(resourcePath),
+    include: (resourcePath) => shouldInstrumentResource(resourcePath, rootDir),
     exclude: [/node_modules/],
     use: {
-      loader: babelLoader,
+      loader: resolvePreSwcLoader(),
       options: {
-        babelrc: false,
-        configFile: false,
-        presets: [nextBabel],
+        rootDir,
         plugins: [[pluginPath, { rootDir }]],
       },
     },
   };
-
-  webpackConfig.module = webpackConfig.module ?? { rules: [] };
-  webpackConfig.module.rules = webpackConfig.module.rules ?? [];
   webpackConfig.module.rules.unshift(rule);
+
   return webpackConfig;
 }
 
-module.exports = { applyAbboxWebpackInstrumentation, isRootLayoutResource };
+module.exports = {
+  applyAbboxWebpackInstrumentation,
+  isRootLayoutResource,
+  shouldInstrumentResource,
+  APP_CLIENT_ISSUER_LAYERS,
+};