@replohq/sandbox-runtime 0.1.0

package/select-mode/fast-refresh-relay.js

@@ -0,0 +1,33 @@
+import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
+let hasInstalledFastRefreshRelay = false;
+let onFastRefreshComplete = null;
+function installFastRefreshRelay({
+  onComplete
+} = {}) {
+  onFastRefreshComplete = onComplete ?? null;
+  if (hasInstalledFastRefreshRelay) {
+    return;
+  }
+  hasInstalledFastRefreshRelay = true;
+  const originalLog = console.log;
+  const originalInfo = console.info;
+  const relayIfFastRefreshComplete = (...args) => {
+    const message = args.join(" ");
+    if (message.includes("[Fast Refresh] done")) {
+      getWebsiteBuilderRpc()?.fastRefreshComplete(void 0);
+      onFastRefreshComplete?.();
+    }
+  };
+  console.log = (...args) => {
+    relayIfFastRefreshComplete(...args);
+    originalLog(...args);
+  };
+  console.info = (...args) => {
+    relayIfFastRefreshComplete(...args);
+    originalInfo(...args);
+  };
+}
+export {
+  installFastRefreshRelay
+};
+//# sourceMappingURL=fast-refresh-relay.js.map

package/select-mode/fast-refresh-relay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/fast-refresh-relay.ts"],
+  "sourcesContent": ["import { getWebsiteBuilderRpc } from \"./iframeRpcChannel\";\n\nlet hasInstalledFastRefreshRelay = false;\nlet onFastRefreshComplete: (() => void) | null = null;\n\nexport function installFastRefreshRelay({\n  onComplete,\n}: { onComplete?: () => void } = {}) {\n  onFastRefreshComplete = onComplete ?? null;\n  if (hasInstalledFastRefreshRelay) {\n    return;\n  }\n  hasInstalledFastRefreshRelay = true;\n\n  const originalLog = console.log;\n  const originalInfo = console.info;\n  const relayIfFastRefreshComplete = (...args: unknown[]) => {\n    const message = args.join(\" \");\n    if (message.includes(\"[Fast Refresh] done\")) {\n      getWebsiteBuilderRpc()?.fastRefreshComplete(undefined);\n      onFastRefreshComplete?.();\n    }\n  };\n\n  console.log = (...args: unknown[]) => {\n    relayIfFastRefreshComplete(...args);\n    originalLog(...args);\n  };\n  console.info = (...args: unknown[]) => {\n    relayIfFastRefreshComplete(...args);\n    originalInfo(...args);\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,4BAA4B;AAErC,IAAI,+BAA+B;AACnC,IAAI,wBAA6C;AAE1C,SAAS,wBAAwB;AAAA,EACtC;AACF,IAAiC,CAAC,GAAG;AACnC,0BAAwB,cAAc;AACtC,MAAI,8BAA8B;AAChC;AAAA,EACF;AACA,iCAA+B;AAE/B,QAAM,cAAc,QAAQ;AAC5B,QAAM,eAAe,QAAQ;AAC7B,QAAM,6BAA6B,IAAI,SAAoB;AACzD,UAAM,UAAU,KAAK,KAAK,GAAG;AAC7B,QAAI,QAAQ,SAAS,qBAAqB,GAAG;AAC3C,2BAAqB,GAAG,oBAAoB,MAAS;AACrD,8BAAwB;AAAA,IAC1B;AAAA,EACF;AAEA,UAAQ,MAAM,IAAI,SAAoB;AACpC,+BAA2B,GAAG,IAAI;AAClC,gBAAY,GAAG,IAAI;AAAA,EACrB;AACA,UAAQ,OAAO,IAAI,SAAoB;AACrC,+BAA2B,GAAG,IAAI;AAClC,iBAAa,GAAG,IAAI;AAAA,EACtB;AACF;",
+  "names": []
+}

package/select-mode/fiber.d.ts

