@phenx-inc/ctlsurf 0.1.15 → 0.1.16

package/out/renderer/assets/{cssMode-woG3Vtms.js → cssMode-CihsrbZY.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages } from "./index-CpDga7fF.js";
-import { C as CompletionAdapter, H as HoverAdapter, D as DocumentHighlightAdapter, a as DefinitionAdapter, R as ReferenceAdapter, b as DocumentSymbolAdapter, c as RenameAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, e as DiagnosticsAdapter, S as SelectionRangeAdapter, f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider } from "./lspLanguageFeatures-BMM3SRX4.js";
-import { h, i, j, t, k } from "./lspLanguageFeatures-BMM3SRX4.js";
+import { c as createWebWorker, l as languages } from "./index-CKhIh5ZQ.js";
+import { C as CompletionAdapter, H as HoverAdapter, D as DocumentHighlightAdapter, a as DefinitionAdapter, R as ReferenceAdapter, b as DocumentSymbolAdapter, c as RenameAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, e as DiagnosticsAdapter, S as SelectionRangeAdapter, f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider } from "./lspLanguageFeatures-Dp-OZOZS.js";
+import { h, i, j, t, k } from "./lspLanguageFeatures-Dp-OZOZS.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{freemarker2-DgtqmvCd.js → freemarker2-DFrJ_l05.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const EMPTY_ELEMENTS = [
   "assign",
   "flush",

