@phenx-inc/ctlsurf 0.1.0

package/src/renderer/components/MultiSplitPane.tsx

@@ -0,0 +1,251 @@
+import { useState, useRef, useCallback, useEffect } from 'react'
+
+export interface PaneConfig {
+  id: string
+  label: string
+  content: React.ReactNode
+  visible: boolean
+}
+
+interface MultiSplitPaneProps {
+  panes: PaneConfig[]
+  onReorder: (orderedIds: string[]) => void
+  onToggle: (id: string) => void
+  onResize?: () => void
+}
+
+export function MultiSplitPane({ panes, onReorder, onToggle, onResize }: MultiSplitPaneProps) {
+  const visiblePanes = panes.filter(p => p.visible)
+  const count = visiblePanes.length
+
+  // Equal splits by default
+  const [splits, setSplits] = useState<number[]>(() =>
+    Array(count).fill(100 / count)
+  )
+
+  // Reset splits when visible pane count changes
+  useEffect(() => {
+    setSplits(Array(count).fill(100 / count))
+  }, [count])
+
+  // --- Divider resize ---
+  const containerRef = useRef<HTMLDivElement>(null)
+  const resizingIndex = useRef<number | null>(null)
+
+  const handleDividerDown = useCallback((index: number, e: React.MouseEvent) => {
+    e.preventDefault()
+    resizingIndex.current = index
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (resizingIndex.current === null || !containerRef.current) return
+      const idx = resizingIndex.current
+      const rect = containerRef.current.getBoundingClientRect()
+      const mousePct = ((e.clientX - rect.left) / rect.width) * 100
+      const sumBefore = splits.slice(0, idx).reduce((a, b) => a + b, 0)
+      const pairTotal = splits[idx] + splits[idx + 1]
+
+      let newLeft = mousePct - sumBefore
+      let newRight = pairTotal - newLeft
+
+      const minPct = 10
+      if (newLeft < minPct) { newLeft = minPct; newRight = pairTotal - minPct }
+      if (newRight < minPct) { newRight = minPct; newLeft = pairTotal - minPct }
+
+      setSplits(prev => {
+        const next = [...prev]
+        next[idx] = newLeft
+        next[idx + 1] = newRight
+        return next
+      })
+      onResize?.()
+    }
+
+    const handleMouseUp = () => {
+      if (resizingIndex.current !== null) {
+        resizingIndex.current = null
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        onResize?.()
+      }
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [splits, onResize])
+
+  // --- Drag-to-reorder ---
+  const [dragId, setDragId] = useState<string | null>(null)
+  const [dropTarget, setDropTarget] = useState<{ id: string; side: 'left' | 'right' } | null>(null)
+
+  const handleDragStart = useCallback((id: string, e: React.DragEvent) => {
+    setDragId(id)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', id)
+    // Use a ghost image from the pane header
+    const el = (e.target as HTMLElement).closest('.pane-header') as HTMLElement
+    if (el) {
+      e.dataTransfer.setDragImage(el, 40, 14)
+    }
+  }, [])
+
+  const handleDragOver = useCallback((targetId: string, e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    if (!dragId || targetId === dragId) {
+      setDropTarget(null)
+      return
+    }
+    // Determine left vs right side of the target pane header
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const midX = rect.left + rect.width / 2
+    const side = e.clientX < midX ? 'left' : 'right'
+    setDropTarget({ id: targetId, side })
+  }, [dragId])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    if (!dragId || !dropTarget) {
+      setDragId(null)
+      setDropTarget(null)
+      return
+    }
+
+    // Build the full ordering (including hidden panes in their relative positions)
+    const allIds = panes.map(p => p.id)
+    const visibleIds = visiblePanes.map(p => p.id)
+
+    // Remove dragged from visible order
+    const filtered = visibleIds.filter(id => id !== dragId)
+
+    // Find insert position
+    const targetIdx = filtered.indexOf(dropTarget.id)
+    const insertIdx = dropTarget.side === 'left' ? targetIdx : targetIdx + 1
+    filtered.splice(insertIdx, 0, dragId)
+
+    // Rebuild full order: keep hidden panes in place relative to visible ones
+    const newOrder: string[] = []
+    let visIdx = 0
+    for (const id of allIds) {
+      if (panes.find(p => p.id === id)?.visible) {
+        newOrder.push(filtered[visIdx++])
+      } else {
+        newOrder.push(id)
+      }
+    }
+
+    onReorder(newOrder)
+    setDragId(null)
+    setDropTarget(null)
+  }, [dragId, dropTarget, panes, visiblePanes, onReorder])
+
+  const handleDragEnd = useCallback(() => {
+    setDragId(null)
+    setDropTarget(null)
+  }, [])
+
+  if (count === 0) {
+    return (
+      <div className="multi-split-empty">
+        <span>All panes hidden. Use the titlebar buttons to show a pane.</span>
+      </div>
+    )
+  }
+
+  if (count === 1) {
+    const pane = visiblePanes[0]
+    return (
+      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <PaneHeader
+          pane={pane}
+          isDragging={false}
+          dropSide={null}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          onDragEnd={handleDragEnd}
+          onToggle={onToggle}
+        />
+        <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>{pane.content}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="multi-split-pane" ref={containerRef}>
+      {visiblePanes.map((pane, i) => (
+        <div key={pane.id} style={{ display: 'contents' }}>
+          <div
+            className={`multi-split-panel ${dragId === pane.id ? 'dragging' : ''}`}
+            style={{ width: `${splits[i]}%` }}
+          >
+            <PaneHeader
+              pane={pane}
+              isDragging={dragId === pane.id}
+              dropSide={dropTarget?.id === pane.id ? dropTarget.side : null}
+              onDragStart={handleDragStart}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              onDragEnd={handleDragEnd}
+              onToggle={onToggle}
+            />
+            <div className="multi-split-panel-content">{pane.content}</div>
+          </div>
+          {i < count - 1 && (
+            <div
+              className="split-pane-divider"
+              onMouseDown={(e) => handleDividerDown(i, e)}
+              onDoubleClick={() => {
+                setSplits(Array(count).fill(100 / count))
+                onResize?.()
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// --- Pane header with drag handle, label, and hide button ---
+
+interface PaneHeaderProps {
+  pane: PaneConfig
+  isDragging: boolean
+  dropSide: 'left' | 'right' | null
+  onDragStart: (id: string, e: React.DragEvent) => void
+  onDragOver: (id: string, e: React.DragEvent) => void
+  onDrop: (e: React.DragEvent) => void
+  onDragEnd: () => void
+  onToggle: (id: string) => void
+}
+
+function PaneHeader({ pane, isDragging, dropSide, onDragStart, onDragOver, onDrop, onDragEnd, onToggle }: PaneHeaderProps) {
+  return (
+    <div
+      className={`pane-header ${isDragging ? 'pane-header-dragging' : ''} ${dropSide ? `pane-drop-${dropSide}` : ''}`}
+      draggable
+      onDragStart={(e) => onDragStart(pane.id, e)}
+      onDragOver={(e) => onDragOver(pane.id, e)}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+    >
+      <span className="pane-drag-grip" title="Drag to reorder">&#x2630;</span>
+      <span className="pane-header-label">{pane.label}</span>
+      <button
+        className="pane-hide-btn"
+        onClick={() => onToggle(pane.id)}
+        title={`Hide ${pane.label}`}
+      >
+        &times;
+      </button>
+    </div>
+  )
+}

package/src/renderer/components/PaneLayout.tsx

@@ -0,0 +1,419 @@
+import { useState, useRef, useCallback, useEffect, createContext, useContext } from 'react'
+
+// ─── Layout tree types ────────────────────────────
+
+export type SplitDirection = 'horizontal' | 'vertical'
+
+export interface LeafNode {
+  type: 'leaf'
+  paneId: string
+}
+
+export interface SplitNode {
+  type: 'split'
+  direction: SplitDirection
+  children: LayoutNode[]
+  sizes: number[] // percentages, must sum to 100
+}
+
+export type LayoutNode = LeafNode | SplitNode
+
+export type DropZone = 'left' | 'right' | 'top' | 'bottom' | 'center'
+
+// ─── Layout tree helpers ──────────────────────────
+
+export function removePane(node: LayoutNode, paneId: string): LayoutNode | null {
+  if (node.type === 'leaf') {
+    return node.paneId === paneId ? null : node
+  }
+
+  const newChildren: LayoutNode[] = []
+  const newSizes: number[] = []
+  let removedSize = 0
+
+  for (let i = 0; i < node.children.length; i++) {
+    const result = removePane(node.children[i], paneId)
+    if (result) {
+      newChildren.push(result)
+      newSizes.push(node.sizes[i])
+    } else {
+      removedSize += node.sizes[i]
+    }
+  }
+
+  if (newChildren.length === 0) return null
+  if (newChildren.length === 1) return newChildren[0]
+
+  // Redistribute removed size proportionally
+  if (removedSize > 0) {
+    const total = newSizes.reduce((a, b) => a + b, 0)
+    for (let i = 0; i < newSizes.length; i++) {
+      newSizes[i] = (newSizes[i] / total) * 100
+    }
+  }
+
+  return { ...node, children: newChildren, sizes: newSizes }
+}
+
+export function insertPane(
+  tree: LayoutNode,
+  targetPaneId: string,
+  newPaneId: string,
+  zone: DropZone
+): LayoutNode {
+  if (tree.type === 'leaf') {
+    if (tree.paneId !== targetPaneId) return tree
+    if (zone === 'center') return { type: 'leaf', paneId: newPaneId }
+
+    const direction: SplitDirection = (zone === 'left' || zone === 'right') ? 'horizontal' : 'vertical'
+    const first = zone === 'left' || zone === 'top' ? newPaneId : tree.paneId
+    const second = zone === 'left' || zone === 'top' ? tree.paneId : newPaneId
+
+    return {
+      type: 'split',
+      direction,
+      children: [
+        { type: 'leaf', paneId: first },
+        { type: 'leaf', paneId: second },
+      ],
+      sizes: [50, 50],
+    }
+  }
+
+  return {
+    ...tree,
+    children: tree.children.map(child => insertPane(child, targetPaneId, newPaneId, zone)),
+  }
+}
+
+export function findPaneIds(node: LayoutNode): string[] {
+  if (node.type === 'leaf') return [node.paneId]
+  return node.children.flatMap(findPaneIds)
+}
+
+// ─── Drag context ─────────────────────────────────
+
+interface DragState {
+  dragPaneId: string | null
+  setDragPaneId: (id: string | null) => void
+}
+
+const DragContext = createContext<DragState>({
+  dragPaneId: null,
+  setDragPaneId: () => {},
+})
+
+// ─── PaneLayout (root component) ──────────────────
+
+export interface PaneContent {
+  id: string
+  label: string
+  content: React.ReactNode
+}
+
+interface PaneLayoutProps {
+  layout: LayoutNode
+  panes: PaneContent[]
+  onLayoutChange: (layout: LayoutNode) => void
+  onToggle: (id: string) => void
+}
+
+export function PaneLayout({ layout, panes, onLayoutChange, onToggle }: PaneLayoutProps) {
+  const [dragPaneId, setDragPaneId] = useState<string | null>(null)
+
+  const handleDrop = useCallback((targetPaneId: string, zone: DropZone) => {
+    if (!dragPaneId || dragPaneId === targetPaneId) return
+
+    // Remove from current position
+    let newLayout = removePane(layout, dragPaneId)
+    if (!newLayout) {
+      // Tree is now empty — just place the pane
+      newLayout = { type: 'leaf', paneId: dragPaneId }
+    }
+
+    // Insert at new position
+    newLayout = insertPane(newLayout, targetPaneId, dragPaneId, zone)
+    onLayoutChange(newLayout)
+    setDragPaneId(null)
+  }, [dragPaneId, layout, onLayoutChange])
+
+  const paneMap = new Map(panes.map(p => [p.id, p]))
+
+  return (
+    <DragContext.Provider value={{ dragPaneId, setDragPaneId }}>
+      <div className="pane-layout-root">
+        <LayoutRenderer
+          node={layout}
+          paneMap={paneMap}
+          onDrop={handleDrop}
+          onToggle={onToggle}
+          onLayoutChange={onLayoutChange}
+          parentDirection={null}
+          path={[]}
+        />
+      </div>
+    </DragContext.Provider>
+  )
+}
+
+// ─── Recursive layout renderer ────────────────────
+
+interface LayoutRendererProps {
+  node: LayoutNode
+  paneMap: Map<string, PaneContent>
+  onDrop: (targetPaneId: string, zone: DropZone) => void
+  onToggle: (id: string) => void
+  onLayoutChange: (layout: LayoutNode) => void
+  parentDirection: SplitDirection | null
+  path: number[]
+}
+
+function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path }: LayoutRendererProps) {
+  if (node.type === 'leaf') {
+    const pane = paneMap.get(node.paneId)
+    if (!pane) return null
+    return (
+      <LeafPane
+        pane={pane}
+        onDrop={onDrop}
+        onToggle={onToggle}
+      />
+    )
+  }
+
+  return (
+    <SplitContainer
+      node={node}
+      paneMap={paneMap}
+      onDrop={onDrop}
+      onToggle={onToggle}
+      onLayoutChange={onLayoutChange}
+      path={path}
+    />
+  )
+}
+
+// ─── Split container with resizable dividers ──────
+
+interface SplitContainerProps {
+  node: SplitNode
+  paneMap: Map<string, PaneContent>
+  onDrop: (targetPaneId: string, zone: DropZone) => void
+  onToggle: (id: string) => void
+  onLayoutChange: (layout: LayoutNode) => void
+  path: number[]
+}
+
+function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path }: SplitContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const draggingDivider = useRef<number | null>(null)
+  const sizesRef = useRef(node.sizes)
+  const [sizes, setSizes] = useState(node.sizes)
+
+  // Sync with incoming prop
+  useEffect(() => {
+    setSizes(node.sizes)
+    sizesRef.current = node.sizes
+  }, [node.sizes])
+
+  const isHorizontal = node.direction === 'horizontal'
+
+  const handleDividerDown = useCallback((index: number, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    draggingDivider.current = index
+    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize'
+    document.body.style.userSelect = 'none'
+  }, [isHorizontal])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (draggingDivider.current === null || !containerRef.current) return
+      const idx = draggingDivider.current
+      const rect = containerRef.current.getBoundingClientRect()
+
+      const pos = isHorizontal
+        ? ((e.clientX - rect.left) / rect.width) * 100
+        : ((e.clientY - rect.top) / rect.height) * 100
+
+      const currentSizes = sizesRef.current
+      const sumBefore = currentSizes.slice(0, idx).reduce((a, b) => a + b, 0)
+      const pairTotal = currentSizes[idx] + currentSizes[idx + 1]
+
+      let newFirst = pos - sumBefore
+      let newSecond = pairTotal - newFirst
+
+      const minPct = 8
+      if (newFirst < minPct) { newFirst = minPct; newSecond = pairTotal - minPct }
+      if (newSecond < minPct) { newSecond = minPct; newFirst = pairTotal - minPct }
+
+      const next = [...currentSizes]
+      next[idx] = newFirst
+      next[idx + 1] = newSecond
+      sizesRef.current = next
+      setSizes(next)
+    }
+
+    const handleMouseUp = () => {
+      if (draggingDivider.current !== null) {
+        draggingDivider.current = null
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+
+        // Commit sizes to layout
+        onLayoutChange(updateSizesAtPath(path))
+      }
+    }
+
+    // Build a new tree with updated sizes at the current path
+    function updateSizesAtPath(_path: number[]): LayoutNode {
+      // We'll let the parent handle full tree updates via onLayoutChange
+      // For now just update this node's sizes
+      return { ...node, sizes: sizesRef.current }
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isHorizontal, node, onLayoutChange, path])
+
+  return (
+    <div
+      ref={containerRef}
+      className={`split-container ${isHorizontal ? 'split-horizontal' : 'split-vertical'}`}
+    >
+      {node.children.map((child, i) => (
+        <div key={i} style={{ display: 'contents' }}>
+          <div
+            className="split-child"
+            style={isHorizontal
+              ? { width: `${sizes[i]}%`, height: '100%' }
+              : { height: `${sizes[i]}%`, width: '100%' }
+            }
+          >
+            <LayoutRenderer
+              node={child}
+              paneMap={paneMap}
+              onDrop={onDrop}
+              onToggle={onToggle}
+              onLayoutChange={(newChild) => {
+                const newChildren = [...node.children]
+                newChildren[i] = newChild
+                onLayoutChange({ ...node, children: newChildren })
+              }}
+              parentDirection={node.direction}
+              path={[...path, i]}
+            />
+          </div>
+          {i < node.children.length - 1 && (
+            <div
+              className={`split-divider ${isHorizontal ? 'split-divider-h' : 'split-divider-v'}`}
+              onMouseDown={(e) => handleDividerDown(i, e)}
+              onDoubleClick={() => {
+                const equal = Array(node.children.length).fill(100 / node.children.length)
+                sizesRef.current = equal
+                setSizes(equal)
+                onLayoutChange({ ...node, sizes: equal })
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ─── Leaf pane with drop zone overlays ────────────
+
+interface LeafPaneProps {
+  pane: PaneContent
+  onDrop: (targetPaneId: string, zone: DropZone) => void
+  onToggle: (id: string) => void
+}
+
+function LeafPane({ pane, onDrop, onToggle }: LeafPaneProps) {
+  const { dragPaneId, setDragPaneId } = useContext(DragContext)
+  const [hoverZone, setHoverZone] = useState<DropZone | null>(null)
+  const paneRef = useRef<HTMLDivElement>(null)
+
+  const isDragging = dragPaneId === pane.id
+  const isDropTarget = dragPaneId !== null && dragPaneId !== pane.id
+
+  const computeZone = useCallback((e: React.DragEvent): DropZone => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const x = (e.clientX - rect.left) / rect.width
+    const y = (e.clientY - rect.top) / rect.height
+
+    // Edge zones: 25% from each edge
+    const edgeThreshold = 0.25
+
+    if (y < edgeThreshold) return 'top'
+    if (y > 1 - edgeThreshold) return 'bottom'
+    if (x < edgeThreshold) return 'left'
+    if (x > 1 - edgeThreshold) return 'right'
+    return 'center'
+  }, [])
+
+  return (
+    <div
+      className={`leaf-pane ${isDragging ? 'leaf-pane-dragging' : ''}`}
+      ref={paneRef}
+    >
+      {/* Header */}
+      <div
+        className="pane-header"
+        draggable
+        onDragStart={(e) => {
+          setDragPaneId(pane.id)
+          e.dataTransfer.effectAllowed = 'move'
+          e.dataTransfer.setData('text/plain', pane.id)
+        }}
+        onDragEnd={() => setDragPaneId(null)}
+      >
+        <span className="pane-drag-grip" title="Drag to any edge">&#x2630;</span>
+        <span className="pane-header-label">{pane.label}</span>
+        <button
+          className="pane-hide-btn"
+          onClick={() => onToggle(pane.id)}
+          title={`Hide ${pane.label}`}
+        >
+          &times;
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="leaf-pane-content">
+        {pane.content}
+      </div>
+
+      {/* Drop zone overlay (only visible when another pane is being dragged) */}
+      {isDropTarget && (
+        <div
+          className="drop-overlay"
+          onDragOver={(e) => {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'move'
+            setHoverZone(computeZone(e))
+          }}
+          onDragLeave={() => setHoverZone(null)}
+          onDrop={(e) => {
+            e.preventDefault()
+            const zone = computeZone(e)
+            setHoverZone(null)
+            onDrop(pane.id, zone)
+          }}
+        >
+          {/* Visual zone indicators */}
+          <div className={`drop-zone drop-zone-top ${hoverZone === 'top' ? 'active' : ''}`} />
+          <div className={`drop-zone drop-zone-bottom ${hoverZone === 'bottom' ? 'active' : ''}`} />
+          <div className={`drop-zone drop-zone-left ${hoverZone === 'left' ? 'active' : ''}`} />
+          <div className={`drop-zone drop-zone-right ${hoverZone === 'right' ? 'active' : ''}`} />
+          <div className={`drop-zone drop-zone-center ${hoverZone === 'center' ? 'active' : ''}`} />
+        </div>
+      )}
+    </div>
+  )
+}