@@ -0,0 +1,49 @@
+export interface ReactFiber {
+    _debugSource?: {
+        fileName: string;
+        lineNumber: number;
+        columnNumber?: number;
+    };
+    _debugStack?: unknown;
+    _debugOwner?: ReactFiber;
+    type?: {
+        name?: string;
+        displayName?: string;
+    } | string | ((...args: unknown[]) => unknown) | null;
+    return?: ReactFiber | null;
+    memoizedProps?: Record<string, unknown>;
+    pendingProps?: Record<string, unknown>;
+}
+export declare function getFiberFromElement(element: HTMLElement): ReactFiber | null;
+export declare function getComponentName(fiber: ReactFiber | null | undefined): string | undefined;
+export declare function findDebugSource(fiber: ReactFiber, maxDepth?: number): {
+    source: ReactFiber["_debugSource"];
+    componentName?: string;
+} | null;
+export declare function findDebugSourceReact19(fiber: ReactFiber): {
+    source: ReactFiber["_debugSource"];
+    componentName?: string;
+} | null;
+export declare function getSourceLocation(element: HTMLElement): {
+    filePath: string;
+    lineNumber: number;
+    columnNumber: number | undefined;
+    componentName: string | undefined;
+} | undefined;
+export declare function getHostSourceIdentity(element: HTMLElement): {
+    filePath: string;
+    lineNumber: number;
+    columnNumber: number | undefined;
+    tagName: string;
+} | null;
+export declare function getFiberChain(element: HTMLElement): {
+    sourceLocation: {
+        filePath: string;
+        lineNumber: number;
+        columnNumber: number | undefined;
+        componentName: string | undefined;
+    };
+    tagName: string | undefined;
+    componentName: string | undefined;
+    props: Record<string, unknown> | undefined;
+}[];

package/select-mode/fiber.js