package/out/renderer/assets/{handlebars-YEqC-zOn.js → handlebars-BZi7_LdH.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{html-CwvkGxeB.js → html-CdaPU_YJ.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{htmlMode-DzdyF21q.js → htmlMode-DZnUcBOX.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages } from "./index-CpDga7fF.js";
-import { H as HoverAdapter, D as DocumentHighlightAdapter, h as DocumentLinkAdapter, F as FoldingRangeAdapter, b as DocumentSymbolAdapter, S as SelectionRangeAdapter, c as RenameAdapter, f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter } from "./lspLanguageFeatures-BMM3SRX4.js";
-import { a, e, d, R, i, j, t, k } from "./lspLanguageFeatures-BMM3SRX4.js";
+import { c as createWebWorker, l as languages } from "./index-CKhIh5ZQ.js";
+import { H as HoverAdapter, D as DocumentHighlightAdapter, h as DocumentLinkAdapter, F as FoldingRangeAdapter, b as DocumentSymbolAdapter, S as SelectionRangeAdapter, c as RenameAdapter, f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter } from "./lspLanguageFeatures-Dp-OZOZS.js";
+import { a, e, d, R, i, j, t, k } from "./lspLanguageFeatures-Dp-OZOZS.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{index-CpDga7fF.js → index-CKhIh5ZQ.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./cssMode-woG3Vtms.js","./lspLanguageFeatures-BMM3SRX4.js","./htmlMode-DzdyF21q.js","./jsonMode-CPhJ_ION.js","./javascript-Dy9cX9Fu.js","./typescript-Cq3g-z7h.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./cssMode-CihsrbZY.js","./lspLanguageFeatures-Dp-OZOZS.js","./htmlMode-DZnUcBOX.js","./jsonMode-DX3yX_PF.js","./javascript-DvV4owMk.js","./typescript-BEFZ19OD.js"])))=>i.map(i=>d[i]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -206492,7 +206492,7 @@ const lessDefaults = new LanguageServiceDefaultsImpl$3(
   modeConfigurationDefault$2
 );
 function getMode$3() {
-  return __vitePreload(() => import("./cssMode-woG3Vtms.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
+  return __vitePreload(() => import("./cssMode-CihsrbZY.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
 }
 languages.onLanguage("less", () => {
   getMode$3().then((mode2) => mode2.setupMode(lessDefaults));
@@ -206597,7 +206597,7 @@ const razorLanguageService = registerHTMLLanguageService(
 );
 const razorDefaults = razorLanguageService.defaults;
 function getMode$2() {
-  return __vitePreload(() => import("./htmlMode-DzdyF21q.js"), true ? __vite__mapDeps([2,1]) : void 0, import.meta.url);
+  return __vitePreload(() => import("./htmlMode-DZnUcBOX.js"), true ? __vite__mapDeps([2,1]) : void 0, import.meta.url);
 }
 function registerHTMLLanguageService(languageId, options = optionsDefault, modeConfiguration = getConfigurationDefault(languageId)) {
   const defaults = new LanguageServiceDefaultsImpl$2(languageId, options, modeConfiguration);
@@ -206681,7 +206681,7 @@ const jsonDefaults = new LanguageServiceDefaultsImpl$1(
 );
 const getWorker$1 = () => getMode$1().then((mode2) => mode2.getWorker());
 function getMode$1() {
-  return __vitePreload(() => import("./jsonMode-CPhJ_ION.js"), true ? __vite__mapDeps([3,1]) : void 0, import.meta.url);
+  return __vitePreload(() => import("./jsonMode-DX3yX_PF.js"), true ? __vite__mapDeps([3,1]) : void 0, import.meta.url);
 }
 languages.register({
   id: "json",
@@ -206927,7 +206927,7 @@ const getJavaScriptWorker = () => {
   return getMode().then((mode) => mode.getJavaScriptWorker());
 };
 function getMode() {
-  return __vitePreload(() => import("./tsMode-D7kqIJ_o.js"), true ? [] : void 0, import.meta.url);
+  return __vitePreload(() => import("./tsMode-CKrhuOxD.js"), true ? [] : void 0, import.meta.url);
 }
 languages.onLanguage("typescript", () => {
   return getMode().then((mode) => mode.setupTypeScript(typescriptDefaults));
@@ -207122,49 +207122,49 @@ registerLanguage({
   extensions: [".ftl", ".ftlh", ".ftlx"],
   aliases: ["FreeMarker2", "Apache FreeMarker2"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-angle.interpolation-dollar",
   aliases: ["FreeMarker2 (Angle/Dollar)", "Apache FreeMarker2 (Angle/Dollar)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-bracket.interpolation-dollar",
   aliases: ["FreeMarker2 (Bracket/Dollar)", "Apache FreeMarker2 (Bracket/Dollar)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-angle.interpolation-bracket",
   aliases: ["FreeMarker2 (Angle/Bracket)", "Apache FreeMarker2 (Angle/Bracket)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationBracket);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationBracket);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-bracket.interpolation-bracket",
   aliases: ["FreeMarker2 (Bracket/Bracket)", "Apache FreeMarker2 (Bracket/Bracket)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationBracket);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationBracket);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-auto.interpolation-dollar",
   aliases: ["FreeMarker2 (Auto/Dollar)", "Apache FreeMarker2 (Auto/Dollar)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-auto.interpolation-bracket",
   aliases: ["FreeMarker2 (Auto/Bracket)", "Apache FreeMarker2 (Auto/Bracket)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-DgtqmvCd.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationBracket);
+    return __vitePreload(() => import("./freemarker2-DFrJ_l05.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationBracket);
   }
 });
 registerLanguage({
@@ -207185,7 +207185,7 @@ registerLanguage({
   extensions: [".handlebars", ".hbs"],
   aliases: ["Handlebars", "handlebars", "hbs"],
   mimetypes: ["text/x-handlebars-template"],
-  loader: () => __vitePreload(() => import("./handlebars-YEqC-zOn.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./handlebars-BZi7_LdH.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "hcl",
@@ -207198,7 +207198,7 @@ registerLanguage({
   extensions: [".html", ".htm", ".shtml", ".xhtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm"],
   aliases: ["HTML", "htm", "html", "xhtml"],
   mimetypes: ["text/html", "text/x-jshtm", "text/template", "text/ng-template"],
-  loader: () => __vitePreload(() => import("./html-CwvkGxeB.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./html-CdaPU_YJ.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "ini",
@@ -207221,7 +207221,7 @@ registerLanguage({
   filenames: ["jakefile"],
   aliases: ["JavaScript", "javascript", "js"],
   mimetypes: ["text/javascript"],
-  loader: () => __vitePreload(() => import("./javascript-Dy9cX9Fu.js"), true ? __vite__mapDeps([4,5]) : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./javascript-DvV4owMk.js"), true ? __vite__mapDeps([4,5]) : void 0, import.meta.url)
 });
 registerLanguage({
   id: "julia",
@@ -207260,7 +207260,7 @@ registerLanguage({
   extensions: [".liquid", ".html.liquid"],
   aliases: ["Liquid", "liquid"],
   mimetypes: ["application/liquid"],
-  loader: () => __vitePreload(() => import("./liquid-BJdFPWrv.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./liquid-c7QWTywx.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "m3",
@@ -207278,7 +207278,7 @@ registerLanguage({
   id: "mdx",
   extensions: [".mdx"],
   aliases: ["MDX", "mdx"],
-  loader: () => __vitePreload(() => import("./mdx-kg2kuPRK.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./mdx-Bi7NE1tt.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "mips",
@@ -207377,7 +207377,7 @@ registerLanguage({
   extensions: [".py", ".rpy", ".pyw", ".cpy", ".gyp", ".gypi"],
   aliases: ["Python", "py"],
   firstLine: "^#!/.*\\bpython[0-9.-]*\\b",
-  loader: () => __vitePreload(() => import("./python-aIrmxkmH.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./python-BeMAHtzr.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "qsharp",
@@ -207396,7 +207396,7 @@ registerLanguage({
   extensions: [".cshtml"],
   aliases: ["Razor", "razor"],
   mimetypes: ["text/x-cshtml"],
-  loader: () => __vitePreload(() => import("./razor-DdymcPOc.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./razor-Cfc9e2QR.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "redis",
@@ -207529,7 +207529,7 @@ registerLanguage({
   aliases: ["TypeScript", "ts", "typescript"],
   mimetypes: ["text/typescript"],
   loader: () => {
-    return __vitePreload(() => import("./typescript-Cq3g-z7h.js"), true ? [] : void 0, import.meta.url);
+    return __vitePreload(() => import("./typescript-BEFZ19OD.js"), true ? [] : void 0, import.meta.url);
   }
 });
 registerLanguage({
@@ -207574,14 +207574,14 @@ registerLanguage({
   firstLine: "(\\<\\?xml.*)|(\\<svg)|(\\<\\!doctype\\s+svg)",
   aliases: ["XML", "xml"],
   mimetypes: ["text/xml", "application/xml", "application/xaml+xml", "application/xml-dtd"],
-  loader: () => __vitePreload(() => import("./xml-BuBP5jOc.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./xml-CVdJPpsd.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "yaml",
   extensions: [".yaml", ".yml"],
   aliases: ["YAML", "yaml", "YML", "yml"],
   mimetypes: ["application/x-yaml", "text/x-yaml"],
-  loader: () => __vitePreload(() => import("./yaml-B-3hWmol.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./yaml-B_Px-4th.js"), true ? [] : void 0, import.meta.url)
 });
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -211152,7 +211152,7 @@ const DragContext = reactExports.createContext({
   setDragPaneId: () => {
   }
 });
-function PaneLayout({ layout: layout2, panes, onLayoutChange, onToggle }) {
+function PaneLayout({ layout: layout2, panes, onLayoutChange, onToggle, paneHostPrefix }) {
   const [dragPaneId, setDragPaneId] = reactExports.useState(null);
   const handleDrop = reactExports.useCallback((targetPaneId, zone) => {
     if (!dragPaneId || dragPaneId === targetPaneId) return;
@@ -211174,11 +211174,12 @@ function PaneLayout({ layout: layout2, panes, onLayoutChange, onToggle }) {
       onToggle,
       onLayoutChange,
       parentDirection: null,
-      path: []
+      path: [],
+      paneHostPrefix
     }
   ) }) });
 }
-function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path }) {
+function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path, paneHostPrefix }) {
   if (node.type === "leaf") {
     const pane = paneMap.get(node.paneId);
     if (!pane) return null;
@@ -211187,7 +211188,8 @@ function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, paren
       {
         pane,
         onDrop,
-        onToggle
+        onToggle,
+        paneHostPrefix
       }
     );
   }
@@ -211199,11 +211201,12 @@ function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, paren
       onDrop,
       onToggle,
       onLayoutChange,
-      path
+      path,
+      paneHostPrefix
     }
   );
 }
-function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path }) {
+function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path, paneHostPrefix }) {
   const containerRef = reactExports.useRef(null);
   const draggingDivider = reactExports.useRef(null);
   const sizesRef = reactExports.useRef(node.sizes);
@@ -211288,7 +211291,8 @@ function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path
                   onLayoutChange({ ...node, children: newChildren });
                 },
                 parentDirection: node.direction,
-                path: [...path, i2]
+                path: [...path, i2],
+                paneHostPrefix
               }
             )
           }
@@ -211310,10 +211314,34 @@ function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path
     }
   );
 }
-function LeafPane({ pane, onDrop, onToggle }) {
+function LeafPane({ pane, onDrop, onToggle, paneHostPrefix }) {
   const { dragPaneId, setDragPaneId } = reactExports.useContext(DragContext);
   const [hoverZone, setHoverZone] = reactExports.useState(null);
   const paneRef = reactExports.useRef(null);
+  const contentRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!paneHostPrefix || !contentRef.current) return;
+    const hostEl = document.getElementById(`${paneHostPrefix}${pane.id}`);
+    if (!hostEl) return;
+    hostEl.style.position = "";
+    hostEl.style.width = "100%";
+    hostEl.style.height = "100%";
+    hostEl.style.overflow = "";
+    hostEl.style.opacity = "1";
+    hostEl.style.pointerEvents = "";
+    contentRef.current.appendChild(hostEl);
+    return () => {
+      if (hostEl.parentElement === contentRef.current) {
+        document.body.appendChild(hostEl);
+        hostEl.style.position = "absolute";
+        hostEl.style.width = "1px";
+        hostEl.style.height = "1px";
+        hostEl.style.overflow = "hidden";
+        hostEl.style.opacity = "0";
+        hostEl.style.pointerEvents = "none";
+      }
+    };
+  }, [pane.id, paneHostPrefix]);
   const isDragging = dragPaneId === pane.id;
   const isDropTarget = dragPaneId !== null && dragPaneId !== pane.id;
   const computeZone = reactExports.useCallback((e) => {
@@ -211359,7 +211387,7 @@ function LeafPane({ pane, onDrop, onToggle }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "leaf-pane-content", children: pane.content }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "leaf-pane-content", ref: contentRef, children: !paneHostPrefix && pane.content }),
         isDropTarget && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
@@ -211613,6 +211641,14 @@ const DEFAULT_LAYOUT = {
   sizes: [50, 50]
 };
 const ALL_PANE_IDS = ["editor", "terminal", "ctlsurf"];
+const offscreenStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  opacity: 0,
+  pointerEvents: "none"
+};
 function App() {
   const [agents, setAgents] = reactExports.useState([]);
   const [selectedAgent, setSelectedAgent] = reactExports.useState(null);
@@ -211745,15 +211781,14 @@ function App() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [togglePane]);
   const panes = [
-    { id: "editor", label: "Editor", content: /* @__PURE__ */ jsxRuntimeExports.jsx(EditorPanel, { cwd: cwd2 }) },
-    {
-      id: "terminal",
-      label: "Terminal",
-      content: /* @__PURE__ */ jsxRuntimeExports.jsx(TerminalPanel, { agent: selectedAgent, onSpawn: handleSpawn, onExit: handleExit })
-    },
-    { id: "ctlsurf", label: "ctlsurf", content: /* @__PURE__ */ jsxRuntimeExports.jsx(CtlsurfPanel, {}) }
+    { id: "editor", label: "Editor", content: null },
+    { id: "terminal", label: "Terminal", content: null },
+    { id: "ctlsurf", label: "ctlsurf", content: null }
   ];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "app", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "pane-host-editor", style: visiblePaneIds.includes("editor") ? void 0 : offscreenStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(EditorPanel, { cwd: cwd2 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "pane-host-terminal", style: visiblePaneIds.includes("terminal") ? void 0 : offscreenStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TerminalPanel, { agent: selectedAgent, onSpawn: handleSpawn, onExit: handleExit }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "pane-host-ctlsurf", style: visiblePaneIds.includes("ctlsurf") ? void 0 : offscreenStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CtlsurfPanel, {}) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "titlebar", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "titlebar-title", children: "ctlsurf-worker" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "titlebar-controls", children: [
@@ -211782,25 +211817,16 @@ function App() {
         ))
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "main-content", children: [
-      visiblePaneIds.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "multi-split-empty", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All panes hidden. Use the titlebar buttons to show a pane." }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-        PaneLayout,
-        {
-          layout: layout2,
-          panes: panes.filter((p) => visiblePaneIds.includes(p.id)),
-          onLayoutChange: setLayout,
-          onToggle: togglePane
-        }
-      ),
-      panes.filter((p) => !visiblePaneIds.includes(p.id)).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
-        position: "absolute",
-        width: "1px",
-        height: "1px",
-        overflow: "hidden",
-        opacity: 0,
-        pointerEvents: "none"
-      }, children: p.content }, p.id))
-    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "main-content", children: visiblePaneIds.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "multi-split-empty", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All panes hidden. Use the titlebar buttons to show a pane." }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      PaneLayout,
+      {
+        layout: layout2,
+        panes: panes.filter((p) => visiblePaneIds.includes(p.id)),
+        onLayoutChange: setLayout,
+        onToggle: togglePane,
+        paneHostPrefix: "pane-host-"
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(StatusBar, { wsStatus, cwd: cwd2, onChangeCwd: handleChangeCwd }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, { open: showSettings, onClose: () => setShowSettings(false) }),
     showAgentPicker && agents.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(

package/out/renderer/assets/{javascript-Dy9cX9Fu.js → javascript-DvV4owMk.js}

@@ -1,5 +1,5 @@
-import { conf as conf$1, language as language$1 } from "./typescript-Cq3g-z7h.js";
-import "./index-CpDga7fF.js";
+import { conf as conf$1, language as language$1 } from "./typescript-BEFZ19OD.js";
+import "./index-CKhIh5ZQ.js";
 const conf = conf$1;
 const language = {
   // Set defaultToken to invalid to see what you do not tokenize yet

package/out/renderer/assets/{jsonMode-CPhJ_ION.js → jsonMode-DX3yX_PF.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages, e as editor } from "./index-CpDga7fF.js";
-import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-BMM3SRX4.js";
-import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-BMM3SRX4.js";
+import { c as createWebWorker, l as languages, e as editor } from "./index-CKhIh5ZQ.js";
+import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-Dp-OZOZS.js";
+import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-Dp-OZOZS.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{liquid-BJdFPWrv.js → liquid-c7QWTywx.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{lspLanguageFeatures-BMM3SRX4.js → lspLanguageFeatures-Dp-OZOZS.js}

@@ -1,4 +1,4 @@
-import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-CpDga7fF.js";
+import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-CKhIh5ZQ.js";
 var DocumentUri;
 (function(DocumentUri2) {
   function is(value) {

package/out/renderer/assets/{mdx-kg2kuPRK.js → mdx-Bi7NE1tt.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const conf = {
   comments: {
     blockComment: ["{/*", "*/}"]

package/out/renderer/assets/{python-aIrmxkmH.js → python-BeMAHtzr.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const conf = {
   comments: {
     lineComment: "#",

package/out/renderer/assets/{razor-DdymcPOc.js → razor-Cfc9e2QR.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{tsMode-D7kqIJ_o.js → tsMode-CKrhuOxD.js}

@@ -1,4 +1,4 @@
-import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-CpDga7fF.js";
+import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-CKhIh5ZQ.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-Cq3g-z7h.js → typescript-BEFZ19OD.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const conf = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
   comments: {

package/out/renderer/assets/{xml-BuBP5jOc.js → xml-CVdJPpsd.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const conf = {
   comments: {
     blockComment: ["<!--", "-->"]

package/out/renderer/assets/{yaml-B-3hWmol.js → yaml-B_Px-4th.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-CpDga7fF.js";
+import { l as languages } from "./index-CKhIh5ZQ.js";
 const conf = {
   comments: {
     lineComment: "#"

package/out/renderer/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
-  <script type="module" crossorigin src="./assets/index-CpDga7fF.js"></script>
+  <script type="module" crossorigin src="./assets/index-CKhIh5ZQ.js"></script>
   <link rel="stylesheet" crossorigin href="./assets/index-DK9wLFFm.css">
 </head>
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {

package/src/renderer/App.tsx

@@ -72,6 +72,15 @@ const DEFAULT_LAYOUT: LayoutNode = {
 
 const ALL_PANE_IDS = ['editor', 'terminal', 'ctlsurf']
 
+const offscreenStyle: React.CSSProperties = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden',
+  opacity: 0,
+  pointerEvents: 'none',
+}
+
 export default function App() {
   const [agents, setAgents] = useState<AgentConfig[]>([])
   const [selectedAgent, setSelectedAgent] = useState<AgentConfig | null>(null)
@@ -217,19 +226,26 @@ export default function App() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [togglePane])
 
-  // Build pane contents (always rendered, layout controls visibility)
+  // Pane definitions — content is rendered via portals to preserve React tree position
   const panes: PaneContent[] = [
-    { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
-    {
-      id: 'terminal',
-      label: 'Terminal',
-      content: <TerminalPanel agent={selectedAgent} onSpawn={handleSpawn} onExit={handleExit} />,
-    },
-    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel /> },
+    { id: 'editor', label: 'Editor', content: null },
+    { id: 'terminal', label: 'Terminal', content: null },
+    { id: 'ctlsurf', label: 'ctlsurf', content: null },
   ]
 
   return (
     <div className="app">
+      {/* Persistent component instances — never unmounted, positioned by portal targets */}
+      <div id="pane-host-editor" style={visiblePaneIds.includes('editor') ? undefined : offscreenStyle}>
+        <EditorPanel cwd={cwd} />
+      </div>
+      <div id="pane-host-terminal" style={visiblePaneIds.includes('terminal') ? undefined : offscreenStyle}>
+        <TerminalPanel agent={selectedAgent} onSpawn={handleSpawn} onExit={handleExit} />
+      </div>
+      <div id="pane-host-ctlsurf" style={visiblePaneIds.includes('ctlsurf') ? undefined : offscreenStyle}>
+        <CtlsurfPanel />
+      </div>
+
       <div className="titlebar">
         <span className="titlebar-title">ctlsurf-worker</span>
         <div className="titlebar-controls">
@@ -272,20 +288,9 @@ export default function App() {
             panes={panes.filter(p => visiblePaneIds.includes(p.id))}
             onLayoutChange={setLayout}
             onToggle={togglePane}
+            paneHostPrefix="pane-host-"
           />
         )}
-        {panes.filter(p => !visiblePaneIds.includes(p.id)).map(p => (
-          <div key={p.id} style={{
-            position: 'absolute',
-            width: '1px',
-            height: '1px',
-            overflow: 'hidden',
-            opacity: 0,
-            pointerEvents: 'none',
-          }}>
-            {p.content}
-          </div>
-        ))}
       </div>
 
       <StatusBar wsStatus={wsStatus} cwd={cwd} onChangeCwd={handleChangeCwd} />

package/src/renderer/components/PaneLayout.tsx

@@ -116,9 +116,10 @@ interface PaneLayoutProps {
   panes: PaneContent[]
   onLayoutChange: (layout: LayoutNode) => void
   onToggle: (id: string) => void
+  paneHostPrefix?: string
 }
 
-export function PaneLayout({ layout, panes, onLayoutChange, onToggle }: PaneLayoutProps) {
+export function PaneLayout({ layout, panes, onLayoutChange, onToggle, paneHostPrefix }: PaneLayoutProps) {
   const [dragPaneId, setDragPaneId] = useState<string | null>(null)
 
   const handleDrop = useCallback((targetPaneId: string, zone: DropZone) => {
@@ -150,6 +151,7 @@ export function PaneLayout({ layout, panes, onLayoutChange, onToggle }: PaneLayo
           onLayoutChange={onLayoutChange}
           parentDirection={null}
           path={[]}
+          paneHostPrefix={paneHostPrefix}
         />
       </div>
     </DragContext.Provider>
@@ -166,9 +168,10 @@ interface LayoutRendererProps {
   onLayoutChange: (layout: LayoutNode) => void
   parentDirection: SplitDirection | null
   path: number[]
+  paneHostPrefix?: string
 }
 
-function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path }: LayoutRendererProps) {
+function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path, paneHostPrefix }: LayoutRendererProps) {
   if (node.type === 'leaf') {
     const pane = paneMap.get(node.paneId)
     if (!pane) return null
@@ -177,6 +180,7 @@ function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, paren
         pane={pane}
         onDrop={onDrop}
         onToggle={onToggle}
+        paneHostPrefix={paneHostPrefix}
       />
     )
   }
@@ -189,6 +193,7 @@ function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, paren
       onToggle={onToggle}
       onLayoutChange={onLayoutChange}
       path={path}
+      paneHostPrefix={paneHostPrefix}
     />
   )
 }
@@ -202,9 +207,10 @@ interface SplitContainerProps {
   onToggle: (id: string) => void
   onLayoutChange: (layout: LayoutNode) => void
   path: number[]
+  paneHostPrefix?: string
 }
 
-function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path }: SplitContainerProps) {
+function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path, paneHostPrefix }: SplitContainerProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const draggingDivider = useRef<number | null>(null)
   const sizesRef = useRef(node.sizes)
@@ -306,6 +312,7 @@ function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path
               }}
               parentDirection={node.direction}
               path={[...path, i]}
+              paneHostPrefix={paneHostPrefix}
             />
           </div>
           {i < node.children.length - 1 && (
@@ -332,12 +339,43 @@ interface LeafPaneProps {
   pane: PaneContent
   onDrop: (targetPaneId: string, zone: DropZone) => void
   onToggle: (id: string) => void
+  paneHostPrefix?: string
 }
 
-function LeafPane({ pane, onDrop, onToggle }: LeafPaneProps) {
+function LeafPane({ pane, onDrop, onToggle, paneHostPrefix }: LeafPaneProps) {
   const { dragPaneId, setDragPaneId } = useContext(DragContext)
   const [hoverZone, setHoverZone] = useState<DropZone | null>(null)
   const paneRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  // Reparent the persistent host element into this leaf's content area
+  useEffect(() => {
+    if (!paneHostPrefix || !contentRef.current) return
+    const hostEl = document.getElementById(`${paneHostPrefix}${pane.id}`)
+    if (!hostEl) return
+
+    // Move host element into this container
+    hostEl.style.position = ''
+    hostEl.style.width = '100%'
+    hostEl.style.height = '100%'
+    hostEl.style.overflow = ''
+    hostEl.style.opacity = '1'
+    hostEl.style.pointerEvents = ''
+    contentRef.current.appendChild(hostEl)
+
+    return () => {
+      // When this leaf unmounts, move host back to offscreen
+      if (hostEl.parentElement === contentRef.current) {
+        document.body.appendChild(hostEl)
+        hostEl.style.position = 'absolute'
+        hostEl.style.width = '1px'
+        hostEl.style.height = '1px'
+        hostEl.style.overflow = 'hidden'
+        hostEl.style.opacity = '0'
+        hostEl.style.pointerEvents = 'none'
+      }
+    }
+  }, [pane.id, paneHostPrefix])
 
   const isDragging = dragPaneId === pane.id
   const isDropTarget = dragPaneId !== null && dragPaneId !== pane.id
@@ -385,8 +423,8 @@ function LeafPane({ pane, onDrop, onToggle }: LeafPaneProps) {
       </div>
 
       {/* Content */}
-      <div className="leaf-pane-content">
-        {pane.content}
+      <div className="leaf-pane-content" ref={contentRef}>
+        {!paneHostPrefix && pane.content}
       </div>
 
       {/* Drop zone overlay (only visible when another pane is being dragged) */}