@hienlh/ppm 0.13.21 → 0.13.22

package/src/web/components/layout/editor-panel.tsx

@@ -1,5 +1,5 @@
-import { Suspense, lazy, useCallback } from "react";
-import { Loader2, Terminal, MessageSquare, FilePlus } from "lucide-react";
+import { useCallback, useEffect } from "react";
+import { Terminal, MessageSquare, FilePlus } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
@@ -7,6 +7,7 @@ import { SessionListPanel } from "@/components/chat/session-list-panel";
 import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
+import { registerPanelSlot } from "./tab-pool";
 import { cn } from "@/lib/utils";
 
 const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }[] = [
@@ -15,21 +16,6 @@ const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }
   { type: "editor", label: "New File", icon: FilePlus },
 ];
 
-const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
-  terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
-  chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
-  editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
-  database: lazy(() => import("@/components/database/database-viewer").then((m) => ({ default: m.DatabaseViewer }))),
-  sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
-  postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ default: m.PostgresViewer }))),
-  "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
-  settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
-  ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ default: m.PortForwardingTab }))),
-  extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
-  "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
-  "conflict-editor": lazy(() => import("@/components/editor/conflict-editor").then((m) => ({ default: m.ConflictEditor }))),
-};
-
 interface EditorPanelProps {
   panelId: string;
   projectName: string;
@@ -43,6 +29,15 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
     return grid.flat().length;
   });
 