@@ -0,0 +1,306 @@
+import { z } from "zod";
+const MAX_FIBER_CHAIN_DEPTH = 80;
+const MAX_SERIALIZED_PROP_COUNT = 24;
+const MAX_SERIALIZED_STRING_LENGTH = 500;
+const REACT_INTERNAL_FRAME_PATTERNS = [
+  /react.*jsx-dev-runtime/,
+  /react.*jsx-runtime/,
+  /react-dom\//,
+  /react\/cjs\/react\./,
+  /react-server-dom/,
+  /react_server_dom/,
+  /next[/_.]dist[/_.]compiled/,
+  /\/node_modules\/(next|react|react-dom)\//
+];
+function isReactInternalFrame(fileName) {
+  return REACT_INTERNAL_FRAME_PATTERNS.some((pattern) => {
+    return pattern.test(fileName);
+  });
+}
+const REACT_INTERNAL_METHOD_PATTERNS = [
+  /(?:^|\.)jsxDEV(?:Impl)?$/,
+  /(?:^|\.)jsxs?$/,
+  /(?:^|\.)react_stack_bottom_frame$/,
+  /(?:^|\.)fakeJSXCallSite$/
+];
+function isReactInternalMethod(methodName) {
+  if (!methodName) {
+    return false;
+  }
+  return REACT_INTERNAL_METHOD_PATTERNS.some((pattern) => {
+    return pattern.test(methodName);
+  });
+}
+function parseDebugStackSource(debugStack) {
+  let stackText = null;
+  if (typeof debugStack === "string") {
+    stackText = debugStack;
+  } else if (typeof debugStack === "object" && debugStack && "stack" in debugStack) {
+    const stack = debugStack.stack;
+    if (typeof stack === "string") {
+      stackText = stack;
+    }
+  }
+  if (!stackText) {
+    return null;
+  }
+  for (const rawLine of stackText.split("\n")) {
+    const line = rawLine.trim();
+    if (!line) {
+      continue;
+    }
+    const framedMatch = line.match(/^at\s+(.+?)\s+\((.*):(\d+):(\d+)\)$/);
+    const stackFrameMatch = framedMatch ?? line.match(/^at\s+(?:.*\()?(.*):(\d+):(\d+)\)?$/) ?? line.match(/^(.*):(\d+):(\d+)$/);
+    if (!stackFrameMatch) {
+      continue;
+    }
+    const methodName = framedMatch ? framedMatch[1].trim() : null;
+    const fileOffset = framedMatch ? 2 : 1;
+    const fileName = stackFrameMatch[fileOffset]?.trim();
+    const lineNumber = Number.parseInt(
+      stackFrameMatch[fileOffset + 1] ?? "",
+      10
+    );
+    const columnNumber = Number.parseInt(
+      stackFrameMatch[fileOffset + 2] ?? "",
+      10
+    );
+    if (!fileName || !Number.isFinite(lineNumber) || !Number.isFinite(columnNumber)) {
+      continue;
+    }
+    if (isReactInternalFrame(fileName) || isReactInternalMethod(methodName)) {
+      continue;
+    }
+    return {
+      fileName,
+      lineNumber,
+      columnNumber
+    };
+  }
+  return null;
+}
+function getFiberFromElement(element) {
+  if (!element || typeof element !== "object") {
+    return null;
+  }
+  const symbolKeys = Object.getOwnPropertySymbols(element);
+  const fiberSymbolKey = symbolKeys.find((symbolKey) => {
+    return symbolKey.toString().includes("reactFiber");
+  });
+  if (fiberSymbolKey) {
+    return (
+      // Legacy cast - may or may not be necessary
+      // eslint-disable-next-line replo/no-as-cast
+      element[fiberSymbolKey] ?? null
+    );
+  }
+  const keys = Object.keys(element);
+  const fiberKey = keys.find((key) => key.startsWith("__reactFiber$"));
+  if (fiberKey) {
+    return element[fiberKey] ?? null;
+  }
+  const instanceKey = keys.find((key) => {
+    return key.startsWith("__reactInternalInstance$");
+  });
+  if (instanceKey) {
+    return (
+      // Legacy cast - may or may not be necessary
+      // eslint-disable-next-line replo/no-as-cast
+      element[instanceKey] ?? null
+    );
+  }
+  const possibleFiberKey = keys.find((key) => {
+    if (!key.startsWith("__react")) {
+      return false;
+    }
+    const value = element[key];
+    return value && typeof value === "object" && "_debugSource" in value;
+  });
+  if (possibleFiberKey) {
+    return (
+      // Legacy cast - may or may not be necessary
+      // eslint-disable-next-line replo/no-as-cast
+      element[possibleFiberKey] ?? null
+    );
+  }
+  return null;
+}
+function getComponentName(fiber) {
+  if (!fiber?.type) {
+    return void 0;
+  }
+  if (typeof fiber.type === "string") {
+    return void 0;
+  }
+  if (typeof fiber.type === "function") {
+    return fiber.type.name || void 0;
+  }
+  if (typeof fiber.type === "object") {
+    return fiber.type.displayName ?? fiber.type.name ?? void 0;
+  }
+  return void 0;
+}
+function findDebugSource(fiber, maxDepth = 50) {
+  let current = fiber;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    if (current._debugSource) {
+      return {
+        source: current._debugSource,
+        componentName: getComponentName(current)
+      };
+    }
+    if (current._debugOwner?._debugSource) {
+      return {
+        source: current._debugOwner._debugSource,
+        componentName: getComponentName(current._debugOwner)
+      };
+    }
+    current = current.return;
+    depth++;
+  }
+  return null;
+}
+function findDebugSourceReact19(fiber) {
+  let current = fiber;
+  let depth = 0;
+  const maxDepth = 50;
+  while (current && depth < maxDepth) {
+    const debugStackSource = parseDebugStackSource(current._debugStack) ?? parseDebugStackSource(current._debugOwner?._debugStack);
+    if (debugStackSource) {
+      return {
+        source: debugStackSource,
+        componentName: getComponentName(current)
+      };
+    }
+    current = current.return;
+    depth++;
+  }
+  return null;
+}
+function getSourceLocation(element) {
+  let currentElement = element;
+  while (currentElement) {
+    const fiber = getFiberFromElement(currentElement);
+    if (fiber) {
+      const debugInfo = findDebugSource(fiber) ?? findDebugSourceReact19(fiber);
+      if (debugInfo?.source) {
+        return {
+          filePath: debugInfo.source.fileName,
+          lineNumber: debugInfo.source.lineNumber,
+          columnNumber: debugInfo.source.columnNumber,
+          componentName: debugInfo.componentName ?? void 0
+        };
+      }
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return void 0;
+}
+function getDebugSource(fiber) {
+  const debugInfo = findDebugSource(fiber) ?? findDebugSourceReact19(fiber);
+  return debugInfo?.source;
+}
+function getTagName(fiber) {
+  return z.string().safeParse(fiber.type).data?.toLowerCase();
+}
+function getHostSourceIdentity(element) {
+  const fiber = getFiberFromElement(element);
+  if (!fiber) {
+    return null;
+  }
+  const source = getDebugSource(fiber);
+  if (!source) {
+    return null;
+  }
+  return {
+    filePath: source.fileName,
+    lineNumber: source.lineNumber,
+    columnNumber: source.columnNumber,
+    tagName: element.tagName.toLowerCase()
+  };
+}
+function getSerializablePropValue(value) {
+  if (value === null || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "string") {
+    return value.length > MAX_SERIALIZED_STRING_LENGTH ? `${value.slice(0, MAX_SERIALIZED_STRING_LENGTH)}...` : value;
+  }
+  if (Array.isArray(value)) {
+    return value.slice(0, 20).map(getSerializablePropValue);
+  }
+  if (typeof value === "object") {
+    return "[object]";
+  }
+  return void 0;
+}
+function getSerializableProps(props) {
+  if (!props) {
+    return void 0;
+  }
+  const serializedProps = {};
+  for (const [key, value] of Object.entries(props).slice(
+    0,
+    MAX_SERIALIZED_PROP_COUNT
+  )) {
+    if (key === "children" || key === "ref" || key.startsWith("on") || typeof value === "function" || typeof value === "symbol") {
+      continue;
+    }
+    const serializableValue = getSerializablePropValue(value);
+    if (serializableValue !== void 0) {
+      serializedProps[key] = serializableValue;
+    }
+  }
+  return Object.keys(serializedProps).length > 0 ? serializedProps : void 0;
+}
+function getFiberChain(element) {
+  const rootFiber = getFiberFromElement(element);
+  const fiberChain = [];
+  const seenKeys = /* @__PURE__ */ new Set();
+  let currentFiber = rootFiber;
+  let depth = 0;
+  while (currentFiber && depth < MAX_FIBER_CHAIN_DEPTH) {
+    const source = getDebugSource(currentFiber);
+    if (source) {
+      const tagName = getTagName(currentFiber);
+      const componentName = getComponentName(currentFiber);
+      const key = [
+        source.fileName,
+        source.lineNumber,
+        source.columnNumber ?? "",
+        tagName ?? "",
+        componentName ?? ""
+      ].join(":");
+      if (!seenKeys.has(key)) {
+        seenKeys.add(key);
+        fiberChain.push({
+          sourceLocation: {
+            filePath: source.fileName,
+            lineNumber: source.lineNumber,
+            columnNumber: source.columnNumber,
+            componentName
+          },
+          tagName,
+          componentName,
+          props: getSerializableProps(
+            currentFiber.memoizedProps ?? currentFiber.pendingProps
+          )
+        });
+      }
+    }
+    currentFiber = currentFiber.return;
+    depth += 1;
+  }
+  return fiberChain;
+}
+export {
+  findDebugSource,
+  findDebugSourceReact19,
+  getComponentName,
+  getFiberChain,
+  getFiberFromElement,
+  getHostSourceIdentity,
+  getSourceLocation
+};
+//# sourceMappingURL=fiber.js.map

package/select-mode/fiber.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/fiber.ts"],
+  "sourcesContent": ["// =============================================================================\n// React Fiber / Source Location Utilities\n// =============================================================================\n\nimport { z } from \"zod\";\n\nexport interface ReactFiber {\n  _debugSource?: {\n    fileName: string;\n    lineNumber: number;\n    columnNumber?: number;\n  };\n  _debugStack?: unknown;\n  _debugOwner?: ReactFiber;\n  type?:\n    | { name?: string; displayName?: string }\n    | string\n    | ((...args: unknown[]) => unknown)\n    | null;\n  return?: ReactFiber | null;\n  memoizedProps?: Record<string, unknown>;\n  pendingProps?: Record<string, unknown>;\n}\n\nconst MAX_FIBER_CHAIN_DEPTH = 80;\nconst MAX_SERIALIZED_PROP_COUNT = 24;\nconst MAX_SERIALIZED_STRING_LENGTH = 500;\n\n// Frames produced by React's own JSX runtime \u2014 these come first in\n// `_debugStack.stack` because the `Error` is constructed inside `jsxDEV`. We\n// want the frame *above* them, which is the actual JSX call site.\n//\n// Turbopack rewrites `node_modules/next/dist/compiled/react-server-dom-*` and\n// friends into mangled chunk paths like\n// `_next/static/chunks/<hash>_next_dist_compiled_react-server-dom-turbopack_<hash>._.js`,\n// so we match both the human-readable module paths and the chunk-name forms.\n// Without this, `_debugStack`'s top frame inside React's RSC runtime gets\n// surfaced as the \"host\" source location for every text node on the page \u2014\n// which then symbolicates back to bundled React, not user code.\nconst REACT_INTERNAL_FRAME_PATTERNS = [\n  /react.*jsx-dev-runtime/,\n  /react.*jsx-runtime/,\n  /react-dom\\//,\n  /react\\/cjs\\/react\\./,\n  /react-server-dom/,\n  /react_server_dom/,\n  /next[/_.]dist[/_.]compiled/,\n  /\\/node_modules\\/(next|react|react-dom)\\//,\n];\n\nfunction isReactInternalFrame(fileName: string): boolean {\n  return REACT_INTERNAL_FRAME_PATTERNS.some((pattern) => {\n    return pattern.test(fileName);\n  });\n}\n\n// React constructs the `_debugStack` Error inside its JSX runtime (`jsxDEV`,\n// `jsx`, `jsxs`), so those frames sit *above* the real JSX call site we want.\n// The file-based check above skips them when their path is recognizable, but\n// Turbopack mangles the client JSX-runtime chunk to an opaque name like\n// `node_modules__pnpm_<hash>._.js` (no \"react\"/\"jsx-dev-runtime\" substring),\n// so the top `jsxDEV` frame slips through and gets surfaced as the element's\n// source \u2014 which then symbolicates back to bundled React, not user code.\n// Matching by function name is stable across Turbopack's chunk hashing.\n// NOTE (Noah, 2026-07-27): Only bites client components; server-component\n// frames carry a recognizable `react-server-dom-*` path.\nconst REACT_INTERNAL_METHOD_PATTERNS = [\n  /(?:^|\\.)jsxDEV(?:Impl)?$/,\n  /(?:^|\\.)jsxs?$/,\n  /(?:^|\\.)react_stack_bottom_frame$/,\n  /(?:^|\\.)fakeJSXCallSite$/,\n];\n\nfunction isReactInternalMethod(methodName: string | null): boolean {\n  if (!methodName) {\n    return false;\n  }\n  return REACT_INTERNAL_METHOD_PATTERNS.some((pattern) => {\n    return pattern.test(methodName);\n  });\n}\n\nfunction parseDebugStackSource(\n  debugStack: unknown,\n): ReactFiber[\"_debugSource\"] | null {\n  let stackText: string | null = null;\n\n  if (typeof debugStack === \"string\") {\n    stackText = debugStack;\n  } else if (\n    typeof debugStack === \"object\" &&\n    debugStack &&\n    \"stack\" in debugStack\n  ) {\n    // Legacy cast - may or may not be necessary\n    // eslint-disable-next-line replo/no-as-cast\n    const stack = (debugStack as { stack?: unknown }).stack;\n    if (typeof stack === \"string\") {\n      stackText = stack;\n    }\n  }\n\n  if (!stackText) {\n    return null;\n  }\n\n  for (const rawLine of stackText.split(\"\\n\")) {\n    const line = rawLine.trim();\n    if (!line) {\n      continue;\n    }\n\n    // Prefer the framed form `at <method> (<file>:<line>:<col>)` so we can\n    // read the function name and skip React's JSX-runtime frames even when\n    // Turbopack has mangled their chunk file name beyond recognition.\n    const framedMatch = line.match(/^at\\s+(.+?)\\s+\\((.*):(\\d+):(\\d+)\\)$/);\n    const stackFrameMatch =\n      framedMatch ??\n      line.match(/^at\\s+(?:.*\\()?(.*):(\\d+):(\\d+)\\)?$/) ??\n      line.match(/^(.*):(\\d+):(\\d+)$/);\n\n    if (!stackFrameMatch) {\n      continue;\n    }\n\n    const methodName = framedMatch ? framedMatch[1]!.trim() : null;\n    const fileOffset = framedMatch ? 2 : 1;\n    const fileName = stackFrameMatch[fileOffset]?.trim();\n    const lineNumber = Number.parseInt(\n      stackFrameMatch[fileOffset + 1] ?? \"\",\n      10,\n    );\n    const columnNumber = Number.parseInt(\n      stackFrameMatch[fileOffset + 2] ?? \"\",\n      10,\n    );\n\n    if (\n      !fileName ||\n      !Number.isFinite(lineNumber) ||\n      !Number.isFinite(columnNumber)\n    ) {\n      continue;\n    }\n\n    if (isReactInternalFrame(fileName) || isReactInternalMethod(methodName)) {\n      continue;\n    }\n\n    return {\n      fileName,\n      lineNumber,\n      columnNumber,\n    };\n  }\n\n  return null;\n}\n\nexport function getFiberFromElement(element: HTMLElement): ReactFiber | null {\n  if (!element || typeof element !== \"object\") {\n    return null;\n  }\n\n  const symbolKeys = Object.getOwnPropertySymbols(element);\n  const fiberSymbolKey = symbolKeys.find((symbolKey) => {\n    return symbolKey.toString().includes(\"reactFiber\");\n  });\n  if (fiberSymbolKey) {\n    return (\n      // Legacy cast - may or may not be necessary\n      // eslint-disable-next-line replo/no-as-cast\n      (element as unknown as Record<symbol, ReactFiber>)[fiberSymbolKey] ?? null\n    );\n  }\n\n  const keys = Object.keys(element);\n  const fiberKey = keys.find((key) => key.startsWith(\"__reactFiber$\"));\n  if (fiberKey) {\n    // Legacy cast - may or may not be necessary\n    // eslint-disable-next-line replo/no-as-cast\n    return (element as unknown as Record<string, ReactFiber>)[fiberKey] ?? null;\n  }\n  const instanceKey = keys.find((key) => {\n    return key.startsWith(\"__reactInternalInstance$\");\n  });\n  if (instanceKey) {\n    return (\n      // Legacy cast - may or may not be necessary\n      // eslint-disable-next-line replo/no-as-cast\n      (element as unknown as Record<string, ReactFiber>)[instanceKey] ?? null\n    );\n  }\n\n  const possibleFiberKey = keys.find((key) => {\n    if (!key.startsWith(\"__react\")) {\n      return false;\n    }\n    // Legacy cast - may or may not be necessary\n    // eslint-disable-next-line replo/no-as-cast\n    const value = (element as unknown as Record<string, unknown>)[key];\n    return value && typeof value === \"object\" && \"_debugSource\" in value;\n  });\n\n  if (possibleFiberKey) {\n    return (\n      // Legacy cast - may or may not be necessary\n      // eslint-disable-next-line replo/no-as-cast\n      (element as unknown as Record<string, ReactFiber>)[possibleFiberKey] ??\n      null\n    );\n  }\n\n  return null;\n}\n\nexport function getComponentName(\n  fiber: ReactFiber | null | undefined,\n): string | undefined {\n  if (!fiber?.type) {\n    return undefined;\n  }\n\n  if (typeof fiber.type === \"string\") {\n    return undefined;\n  }\n\n  if (typeof fiber.type === \"function\") {\n    return fiber.type.name || undefined;\n  }\n\n  if (typeof fiber.type === \"object\") {\n    return fiber.type.displayName ?? fiber.type.name ?? undefined;\n  }\n\n  return undefined;\n}\n\nexport function findDebugSource(\n  fiber: ReactFiber,\n  maxDepth = 50,\n): { source: ReactFiber[\"_debugSource\"]; componentName?: string } | null {\n  let current: ReactFiber | null | undefined = fiber;\n  let depth = 0;\n\n  while (current && depth < maxDepth) {\n    if (current._debugSource) {\n      return {\n        source: current._debugSource,\n        componentName: getComponentName(current),\n      };\n    }\n\n    if (current._debugOwner?._debugSource) {\n      return {\n        source: current._debugOwner._debugSource,\n        componentName: getComponentName(current._debugOwner),\n      };\n    }\n\n    current = current.return;\n    depth++;\n  }\n\n  return null;\n}\n\n// React 19 removed `fiber._debugSource`. The only per-element source pointer\n// left is `fiber._debugStack`, an `Error` constructed inside `jsxDEV` at the\n// JSX call site. We pull the topmost non-React frame out of that stack; it\n// references a compiled SSR/client chunk (e.g. `.next-dev/.../ssr/*.js`).\n// `symbolicateSelectedElement` later resolves those compiled frames to\n// original `.tsx` locations via Next.js's `/__nextjs_original-stack-frames`\n// dev-server endpoint.\nexport function findDebugSourceReact19(\n  fiber: ReactFiber,\n): { source: ReactFiber[\"_debugSource\"]; componentName?: string } | null {\n  let current: ReactFiber | null | undefined = fiber;\n  let depth = 0;\n  const maxDepth = 50;\n\n  while (current && depth < maxDepth) {\n    const debugStackSource =\n      parseDebugStackSource(current._debugStack) ??\n      parseDebugStackSource(current._debugOwner?._debugStack);\n    if (debugStackSource) {\n      return {\n        source: debugStackSource,\n        componentName: getComponentName(current),\n      };\n    }\n\n    current = current.return;\n    depth++;\n  }\n\n  return null;\n}\n\nexport function getSourceLocation(element: HTMLElement) {\n  let currentElement: HTMLElement | null = element;\n\n  while (currentElement) {\n    const fiber = getFiberFromElement(currentElement);\n    if (fiber) {\n      const debugInfo = findDebugSource(fiber) ?? findDebugSourceReact19(fiber);\n      if (debugInfo?.source) {\n        return {\n          filePath: debugInfo.source.fileName,\n          lineNumber: debugInfo.source.lineNumber,\n          columnNumber: debugInfo.source.columnNumber,\n          componentName: debugInfo.componentName ?? undefined,\n        };\n      }\n    }\n\n    currentElement = currentElement.parentElement;\n  }\n\n  return undefined;\n}\n\nfunction getDebugSource(\n  fiber: ReactFiber,\n): ReactFiber[\"_debugSource\"] | undefined {\n  const debugInfo = findDebugSource(fiber) ?? findDebugSourceReact19(fiber);\n  return debugInfo?.source;\n}\n\nfunction getTagName(fiber: ReactFiber): string | undefined {\n  return z.string().safeParse(fiber.type).data?.toLowerCase();\n}\n\nexport function getHostSourceIdentity(element: HTMLElement) {\n  const fiber = getFiberFromElement(element);\n  if (!fiber) {\n    return null;\n  }\n  const source = getDebugSource(fiber);\n  if (!source) {\n    return null;\n  }\n  return {\n    filePath: source.fileName,\n    lineNumber: source.lineNumber,\n    columnNumber: source.columnNumber,\n    tagName: element.tagName.toLowerCase(),\n  };\n}\n\nfunction getSerializablePropValue(value: unknown): unknown {\n  if (\n    value === null ||\n    typeof value === \"number\" ||\n    typeof value === \"boolean\"\n  ) {\n    return value;\n  }\n\n  if (typeof value === \"string\") {\n    return value.length > MAX_SERIALIZED_STRING_LENGTH\n      ? `${value.slice(0, MAX_SERIALIZED_STRING_LENGTH)}...`\n      : value;\n  }\n\n  if (Array.isArray(value)) {\n    return value.slice(0, 20).map(getSerializablePropValue);\n  }\n\n  if (typeof value === \"object\") {\n    return \"[object]\";\n  }\n\n  return undefined;\n}\n\nfunction getSerializableProps(\n  props: Record<string, unknown> | undefined,\n): Record<string, unknown> | undefined {\n  if (!props) {\n    return undefined;\n  }\n\n  const serializedProps: Record<string, unknown> = {};\n  for (const [key, value] of Object.entries(props).slice(\n    0,\n    MAX_SERIALIZED_PROP_COUNT,\n  )) {\n    if (\n      key === \"children\" ||\n      key === \"ref\" ||\n      key.startsWith(\"on\") ||\n      typeof value === \"function\" ||\n      typeof value === \"symbol\"\n    ) {\n      continue;\n    }\n\n    const serializableValue = getSerializablePropValue(value);\n    if (serializableValue !== undefined) {\n      serializedProps[key] = serializableValue;\n    }\n  }\n\n  return Object.keys(serializedProps).length > 0 ? serializedProps : undefined;\n}\n\nexport function getFiberChain(element: HTMLElement) {\n  const rootFiber = getFiberFromElement(element);\n  const fiberChain = [];\n  const seenKeys = new Set<string>();\n  let currentFiber: ReactFiber | null | undefined = rootFiber;\n  let depth = 0;\n\n  while (currentFiber && depth < MAX_FIBER_CHAIN_DEPTH) {\n    const source = getDebugSource(currentFiber);\n    if (source) {\n      const tagName = getTagName(currentFiber);\n      const componentName = getComponentName(currentFiber);\n      const key = [\n        source.fileName,\n        source.lineNumber,\n        source.columnNumber ?? \"\",\n        tagName ?? \"\",\n        componentName ?? \"\",\n      ].join(\":\");\n\n      if (!seenKeys.has(key)) {\n        seenKeys.add(key);\n        fiberChain.push({\n          sourceLocation: {\n            filePath: source.fileName,\n            lineNumber: source.lineNumber,\n            columnNumber: source.columnNumber,\n            componentName,\n          },\n          tagName,\n          componentName,\n          props: getSerializableProps(\n            currentFiber.memoizedProps ?? currentFiber.pendingProps,\n          ),\n        });\n      }\n    }\n\n    currentFiber = currentFiber.return;\n    depth += 1;\n  }\n\n  return fiberChain;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/select-mode/hooks/useCrosshairCursor.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayMode } from "../../_vendor/schemas/generated/selectMode";
+/**
+ * Forces a crosshair cursor + disables text selection / drag while the iframe
+ * is in `selection` mode. We inject a `<style>` tag into the iframe document
+ * (rather than toggling a class on `<html>`) so that the `!important` rule
+ * wins against any per-element cursor styling on the page being edited.
+ *
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function useCrosshairCursor({ displayMode, }: {
+    displayMode: DisplayMode;
+}): void;

package/select-mode/hooks/useCrosshairCursor.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+function useCrosshairCursor({
+  displayMode
+}) {
+  useEffect(() => {
+    if (displayMode !== "selection") {
+      return;
+    }
+    const styleElement = document.createElement("style");
+    styleElement.textContent = "* { cursor: crosshair !important; user-select: none !important; -webkit-user-drag: none !important; }";
+    document.head.append(styleElement);
+    return () => {
+      styleElement.remove();
+    };
+  }, [displayMode]);
+}
+export {
+  useCrosshairCursor
+};
+//# sourceMappingURL=useCrosshairCursor.js.map

package/select-mode/hooks/useCrosshairCursor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/hooks/useCrosshairCursor.ts"],
+  "sourcesContent": ["import type { DisplayMode } from \"schemas/generated/selectMode\";\n\nimport { useEffect } from \"react\";\n\n/**\n * Forces a crosshair cursor + disables text selection / drag while the iframe\n * is in `selection` mode. We inject a `<style>` tag into the iframe document\n * (rather than toggling a class on `<html>`) so that the `!important` rule\n * wins against any per-element cursor styling on the page being edited.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function useCrosshairCursor({\n  displayMode,\n}: {\n  displayMode: DisplayMode;\n}) {\n  // eslint-disable-next-line replo/no-use-effect -- Legacy effect - may or may not be necessary\n  useEffect(() => {\n    if (displayMode !== \"selection\") {\n      return;\n    }\n\n    const styleElement = document.createElement(\"style\");\n    styleElement.textContent =\n      \"* { cursor: crosshair !important; user-select: none !important; -webkit-user-drag: none !important; }\";\n    document.head.append(styleElement);\n\n    return () => {\n      styleElement.remove();\n    };\n  }, [displayMode]);\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AAUnB,SAAS,mBAAmB;AAAA,EACjC;AACF,GAEG;AAED,YAAU,MAAM;AACd,QAAI,gBAAgB,aAAa;AAC/B;AAAA,IACF;AAEA,UAAM,eAAe,SAAS,cAAc,OAAO;AACnD,iBAAa,cACX;AACF,aAAS,KAAK,OAAO,YAAY;AAEjC,WAAO,MAAM;AACX,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAClB;",
+  "names": []
+}

package/select-mode/hooks/useEditModeStateMachine.d.ts

@@ -0,0 +1,16 @@
+import type { MutableRefObject } from "react";
+import type { DisplayMode, SelectableData, SelectModeFormatCommand } from "../../_vendor/schemas/generated/selectMode";
+import type { SelectModeInteractionSession } from "../selectModeSession";
+export declare function isTextEditableElement(element: Element): element is HTMLElement;
+export declare function useEditModeStateMachine({ displayMode, interactionSessionRef, }: {
+    displayMode: DisplayMode;
+    interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;
+}): {
+    beginEditing: ({ element, descriptorPromise, }: {
+        element: Element;
+        descriptorPromise: Promise<SelectableData>;
+    }) => void;
+    editingElementRef: import("react").RefObject<HTMLElement | null>;
+    formatCommand: (command: SelectModeFormatCommand) => void;
+    revert: () => void;
+};