@hienlh/ppm 0.17.57 → 0.18.0

package/src/web/components/explorer/tree-node-context-menu.tsx

@@ -1,7 +1,7 @@
 /**
  * Context menu items for a tree node (file or folder).
  */
-import { Download } from "lucide-react";
+import { Download, FolderOpen } from "lucide-react";
 import type { FileNode, ClipboardState } from "@/stores/file-store";
 import {
   ContextMenuContent,
@@ -39,6 +39,11 @@ export function TreeNodeContextMenu({
             New Folder
           </ContextMenuItem>
           <ContextMenuSeparator />
+          <ContextMenuItem onClick={() => onAction("open-in-file-explorer", node)}>
+            <FolderOpen className="size-3.5 mr-2" />
+            Open in File Explorer
+          </ContextMenuItem>
+          <ContextMenuSeparator />
         </>
       )}
       <ContextMenuItem onClick={() => onAction("cut", node)}>

package/src/web/components/explorer/tree-node.tsx

@@ -3,7 +3,7 @@
  * Rows are flat siblings (no recursion); visible order comes from flatten-visible-tree.ts.
  * Handles click, drag/drop, context menu for individual tree items.
  */
-import { useState, useRef, useEffect, memo } from "react";
+import { useRef, useEffect, memo } from "react";
 import {
   Folder,
   FolderOpen,
@@ -12,39 +12,35 @@ import {
   Loader2,
 } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
-import { useFileStore, getVisiblePaths, type FileNode } from "@/stores/file-store";
+import { useFileStore, getVisiblePaths, absoluteProjectPath, type FileNode } from "@/stores/file-store";
+import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useCompareStore } from "@/stores/compare-store";
 import { useGitStatusStore, GIT_STATUS_COLORS, type GitFileStatus } from "@/stores/git-status-store";
-import { api, projectUrl } from "@/lib/api-client";
 import { cn } from "@/lib/utils";
-import { toast } from "sonner";
 import {
   ContextMenu,
   ContextMenuTrigger,
 } from "@/components/ui/adaptive-context-menu";
+import { DROP_TARGET_CLASS } from "@/components/os-explorer/dnd/drop-target-style";
+import type { DropRunner } from "@/components/os-explorer/dnd/entry-drop-executor";
 import { getFileIcon } from "./file-icon-map";
 import { TreeNodeContextMenu } from "./tree-node-context-menu";
+import { useTreeRowDnd } from "./use-tree-row-dnd";
 import type { NodeRow } from "./flatten-visible-tree";
 
-/** Check if drag event is from OS files (not internal PPM drag) */
-export function isExternalFileDrag(e: React.DragEvent): boolean {
-  return e.dataTransfer.types.includes("Files") && !e.dataTransfer.types.includes("application/x-ppm-path");
-}
-
-function parentDirOf(path: string): string {
-  return path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
-}
-
 export interface TreeRowProps {
   row: NodeRow;
   projectName: string;
   onAction: (action: string, node: FileNode) => void;
   onFileDrop: (targetDir: string, files: FileList) => void;
   onFileOpen?: () => void;
+  /** Runs a cross-surface entry drop (from an explorer window, another project's tree, or
+   *  this same tree) through the shared collision-prompt transfer — see `use-drop-transfer`. */
+  transferRun: DropRunner;
 }
 
-export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFileDrop, onFileOpen }: TreeRowProps) {
+export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFileDrop, onFileOpen, transferRun }: TreeRowProps) {
   const { node, effectiveNode, displayName, depth } = row;
   const { expandedPaths, loadedPaths, inflight, toggleExpand, selectedFiles, toggleFileSelect, clipboard, focusedPath, setFocusedPath } = useFileStore(
     useShallow((s) => ({
@@ -60,6 +56,7 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     })),
   );
   const openTab = useTabStore((s) => s.openTab);
+  const projectRoot = useProjectStore((s) => s.activeProject?.path);
   const compareSelection = useCompareStore((s) => s.selection);
   const isDir = node.type === "directory";
   // Git decoration: per-file and per-folder status
@@ -71,11 +68,14 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
   const isExpanded = expandedPaths.has(node.path);
   const isSelected = selectedFiles.includes(node.path);
   const isIgnored = node.ignored === true;
-  const isCut = clipboard?.operation === "cut" && clipboard.paths.includes(node.path);
+  // The clipboard is shared with the explorer windows and therefore absolute; compare in
+  // that space so a tree cut still greys its own row out.
+  const isCut =
+    clipboard?.operation === "cut" &&
+    projectRoot != null &&
+    clipboard.paths.includes(absoluteProjectPath(projectRoot, node.path));
   const isFocused = focusedPath === node.path || focusedPath === effectiveNode.path;
   const isLoadingChildren = isDir && isExpanded && !loadedPaths.has(effectiveNode.path) && inflight.has(effectiveNode.path);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const dragCounter = useRef(0);
   const rowRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -122,91 +122,32 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     onFileOpen?.();
   }
 