+  // Register this panel's content area as a portal slot for TabPool.
+  // Using callback ref so registration happens synchronously when the DOM mounts,
+  // avoiding a frame delay that useEffect would cause.
+  const slotCallbackRef = useCallback((el: HTMLDivElement | null) => {
+    registerPanelSlot(panelId, el);
+  }, [panelId]);
+  // Cleanup on unmount (panelId change is handled by callback ref re-firing)
+  useEffect(() => () => registerPanelSlot(panelId, null), [panelId]);
+
   if (!panel) return null;
 
   return (
@@ -57,28 +52,10 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
       <TabBar panelId={panelId} />
 
       <div className="flex-1 overflow-hidden relative" data-panel-drop-zone={panelId}>
-        {panel.tabs.length === 0 ? (
-          <EmptyPanel panelId={panelId} />
-        ) : (
-          panel.tabs.map((tab) => {
-            const Component = TAB_COMPONENTS[tab.type];
-            const isActive = tab.id === panel.activeTabId;
-            if (!Component) {
-              return (
-                <div key={tab.id} className={isActive ? "absolute inset-0 flex items-center justify-center text-muted-foreground" : "hidden"}>
-                  Unknown tab type: {tab.type}
-                </div>
-              );
-            }
-            return (
-              <div key={tab.id} className="absolute inset-0" style={isActive ? undefined : { opacity: 0, pointerEvents: "none" }}>
-                <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-6 animate-spin text-primary" /></div>}>
-                  <Component metadata={tab.metadata} tabId={tab.id} />
-                </Suspense>
-              </div>
-            );
-          })
-        )}
+        {panel.tabs.length === 0 && <EmptyPanel panelId={panelId} />}
+        {/* Always render the slot so TabPool can portal into it immediately.
+            Hidden when empty to let EmptyPanel show through. */}
+        <div ref={slotCallbackRef} className="absolute inset-0" style={panel.tabs.length === 0 ? { display: "none" } : undefined} />
         <SplitDropOverlay panelId={panelId} />
       </div>
     </div>

package/src/web/components/layout/tab-pool.tsx

@@ -0,0 +1,196 @@
+/**
+ * TabPool — persistent tab rendering with DOM reparenting.
+ *
+ * All tab components are mounted ONCE in a hidden off-screen container and
+ * never unmounted when moved between panels or split. useLayoutEffect
+ * physically moves each tab's wrapper DOM node into the correct panel slot
+ * via appendChild (which moves, not clones). Component instances, hooks,
+ * and all internal state (xterm buffer, Monaco editor, chat scroll) survive.
+ *
+ * Why not createPortal? Changing a portal's container element causes React
+ * to unmount/remount the children — defeating the purpose.
+ */
+import { useRef, useLayoutEffect, useSyncExternalStore, Suspense, lazy } from "react";
+import { Loader2 } from "lucide-react";
+import { usePanelStore } from "@/stores/panel-store";
+import type { TabType } from "@/stores/tab-store";
+
+// ---------------------------------------------------------------------------
+// Lazy tab components (single source of truth for all tab types)
+// ---------------------------------------------------------------------------
+const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
+  terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
+  chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
+  editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
+  database: lazy(() => import("@/components/database/database-viewer").then((m) => ({ default: m.DatabaseViewer }))),
+  sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
+  postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ default: m.PostgresViewer }))),
+  "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
+  settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
+  ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ default: m.PortForwardingTab }))),
+  extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
+  "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
+  "conflict-editor": lazy(() => import("@/components/editor/conflict-editor").then((m) => ({ default: m.ConflictEditor }))),
+};
+
+// ---------------------------------------------------------------------------
+// Slot registry — panels register their content container refs here
+// ---------------------------------------------------------------------------
+type SlotListener = () => void;
+
+class SlotRegistry {
+  private slots = new Map<string, HTMLDivElement>();
+  private listeners = new Set<SlotListener>();
+  private version = 0;
+
+  register(panelId: string, el: HTMLDivElement | null) {
+    if (el) {
+      if (this.slots.get(panelId) === el) return;
+      this.slots.set(panelId, el);
+    } else {
+      if (!this.slots.has(panelId)) return;
+      this.slots.delete(panelId);
+    }
+    this.version++;
+    this.listeners.forEach((fn) => fn());
+  }
+
+  get(panelId: string): HTMLDivElement | undefined {
+    return this.slots.get(panelId);
+  }
+
+  subscribe(fn: SlotListener): () => void {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+
+  getVersion(): number {
+    return this.version;
+  }
+}
+
+const registry = new SlotRegistry();
+
+/** Called by EditorPanel to register its content slot */
+export function registerPanelSlot(panelId: string, el: HTMLDivElement | null) {
+  registry.register(panelId, el);
+}
+
+// ---------------------------------------------------------------------------
+// TabPool — renders all tabs in a hidden container, reparents into slots
+// ---------------------------------------------------------------------------
+export function TabPool() {
+  // Re-render when slots change (panel mount/unmount)
+  useSyncExternalStore(
+    (cb) => registry.subscribe(cb),
+    () => registry.getVersion(),
+  );
+
+  const panels = usePanelStore((s) => s.panels);
+  const grid = usePanelStore((s) => s.grid);
+
+  // Collect all tabs across visible panels (only panels in current grid)
+  const visiblePanelIds = new Set(grid.flat());
+  const tabEntries: { tabId: string; panelId: string; type: TabType; metadata?: Record<string, unknown>; isActive: boolean }[] = [];
+
+  for (const panelId of visiblePanelIds) {
+    const panel = panels[panelId];
+    if (!panel) continue;
+    for (const tab of panel.tabs) {
+      tabEntries.push({
+        tabId: tab.id,
+        panelId,
+        type: tab.type,
+        metadata: tab.metadata,
+        isActive: tab.id === panel.activeTabId,
+      });
+    }
+  }
+
+  // Stable key order — prevents React from calling insertBefore() to reorder
+  // children, which would yank reparented DOM nodes back to the hidden container
+  // and reset scroll positions / trigger resize observers.
+  tabEntries.sort((a, b) => a.tabId.localeCompare(b.tabId));
+
+  return (
+    // Off-screen mount point. React mounts tab wrappers here, then
+    // useLayoutEffect moves them into panel slots before the browser paints.
+    <div style={{ position: "fixed", top: 0, left: 0, width: 0, height: 0, overflow: "hidden", pointerEvents: "none", visibility: "hidden" }}>
+      {tabEntries.map((entry) => (
+        <ReparentingTab
+          key={entry.tabId}
+          tabId={entry.tabId}
+          panelId={entry.panelId}
+          type={entry.type}
+          metadata={entry.metadata}
+          isActive={entry.isActive}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ReparentingTab — mounts once, physically moves between panel slots
+// ---------------------------------------------------------------------------
+interface ReparentingTabProps {
+  tabId: string;
+  panelId: string;
+  type: TabType;
+  metadata?: Record<string, unknown>;
+  isActive: boolean;
+}
+
+function ReparentingTab({ tabId, panelId, type, metadata, isActive }: ReparentingTabProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const Component = TAB_COMPONENTS[type];
+
+  // Imperatively move the wrapper DOM node into the correct panel slot.
+  // appendChild on an already-mounted node moves it (DOM spec — no clone/destroy).
+  // useLayoutEffect runs before paint, so the user never sees the off-screen state.
+  // No deps — must run every render because React's reconciliation may call
+  // insertBefore() to reorder keyed children, moving reparented nodes back
+  // to the hidden container. The early-return guard keeps this cheap.
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    const slot = registry.get(panelId);
+    if (!wrapper || !slot || wrapper.parentElement === slot) return;
+
+    // Save scroll positions — appendChild resets them during the DOM move
+    const scrollables: { el: Element; top: number; left: number }[] = [];
+    wrapper.querySelectorAll("*").forEach((el) => {
+      if (el.scrollTop || el.scrollLeft) {
+        scrollables.push({ el, top: el.scrollTop, left: el.scrollLeft });
+      }
+    });
+
+    slot.appendChild(wrapper);
+
+    // Restore scroll positions synchronously before paint
+    for (const { el, top, left } of scrollables) {
+      el.scrollTop = top;
+      el.scrollLeft = left;
+    }
+  });
+
+  if (!Component) return null;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="absolute inset-0"
+      style={isActive ? undefined : { opacity: 0, pointerEvents: "none" }}
+      data-tab-pool-id={tabId}
+    >
+      <Suspense
+        fallback={
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="size-6 animate-spin text-primary" />
+          </div>
+        }
+      >
+        <Component metadata={metadata} tabId={tabId} />
+      </Suspense>
+    </div>
+  );
+}

package/dist/web/assets/keybindings-store-fGywATlN.js

@@ -1 +0,0 @@
-import"./vendor-markdown-0Mxgxy0L.js";import"./api-client-DIhJ5qVW.js";import{k as e}from"./index-EaYSB9U9.js";export{e as useKeybindingsStore};

package/dist/web/assets/notification-store-Dz9dmEg3.js

@@ -1 +0,0 @@
-import"./vendor-markdown-0Mxgxy0L.js";import"./api-client-DIhJ5qVW.js";import{x as e}from"./index-EaYSB9U9.js";export{e as useNotificationStore};