@hienlh/ppm 0.18.13 → 0.18.14

package/src/web/components/floating-window/floating-window.tsx

@@ -19,6 +19,7 @@ import { PortalContainerProvider } from "@/components/ui/portal-container-contex
 import { TITLEBAR_HEIGHT } from "./window-chrome-contract";
 import { useWindowBodyElement } from "./use-window-body-element";
 import { WindowPipPlaceholder } from "./window-pip-placeholder";
+import { isPipOnlyWindow } from "./window-pip-registry";
 import { WindowSkinChrome } from "./window-skin-chrome";
 import { windowZIndex, type Bounds, type Rect } from "./window-geometry";
 import { useWindowStore, type WindowRuntimeState } from "./window-store";
@@ -120,6 +121,8 @@ export function FloatingWindow({
     movable: !maximized,
   });
 
+  const hiddenHost = Boolean(pip) && isPipOnlyWindow(win.id);
+
   return (
     <div
       ref={rootRef}
@@ -135,6 +138,10 @@ export function FloatingWindow({
         focused ? "shadow-2xl shadow-black/40" : "shadow-lg shadow-black/20",
         // Transitions are for maximize/restore only; during a gesture they would lag the pointer.
         gesturing ? "transition-none" : "transition-[transform,width,height] duration-150 motion-reduce:transition-none",
+        // A window opened only to carry a tab into PiP is never shown: the user asked for a
+        // PiP, not a window. `hidden` and not an unmount — the body must stay connected, or
+        // the PiP host has nowhere to put the tab back.
+        hiddenHost && "hidden",
       )}
     >
       <WindowSkinChrome
@@ -158,7 +165,7 @@ export function FloatingWindow({
         onClose={close}
       />
 
-      {pip && <WindowPipPlaceholder pip={pip} minimized={minimized} />}
+      {pip && !hiddenHost && <WindowPipPlaceholder pip={pip} minimized={minimized} />}
 
       {!maximized && !minimized && (
         <WindowResizeHandles bind={(handle) => bindResize(handle) as Record<string, unknown>} />

package/src/web/components/floating-window/open-tab-in-pip.ts

@@ -0,0 +1,78 @@
+/**
+ * Send a tab straight into picture-in-picture, without the user ever seeing a window.
+ *
+ * A PiP window can only adopt an element that is already in the page, and it needs somewhere
+ * to put it back. The floating window is that element and that home — so one still opens
+ * here, it is simply never shown: the frame keeps a pip-only window off screen, and closing
+ * PiP closes it, which re-docks the tab into the panel it came from.
+ */
+
+import { usePanelStore } from "@/stores/panel-store";
+import { focusPipDocument } from "./pip/pip-focus-target";
+import { attachPipHost } from "./pip/pip-host";
+import { TITLEBAR_HEIGHT } from "./window-chrome-contract";
+import {
+  clearPipOnlyWindow,
+  markPipOnlyWindow,
+  setWindowPip,
+  whenWindowSlot,
+} from "./window-pip-registry";
+import { useWindowStore } from "./window-store";
+
+export type OpenTabInPipResult = "opened" | "window-cap" | "cancelled";
+
+/** Drop the host window; its own teardown hands the tab back to the panel it came from. */
+function discard(windowId: string): void {
+  clearPipOnlyWindow(windowId);
+  useWindowStore.getState().close(windowId);
+}
+
+/**
+ * Detach a tab into a hidden window and adopt it into a PiP window.
+ *
+ * Rejects when the browser refuses the request (no support, or the click's activation was
+ * already spent); the caller reports that. Call it from a click handler with nothing awaited
+ * before it — the one await inside is a React commit, which leaves the activation valid.
+ */
+export async function openTabInPip(tabId: string, panelId: string): Promise<OpenTabInPipResult> {
+  const windowId = usePanelStore.getState().popOutTab(tabId, panelId);
+  if (!windowId) return "window-cap";
+  markPipOnlyWindow(windowId);
+
+  // The window exists in the store, but its body is created by the frame's layout effect —
+  // one commit away.
+  const slot = await whenWindowSlot(windowId);
+  if (!slot) {
+    discard(windowId);
+    return "cancelled";
+  }
+
+  const rect = useWindowStore.getState().windows[windowId]?.rect;
+  let handle;
+  try {
+    handle = await attachPipHost(slot, {
+      // A zero falls through to the host's minimum size rather than a magic default.
+      width: rect?.w ?? 0,
+      height: rect ? rect.h - TITLEBAR_HEIGHT : 0,
+      onDetach: () => {
+        setWindowPip(windowId, null);
+        // Closing PiP means "done with this tab out here", not "give me a window instead":
+        // the tab goes back to its strip.
+        discard(windowId);
+      },
+    });
+  } catch (err) {
+    discard(windowId);
+    throw err;
+  }
+
+  // Null means the window went away while the request was in flight; the host already
+  // restored what it had and called onDetach.
+  if (!handle) return "cancelled";
+
+  setWindowPip(windowId, handle);
+  // A DOM move carries no focus with it: without this the tab is visible in PiP but swallows
+  // nothing until the user clicks it.
+  focusPipDocument(handle.pipWindow.document);
+  return "opened";
+}

package/src/web/components/floating-window/window-pip-registry.ts

@@ -24,6 +24,52 @@ const listeners = new Set<() => void>();
 export function publishWindowSlot(windowId: string, el: HTMLElement | null): void {
   if (el) slots.set(windowId, el);
   else slots.delete(windowId);
+  for (const notify of listeners) notify();
+}
+
+/**
+ * Resolve once a window has published its body, or `null` if it never does.
+ *
+ * A window opened to host a picture-in-picture request exists in the store before React has
+ * mounted its frame, so the element the PiP host needs does not exist yet in the click
+ * handler that created it. Waiting is safe: transient activation survives a commit, it is
+ * consuming it twice that the browser refuses.
+ */
+export function whenWindowSlot(windowId: string, timeoutMs = 2000): Promise<HTMLElement | null> {
+  const existing = windowSlot(windowId);
+  if (existing) return Promise.resolve(existing);
+  return new Promise((resolve) => {
+    const settle = (el: HTMLElement | null) => {
+      listeners.delete(check);
+      clearTimeout(timer);
+      resolve(el);
+    };
+    const check = () => {
+      const el = windowSlot(windowId);
+      if (el) settle(el);
+    };
+    const timer = setTimeout(() => settle(null), timeoutMs);
+    listeners.add(check);
+  });
+}
+
+/**
+ * Windows that exist only to carry a tab into picture-in-picture: the frame keeps them off
+ * screen while PiP is up, and closing PiP closes the window, so the tab goes straight back
+ * to its tab strip instead of stranding an empty window the user never asked for.
+ */
+const pipOnly = new Set<string>();
+
+export function markPipOnlyWindow(windowId: string): void {
+  pipOnly.add(windowId);
+}
+
+export function isPipOnlyWindow(windowId: string): boolean {
+  return pipOnly.has(windowId);
+}
+
+export function clearPipOnlyWindow(windowId: string): void {
+  pipOnly.delete(windowId);
 }
 
 /** The body element of a mounted window, or null. */

package/src/web/components/layout/tab-pop-out-menu-item.tsx

@@ -1,12 +1,17 @@
 /**
- * "Open in window" — detaches a tab into a floating window, keeping it live.
+ * "Open in window" / "Open in picture-in-picture" — detaches a tab, keeping it live.
+ *
+ * The PiP route skips the window entirely from the user's point of view: a host window is
+ * opened and hidden, and closing PiP closes it, so the tab lands back in this strip.
  *
  * Desktop only: the window layer renders nothing below the md breakpoint, so on a phone
  * the item would move a tab somewhere the user cannot see (a scaled-down window is never
  * the answer — see the mobile-first UI rules).
  */
-import { ExternalLink } from "lucide-react";
+import { ExternalLink, PictureInPicture2 } from "lucide-react";
 import { toast } from "sonner";
+import { openTabInPip } from "@/components/floating-window/open-tab-in-pip";
+import { isDocumentPipSupported } from "@/components/floating-window/pip/pip-support";
 import { ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { usePanelStore } from "@/stores/panel-store";
@@ -36,6 +41,24 @@ export function TabPopOutMenuItem({ tab, panelId }: TabPopOutMenuItemProps) {
         <ExternalLink className="size-3.5 mr-2" />
         Open in window
       </ContextMenuItem>
+      {isDocumentPipSupported() && (
+        <ContextMenuItem
+          onClick={() => {
+            // Nothing awaited before this call: it spends the click's activation on the PiP
+            // request, and the browser grants that only to a live gesture.
+            void openTabInPip(tab.id, panelId)
+              .then((result) => {
+                if (result === "window-cap") toast.error("Too many windows open — close one first");
+              })
+              .catch(() => {
+                toast.error("Could not open the picture-in-picture window");
+              });
+          }}
+        >
+          <PictureInPicture2 className="size-3.5 mr-2" />
+          Open in picture-in-picture
+        </ContextMenuItem>
+      )}
       <ContextMenuSeparator />
     </>
   );

package/dist/web/assets/architecture-PBZL5I3N-BzFm9ELu.js

@@ -1 +0,0 @@
-import{K as e}from"./vendor-mermaid-CHTa6D69.js";export{e as createArchitectureServices};