-  function handleDragStart(e: React.DragEvent) {
-    const pathValue = isDir ? `${node.path}/` : node.path;
-    e.dataTransfer.setData("application/x-ppm-path", pathValue);
-    e.dataTransfer.setData("text/plain", node.name);
-    e.dataTransfer.effectAllowed = "copyMove";
-  }
-
-  // Flat rows: dropping on a file targets its parent directory
-  const dropTargetDir = isDir ? effectiveNode.path : parentDirOf(node.path);
-
-  function canAcceptDrop(e: React.DragEvent): boolean {
-    return isExternalFileDrag(e) || e.dataTransfer.types.includes("application/x-ppm-path");
-  }
-
-  function handleNodeDragEnter(e: React.DragEvent) {
-    if (!canAcceptDrop(e)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounter.current++;
-    if (dragCounter.current === 1) setIsDragOver(true);
-  }
-  function handleNodeDragLeave(e: React.DragEvent) {
-    e.stopPropagation();
-    dragCounter.current--;
-    if (dragCounter.current === 0) setIsDragOver(false);
-  }
-  function handleNodeDragOver(e: React.DragEvent) {
-    if (!canAcceptDrop(e)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.dropEffect = isExternalFileDrag(e) ? "copy" : "move";
-  }
-  function handleNodeDrop(e: React.DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounter.current = 0;
-    setIsDragOver(false);
-
-    // External file upload
-    if (isExternalFileDrag(e)) {
-      if (e.dataTransfer.files.length > 0) onFileDrop(dropTargetDir, e.dataTransfer.files);
-      return;
-    }
-
-    // Internal tree move
-    const sourcePath = e.dataTransfer.getData("application/x-ppm-path").replace(/\/$/, "");
-    if (!sourcePath) return;
-    // Prevent dropping into self or descendant
-    if (sourcePath === dropTargetDir || dropTargetDir.startsWith(`${sourcePath}/`)) return;
-    // Prevent no-op (already in this folder)
-    const sourceParent = parentDirOf(sourcePath);
-    if (sourceParent === dropTargetDir) return;
-
-    const sourceName = sourcePath.includes("/") ? sourcePath.slice(sourcePath.lastIndexOf("/") + 1) : sourcePath;
-    const destination = dropTargetDir ? `${dropTargetDir}/${sourceName}` : sourceName;
-    api.post(`${projectUrl(projectName)}/files/move`, { source: sourcePath, destination })
-      .then(() => {
-        const store = useFileStore.getState();
-        store.invalidateIndex();
-        store.loadIndex(projectName);
-        store.invalidateFolder(projectName, sourceParent);
-        store.invalidateFolder(projectName, dropTargetDir);
-      })
-      .catch((err) => {
-        toast.error(err instanceof Error ? err.message : "Move failed");
-      });
-  }
+  const dnd = useTreeRowDnd({
+    path: node.path,
+    name: node.name,
+    isDir,
+    effectivePath: effectiveNode.path,
+    isSelected,
+    selectedFiles,
+    isExpanded,
+    projectName,
+    projectRoot,
+    toggleExpand,
+    onFileDrop,
+    transferRun,
+  });
 
   const { icon: FileIcon, color: fileIconColor } = isDir
     ? { icon: isExpanded ? FolderOpen : Folder, color: isExpanded ? "text-primary" : "text-text-3" }
     : getFileIcon(node.name);
 
   return (
-    <div
-      onDragEnter={handleNodeDragEnter}
-      onDragLeave={handleNodeDragLeave}
-      onDragOver={handleNodeDragOver}
-      onDrop={handleNodeDrop}
-    >
+    <div {...dnd.containerHandlers}>
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <button
             ref={rowRef}
-            draggable
-            onDragStart={handleDragStart}
+            {...dnd.entrySource}
             onClick={handleClick}
             className={cn(
               "flex items-center w-full gap-1.5 px-2 py-1 rounded-[var(--rad-sm)] text-[13px]",
@@ -215,7 +156,7 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
               (isIgnored || isCut) && "opacity-40",
               isFocused && "bg-surface-elevated",
               isSelected && "bg-accent-wash",
-              isDragOver && "ring-1 ring-dashed ring-primary bg-primary/10",
+              dnd.isDragOver && DROP_TARGET_CLASS,
             )}
             style={{ paddingLeft: `${depth * 16 + 8}px` }}
           >

package/src/web/components/explorer/use-file-upload-drag.ts

@@ -4,7 +4,8 @@
 import { useCallback, useState, useRef } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { getAuthToken, projectUrl } from "@/lib/api-client";
-import { isExternalFileDrag } from "./tree-node";
+import { enterDragDepth, leaveDragDepth, resetDragDepth, type DragDepthCounter } from "@/components/os-explorer/dnd/drag-depth-counter";
+import { isExternalFileDrag } from "./use-tree-row-dnd";
 import { toast } from "sonner";
 
 interface UseFileUploadDragOptions {
@@ -14,7 +15,8 @@ interface UseFileUploadDragOptions {
 
 export function useFileUploadDrag({ projectName, setExpanded }: UseFileUploadDragOptions) {
   const [isRootDragOver, setIsRootDragOver] = useState(false);
-  const rootDragCounter = useRef(0);
+  // `useRef<number>`'s `{ current }` shape already matches `DragDepthCounter` structurally.
+  const rootDragCounter: DragDepthCounter = useRef(0);
 
   const uploadFiles = useCallback(async (targetDir: string, files: FileList) => {
     if (!projectName) return;
@@ -51,14 +53,17 @@ export function useFileUploadDrag({ projectName, setExpanded }: UseFileUploadDra
   }, [projectName, setExpanded]);
 
   function handleRootDragEnter(e: React.DragEvent) {
-    if (!isExternalFileDrag(e)) return;
+    const accepted = isExternalFileDrag(e);
+    if (!accepted) return;
     e.preventDefault();
-    rootDragCounter.current++;
-    if (rootDragCounter.current === 1) setIsRootDragOver(true);
+    if (enterDragDepth(rootDragCounter, accepted)) setIsRootDragOver(true);
   }
-  function handleRootDragLeave() {
-    rootDragCounter.current--;
-    if (rootDragCounter.current === 0) setIsRootDragOver(false);
+  function handleRootDragLeave(e: React.DragEvent) {
+    // `leaveDragDepth` takes the *same* gate `handleRootDragEnter` used — an entry drag
+    // never incremented this counter, so letting every entry-drag leave decrement it
+    // unconditionally drove it negative, after which the OS-file-upload highlight could
+    // never reach a positive count again.
+    if (leaveDragDepth(rootDragCounter, isExternalFileDrag(e))) setIsRootDragOver(false);
   }
   function handleRootDragOver(e: React.DragEvent) {
     if (!isExternalFileDrag(e)) return;
@@ -68,7 +73,7 @@ export function useFileUploadDrag({ projectName, setExpanded }: UseFileUploadDra
   function handleRootDrop(e: React.DragEvent) {
     if (!isExternalFileDrag(e)) return;
     e.preventDefault();
-    rootDragCounter.current = 0;
+    resetDragDepth(rootDragCounter);
     setIsRootDragOver(false);
     if (e.dataTransfer.files.length > 0) uploadFiles("", e.dataTransfer.files);
   }

package/src/web/components/explorer/use-tree-row-dnd.ts

@@ -0,0 +1,206 @@
+/**
+ * Drag source + drop target wiring for one tree row.
+ *
+ * Two drags share this row: the tree's own internal move (a single relative path, its own
+ * `application/x-ppm-path` MIME, its own project-scoped `/files/move` endpoint) and OS file
+ * uploads — both pre-dating this hook and left byte-for-byte as they were. Layered on top,
+ * the shared cross-surface entry-drag handlers let an explorer window or a different
+ * project's tree drag onto (or receive a drag from) this same row.
+ *
+ * Every tree-origin drag dual-writes the legacy MIME, regardless of which project it started
+ * in — so its mere presence is not enough to take the legacy project-scoped move: that path
+ * treats the dragged path as relative to *this* row's project, which is wrong the moment the
+ * drag started in a different project's tree (two panels, two active projects). The legacy
+ * path is only safe when the absolute payload says the drag's own `projectName` matches this
+ * row's; anything else — including a same-name coincidence across two different projects,
+ * which the payload's `projectName` alone cannot tell apart from the real thing, so this
+ * additionally requires it came from a tree — falls through to the shared absolute-path
+ * handlers, which are correct for any project by construction.
+ */
+
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { api, projectUrl } from "@/lib/api-client";
+import { useFileStore, absoluteProjectPath } from "@/stores/file-store";
+import { fsChanged } from "@/components/os-explorer/explorer-store";
+import {
+  decodeEntryDrag, ENTRY_DRAG_MIME, TREE_LEGACY_DRAG_MIME, type EntryDragPayload,
+} from "@/components/os-explorer/dnd/entry-drag-payload";
+import { getInFlightDrag } from "@/components/os-explorer/dnd/entry-drag-state";
+import {
+  enterDragDepth, leaveDragDepth, resetDragDepth, type DragDepthCounter,
+} from "@/components/os-explorer/dnd/drag-depth-counter";
+import { executeEntryDrop, type DropRunner } from "@/components/os-explorer/dnd/entry-drop-executor";
+import { useEntryDragSource, type EntryDragSourceProps } from "@/components/os-explorer/dnd/use-entry-drag-source";
+import { useEntryDropTarget } from "@/components/os-explorer/dnd/use-entry-drop-target";
+
+/** Check if drag event is from OS files (not internal PPM drag). */
+export function isExternalFileDrag(e: React.DragEvent): boolean {
+  return e.dataTransfer.types.includes("Files") && !e.dataTransfer.types.includes(TREE_LEGACY_DRAG_MIME);
+}
+
+/**
+ * Pure routing decision, extracted for unit testing: given the decoded payload this row can
+ * currently see (module ref on hover, real `dataTransfer` at drop) and whether the legacy
+ * MIME is present at all, is the legacy project-scoped move safe to use? Only when the drag
+ * both carries that MIME and genuinely originated in *this* project's tree.
+ */
+export function isSameProjectLegacyPayload(
+  payload: EntryDragPayload | null,
+  hasLegacyMime: boolean,
+  projectName: string,
+): boolean {
+  return hasLegacyMime && payload?.origin === "tree" && payload.projectName === projectName;
+}
+
+function parentDirOf(path: string): string {
+  return path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+}
+
+export interface TreeRowDndOptions {
+  path: string;
+  name: string;
+  isDir: boolean;
+  /** Flat rows: dropping on a file targets its parent directory. */
+  effectivePath: string;
+  isSelected: boolean;
+  selectedFiles: string[];
+  isExpanded: boolean;
+  projectName: string;
+  projectRoot: string | undefined;
+  toggleExpand(projectName: string, path: string): void;
+  onFileDrop(targetDir: string, files: FileList): void;
+  /** Runs a cross-surface entry drop through the shared collision-prompt transfer. */
+  transferRun: DropRunner;
+}
+
+export interface TreeRowDnd {
+  entrySource: EntryDragSourceProps;
+  containerHandlers: {
+    onDragEnter(e: React.DragEvent): void;
+    onDragLeave(e: React.DragEvent): void;
+    onDragOver(e: React.DragEvent): void;
+    onDrop(e: React.DragEvent): void;
+  };
+  /** True while this row is a claimed target of either drag kind — draw the ring from it. */
+  isDragOver: boolean;
+}
+
+export function useTreeRowDnd(options: TreeRowDndOptions): TreeRowDnd {
+  const {
+    path, name, isDir, effectivePath, isSelected, selectedFiles, isExpanded,
+    projectName, projectRoot, toggleExpand, onFileDrop, transferRun,
+  } = options;
+
+  const [isDragOver, setIsDragOver] = useState(false);
+  // `useRef<number>`'s `{ current }` shape already matches `DragDepthCounter` structurally.
+  const dragCounter: DragDepthCounter = useRef(0);
+
+  // Absolute host paths — the address space an explorer window or another project's tree
+  // shares with this one. A multi-selected drag carries the whole selection; a lone node
+  // carries just itself, matching what the context menu would act on.
+  const dragAbsolutePaths = (isSelected && selectedFiles.length > 1 ? selectedFiles : [path])
+    .map((p) => (projectRoot ? absoluteProjectPath(projectRoot, p) : p));
+
+  const entrySource = useEntryDragSource({
+    paths: dragAbsolutePaths,
+    origin: "tree",
+    projectName,
+    // The tree's own internal move keeps reading this single-path type exactly as before —
+    // multi-select was never wired into it, and this dual-write does not change that.
+    extraData: { [TREE_LEGACY_DRAG_MIME]: isDir ? `${path}/` : path },
+  });
+
+  const dropTargetDir = isDir ? effectivePath : parentDirOf(path);
+  const dropTargetAbsolute = isDir && projectRoot ? absoluteProjectPath(projectRoot, dropTargetDir) : null;
+
+  const entryTarget = useEntryDropTarget({
+    targetDir: dropTargetAbsolute,
+    onDropEntries: (payload, op, dstDir) => void executeEntryDrop(payload, dstDir, op, transferRun),
+    springLoad: isDir && !isExpanded ? () => toggleExpand(projectName, path) : undefined,
+  });
+
+  // dataTransfer values are unreadable during dragenter/dragover in Chromium — read the
+  // module-level in-flight payload there (set at dragstart by the row that began the drag,
+  // in this same document), and the real dataTransfer once it is actually readable, at drop.
+  function legacyDragPayload(e: React.DragEvent): EntryDragPayload | null {
+    return e.type === "drop" ? decodeEntryDrag(e.dataTransfer.getData(ENTRY_DRAG_MIME)) : getInFlightDrag();
+  }
+
+  function canAcceptDrop(e: React.DragEvent): boolean {
+    if (isExternalFileDrag(e)) return true;
+    return isSameProjectLegacyPayload(
+      legacyDragPayload(e),
+      e.dataTransfer.types.includes(TREE_LEGACY_DRAG_MIME),
+      projectName,
+    );
+  }
+
+  function handleNodeDragEnter(e: React.DragEvent) {
+    if (!canAcceptDrop(e)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (enterDragDepth(dragCounter, true)) setIsDragOver(true);
+  }
+  function handleNodeDragLeave(e: React.DragEvent) {
+    e.stopPropagation();
+    if (leaveDragDepth(dragCounter, true)) setIsDragOver(false);
+  }
+  function handleNodeDragOver(e: React.DragEvent) {
+    if (!canAcceptDrop(e)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = isExternalFileDrag(e) ? "copy" : "move";
+  }
+  function handleNodeDrop(e: React.DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    resetDragDepth(dragCounter);
+    setIsDragOver(false);
+
+    // External file upload
+    if (isExternalFileDrag(e)) {
+      if (e.dataTransfer.files.length > 0) onFileDrop(dropTargetDir, e.dataTransfer.files);
+      return;
+    }
+
+    // Internal tree move — canAcceptDrop already confirmed this drag's own projectName
+    // matches this row's, so the legacy relative path is safe to resolve against it.
+    const sourcePath = e.dataTransfer.getData(TREE_LEGACY_DRAG_MIME).replace(/\/$/, "");
+    if (!sourcePath) return;
+    // Prevent dropping into self or descendant
+    if (sourcePath === dropTargetDir || dropTargetDir.startsWith(`${sourcePath}/`)) return;
+    // Prevent no-op (already in this folder)
+    const sourceParent = parentDirOf(sourcePath);
+    if (sourceParent === dropTargetDir) return;
+
+    const sourceName = sourcePath.includes("/") ? sourcePath.slice(sourcePath.lastIndexOf("/") + 1) : sourcePath;
+    const destination = dropTargetDir ? `${dropTargetDir}/${sourceName}` : sourceName;
+    api.post(`${projectUrl(projectName)}/files/move`, { source: sourcePath, destination })
+      .then(() => {
+        const store = useFileStore.getState();
+        store.invalidateIndex();
+        store.loadIndex(projectName);
+        store.invalidateFolder(projectName, sourceParent);
+        store.invalidateFolder(projectName, dropTargetDir);
+        // An explorer window showing either folder must refresh too.
+        if (projectRoot) {
+          fsChanged(absoluteProjectPath(projectRoot, sourceParent), absoluteProjectPath(projectRoot, dropTargetDir));
+        }
+      })
+      .catch((err) => {
+        toast.error(err instanceof Error ? err.message : "Move failed");
+      });
+  }
+
+  return {
+    entrySource,
+    isDragOver: isDragOver || entryTarget.isOver,
+    containerHandlers: {
+      onDragEnter: (e) => { if (canAcceptDrop(e)) handleNodeDragEnter(e); else entryTarget.handlers.onDragEnter(e); },
+      onDragLeave: (e) => { if (canAcceptDrop(e)) handleNodeDragLeave(e); else entryTarget.handlers.onDragLeave(e); },
+      onDragOver: (e) => { if (canAcceptDrop(e)) handleNodeDragOver(e); else entryTarget.handlers.onDragOver(e); },
+      onDrop: (e) => { if (canAcceptDrop(e)) handleNodeDrop(e); else entryTarget.handlers.onDrop(e); },
+    },
+  };
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Neutral titlebar used until an OS skin supplies its own chrome. Uses PPM semantic tokens
+ * so it inherits the active theme instead of hard-coding a platform look.
+ *
+ * A chrome is a component, not a render callback: a skin is free to hold its own hover,
+ * focus or animation state without entangling itself with the window frame's hooks.
+ */
+
+import { Minus, Square, Copy, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { TITLEBAR_HEIGHT, type WindowChromeProps } from "./window-chrome-contract";
+
+/**
+ * Caption buttons follow the Windows metric (44 px wide) rather than a square 44 px touch
+ * target: the window layer never renders below the `md` breakpoint, where mobile sheets
+ * take over, so the titlebar can stay at desktop height.
+ */
+const CAPTION_BUTTON = "grid place-items-center w-11 self-stretch text-text-2 can-hover:hover:bg-surface-elevated can-hover:hover:text-text transition-colors";
+
+export function DefaultWindowChrome({
+  title,
+  state,
+  focused,
+  titlebarProps,
+  onMinimize,
+  onToggleMaximize,
+  onClose,
+}: WindowChromeProps) {
+  const { className, style, ...rest } = titlebarProps;
+  return (
+    <div
+      {...rest}
+      style={{ height: TITLEBAR_HEIGHT, ...style }}
+      className={cn(
+        "flex items-stretch shrink-0 border-b border-border bg-panel-2 rounded-t-[8px] overflow-hidden",
+        "outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset",
+        className,
+      )}
+    >
+      <div className="flex-1 min-w-0 flex items-center px-3 cursor-default">
+        <span className={cn("truncate text-xs font-medium", focused ? "text-text" : "text-text-2")}>
+          {title}
+        </span>
+      </div>
+      <button
+        type="button"
+        aria-label="Minimize window"
+        className={CAPTION_BUTTON}
+        onClick={onMinimize}
+      >
+        <Minus className="size-3.5" />
+      </button>
+      <button
+        type="button"
+        aria-label={state === "maximized" ? "Restore window" : "Maximize window"}
+        className={CAPTION_BUTTON}
+        onClick={onToggleMaximize}
+      >
+        {state === "maximized" ? <Copy className="size-3" /> : <Square className="size-3" />}
+      </button>
+      <button
+        type="button"
+        aria-label="Close window"
+        className={cn(CAPTION_BUTTON, "can-hover:hover:bg-destructive can-hover:hover:text-white")}
+        onClick={onClose}
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  );
+}