@playwright-repl/browser-extension 0.24.0

package/dist/panel/panel.js

@@ -0,0 +1,2258 @@
+import "../modulepreload-polyfill.js";
+import { j as jsxRuntimeExports, r as reactExports, c as clientExports } from "../index.js";
+import { b as buildPickResult, s as swTerminateExecution, a as swDebugResume, r as runJsScript, c as runJsScriptStep, d as runAndDispatch, e as attachToTab, S as StateEffect, g as getPanel, E as EditorSelection, f as showDialog, h as EditorView, P as Prec, i as StateField, j as showPanel, k as codePointAt, l as codePointSize, V as ViewPlugin, D as Decoration, R as RangeSetBuilder, F as Facet, m as combineConfig, n as EditorState, o as fromCodePoint, p as crelt, q as runScopeHandlers, C as CharCategory, t as findClusterBreak, u as StreamLanguage, H as HighlightStyle, v as tags, w as syntaxHighlighting, W as WidgetType, x as gutter, y as autocompletion, z as placeholder, A as javascript, B as javascriptLanguage, G as playwrightCompletions, I as Compartment, J as lineNumbers, K as highlightActiveLineGutter, L as highlightActiveLine, M as history, N as bracketMatching, O as closeBrackets, Q as keymap, T as acceptCompletion, U as closeBracketsKeymap, X as defaultKeymap, Y as historyKeymap, Z as RangeSet, _ as pwCompletion, $ as GutterMarker, a0 as swGetProperties, a1 as fromCdpGetProperties, a2 as ObjectTree, a3 as Console, a4 as swDebugStepOver, a5 as swDebugStepInto, a6 as swDebugStepOut, a7 as inlineSummary, a8 as panelReducer, a9 as initialState, aa as onConsoleEvent } from "../index2.js";
+import { l as loadSettings, s as storeSettings } from "../settings.js";
+import { C as COMMAND_NAMES } from "../sw-debugger-core.js";
+function SunIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] });
+}
+function MoonIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+}
+function FolderOpenIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) });
+}
+function SaveIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "17 21 17 13 7 13 7 21" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "7 3 7 8 15 8" })
+  ] });
+}
+function RecordIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "7" }) });
+}
+function StopIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1" }) });
+}
+function StepForwardIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "3", y1: "12", x2: "15", y2: "12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "11 8 15 12 11 16" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "19", y1: "7", x2: "19", y2: "17" })
+  ] });
+}
+function PlugIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 8a2 2 0 0 1 2-2h2v12H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "7", y: "8", width: "3", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M16 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "20", y1: "12", x2: "23", y2: "12" })
+  ] });
+}
+function UnplugIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "1", y1: "12", x2: "5", y2: "12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 8a2 2 0 0 1 2-2h2v12H7a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "9", y: "8", width: "6", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "19", y1: "12", x2: "23", y2: "12" })
+  ] });
+}
+function BugIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 2l1.88 1.88" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.12 3.88L16 2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 20v-9" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 13H2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M22 13h-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+  ] });
+}
+function ContinueIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.5 2v12l9-6-9-6z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "12", y: "2", width: "2", height: "12" })
+  ] });
+}
+function StepOverIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.99993 13C9.99993 14.103 9.10293 15 7.99993 15C6.89693 15 5.99993 14.103 5.99993 13C5.99993 11.897 6.89693 11 7.99993 11C9.10293 11 9.99993 11.897 9.99993 13ZM13.2499 2C12.8359 2 12.4999 2.336 12.4999 2.75V4.027C11.3829 2.759 9.75993 2 7.99993 2C5.03293 2 2.47993 4.211 2.06093 7.144C2.00193 7.554 2.28793 7.934 2.69793 7.993C2.73393 7.999 2.76993 8.001 2.80493 8.001C3.17193 8.001 3.49293 7.731 3.54693 7.357C3.86093 5.159 5.77593 3.501 8.00093 3.501C9.52993 3.501 10.9199 4.264 11.7439 5.501H9.75093C9.33693 5.501 9.00093 5.837 9.00093 6.251C9.00093 6.665 9.33693 7.001 9.75093 7.001H13.2509C13.6649 7.001 14.0009 6.665 14.0009 6.251V2.751C14.0009 2.337 13.6649 2.001 13.2509 2.001L13.2499 2Z" }) });
+}
+function StepIntoIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10 13C10 14.103 9.10304 15 8.00004 15C6.89704 15 6.00004 14.103 6.00004 13C6.00004 11.897 6.89704 11 8.00004 11C9.10304 11 10 11.897 10 13ZM12.03 5.22C11.737 4.927 11.262 4.927 10.969 5.22L8.74904 7.44V1.75C8.74904 1.336 8.41304 1 7.99904 1C7.58504 1 7.24904 1.336 7.24904 1.75V7.439L5.02904 5.219C4.73604 4.926 4.26104 4.926 3.96804 5.219C3.67504 5.512 3.67504 5.987 3.96804 6.28L7.46804 9.78C7.61404 9.926 7.80604 10 7.99804 10C8.19004 10 8.38204 9.927 8.52804 9.78L12.028 6.28C12.321 5.987 12.321 5.512 12.028 5.219L12.03 5.22Z" }) });
+}
+function StepOutIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.99802 13C9.99802 14.103 9.10102 15 7.99802 15C6.89502 15 5.99802 14.103 5.99802 13C5.99802 11.897 6.89502 11 7.99802 11C9.10102 11 9.99802 11.897 9.99802 13ZM12.03 4.71999L8.53002 1.21999C8.23702 0.926994 7.76202 0.926994 7.46902 1.21999L3.96902 4.71999C3.67602 5.01299 3.67602 5.48799 3.96902 5.78099C4.26202 6.07399 4.73702 6.07399 5.03002 5.78099L7.25002 3.56099V9.24999C7.25002 9.66399 7.58602 9.99999 8.00002 9.99999C8.41402 9.99999 8.75002 9.66399 8.75002 9.24999V3.56099L10.97 5.78099C11.116 5.92699 11.308 6.00099 11.5 6.00099C11.692 6.00099 11.884 5.92799 12.03 5.78099C12.323 5.48799 12.323 5.01299 12.03 4.71999Z" }) });
+}
+function RestartIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12.75 8a4.5 4.5 0 0 1-4.5 4.5c-2.485 0-4.5-2.015-4.5-4.5S5.765 3.5 8.25 3.5V2L11 4.5 8.25 7V5.5a2.5 2.5 0 1 0 2.5 2.5h2z" }) });
+}
+function DebugStopIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12.5 3.5V12.5H3.5V3.5H12.5ZM12.5 2H3.5C2.672 2 2 2.672 2 3.5V12.5C2 13.328 2.672 14 3.5 14H12.5C13.328 14 14 13.328 14 12.5V3.5C14 2.672 13.328 2 12.5 2Z" }) });
+}
+function ScreencastIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: size, lineHeight: 1, filter: "grayscale(1)" }, children: "🎬" });
+}
+function CrosshairIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 16 16", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "5" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8", y1: "1", x2: "8", y2: "3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8", y1: "13", x2: "8", y2: "15" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "1", y1: "8", x2: "3", y2: "8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13", y1: "8", x2: "15", y2: "8" })
+  ] });
+}
+function Toolbar({ editorContent, editorMode, stepLine, attachedUrl, attachedTabId, isAttaching, isRunning, isStepDebugging, breakPoints, dispatch, editorRef }) {
+  const fileInputRef = reactExports.useRef(null);
+  const cancelRunRef = reactExports.useRef(false);
+  const [isRecording, setIsRecording] = reactExports.useState(false);
+  const [isPicking, setIsPicking] = reactExports.useState(false);
+  const [isDarkMode, setIsDarkMode] = reactExports.useState(() => localStorage.getItem("theme") === "dark");
+  const [availableTabs, setAvailableTabs] = reactExports.useState([]);
+  const [canAttach, setCanAttach] = reactExports.useState(true);
+  const [selectedTabId, setSelectedTabId] = reactExports.useState(null);
+  const [isVideoRecording, setIsVideoRecording] = reactExports.useState(false);
+  const [videoElapsed, setVideoElapsed] = reactExports.useState(0);
+  const videoStartTimeRef = reactExports.useRef(0);
+  const lines = reactExports.useMemo(() => editorContent.split("\n"), [editorContent]);
+  function isInternalUrl(url) {
+    if (!url) return true;
+    return url.startsWith("chrome://") || url.startsWith("chrome-extension://");
+  }
+  function getTabLabel(tab) {
+    try {
+      if (tab.url?.startsWith("about:")) return tab.url;
+      const url = new URL(tab.url);
+      if (url.protocol === "chrome:") return `chrome://${url.hostname}`;
+      return url.hostname;
+    } catch {
+      return tab.url ?? "(unknown)";
+    }
+  }
+  async function loadTabs() {
+    if (!chrome.tabs?.query) return;
+    const tabs = await chrome.tabs.query({});
+    const ownOrigin = `chrome-extension://${chrome.runtime.id}/`;
+    const panelUrl = `${ownOrigin}panel/panel.html`;
+    setAvailableTabs(tabs.filter((t) => t?.url && !t.url.startsWith(panelUrl) && (!t.url.startsWith("chrome-extension://") || t.url.startsWith(ownOrigin))));
+  }
+  async function checkActiveTab() {
+    if (!chrome.tabs?.query) return;
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    setCanAttach(!isInternalUrl(tab?.url));
+  }
+  reactExports.useEffect(() => {
+    loadTabs();
+    checkActiveTab();
+    if (!chrome.tabs?.onActivated) return;
+    const onActivated = (info) => {
+      setSelectedTabId(info.tabId);
+      checkActiveTab();
+    };
+    const onUpdated = (_tabId, changeInfo) => {
+      if (changeInfo.url) loadTabs();
+    };
+    chrome.tabs.onActivated.addListener(onActivated);
+    chrome.tabs.onUpdated.addListener(onUpdated);
+    return () => {
+      chrome.tabs.onActivated.removeListener(onActivated);
+      chrome.tabs.onUpdated.removeListener(onUpdated);
+    };
+  }, []);
+  async function doAttach(tabId) {
+    dispatch({ type: "ATTACH_START" });
+    const res = await attachToTab(tabId);
+    if (res.ok && res.url) {
+      dispatch({ type: "ATTACH_SUCCESS", url: res.url, tabId });
+      setSelectedTabId(null);
+    } else {
+      dispatch({ type: "ATTACH_FAIL" });
+      dispatch({ type: "ADD_LINE", line: { text: `Attach failed: ${res.error ?? "unknown error"}`, type: "error" } });
+    }
+  }
+  async function handleTabChange(tabId) {
+    const tab = availableTabs.find((t) => t.id === tabId);
+    setSelectedTabId(tabId);
+    chrome.tabs.update(tabId, { active: true }).catch((e) => console.debug("[pw-repl] tab activate:", e));
+    if (tab && isInternalUrl(tab.url)) {
+      dispatch({ type: "DETACH" });
+      return;
+    }
+    await doAttach(tabId);
+  }
+  async function handleAttach() {
+    const targetTabId = selectedTabId ?? attachedTabId;
+    if (targetTabId !== null) {
+      const tab2 = availableTabs.find((t) => t.id === targetTabId);
+      if (tab2 && isInternalUrl(tab2.url)) return;
+      await doAttach(targetTabId);
+      return;
+    }
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (!tab?.id || isInternalUrl(tab.url)) return;
+    await doAttach(tab.id);
+  }
+  function handleFileChange(event) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+      dispatch({ type: "EDIT_EDITOR_CONTENT", content: fileReader.result });
+      if (file.name.endsWith(".js")) dispatch({ type: "SET_EDITOR_MODE", mode: "js" });
+      else if (file.name.endsWith(".pw") || file.name.endsWith(".txt")) dispatch({ type: "SET_EDITOR_MODE", mode: "pw" });
+      fileInputRef.current.value = "";
+    };
+    fileReader.onerror = () => {
+      dispatch({ type: "ADD_LINE", line: { text: "Failed to read file", type: "error" } });
+    };
+    fileReader.readAsText(file);
+  }
+  function handleFileOpen() {
+    fileInputRef.current.click();
+  }
+  async function handleSave() {
+    const isJs = editorMode === "js";
+    const ext = isJs ? ".js" : ".pw";
+    const defaultName = `commands-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-")}${ext}`;
+    const opts = {
+      suggestedName: defaultName,
+      types: isJs ? [{ description: "JavaScript files", accept: { "text/javascript": [".js"] } }] : [{ description: "PW command files", accept: { "text/plain": [".pw"] } }]
+    };
+    try {
+      const fileHandle = await window.showSaveFilePicker(opts);
+      const writable = await fileHandle.createWritable();
+      await writable.write(editorContent);
+      await writable.close();
+    } catch (e) {
+      if (e instanceof Error && e.name !== "AbortError") {
+        dispatch({ type: "ADD_LINE", line: { text: "Save failed: " + e.message, type: "error" } });
+      }
+    }
+  }
+  async function runCommand(index, command) {
+    dispatch({ type: "SET_RUN_LINE", currentRunLine: index });
+    const result = await runAndDispatch(command, dispatch);
+    dispatch({ type: "SET_LINE_RESULT", index, result: result.isError ? "fail" : "pass" });
+  }
+  async function handleRun() {
+    cancelRunRef.current = false;
+    dispatch({ type: "RUN_START" });
+    if (editorMode === "js") {
+      await runJsScript(editorContent, dispatch);
+    } else {
+      for (let i = 0; i < lines.length; i++) {
+        if (cancelRunRef.current) break;
+        const trimmedValue = lines[i].trim();
+        if (!lines[i].startsWith("#") && trimmedValue) {
+          await runCommand(i, trimmedValue);
+        }
+      }
+      if (!cancelRunRef.current) {
+        dispatch({ type: "ADD_LINE", line: { text: "Run complete.", type: "info" } });
+      }
+    }
+    dispatch({ type: "RUN_STOP" });
+  }
+  function handleStop() {
+    cancelRunRef.current = true;
+    if (isStepDebugging) {
+      swTerminateExecution().catch((e) => console.warn("[debug] terminate failed:", e));
+      swDebugResume().catch((e) => console.warn("[debug] resume failed:", e));
+    }
+    dispatch({ type: "RUN_STOP" });
+  }
+  function findExecutableIndex(fromIndex) {
+    let executableIndex = -1;
+    for (let i = fromIndex; i < lines.length; i++) {
+      if (!lines[i].startsWith("#") && lines[i].trim()) {
+        executableIndex = i;
+        break;
+      }
+    }
+    return executableIndex;
+  }
+  async function handleDebug() {
+    dispatch({ type: "RUN_START", stepDebug: true });
+    await runJsScriptStep(editorContent, dispatch, breakPoints);
+    dispatch({ type: "RUN_STOP" });
+  }
+  async function handleStep() {
+    if (stepLine === -1) {
+      const nextStepLine2 = findExecutableIndex(0);
+      if (nextStepLine2 !== -1) dispatch({ type: "STEP_INIT", stepLine: nextStepLine2 });
+      return;
+    }
+    await runCommand(stepLine, lines[stepLine].trim());
+    const nextStepLine = findExecutableIndex(stepLine + 1);
+    dispatch({ type: "STEP_ADVANCE", stepLine: nextStepLine });
+  }
+  function isEditorEmpty() {
+    return editorContent.split("\n").every((line) => {
+      const trimmed = line.trim();
+      if (!trimmed) return true;
+      if (editorMode === "pw") return trimmed.startsWith("#");
+      return trimmed.startsWith("//") || trimmed.startsWith("/*");
+    });
+  }
+  reactExports.useEffect(() => {
+    if (!chrome.runtime?.onMessage) return;
+    const listener = (msg) => {
+      if (msg.type === "recorded-action") {
+        editorRef.current?.insertAtCursor(editorMode === "pw" ? msg.action.pw : msg.action.js);
+      }
+      if (msg.type === "recorded-fill-update") {
+        editorRef.current?.replaceLastInsert(editorMode === "pw" ? msg.action.pw : msg.action.js);
+      }
+    };
+    chrome.runtime.onMessage.addListener(listener);
+    return () => chrome.runtime.onMessage.removeListener(listener);
+  }, [editorMode]);
+  reactExports.useEffect(() => {
+    if (isRunning && isRecording) {
+      setIsRecording(false);
+      chrome.runtime.sendMessage({ type: "record-stop" }).catch((e) => console.debug("[pw-repl] record-stop:", e));
+    }
+  }, [isRunning]);
+  async function handleRecord() {
+    if (!chrome.tabs?.query) return;
+    if (isRecording) {
+      setIsRecording(false);
+      chrome.runtime.sendMessage({ type: "record-stop" }).catch((e) => console.debug("[pw-repl] record-stop:", e));
+      return;
+    }
+    let result;
+    try {
+      result = await chrome.runtime.sendMessage({ type: "record-start" });
+    } catch (e) {
+      dispatch({ type: "ADD_LINE", line: { text: `Recording failed: ${String(e)}`, type: "error" } });
+      return;
+    }
+    if (!result?.ok) {
+      dispatch({ type: "ADD_LINE", line: { text: `Recording failed: ${result?.error ?? "unknown error"}`, type: "error" } });
+      return;
+    }
+    setIsRecording(true);
+    if (result.url && result.url !== "about:blank" && !result.url.startsWith("chrome://") && isEditorEmpty()) {
+      const gotoCmd = editorMode === "js" ? `await page.goto(${JSON.stringify(result.url)});` : `goto "${result.url}"`;
+      editorRef.current?.insertAtCursor(gotoCmd);
+    }
+  }
+  async function handlePick() {
+    if (!chrome.tabs?.query) return;
+    if (isPicking) {
+      setIsPicking(false);
+      await chrome.runtime.sendMessage({ type: "pick-cancel" }).catch((e) => console.debug("[pw-repl] pick-cancel:", e));
+      return;
+    }
+    setIsPicking(true);
+    try {
+      const result = await chrome.runtime.sendMessage({ type: "pick" });
+      if (!result?.ok || !result.info) {
+        if (result?.error !== "cancelled")
+          dispatch({ type: "ADD_LINE", line: { text: `Pick failed: ${result?.error ?? "unknown error"}`, type: "error" } });
+        return;
+      }
+      const info = result.info;
+      const pickResult = buildPickResult(info, info.locator, info.ariaSnapshot);
+      if (info.ariaSnapshot)
+        pickResult.ariaSnapshot = info.ariaSnapshot;
+      dispatch({ type: "ADD_LINE", line: { text: "", type: "info", pickResult } });
+    } catch (e) {
+      dispatch({ type: "ADD_LINE", line: { text: `Pick failed: ${String(e)}`, type: "error" } });
+    } finally {
+      setIsPicking(false);
+    }
+  }
+  function handleDetach() {
+    dispatch({ type: "DETACH" });
+    chrome.runtime.sendMessage({ type: "detach" }).catch((e) => console.debug("[pw-repl] detach:", e));
+  }
+  function formatElapsed(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  }
+  reactExports.useEffect(() => {
+    chrome.runtime.sendMessage({ type: "video-state" }).then((r) => {
+      if (r?.recording && r.startTime) {
+        setIsVideoRecording(true);
+        videoStartTimeRef.current = r.startTime;
+        setVideoElapsed(Math.round((Date.now() - r.startTime) / 1e3));
+      }
+    }).catch(() => {
+    });
+  }, []);
+  reactExports.useEffect(() => {
+    if (!isVideoRecording) {
+      setVideoElapsed(0);
+      return;
+    }
+    const id = setInterval(() => {
+      setVideoElapsed(Math.round((Date.now() - videoStartTimeRef.current) / 1e3));
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [isVideoRecording]);
+  async function handleVideoRecord() {
+    if (isVideoRecording) {
+      const r2 = await chrome.runtime.sendMessage({ type: "video-stop" });
+      setIsVideoRecording(false);
+      if (r2?.ok && r2.blobUrl) {
+        dispatch({ type: "ADD_LINE", line: { text: "Video recorded", type: "info", video: r2.blobUrl, videoDuration: r2.duration, videoSize: r2.size } });
+      } else if (r2?.error !== "Not recording") {
+        dispatch({ type: "ADD_LINE", line: { text: `Video stop failed: ${r2?.error ?? "unknown"}`, type: "error" } });
+      }
+      return;
+    }
+    const r = await chrome.runtime.sendMessage({ type: "video-start" });
+    if (r?.ok) {
+      setIsVideoRecording(true);
+      videoStartTimeRef.current = Date.now();
+    } else if (r?.error === "Already recording") {
+      setIsVideoRecording(true);
+      videoStartTimeRef.current = Date.now();
+    } else {
+      dispatch({ type: "ADD_LINE", line: { text: `Video failed: ${r?.error ?? "unknown"}`, type: "error" } });
+    }
+  }
+  reactExports.useEffect(() => {
+    document.documentElement.classList.toggle("theme-dark", isDarkMode);
+    localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+  }, [isDarkMode]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "toolbar", className: "flex flex-wrap gap-1 justify-between items-center py-1 px-2 bg-(--bg-toolbar) border-b border-solid border-(--border-primary) shrink-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "toolbar-left", className: "flex flex-wrap gap-1 items-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "file",
+          accept: ".pw,.js,.txt",
+          ref: fileInputRef,
+          style: { display: "none" },
+          onChange: handleFileChange
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          "data-testid": "pick-btn",
+          className: isPicking ? "picking" : "",
+          title: isPicking ? "Stop picking" : "Pick element",
+          disabled: isRecording,
+          onClick: handlePick,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrosshairIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          id: "record-btn",
+          "data-testid": "record-btn",
+          className: isRecording ? "recording" : "",
+          title: isRecording ? "Stop recording" : "Start Recording",
+          disabled: isPicking || isRunning,
+          onClick: handleRecord,
+          children: isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(StopIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(RecordIcon, {})
+        }
+      ),
+      (isRunning || stepLine !== -1) && !isStepDebugging ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: "stop-run-btn", "data-testid": "stop-run-btn", title: "Stop", onClick: handleStop, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StopIcon, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: "run-btn", "data-testid": "run-btn", title: "Run script (Ctrl+Enter)", disabled: !editorContent.trim() || isStepDebugging, onClick: handleRun, children: "▶" }),
+      editorMode === "js" && !isRunning && stepLine === -1 && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: "debug-btn", "data-testid": "debug-btn", title: "Debug script", disabled: !editorContent.trim(), onClick: handleDebug, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BugIcon, {}) }),
+      editorMode === "pw" && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: "step-btn", "data-testid": "step-btn", title: "Step: run next line", disabled: !editorContent.trim() || isRunning, onClick: handleStep, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepForwardIcon, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-px h-4.5 bg-(--color-toolbar-sep) mx-1" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "mode-toggle", className: "inline-flex rounded border border-(--border-button) overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            "data-active": editorMode === "pw" ? "" : void 0,
+            onClick: () => {
+              loadSettings().then((s) => storeSettings({ ...s, languageMode: "pw" })).then(() => dispatch({ type: "SET_EDITOR_MODE", mode: "pw" }));
+            },
+            className: "px-1.5 py-0.5 text-[11px] border-0 rounded-none",
+            children: ".pw"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            "data-active": editorMode === "js" ? "" : void 0,
+            onClick: () => {
+              loadSettings().then((s) => storeSettings({ ...s, languageMode: "js" })).then(() => dispatch({ type: "SET_EDITOR_MODE", mode: "js" }));
+            },
+            className: "px-1.5 py-0.5 text-[11px] border-0 rounded-none",
+            children: "JS"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          id: "video-btn",
+          "data-testid": "video-btn",
+          className: isVideoRecording ? "video-recording" : "",
+          title: isVideoRecording ? `Stop video (${formatElapsed(videoElapsed)})` : "Record video",
+          onClick: handleVideoRecord,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ScreencastIcon, {}),
+            isVideoRecording && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-[10px] font-mono", children: formatElapsed(videoElapsed) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: "open-btn", title: "Open .pw file", onClick: handleFileOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpenIcon, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: "save-btn", title: "Save as .pw file", disabled: !editorContent.trim(), onClick: handleSave, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SaveIcon, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => setIsDarkMode((prev) => !prev), title: isDarkMode ? "Switch to light mode" : "Switch to dark mode", children: isDarkMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(SunIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(MoonIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "toolbar-right", className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "select",
+        {
+          value: selectedTabId ?? attachedTabId ?? "",
+          title: "Switch tab",
+          onFocus: loadTabs,
+          onChange: (e) => {
+            const tabId = Number(e.target.value);
+            if (tabId) handleTabChange(tabId);
+          },
+          children: [
+            !selectedTabId && !attachedTabId && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "— select tab —" }),
+            availableTabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: tab.id, children: getTabLabel(tab) }, tab.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          "data-testid": "attach-btn",
+          title: isAttaching ? "Connecting..." : attachedUrl ? `Detach from ${attachedUrl}` : "Attach to tab",
+          disabled: !attachedUrl && (isAttaching || !canAttach || availableTabs.some((t) => t.id === selectedTabId && isInternalUrl(t.url))),
+          onClick: attachedUrl ? handleDetach : handleAttach,
+          style: { color: isAttaching ? "var(--color-warning, #facc15)" : attachedUrl ? "var(--color-success)" : "var(--color-error)" },
+          children: attachedUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(UnplugIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(PlugIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+const basicNormalize = typeof String.prototype.normalize == "function" ? (x) => x.normalize("NFKD") : (x) => x;
+class SearchCursor {
+  /**
+  Create a text cursor. The query is the search string, `from` to
+  `to` provides the region to search.
+  
+  When `normalize` is given, it will be called, on both the query
+  string and the content it is matched against, before comparing.
+  You can, for example, create a case-insensitive search by
+  passing `s => s.toLowerCase()`.
+  
+  Text is always normalized with
+  [`.normalize("NFKD")`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize)
+  (when supported).
+  */
+  constructor(text, query, from = 0, to = text.length, normalize, test) {
+    this.test = test;
+    this.value = { from: 0, to: 0 };
+    this.done = false;
+    this.matches = [];
+    this.buffer = "";
+    this.bufferPos = 0;
+    this.iter = text.iterRange(from, to);
+    this.bufferStart = from;
+    this.normalize = normalize ? (x) => normalize(basicNormalize(x)) : basicNormalize;
+    this.query = this.normalize(query);
+  }
+  peek() {
+    if (this.bufferPos == this.buffer.length) {
+      this.bufferStart += this.buffer.length;
+      this.iter.next();
+      if (this.iter.done)
+        return -1;
+      this.bufferPos = 0;
+      this.buffer = this.iter.value;
+    }
+    return codePointAt(this.buffer, this.bufferPos);
+  }
+  /**
+  Look for the next match. Updates the iterator's
+  [`value`](https://codemirror.net/6/docs/ref/#search.SearchCursor.value) and
+  [`done`](https://codemirror.net/6/docs/ref/#search.SearchCursor.done) properties. Should be called
+  at least once before using the cursor.
+  */
+  next() {
+    while (this.matches.length)
+      this.matches.pop();
+    return this.nextOverlapping();
+  }
+  /**
+  The `next` method will ignore matches that partially overlap a
+  previous match. This method behaves like `next`, but includes
+  such matches.
+  */
+  nextOverlapping() {
+    for (; ; ) {
+      let next = this.peek();
+      if (next < 0) {
+        this.done = true;
+        return this;
+      }
+      let str = fromCodePoint(next), start = this.bufferStart + this.bufferPos;
+      this.bufferPos += codePointSize(next);
+      let norm = this.normalize(str);
+      if (norm.length)
+        for (let i = 0, pos = start; ; i++) {
+          let code = norm.charCodeAt(i);
+          let match = this.match(code, pos, this.bufferPos + this.bufferStart);
+          if (i == norm.length - 1) {
+            if (match) {
+              this.value = match;
+              return this;
+            }
+            break;
+          }
+          if (pos == start && i < str.length && str.charCodeAt(i) == code)
+            pos++;
+        }
+    }
+  }
+  match(code, pos, end) {
+    let match = null;
+    for (let i = 0; i < this.matches.length; i += 2) {
+      let index = this.matches[i], keep = false;
+      if (this.query.charCodeAt(index) == code) {
+        if (index == this.query.length - 1) {
+          match = { from: this.matches[i + 1], to: end };
+        } else {
+          this.matches[i]++;
+          keep = true;
+        }
+      }
+      if (!keep) {
+        this.matches.splice(i, 2);
+        i -= 2;
+      }
+    }
+    if (this.query.charCodeAt(0) == code) {
+      if (this.query.length == 1)
+        match = { from: pos, to: end };
+      else
+        this.matches.push(1, pos);
+    }
+    if (match && this.test && !this.test(match.from, match.to, this.buffer, this.bufferStart))
+      match = null;
+    return match;
+  }
+}
+if (typeof Symbol != "undefined")
+  SearchCursor.prototype[Symbol.iterator] = function() {
+    return this;
+  };
+const empty = { from: -1, to: -1, match: /* @__PURE__ */ /.*/.exec("") };
+const baseFlags = "gm" + (/x/.unicode == null ? "" : "u");
+class RegExpCursor {
+  /**
+  Create a cursor that will search the given range in the given
+  document. `query` should be the raw pattern (as you'd pass it to
+  `new RegExp`).
+  */
+  constructor(text, query, options, from = 0, to = text.length) {
+    this.text = text;
+    this.to = to;
+    this.curLine = "";
+    this.done = false;
+    this.value = empty;
+    if (/\\[sWDnr]|\n|\r|\[\^/.test(query))
+      return new MultilineRegExpCursor(text, query, options, from, to);
+    this.re = new RegExp(query, baseFlags + ((options === null || options === void 0 ? void 0 : options.ignoreCase) ? "i" : ""));
+    this.test = options === null || options === void 0 ? void 0 : options.test;
+    this.iter = text.iter();
+    let startLine = text.lineAt(from);
+    this.curLineStart = startLine.from;
+    this.matchPos = toCharEnd(text, from);
+    this.getLine(this.curLineStart);
+  }
+  getLine(skip) {
+    this.iter.next(skip);
+    if (this.iter.lineBreak) {
+      this.curLine = "";
+    } else {
+      this.curLine = this.iter.value;
+      if (this.curLineStart + this.curLine.length > this.to)
+        this.curLine = this.curLine.slice(0, this.to - this.curLineStart);
+      this.iter.next();
+    }
+  }
+  nextLine() {
+    this.curLineStart = this.curLineStart + this.curLine.length + 1;
+    if (this.curLineStart > this.to)
+      this.curLine = "";
+    else
+      this.getLine(0);
+  }
+  /**
+  Move to the next match, if there is one.
+  */
+  next() {
+    for (let off = this.matchPos - this.curLineStart; ; ) {
+      this.re.lastIndex = off;
+      let match = this.matchPos <= this.to && this.re.exec(this.curLine);
+      if (match) {
+        let from = this.curLineStart + match.index, to = from + match[0].length;
+        this.matchPos = toCharEnd(this.text, to + (from == to ? 1 : 0));
+        if (from == this.curLineStart + this.curLine.length)
+          this.nextLine();
+        if ((from < to || from > this.value.to) && (!this.test || this.test(from, to, match))) {
+          this.value = { from, to, match };
+          return this;
+        }
+        off = this.matchPos - this.curLineStart;
+      } else if (this.curLineStart + this.curLine.length < this.to) {
+        this.nextLine();
+        off = 0;
+      } else {
+        this.done = true;
+        return this;
+      }
+    }
+  }
+}
+const flattened = /* @__PURE__ */ new WeakMap();
+class FlattenedDoc {
+  constructor(from, text) {
+    this.from = from;
+    this.text = text;
+  }
+  get to() {
+    return this.from + this.text.length;
+  }
+  static get(doc, from, to) {
+    let cached = flattened.get(doc);
+    if (!cached || cached.from >= to || cached.to <= from) {
+      let flat = new FlattenedDoc(from, doc.sliceString(from, to));
+      flattened.set(doc, flat);
+      return flat;
+    }
+    if (cached.from == from && cached.to == to)
+      return cached;
+    let { text, from: cachedFrom } = cached;
+    if (cachedFrom > from) {
+      text = doc.sliceString(from, cachedFrom) + text;
+      cachedFrom = from;
+    }
+    if (cached.to < to)
+      text += doc.sliceString(cached.to, to);
+    flattened.set(doc, new FlattenedDoc(cachedFrom, text));
+    return new FlattenedDoc(from, text.slice(from - cachedFrom, to - cachedFrom));
+  }
+}
+class MultilineRegExpCursor {
+  constructor(text, query, options, from, to) {
+    this.text = text;
+    this.to = to;
+    this.done = false;
+    this.value = empty;
+    this.matchPos = toCharEnd(text, from);
+    this.re = new RegExp(query, baseFlags + ((options === null || options === void 0 ? void 0 : options.ignoreCase) ? "i" : ""));
+    this.test = options === null || options === void 0 ? void 0 : options.test;
+    this.flat = FlattenedDoc.get(text, from, this.chunkEnd(
+      from + 5e3
+      /* Chunk.Base */
+    ));
+  }
+  chunkEnd(pos) {
+    return pos >= this.to ? this.to : this.text.lineAt(pos).to;
+  }
+  next() {
+    for (; ; ) {
+      let off = this.re.lastIndex = this.matchPos - this.flat.from;
+      let match = this.re.exec(this.flat.text);
+      if (match && !match[0] && match.index == off) {
+        this.re.lastIndex = off + 1;
+        match = this.re.exec(this.flat.text);
+      }
+      if (match) {
+        let from = this.flat.from + match.index, to = from + match[0].length;
+        if ((this.flat.to >= this.to || match.index + match[0].length <= this.flat.text.length - 10) && (!this.test || this.test(from, to, match))) {
+          this.value = { from, to, match };
+          this.matchPos = toCharEnd(this.text, to + (from == to ? 1 : 0));
+          return this;
+        }
+      }
+      if (this.flat.to == this.to) {
+        this.done = true;
+        return this;
+      }
+      this.flat = FlattenedDoc.get(this.text, this.flat.from, this.chunkEnd(this.flat.from + this.flat.text.length * 2));
+    }
+  }
+}
+if (typeof Symbol != "undefined") {
+  RegExpCursor.prototype[Symbol.iterator] = MultilineRegExpCursor.prototype[Symbol.iterator] = function() {
+    return this;
+  };
+}
+function validRegExp(source) {
+  try {
+    new RegExp(source, baseFlags);
+    return true;
+  } catch (_a) {
+    return false;
+  }
+}
+function toCharEnd(text, pos) {
+  if (pos >= text.length)
+    return pos;
+  let line = text.lineAt(pos), next;
+  while (pos < line.to && (next = line.text.charCodeAt(pos - line.from)) >= 56320 && next < 57344)
+    pos++;
+  return pos;
+}
+const gotoLine = (view) => {
+  let { state } = view;
+  let line = String(state.doc.lineAt(view.state.selection.main.head).number);
+  let { close, result } = showDialog(view, {
+    label: state.phrase("Go to line"),
+    input: { type: "text", name: "line", value: line },
+    focus: true,
+    submitLabel: state.phrase("go")
+  });
+  result.then((form) => {
+    let match = form && /^([+-])?(\d+)?(:\d+)?(%)?$/.exec(form.elements["line"].value);
+    if (!match) {
+      view.dispatch({ effects: close });
+      return;
+    }
+    let startLine = state.doc.lineAt(state.selection.main.head);
+    let [, sign, ln, cl, percent] = match;
+    let col = cl ? +cl.slice(1) : 0;
+    let line2 = ln ? +ln : startLine.number;
+    if (ln && percent) {
+      let pc = line2 / 100;
+      if (sign)
+        pc = pc * (sign == "-" ? -1 : 1) + startLine.number / state.doc.lines;
+      line2 = Math.round(state.doc.lines * pc);
+    } else if (ln && sign) {
+      line2 = line2 * (sign == "-" ? -1 : 1) + startLine.number;
+    }
+    let docLine = state.doc.line(Math.max(1, Math.min(state.doc.lines, line2)));
+    let selection = EditorSelection.cursor(docLine.from + Math.max(0, Math.min(col, docLine.length)));
+    view.dispatch({
+      effects: [close, EditorView.scrollIntoView(selection.from, { y: "center" })],
+      selection
+    });
+  });
+  return true;
+};
+const selectWord = ({ state, dispatch }) => {
+  let { selection } = state;
+  let newSel = EditorSelection.create(selection.ranges.map((range) => state.wordAt(range.head) || EditorSelection.cursor(range.head)), selection.mainIndex);
+  if (newSel.eq(selection))
+    return false;
+  dispatch(state.update({ selection: newSel }));
+  return true;
+};
+function findNextOccurrence(state, query) {
+  let { main, ranges } = state.selection;
+  let word = state.wordAt(main.head), fullWord = word && word.from == main.from && word.to == main.to;
+  for (let cycled = false, cursor = new SearchCursor(state.doc, query, ranges[ranges.length - 1].to); ; ) {
+    cursor.next();
+    if (cursor.done) {
+      if (cycled)
+        return null;
+      cursor = new SearchCursor(state.doc, query, 0, Math.max(0, ranges[ranges.length - 1].from - 1));
+      cycled = true;
+    } else {
+      if (cycled && ranges.some((r) => r.from == cursor.value.from))
+        continue;
+      if (fullWord) {
+        let word2 = state.wordAt(cursor.value.from);
+        if (!word2 || word2.from != cursor.value.from || word2.to != cursor.value.to)
+          continue;
+      }
+      return cursor.value;
+    }
+  }
+}
+const selectNextOccurrence = ({ state, dispatch }) => {
+  let { ranges } = state.selection;
+  if (ranges.some((sel) => sel.from === sel.to))
+    return selectWord({ state, dispatch });
+  let searchedText = state.sliceDoc(ranges[0].from, ranges[0].to);
+  if (state.selection.ranges.some((r) => state.sliceDoc(r.from, r.to) != searchedText))
+    return false;
+  let range = findNextOccurrence(state, searchedText);
+  if (!range)
+    return false;
+  dispatch(state.update({
+    selection: state.selection.addRange(EditorSelection.range(range.from, range.to), false),
+    effects: EditorView.scrollIntoView(range.to)
+  }));
+  return true;
+};
+const searchConfigFacet = /* @__PURE__ */ Facet.define({
+  combine(configs) {
+    return combineConfig(configs, {
+      top: false,
+      caseSensitive: false,
+      literal: false,
+      regexp: false,
+      wholeWord: false,
+      createPanel: (view) => new SearchPanel(view),
+      scrollToMatch: (range) => EditorView.scrollIntoView(range)
+    });
+  }
+});
+function search(config) {
+  return searchExtensions;
+}
+class SearchQuery {
+  /**
+  Create a query object.
+  */
+  constructor(config) {
+    this.search = config.search;
+    this.caseSensitive = !!config.caseSensitive;
+    this.literal = !!config.literal;
+    this.regexp = !!config.regexp;
+    this.replace = config.replace || "";
+    this.valid = !!this.search && (!this.regexp || validRegExp(this.search));
+    this.unquoted = this.unquote(this.search);
+    this.wholeWord = !!config.wholeWord;
+    this.test = config.test;
+  }
+  /**
+  @internal
+  */
+  unquote(text) {
+    return this.literal ? text : text.replace(/\\([nrt\\])/g, (_, ch) => ch == "n" ? "\n" : ch == "r" ? "\r" : ch == "t" ? "	" : "\\");
+  }
+  /**
+  Compare this query to another query.
+  */
+  eq(other) {
+    return this.search == other.search && this.replace == other.replace && this.caseSensitive == other.caseSensitive && this.regexp == other.regexp && this.wholeWord == other.wholeWord && this.test == other.test;
+  }
+  /**
+  @internal
+  */
+  create() {
+    return this.regexp ? new RegExpQuery(this) : new StringQuery(this);
+  }
+  /**
+  Get a search cursor for this query, searching through the given
+  range in the given state.
+  */
+  getCursor(state, from = 0, to) {
+    let st = state.doc ? state : EditorState.create({ doc: state });
+    if (to == null)
+      to = st.doc.length;
+    return this.regexp ? regexpCursor(this, st, from, to) : stringCursor(this, st, from, to);
+  }
+}
+class QueryType {
+  constructor(spec) {
+    this.spec = spec;
+  }
+}
+function wrapStringTest(test, state, inner) {
+  return (from, to, buffer, bufferPos) => {
+    if (inner && !inner(from, to, buffer, bufferPos))
+      return false;
+    let match = from >= bufferPos && to <= bufferPos + buffer.length ? buffer.slice(from - bufferPos, to - bufferPos) : state.doc.sliceString(from, to);
+    return test(match, state, from, to);
+  };
+}
+function stringCursor(spec, state, from, to) {
+  let test;
+  if (spec.wholeWord)
+    test = stringWordTest(state.doc, state.charCategorizer(state.selection.main.head));
+  if (spec.test)
+    test = wrapStringTest(spec.test, state, test);
+  return new SearchCursor(state.doc, spec.unquoted, from, to, spec.caseSensitive ? void 0 : (x) => x.toLowerCase(), test);
+}
+function stringWordTest(doc, categorizer) {
+  return (from, to, buf, bufPos) => {
+    if (bufPos > from || bufPos + buf.length < to) {
+      bufPos = Math.max(0, from - 2);
+      buf = doc.sliceString(bufPos, Math.min(doc.length, to + 2));
+    }
+    return (categorizer(charBefore(buf, from - bufPos)) != CharCategory.Word || categorizer(charAfter(buf, from - bufPos)) != CharCategory.Word) && (categorizer(charAfter(buf, to - bufPos)) != CharCategory.Word || categorizer(charBefore(buf, to - bufPos)) != CharCategory.Word);
+  };
+}
+class StringQuery extends QueryType {
+  constructor(spec) {
+    super(spec);
+  }
+  nextMatch(state, curFrom, curTo) {
+    let cursor = stringCursor(this.spec, state, curTo, state.doc.length).nextOverlapping();
+    if (cursor.done) {
+      let end = Math.min(state.doc.length, curFrom + this.spec.unquoted.length);
+      cursor = stringCursor(this.spec, state, 0, end).nextOverlapping();
+    }
+    return cursor.done || cursor.value.from == curFrom && cursor.value.to == curTo ? null : cursor.value;
+  }
+  // Searching in reverse is, rather than implementing an inverted search
+  // cursor, done by scanning chunk after chunk forward.
+  prevMatchInRange(state, from, to) {
+    for (let pos = to; ; ) {
+      let start = Math.max(from, pos - 1e4 - this.spec.unquoted.length);
+      let cursor = stringCursor(this.spec, state, start, pos), range = null;
+      while (!cursor.nextOverlapping().done)
+        range = cursor.value;
+      if (range)
+        return range;
+      if (start == from)
+        return null;
+      pos -= 1e4;
+    }
+  }
+  prevMatch(state, curFrom, curTo) {
+    let found = this.prevMatchInRange(state, 0, curFrom);
+    if (!found)
+      found = this.prevMatchInRange(state, Math.max(0, curTo - this.spec.unquoted.length), state.doc.length);
+    return found && (found.from != curFrom || found.to != curTo) ? found : null;
+  }
+  getReplacement(_result) {
+    return this.spec.unquote(this.spec.replace);
+  }
+  matchAll(state, limit) {
+    let cursor = stringCursor(this.spec, state, 0, state.doc.length), ranges = [];
+    while (!cursor.next().done) {
+      if (ranges.length >= limit)
+        return null;
+      ranges.push(cursor.value);
+    }
+    return ranges;
+  }
+  highlight(state, from, to, add) {
+    let cursor = stringCursor(this.spec, state, Math.max(0, from - this.spec.unquoted.length), Math.min(to + this.spec.unquoted.length, state.doc.length));
+    while (!cursor.next().done)
+      add(cursor.value.from, cursor.value.to);
+  }
+}
+function wrapRegexpTest(test, state, inner) {
+  return (from, to, match) => {
+    return (!inner || inner(from, to, match)) && test(match[0], state, from, to);
+  };
+}
+function regexpCursor(spec, state, from, to) {
+  let test;
+  if (spec.wholeWord)
+    test = regexpWordTest(state.charCategorizer(state.selection.main.head));
+  if (spec.test)
+    test = wrapRegexpTest(spec.test, state, test);
+  return new RegExpCursor(state.doc, spec.search, { ignoreCase: !spec.caseSensitive, test }, from, to);
+}
+function charBefore(str, index) {
+  return str.slice(findClusterBreak(str, index, false), index);
+}
+function charAfter(str, index) {
+  return str.slice(index, findClusterBreak(str, index));
+}
+function regexpWordTest(categorizer) {
+  return (_from, _to, match) => !match[0].length || (categorizer(charBefore(match.input, match.index)) != CharCategory.Word || categorizer(charAfter(match.input, match.index)) != CharCategory.Word) && (categorizer(charAfter(match.input, match.index + match[0].length)) != CharCategory.Word || categorizer(charBefore(match.input, match.index + match[0].length)) != CharCategory.Word);
+}
+class RegExpQuery extends QueryType {
+  nextMatch(state, curFrom, curTo) {
+    let cursor = regexpCursor(this.spec, state, curTo, state.doc.length).next();
+    if (cursor.done)
+      cursor = regexpCursor(this.spec, state, 0, curFrom).next();
+    return cursor.done ? null : cursor.value;
+  }
+  prevMatchInRange(state, from, to) {
+    for (let size = 1; ; size++) {
+      let start = Math.max(
+        from,
+        to - size * 1e4
+        /* FindPrev.ChunkSize */
+      );
+      let cursor = regexpCursor(this.spec, state, start, to), range = null;
+      while (!cursor.next().done)
+        range = cursor.value;
+      if (range && (start == from || range.from > start + 10))
+        return range;
+      if (start == from)
+        return null;
+    }
+  }
+  prevMatch(state, curFrom, curTo) {
+    return this.prevMatchInRange(state, 0, curFrom) || this.prevMatchInRange(state, curTo, state.doc.length);
+  }
+  getReplacement(result) {
+    return this.spec.unquote(this.spec.replace).replace(/\$([$&]|\d+)/g, (m, i) => {
+      if (i == "&")
+        return result.match[0];
+      if (i == "$")
+        return "$";
+      for (let l = i.length; l > 0; l--) {
+        let n = +i.slice(0, l);
+        if (n > 0 && n < result.match.length)
+          return result.match[n] + i.slice(l);
+      }
+      return m;
+    });
+  }
+  matchAll(state, limit) {
+    let cursor = regexpCursor(this.spec, state, 0, state.doc.length), ranges = [];
+    while (!cursor.next().done) {
+      if (ranges.length >= limit)
+        return null;
+      ranges.push(cursor.value);
+    }
+    return ranges;
+  }
+  highlight(state, from, to, add) {
+    let cursor = regexpCursor(this.spec, state, Math.max(
+      0,
+      from - 250
+      /* RegExp.HighlightMargin */
+    ), Math.min(to + 250, state.doc.length));
+    while (!cursor.next().done)
+      add(cursor.value.from, cursor.value.to);
+  }
+}
+const setSearchQuery = /* @__PURE__ */ StateEffect.define();
+const togglePanel = /* @__PURE__ */ StateEffect.define();
+const searchState = /* @__PURE__ */ StateField.define({
+  create(state) {
+    return new SearchState(defaultQuery(state).create(), null);
+  },
+  update(value, tr) {
+    for (let effect of tr.effects) {
+      if (effect.is(setSearchQuery))
+        value = new SearchState(effect.value.create(), value.panel);
+      else if (effect.is(togglePanel))
+        value = new SearchState(value.query, effect.value ? createSearchPanel : null);
+    }
+    return value;
+  },
+  provide: (f) => showPanel.from(f, (val) => val.panel)
+});
+class SearchState {
+  constructor(query, panel) {
+    this.query = query;
+    this.panel = panel;
+  }
+}
+const matchMark = /* @__PURE__ */ Decoration.mark({ class: "cm-searchMatch" }), selectedMatchMark = /* @__PURE__ */ Decoration.mark({ class: "cm-searchMatch cm-searchMatch-selected" });
+const searchHighlighter = /* @__PURE__ */ ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.view = view;
+    this.decorations = this.highlight(view.state.field(searchState));
+  }
+  update(update) {
+    let state = update.state.field(searchState);
+    if (state != update.startState.field(searchState) || update.docChanged || update.selectionSet || update.viewportChanged)
+      this.decorations = this.highlight(state);
+  }
+  highlight({ query, panel }) {
+    if (!panel || !query.spec.valid)
+      return Decoration.none;
+    let { view } = this;
+    let builder = new RangeSetBuilder();
+    for (let i = 0, ranges = view.visibleRanges, l = ranges.length; i < l; i++) {
+      let { from, to } = ranges[i];
+      while (i < l - 1 && to > ranges[i + 1].from - 2 * 250)
+        to = ranges[++i].to;
+      query.highlight(view.state, from, to, (from2, to2) => {
+        let selected = view.state.selection.ranges.some((r) => r.from == from2 && r.to == to2);
+        builder.add(from2, to2, selected ? selectedMatchMark : matchMark);
+      });
+    }
+    return builder.finish();
+  }
+}, {
+  decorations: (v) => v.decorations
+});
+function searchCommand(f) {
+  return (view) => {
+    let state = view.state.field(searchState, false);
+    return state && state.query.spec.valid ? f(view, state) : openSearchPanel(view);
+  };
+}
+const findNext = /* @__PURE__ */ searchCommand((view, { query }) => {
+  let { to } = view.state.selection.main;
+  let next = query.nextMatch(view.state, to, to);
+  if (!next)
+    return false;
+  let selection = EditorSelection.single(next.from, next.to);
+  let config = view.state.facet(searchConfigFacet);
+  view.dispatch({
+    selection,
+    effects: [announceMatch(view, next), config.scrollToMatch(selection.main, view)],
+    userEvent: "select.search"
+  });
+  selectSearchInput(view);
+  return true;
+});
+const findPrevious = /* @__PURE__ */ searchCommand((view, { query }) => {
+  let { state } = view, { from } = state.selection.main;
+  let prev = query.prevMatch(state, from, from);
+  if (!prev)
+    return false;
+  let selection = EditorSelection.single(prev.from, prev.to);
+  let config = view.state.facet(searchConfigFacet);
+  view.dispatch({
+    selection,
+    effects: [announceMatch(view, prev), config.scrollToMatch(selection.main, view)],
+    userEvent: "select.search"
+  });
+  selectSearchInput(view);
+  return true;
+});
+const selectMatches = /* @__PURE__ */ searchCommand((view, { query }) => {
+  let ranges = query.matchAll(view.state, 1e3);
+  if (!ranges || !ranges.length)
+    return false;
+  view.dispatch({
+    selection: EditorSelection.create(ranges.map((r) => EditorSelection.range(r.from, r.to))),
+    userEvent: "select.search.matches"
+  });
+  return true;
+});
+const selectSelectionMatches = ({ state, dispatch }) => {
+  let sel = state.selection;
+  if (sel.ranges.length > 1 || sel.main.empty)
+    return false;
+  let { from, to } = sel.main;
+  let ranges = [], main = 0;
+  for (let cur = new SearchCursor(state.doc, state.sliceDoc(from, to)); !cur.next().done; ) {
+    if (ranges.length > 1e3)
+      return false;
+    if (cur.value.from == from)
+      main = ranges.length;
+    ranges.push(EditorSelection.range(cur.value.from, cur.value.to));
+  }
+  dispatch(state.update({
+    selection: EditorSelection.create(ranges, main),
+    userEvent: "select.search.matches"
+  }));
+  return true;
+};
+const replaceNext = /* @__PURE__ */ searchCommand((view, { query }) => {
+  let { state } = view, { from, to } = state.selection.main;
+  if (state.readOnly)
+    return false;
+  let match = query.nextMatch(state, from, from);
+  if (!match)
+    return false;
+  let next = match;
+  let changes = [], selection, replacement;
+  let effects = [];
+  if (next.from == from && next.to == to) {
+    replacement = state.toText(query.getReplacement(next));
+    changes.push({ from: next.from, to: next.to, insert: replacement });
+    next = query.nextMatch(state, next.from, next.to);
+    effects.push(EditorView.announce.of(state.phrase("replaced match on line $", state.doc.lineAt(from).number) + "."));
+  }
+  let changeSet = view.state.changes(changes);
+  if (next) {
+    selection = EditorSelection.single(next.from, next.to).map(changeSet);
+    effects.push(announceMatch(view, next));
+    effects.push(state.facet(searchConfigFacet).scrollToMatch(selection.main, view));
+  }
+  view.dispatch({
+    changes: changeSet,
+    selection,
+    effects,
+    userEvent: "input.replace"
+  });
+  return true;
+});
+const replaceAll = /* @__PURE__ */ searchCommand((view, { query }) => {
+  if (view.state.readOnly)
+    return false;
+  let changes = query.matchAll(view.state, 1e9).map((match) => {
+    let { from, to } = match;
+    return { from, to, insert: query.getReplacement(match) };
+  });
+  if (!changes.length)
+    return false;
+  let announceText = view.state.phrase("replaced $ matches", changes.length) + ".";
+  view.dispatch({
+    changes,
+    effects: EditorView.announce.of(announceText),
+    userEvent: "input.replace.all"
+  });
+  return true;
+});
+function createSearchPanel(view) {
+  return view.state.facet(searchConfigFacet).createPanel(view);
+}
+function defaultQuery(state, fallback) {
+  var _a, _b, _c, _d, _e;
+  let sel = state.selection.main;
+  let selText = sel.empty || sel.to > sel.from + 100 ? "" : state.sliceDoc(sel.from, sel.to);
+  if (fallback && !selText)
+    return fallback;
+  let config = state.facet(searchConfigFacet);
+  return new SearchQuery({
+    search: ((_a = fallback === null || fallback === void 0 ? void 0 : fallback.literal) !== null && _a !== void 0 ? _a : config.literal) ? selText : selText.replace(/\n/g, "\\n"),
+    caseSensitive: (_b = fallback === null || fallback === void 0 ? void 0 : fallback.caseSensitive) !== null && _b !== void 0 ? _b : config.caseSensitive,
+    literal: (_c = fallback === null || fallback === void 0 ? void 0 : fallback.literal) !== null && _c !== void 0 ? _c : config.literal,
+    regexp: (_d = fallback === null || fallback === void 0 ? void 0 : fallback.regexp) !== null && _d !== void 0 ? _d : config.regexp,
+    wholeWord: (_e = fallback === null || fallback === void 0 ? void 0 : fallback.wholeWord) !== null && _e !== void 0 ? _e : config.wholeWord
+  });
+}
+function getSearchInput(view) {
+  let panel = getPanel(view, createSearchPanel);
+  return panel && panel.dom.querySelector("[main-field]");
+}
+function selectSearchInput(view) {
+  let input = getSearchInput(view);
+  if (input && input == view.root.activeElement)
+    input.select();
+}
+const openSearchPanel = (view) => {
+  let state = view.state.field(searchState, false);
+  if (state && state.panel) {
+    let searchInput = getSearchInput(view);
+    if (searchInput && searchInput != view.root.activeElement) {
+      let query = defaultQuery(view.state, state.query.spec);
+      if (query.valid)
+        view.dispatch({ effects: setSearchQuery.of(query) });
+      searchInput.focus();
+      searchInput.select();
+    }
+  } else {
+    view.dispatch({ effects: [
+      togglePanel.of(true),
+      state ? setSearchQuery.of(defaultQuery(view.state, state.query.spec)) : StateEffect.appendConfig.of(searchExtensions)
+    ] });
+  }
+  return true;
+};
+const closeSearchPanel = (view) => {
+  let state = view.state.field(searchState, false);
+  if (!state || !state.panel)
+    return false;
+  let panel = getPanel(view, createSearchPanel);
+  if (panel && panel.dom.contains(view.root.activeElement))
+    view.focus();
+  view.dispatch({ effects: togglePanel.of(false) });
+  return true;
+};
+const searchKeymap = [
+  { key: "Mod-f", run: openSearchPanel, scope: "editor search-panel" },
+  { key: "F3", run: findNext, shift: findPrevious, scope: "editor search-panel", preventDefault: true },
+  { key: "Mod-g", run: findNext, shift: findPrevious, scope: "editor search-panel", preventDefault: true },
+  { key: "Escape", run: closeSearchPanel, scope: "editor search-panel" },
+  { key: "Mod-Shift-l", run: selectSelectionMatches },
+  { key: "Mod-Alt-g", run: gotoLine },
+  { key: "Mod-d", run: selectNextOccurrence, preventDefault: true }
+];
+class SearchPanel {
+  constructor(view) {
+    this.view = view;
+    let query = this.query = view.state.field(searchState).query.spec;
+    this.commit = this.commit.bind(this);
+    this.searchField = crelt("input", {
+      value: query.search,
+      placeholder: phrase(view, "Find"),
+      "aria-label": phrase(view, "Find"),
+      class: "cm-textfield",
+      name: "search",
+      form: "",
+      "main-field": "true",
+      onchange: this.commit,
+      onkeyup: this.commit
+    });
+    this.replaceField = crelt("input", {
+      value: query.replace,
+      placeholder: phrase(view, "Replace"),
+      "aria-label": phrase(view, "Replace"),
+      class: "cm-textfield",
+      name: "replace",
+      form: "",
+      onchange: this.commit,
+      onkeyup: this.commit
+    });
+    this.caseField = crelt("input", {
+      type: "checkbox",
+      name: "case",
+      form: "",
+      checked: query.caseSensitive,
+      onchange: this.commit
+    });
+    this.reField = crelt("input", {
+      type: "checkbox",
+      name: "re",
+      form: "",
+      checked: query.regexp,
+      onchange: this.commit
+    });
+    this.wordField = crelt("input", {
+      type: "checkbox",
+      name: "word",
+      form: "",
+      checked: query.wholeWord,
+      onchange: this.commit
+    });
+    function button(name, onclick, content) {
+      return crelt("button", { class: "cm-button", name, onclick, type: "button" }, content);
+    }
+    this.dom = crelt("div", { onkeydown: (e) => this.keydown(e), class: "cm-search" }, [
+      this.searchField,
+      button("next", () => findNext(view), [phrase(view, "next")]),
+      button("prev", () => findPrevious(view), [phrase(view, "previous")]),
+      button("select", () => selectMatches(view), [phrase(view, "all")]),
+      crelt("label", null, [this.caseField, phrase(view, "match case")]),
+      crelt("label", null, [this.reField, phrase(view, "regexp")]),
+      crelt("label", null, [this.wordField, phrase(view, "by word")]),
+      ...view.state.readOnly ? [] : [
+        crelt("br"),
+        this.replaceField,
+        button("replace", () => replaceNext(view), [phrase(view, "replace")]),
+        button("replaceAll", () => replaceAll(view), [phrase(view, "replace all")])
+      ],
+      crelt("button", {
+        name: "close",
+        onclick: () => closeSearchPanel(view),
+        "aria-label": phrase(view, "close"),
+        type: "button"
+      }, ["×"])
+    ]);
+  }
+  commit() {
+    let query = new SearchQuery({
+      search: this.searchField.value,
+      caseSensitive: this.caseField.checked,
+      regexp: this.reField.checked,
+      wholeWord: this.wordField.checked,
+      replace: this.replaceField.value
+    });
+    if (!query.eq(this.query)) {
+      this.query = query;
+      this.view.dispatch({ effects: setSearchQuery.of(query) });
+    }
+  }
+  keydown(e) {
+    if (runScopeHandlers(this.view, e, "search-panel")) {
+      e.preventDefault();
+    } else if (e.keyCode == 13 && e.target == this.searchField) {
+      e.preventDefault();
+      (e.shiftKey ? findPrevious : findNext)(this.view);
+    } else if (e.keyCode == 13 && e.target == this.replaceField) {
+      e.preventDefault();
+      replaceNext(this.view);
+    }
+  }
+  update(update) {
+    for (let tr of update.transactions)
+      for (let effect of tr.effects) {
+        if (effect.is(setSearchQuery) && !effect.value.eq(this.query))
+          this.setQuery(effect.value);
+      }
+  }
+  setQuery(query) {
+    this.query = query;
+    this.searchField.value = query.search;
+    this.replaceField.value = query.replace;
+    this.caseField.checked = query.caseSensitive;
+    this.reField.checked = query.regexp;
+    this.wordField.checked = query.wholeWord;
+  }
+  mount() {
+    this.searchField.select();
+  }
+  get pos() {
+    return 80;
+  }
+  get top() {
+    return this.view.state.facet(searchConfigFacet).top;
+  }
+}
+function phrase(view, phrase2) {
+  return view.state.phrase(phrase2);
+}
+const AnnounceMargin = 30;
+const Break = /[\s\.,:;?!]/;
+function announceMatch(view, { from, to }) {
+  let line = view.state.doc.lineAt(from), lineEnd = view.state.doc.lineAt(to).to;
+  let start = Math.max(line.from, from - AnnounceMargin), end = Math.min(lineEnd, to + AnnounceMargin);
+  let text = view.state.sliceDoc(start, end);
+  if (start != line.from) {
+    for (let i = 0; i < AnnounceMargin; i++)
+      if (!Break.test(text[i + 1]) && Break.test(text[i])) {
+        text = text.slice(i);
+        break;
+      }
+  }
+  if (end != lineEnd) {
+    for (let i = text.length - 1; i > text.length - AnnounceMargin; i--)
+      if (!Break.test(text[i - 1]) && Break.test(text[i])) {
+        text = text.slice(0, i);
+        break;
+      }
+  }
+  return EditorView.announce.of(`${view.state.phrase("current match")}. ${text} ${view.state.phrase("on line")} ${line.number}.`);
+}
+const baseTheme = /* @__PURE__ */ EditorView.baseTheme({
+  ".cm-panel.cm-search": {
+    padding: "2px 6px 4px",
+    position: "relative",
+    "& [name=close]": {
+      position: "absolute",
+      top: "0",
+      right: "4px",
+      backgroundColor: "inherit",
+      border: "none",
+      font: "inherit",
+      padding: 0,
+      margin: 0
+    },
+    "& input, & button, & label": {
+      margin: ".2em .6em .2em 0"
+    },
+    "& input[type=checkbox]": {
+      marginRight: ".2em"
+    },
+    "& label": {
+      fontSize: "80%",
+      whiteSpace: "pre"
+    }
+  },
+  "&light .cm-searchMatch": { backgroundColor: "#ffff0054" },
+  "&dark .cm-searchMatch": { backgroundColor: "#00ffff8a" },
+  "&light .cm-searchMatch-selected": { backgroundColor: "#ff6a0054" },
+  "&dark .cm-searchMatch-selected": { backgroundColor: "#ff00ff8a" }
+});
+const searchExtensions = [
+  searchState,
+  /* @__PURE__ */ Prec.low(searchHighlighter),
+  baseTheme
+];
+const COMMANDS = new Set(COMMAND_NAMES);
+function token(stream, state) {
+  if (stream.sol()) state.commandSeen = false;
+  if (stream.eatSpace()) return null;
+  if (!state.commandSeen && stream.peek() === "#") {
+    stream.skipToEnd();
+    return "comment";
+  }
+  if (!state.commandSeen) {
+    const word = stream.match(/^[\w-]+/);
+    if (word) {
+      state.commandSeen = true;
+      if (COMMANDS.has(word[0])) return "keyword";
+    }
+    return null;
+  }
+  const ch = stream.peek();
+  if (ch === '"' || ch === "'") {
+    const quote = stream.next();
+    while (!stream.eol()) {
+      const c = stream.next();
+      if (c === "\\") stream.next();
+      else if (c === quote) break;
+    }
+    return "string";
+  }
+  if (stream.match(/^--[\w-]+/)) return "attributeName";
+  if (stream.match(/^https?:\/\/\S+/)) return "url";
+  stream.next();
+  return null;
+}
+const pwLanguage = StreamLanguage.define({
+  startState: () => ({ commandSeen: false }),
+  token
+});
+const pwHighlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: "var(--color-command)" },
+  { tag: tags.comment, color: "var(--color-comment)", fontStyle: "italic" },
+  { tag: tags.string, color: "var(--color-string)" },
+  { tag: tags.attributeName, color: "var(--color-flag)" },
+  { tag: tags.url, color: "var(--color-url)", textDecoration: "underline" }
+]);
+const pwSyntax = [
+  pwLanguage,
+  syntaxHighlighting(pwHighlightStyle)
+];
+const pwTheme = EditorView.theme({
+  "&": {
+    backgroundColor: "var(--bg-editor)",
+    color: "var(--text-default)",
+    height: "100%",
+    fontSize: "13px",
+    fontFamily: '"Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace'
+  },
+  ".cm-content": {
+    // the editable area
+    caretColor: "var(--color-caret)",
+    lineHeight: "18px",
+    padding: "8px 0"
+  },
+  ".cm-cursor": {
+    // blinking cursor
+    borderLeftColor: "var(--color-caret)"
+  },
+  "&:not(.cm-focused) .cm-cursorLayer": {
+    // keep cursor visible when unfocused (e.g. during recording)
+    visibility: "visible",
+    animation: "none"
+  },
+  ".cm-gutters": {
+    // line number column
+    backgroundColor: "var(--bg-editor)",
+    color: "var(--text-line-numbers)",
+    borderRight: "1px solid var(--border-primary)"
+  },
+  ".cm-activeLineGutter": {
+    // gutter on active line
+    backgroundColor: "var(--bg-line-highlight)"
+  },
+  ".cm-activeLine": {
+    // active line background
+    backgroundColor: "var(--bg-line-highlight)"
+  },
+  "&.cm-focused": {
+    // remove default focus outline
+    outline: "none"
+  },
+  ".cm-scroller": {
+    // scrollable container
+    overflow: "auto"
+  },
+  ".cm-run-line": {
+    background: "var(--bg-run-line)"
+  },
+  ".cm-tooltip-autocomplete": {
+    backgroundColor: "var(--bg-toolbar)",
+    border: "1px solid var(--border-primary)",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
+  },
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {
+    backgroundColor: "var(--bg-button)"
+  },
+  ".cm-breakpoint-gutter": { width: "16px" },
+  ".cm-breakpoint-gutter .cm-gutterElement": { cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" },
+  ".cm-inline-values": {
+    color: "var(--color-inline-value)",
+    fontStyle: "italic",
+    opacity: "0.7",
+    pointerEvents: "none"
+  }
+});
+const setRunLineEffect = StateEffect.define();
+const setLineResultsEffect = StateEffect.define();
+const toggleBreakpointEffect = StateEffect.define();
+const setInlineValuesEffect = StateEffect.define();
+const runLineField = StateField.define({
+  create: () => -1,
+  update(value, tr) {
+    for (const e of tr.effects) {
+      if (e.is(setRunLineEffect)) return e.value;
+    }
+    return value;
+  }
+});
+const lineResultsField = StateField.define({
+  create: () => [],
+  update(value, tr) {
+    for (const e of tr.effects) {
+      if (e.is(setLineResultsEffect)) return e.value;
+    }
+    return value;
+  }
+});
+const breakpointField = StateField.define({
+  create: () => /* @__PURE__ */ new Set(),
+  update(value, tr) {
+    let set = value;
+    if (tr.docChanged) {
+      const newSet = /* @__PURE__ */ new Set();
+      for (const bp of set) {
+        if (bp >= tr.startState.doc.lines) continue;
+        const line = tr.startState.doc.line(bp + 1);
+        const mapped = tr.changes.mapPos(line.from, 1);
+        if (mapped <= tr.newDoc.length) {
+          newSet.add(tr.newDoc.lineAt(mapped).number - 1);
+        }
+      }
+      set = newSet;
+    }
+    for (const e of tr.effects) {
+      if (e.is(toggleBreakpointEffect)) {
+        const next = new Set(set);
+        if (next.has(e.value)) next.delete(e.value);
+        else next.add(e.value);
+        set = next;
+      }
+    }
+    return set;
+  }
+});
+const inlineValuesField = StateField.define({
+  create: () => /* @__PURE__ */ new Map(),
+  update(value, tr) {
+    for (const e of tr.effects) {
+      if (e.is(setInlineValuesEffect)) return e.value;
+    }
+    return value;
+  }
+});
+const runLineHighlight = EditorView.decorations.compute(
+  [runLineField],
+  (state) => {
+    const lineNum = state.field(runLineField);
+    if (lineNum < 0 || lineNum >= state.doc.lines) return Decoration.none;
+    const line = state.doc.line(lineNum + 1);
+    return Decoration.set([
+      Decoration.line({ class: "cm-run-line" }).range(line.from)
+    ]);
+  }
+);
+const inlineValuesDecoration = EditorView.decorations.compute(
+  [inlineValuesField],
+  (state) => {
+    const values = state.field(inlineValuesField);
+    if (values.size === 0) return Decoration.none;
+    const decorations = [];
+    for (const [lineNum, text] of values) {
+      if (lineNum < 0 || lineNum >= state.doc.lines) continue;
+      const line = state.doc.line(lineNum + 1);
+      decorations.push(
+        Decoration.widget({
+          widget: new InlineValueWidget(text),
+          side: 1
+        }).range(line.to)
+      );
+    }
+    return Decoration.set(decorations, true);
+  }
+);
+class ResultMarker extends GutterMarker {
+  constructor(result) {
+    super();
+    this.result = result;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.textContent = this.result === "pass" ? "✓" : "✗";
+    span.style.color = this.result === "pass" ? "var(--color-line-pass)" : "var(--color-line-fail)";
+    return span;
+  }
+}
+class BreakpointMarker extends GutterMarker {
+  toDOM() {
+    const dot = document.createElement("span");
+    dot.dataset.testid = "breakpoint-marker";
+    dot.style.cssText = "width:10px;height:10px;border-radius:50%;background:var(--color-breakpoint);display:inline-block;";
+    return dot;
+  }
+}
+class InlineValueWidget extends WidgetType {
+  constructor(text) {
+    super();
+    this.text = text;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-inline-values";
+    span.textContent = "  " + this.text;
+    return span;
+  }
+  eq(other) {
+    return this.text === other.text;
+  }
+}
+const resultGutter = gutter({
+  class: "cm-result-gutter",
+  markers(view) {
+    const results = view.state.field(lineResultsField);
+    const markers = [];
+    for (let i = 0; i < results.length && i < view.state.doc.lines; i++) {
+      if (results[i]) {
+        const line = view.state.doc.line(i + 1);
+        markers.push(new ResultMarker(results[i]).range(line.from));
+      }
+    }
+    return RangeSet.of(markers);
+  }
+});
+const breakpointGutter = gutter({
+  class: "cm-breakpoint-gutter",
+  markers(view) {
+    const bps = view.state.field(breakpointField);
+    const markers = [];
+    for (const lineNum of bps) {
+      if (lineNum < view.state.doc.lines) {
+        const line = view.state.doc.line(lineNum + 1);
+        markers.push(new BreakpointMarker().range(line.from));
+      }
+    }
+    return RangeSet.of(markers, true);
+  },
+  domEventHandlers: {
+    mousedown(view, line) {
+      const lineNum = view.state.doc.lineAt(line.from).number - 1;
+      view.dispatch({ effects: toggleBreakpointEffect.of(lineNum) });
+      return true;
+    }
+  }
+});
+function dispatchRunState(view, runLine, lineResults, inlineValues = /* @__PURE__ */ new Map()) {
+  view.dispatch({
+    effects: [
+      setRunLineEffect.of(runLine),
+      setLineResultsEffect.of(lineResults),
+      setInlineValuesEffect.of(inlineValues)
+    ]
+  });
+}
+const languageCompartment = new Compartment();
+const jsHighlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: "var(--color-command)" },
+  { tag: tags.string, color: "var(--color-string)" },
+  { tag: tags.number, color: "var(--color-url)" },
+  { tag: tags.bool, color: "var(--color-url)" },
+  { tag: tags.null, color: "var(--text-dim)", fontStyle: "italic" },
+  { tag: tags.comment, color: "var(--color-comment)", fontStyle: "italic" },
+  { tag: tags.propertyName, color: "var(--color-flag)" },
+  { tag: tags.definition(tags.variableName), color: "var(--color-active-line)" }
+]);
+const pwModeExtension = [
+  ...pwSyntax,
+  autocompletion({ override: [pwCompletion], icons: false }),
+  placeholder("# Type or open a .pw script...")
+];
+const jsModeExtension = [
+  javascript(),
+  javascriptLanguage.data.of({ autocomplete: playwrightCompletions }),
+  syntaxHighlighting(jsHighlightStyle),
+  autocompletion({ icons: false }),
+  placeholder("// Type JavaScript...")
+];
+const baseExtensions = [
+  languageCompartment.of(pwModeExtension),
+  // dynamic language compartment
+  breakpointField,
+  // ← breakpoint state (must register before gutter)
+  breakpointGutter,
+  // ← clickable breakpoint dots (leftmost gutter)
+  lineNumbers(),
+  // built-in line numbers
+  highlightActiveLineGutter(),
+  // highlights gutter on cursor line
+  highlightActiveLine(),
+  // highlights content on cursor line
+  history(),
+  // undo/redo stack
+  bracketMatching(),
+  // highlight matching brackets
+  closeBrackets(),
+  // auto-insert closing ), ], }, ", '
+  search(),
+  // Ctrl+F search panel
+  keymap.of([
+    { key: "Tab", run: acceptCompletion },
+    // accept completion with Tab
+    ...closeBracketsKeymap,
+    // Backspace deletes both brackets
+    ...defaultKeymap,
+    // basic editing keys
+    ...historyKeymap,
+    // Ctrl+Z, Ctrl+Y
+    ...searchKeymap
+    // Ctrl+F, Ctrl+H
+  ]),
+  EditorState.tabSize.of(2),
+  // tab = 2 spaces
+  pwTheme,
+  runLineField,
+  // ← register the StateField so CM6 tracks it
+  lineResultsField,
+  // ← register the StateField so CM6 tracks it
+  runLineHighlight,
+  // ← decoration that reads runLineField
+  resultGutter,
+  // ← gutter that reads lineResultsField
+  inlineValuesField,
+  inlineValuesDecoration
+];
+function CodeMirrorEditorPane({ editorContent, editorMode, currentRunLine, lineResults, dispatch, ref, containerRef, inlineValues }) {
+  const cmContainerRef = reactExports.useRef(null);
+  const viewRef = reactExports.useRef(null);
+  const externalUpdateRef = reactExports.useRef(false);
+  const lastInsertRangeRef = reactExports.useRef(null);
+  reactExports.useImperativeHandle(ref, () => ({
+    insertAtCursor(text) {
+      const view = viewRef.current;
+      if (!view) return;
+      const { from } = view.state.selection.main;
+      const before = view.state.doc.sliceString(Math.max(0, from - 1), from);
+      const insert = (before && before !== "\n" ? "\n" : "") + text;
+      const insertFrom = from;
+      view.dispatch({
+        changes: { from, to: from, insert },
+        selection: { anchor: from + insert.length },
+        scrollIntoView: true
+      });
+      lastInsertRangeRef.current = { from: insertFrom, to: insertFrom + insert.length };
+      view.focus();
+    },
+    replaceLastInsert(text) {
+      const view = viewRef.current;
+      const range = lastInsertRangeRef.current;
+      if (!view || !range) return;
+      const before = view.state.doc.sliceString(Math.max(0, range.from - 1), range.from);
+      const insert = (before && before !== "\n" ? "\n" : "") + text;
+      view.dispatch({
+        changes: { from: range.from, to: range.to, insert },
+        selection: { anchor: range.from + insert.length },
+        scrollIntoView: true
+      });
+      lastInsertRangeRef.current = { from: range.from, to: range.from + insert.length };
+      view.focus();
+    }
+  }));
+  reactExports.useEffect(() => {
+    const view = new EditorView({
+      doc: editorContent,
+      extensions: [
+        ...baseExtensions,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && !externalUpdateRef.current) {
+            dispatch({ type: "EDIT_EDITOR_CONTENT", content: update.state.doc.toString() });
+          }
+          const oldBps = update.startState.field(breakpointField);
+          const newBps = update.state.field(breakpointField);
+          if (oldBps !== newBps) {
+            dispatch({ type: "SET_BREAKPOINTS", breakPoints: newBps });
+          }
+        })
+      ],
+      parent: cmContainerRef.current
+    });
+    viewRef.current = view;
+    return () => view.destroy();
+  }, []);
+  reactExports.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    if (view.state.doc.toString() === editorContent) return;
+    externalUpdateRef.current = true;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: editorContent } });
+    view.dispatch({ selection: { anchor: view.state.doc.length }, scrollIntoView: true });
+    externalUpdateRef.current = false;
+    view.focus();
+  }, [editorContent]);
+  reactExports.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    dispatchRunState(view, currentRunLine, lineResults, inlineValues ?? /* @__PURE__ */ new Map());
+  }, [currentRunLine, lineResults, inlineValues]);
+  reactExports.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({ effects: languageCompartment.reconfigure(editorMode === "js" ? jsModeExtension : pwModeExtension) });
+  }, [editorMode]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "editor-pane", ref: containerRef, "data-testid": "editor", className: "flex flex-1 min-h-[80px] overflow-hidden bg-(--bg-editor)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: cmContainerRef, className: "flex-1" }) });
+}
+function Splitter({ editorPaneRef }) {
+  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const dragStartY = reactExports.useRef(0);
+  const dragStartHeight = reactExports.useRef(0);
+  function handleMouseMove(event) {
+    const delta = event.clientY - dragStartY.current;
+    const newHeight = dragStartHeight.current + delta;
+    const minHeight = 80;
+    const clamped = Math.max(minHeight, Math.min(newHeight, window.innerHeight - minHeight));
+    editorPaneRef.current.style.flex = `0 0 ${clamped}px`;
+  }
+  function handleMouseUp() {
+    setIsDragging(false);
+    dragStartHeight.current = 0;
+    dragStartY.current = 0;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+  function handleMouseDown(event) {
+    document.body.style.cursor = "row-resize";
+    document.body.style.userSelect = "none";
+    dragStartY.current = event.clientY;
+    const editorPane = editorPaneRef.current;
+    dragStartHeight.current = editorPane.offsetHeight;
+    setIsDragging(true);
+  }
+  reactExports.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      id: "splitter",
+      className: "h-[6px] bg-(--bg-splitter) cursor-row-resize shrink-0 flex items-center justify-center border-y border-(--border-primary)",
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          id: "splitter-handle",
+          className: "w-10 h-[2px] bg-(--color-splitter-handle) rounded-[1px]"
+        }
+      )
+    }
+  );
+}
+function ScopeSection({ scope, defaultOpen, onLocalProps }) {
+  const [open, setOpen] = reactExports.useState(defaultOpen);
+  const [props, setProps] = reactExports.useState(null);
+  const [loading, setLoading] = reactExports.useState(false);
+  const prevObjectId = reactExports.useRef(scope.objectId);
+  reactExports.useEffect(() => {
+    if (open && !props) fetchProps();
+  }, [open]);
+  reactExports.useEffect(() => {
+    if (scope.objectId != prevObjectId.current) {
+      prevObjectId.current = scope.objectId;
+      setProps(null);
+      if (open) fetchProps();
+    }
+  }, [scope.objectId]);
+  function fetchProps() {
+    setLoading(true);
+    swGetProperties(scope.objectId).then((raw) => {
+      const parsed = fromCdpGetProperties(raw);
+      setProps(parsed);
+      setLoading(false);
+      onLocalProps?.(parsed);
+    });
+  }
+  const title = scope.type === "local" ? "Local" : scope.type === "closure" ? scope.name ? `Closure (${scope.name})` : "Closure" : scope.type === "script" ? "Script" : scope.type === "block" ? "Block" : scope.type;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ot-toggle", onClick: () => setOpen((o) => !o), children: [
+      open ? "▼" : "▶",
+      " ",
+      title
+    ] }),
+    open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ot-children", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ot-empty", children: "Loading ..." }) : props && Object.entries(props).map(([k, v]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ot-row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ObjectTree, { data: v, label: k, getProperties: swGetProperties }) }, k)) })
+  ] });
+}
+function VariablePane({ scopeData, onLocalProps }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto flex-1 p-2", children: scopeData.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ot-empty", children: "No local variables" }) : scopeData.map((scope) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ScopeSection,
+    {
+      scope,
+      defaultOpen: scope.type === "local",
+      onLocalProps: scope.type === "local" || scope.type === "block" ? onLocalProps : void 0
+    },
+    scope.objectId
+  )) });
+}
+function BottomPane({ isStepDebugging, bottomTab, outputLines, dispatch, scopeData, onLocalProps }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-1 min-h-20 overflow-hidden", "data-testid": "bottom-pane", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-2 py-0.5 border-b border-(--border-primary) bg-(--bg-toolbar) shrink-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          "data-active": bottomTab === "console" ? "" : void 0,
+          onClick: () => dispatch({ type: "SET_BOTTOM_TAB", tab: "console" }),
+          "data-testid": "tab-console",
+          children: "Console"
+        }
+      ),
+      isStepDebugging && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          "data-active": bottomTab === "variables" ? "" : void 0,
+          onClick: () => dispatch({ type: "SET_BOTTOM_TAB", tab: "variables" }),
+          "data-testid": "tab-variables",
+          children: "Variables"
+        }
+      )
+    ] }),
+    bottomTab === "console" && /* @__PURE__ */ jsxRuntimeExports.jsx(Console, { outputLines, dispatch }),
+    bottomTab === "variables" && isStepDebugging && /* @__PURE__ */ jsxRuntimeExports.jsx(VariablePane, { scopeData, onLocalProps })
+  ] });
+}
+function DebugBar({ dispatch }) {
+  function handleContinue() {
+    swDebugResume().catch((e) => console.warn("[debug] resume failed:", e));
+  }
+  function handleStepOver() {
+    swDebugStepOver().catch((e) => console.warn("[debug] step-over failed:", e));
+  }
+  function handleStepInto() {
+    swDebugStepInto().catch((e) => console.warn("[debug] step-into failed:", e));
+  }
+  function handleStepOut() {
+    swDebugStepOut().catch((e) => console.warn("[debug] step-out failed:", e));
+  }
+  function handleRestart() {
+    swTerminateExecution().catch((e) => console.warn("[debug] terminate failed:", e));
+    swDebugResume().catch((e) => console.warn("[debug] resume failed:", e));
+    dispatch({ type: "RUN_STOP" });
+  }
+  function handleStop() {
+    swTerminateExecution().catch((e) => console.warn("[debug] terminate failed:", e));
+    swDebugResume().catch((e) => console.warn("[debug] resume failed:", e));
+    dispatch({ type: "RUN_STOP" });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "debug-bar", "data-testid": "debug-bar", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-testid": "debug-continue", title: "Continue (F5)", onClick: handleContinue, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ContinueIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-testid": "debug-step-over", title: "Step Over (F10)", onClick: handleStepOver, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepOverIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-testid": "debug-step-into", title: "Step Into (F11)", onClick: handleStepInto, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepIntoIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-testid": "debug-step-out", title: "Step Out (Shift+F11)", onClick: handleStepOut, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepOutIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "debug-bar-sep" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-testid": "debug-restart", title: "Restart (Ctrl+Shift+F5)", onClick: handleRestart, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RestartIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-testid": "debug-stop", title: "Stop (Shift+F5)", onClick: handleStop, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DebugStopIcon, { size: 14 }) })
+  ] });
+}
+const MAX_INLINE_LENGTH = 80;
+function formatInlineValues(pausedLine, props) {
+  const values = /* @__PURE__ */ new Map();
+  if (pausedLine < 0 || !props) return values;
+  const parts = [];
+  for (const [name, val] of Object.entries(props)) {
+    if (name.startsWith("[[")) continue;
+    const summary = inlineSummary(val);
+    if (!summary) continue;
+    parts.push(`${name} = ${summary}`);
+  }
+  if (parts.length > 0) {
+    let text = parts.join(", ");
+    if (text.length > MAX_INLINE_LENGTH) text = text.slice(0, MAX_INLINE_LENGTH) + "…";
+    values.set(pausedLine, text);
+  }
+  return values;
+}
+function App() {
+  const [state, dispatch] = reactExports.useReducer(panelReducer, initialState);
+  const editorPaneRef = reactExports.useRef(null);
+  const editorRef = reactExports.useRef(null);
+  const attachedTabRef = reactExports.useRef(null);
+  const [localProps, setLocalProps] = reactExports.useState(null);
+  const inlineValues = reactExports.useMemo(
+    () => formatInlineValues(state.currentRunLine, localProps),
+    [state.currentRunLine, localProps]
+  );
+  reactExports.useEffect(() => {
+    onConsoleEvent((level, args) => {
+      for (const arg of args) {
+        const type = level === "error" ? "error" : level === "warn" ? "info" : "success";
+        dispatch({ type: "ADD_LINE", line: { text: "", type, value: arg } });
+      }
+    });
+    return () => onConsoleEvent(null);
+  }, [dispatch]);
+  reactExports.useEffect(() => {
+    loadSettings().then((s) => {
+      dispatch({ type: "SET_EDITOR_MODE", mode: s.languageMode });
+    });
+  }, []);
+  async function doAttach(tabId) {
+    dispatch({ type: "ATTACH_START" });
+    const res = await attachToTab(tabId);
+    if (res.ok && res.url) {
+      attachedTabRef.current = tabId;
+      dispatch({ type: "ATTACH_SUCCESS", url: res.url, tabId });
+    } else {
+      attachedTabRef.current = null;
+      dispatch({ type: "ATTACH_FAIL" });
+    }
+  }
+  reactExports.useEffect(() => {
+    if (!chrome.tabs?.query) return;
+    const params = new URLSearchParams(window.location.search);
+    const tabIdParam = params.get("tabId");
+    if (tabIdParam) {
+      doAttach(Number(tabIdParam));
+      return;
+    }
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      const tab = tabs[0];
+      const url = tab?.url ?? "";
+      const ownOrigin = `chrome-extension://${chrome.runtime.id}/`;
+      if (tab?.id && !url.startsWith("chrome://") && (!url.startsWith("chrome-extension://") || url.startsWith(ownOrigin))) {
+        doAttach(tab.id);
+      }
+    });
+    const onActivated = async (info) => {
+      const tab = await chrome.tabs.get(info.tabId).catch(() => null);
+      const url = tab?.url ?? "";
+      if (url.startsWith("chrome-extension://") && !url.startsWith(`chrome-extension://${chrome.runtime.id}/`)) return;
+      if (url.startsWith("chrome://")) {
+        attachedTabRef.current = null;
+        dispatch({ type: "DETACH" });
+        return;
+      }
+      doAttach(info.tabId);
+    };
+    chrome.tabs.onActivated.addListener(onActivated);
+    const onUpdated = (tabId, changeInfo) => {
+      if (attachedTabRef.current === tabId) {
+        if (changeInfo.url) dispatch({ type: "UPDATE_URL", url: changeInfo.url });
+        return;
+      }
+      if (changeInfo.url && !changeInfo.url.startsWith("chrome://") && (!changeInfo.url.startsWith("chrome-extension://") || changeInfo.url.startsWith(`chrome-extension://${chrome.runtime.id}/`))) {
+        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+          if (tabs[0]?.id === tabId) doAttach(tabId);
+        });
+      }
+    };
+    chrome.tabs.onUpdated.addListener(onUpdated);
+    return () => {
+      chrome.tabs.onActivated.removeListener(onActivated);
+      chrome.tabs.onUpdated.removeListener(onUpdated);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Toolbar,
+      {
+        editorContent: state.editorContent,
+        editorMode: state.editorMode,
+        stepLine: state.stepLine,
+        isRunning: state.isRunning,
+        isStepDebugging: state.isStepDebugging,
+        attachedUrl: state.attachedUrl,
+        attachedTabId: state.attachedTabId,
+        isAttaching: state.isAttaching,
+        dispatch,
+        editorRef,
+        breakPoints: state.breakPoints
+      }
+    ),
+    state.isStepDebugging && /* @__PURE__ */ jsxRuntimeExports.jsx(DebugBar, { dispatch }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: editorPaneRef, style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 80, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CodeMirrorEditorPane,
+      {
+        ref: editorRef,
+        editorContent: state.editorContent,
+        editorMode: state.editorMode,
+        currentRunLine: state.currentRunLine,
+        lineResults: state.lineResults,
+        inlineValues,
+        dispatch
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Splitter, { editorPaneRef }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BottomPane,
+      {
+        outputLines: state.outputLines,
+        dispatch,
+        bottomTab: state.bottomTab,
+        isStepDebugging: state.isStepDebugging,
+        scopeData: state.scopeData,
+        onLocalProps: setLocalProps
+      }
+    )
+  ] });
+}
+clientExports.createRoot(document.getElementById("root")).render(
+  /* @__PURE__ */ jsxRuntimeExports.jsx(App, {})
+);
+//# sourceMappingURL=panel.js.map