@lijian-ui/dsh-term 0.1.2 → 0.2.0

package/src/client/index.ts

@@ -42,8 +42,36 @@ const EV = {
   terminalState: 'dsh-dock:terminal-state',
 } as const
 
-/** Width of the docked terminal column, in px (the 6th grid track). */
-const TERMINAL_WIDTH = 300
+/** Terminal column width bounds and persistence. */
+const MIN_TERM_WIDTH = 200
+const MAX_TERM_WIDTH = 600
+const DEFAULT_TERM_WIDTH = 300
+const TERM_WIDTH_KEY = 'dsh-term-width-px'
+const TERM_HANDLE_WIDTH = 8
+
+function readTermWidth(): number {
+  try {
+    const raw = localStorage.getItem(TERM_WIDTH_KEY)
+    if (raw === null) return DEFAULT_TERM_WIDTH
+    const v = Number(raw)
+    if (!Number.isFinite(v) || v < MIN_TERM_WIDTH || v > MAX_TERM_WIDTH) return DEFAULT_TERM_WIDTH
+    return v
+  } catch { return DEFAULT_TERM_WIDTH }
+}
+
+function writeTermWidth(v: number): void {
+  try { localStorage.setItem(TERM_WIDTH_KEY, String(Math.round(v))) } catch { /* best-effort */ }
+}
+
+/** Inject the drag-handle visual styles once. */
+function adoptHandleStyles(): void {
+  const id = 'dsh-term-handle-style'
+  if (document.getElementById(id) !== null) return
+  const tag = document.createElement('style')
+  tag.id = id
+  tag.textContent = '.dsh-term-handle{touch-action:none;cursor:col-resize}'
+  document.head.appendChild(tag)
+}
 
 /** Locate the frame grid (same heuristic file-manager uses). */
 function findFrame(): HTMLElement | null {
@@ -73,34 +101,6 @@ function whenFrameReady(cb: (frame: HTMLElement) => void): () => void {
   return () => obs.disconnect()
 }
 
-/** Inject the launcher button styles once (the button is a raw DOM node). */
-function adoptLauncherStyles(): void {
-  const id = 'dsh-term-launcher-style'
-  if (document.getElementById(id) !== null) return
-  const tag = document.createElement('style')
-  tag.id = id
-  tag.textContent = `
-.dsh-term-launcher {
-  position: fixed;
-  right: 12px;
-  bottom: 12px;
-  z-index: 40;
-  height: 30px;
-  padding: 0 14px;
-  border-radius: 6px;
-  border: 1px solid var(--aion-bg-3, #e5e6eb);
-  background: var(--aion-bg-1, #ffffff);
-  color: var(--aion-fg-1, #1f2329);
-  font-size: 13px;
-  font-family: var(--aion-font-sans, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-.dsh-term-launcher:hover {
-  background: var(--aion-bg-2, #f2f3f5);
-}`
-  document.head.appendChild(tag)
-}
 
 /**
  * Parse a `grid-template-columns` string into raw tokens. Named lines
@@ -165,6 +165,7 @@ export function apply(ctx: ClientContext): void {
       col.dataset.dshTermCol = ''
       col.style.minWidth = '0'
       col.style.height = '100%'
+      col.style.display = 'none'
       frame.appendChild(col)
 
       // Keep the terminal the rightmost column even if file-manager appends
@@ -174,18 +175,24 @@ export function apply(ctx: ClientContext): void {
       })
       keepLast.observe(frame, { childList: true })
 
-      // Re-open button (after a collapse). Hidden while the column is open.
-      adoptLauncherStyles()
-      const launcher = document.createElement('button')
-      launcher.type = 'button'
-      launcher.className = 'dsh-term-launcher'
-      launcher.textContent = '终端'
-      launcher.setAttribute('aria-label', '打开终端')
-      launcher.style.display = 'none'
-      document.body.appendChild(launcher)
 
       // Open/closed state. Closed by default (the column is a docked track).
       let terminalOpen = false
+      let terminalWidth = readTermWidth()
+
+      // The drag handle on the terminal column's left edge (drag left = wider).
+      adoptHandleStyles()
+      const handle = document.createElement('div')
+      handle.className = 'dsh-term-handle'
+      handle.style.position = 'absolute'
+      handle.style.top = '0'
+      handle.style.bottom = '0'
+      handle.style.width = `${TERM_HANDLE_WIDTH}px`
+      handle.style.marginLeft = `${-TERM_HANDLE_WIDTH / 2}px`
+      handle.style.zIndex = '30'
+      handle.style.cursor = 'col-resize'
+      handle.style.display = 'none'
+      frame.appendChild(handle)
 
       /**
        * Re-assert the frame grid: keep file-manager's tracks, append our
@@ -205,11 +212,19 @@ export function apply(ctx: ClientContext): void {
         // (e.g. the shell's own 3-track write landed before file-manager
         // re-applied). Touching it now would desync file-manager's width math.
         if (tokens.length !== baseLen) return
-        if (terminalOpen) tokens.push('[dsh-term]', `${TERMINAL_WIDTH}px`)
+        if (terminalOpen) tokens.push('[dsh-term]', `${terminalWidth}px`)
         const next = tokens.join(' ')
         if (next !== frame.style.gridTemplateColumns) {
           frame.style.gridTemplateColumns = next
         }
+        // Keep the drag handle glued to the terminal column's left edge.
+        if (terminalOpen) {
+          const frameRect = frame.getBoundingClientRect()
+          const colRect = col.getBoundingClientRect()
+          const leftEdge = colRect.left - frameRect.left
+          handle.style.left = `${Math.round(leftEdge)}px`
+        }
+        handle.style.display = terminalOpen ? 'block' : 'none'
       }
 
       // Re-assert after file-manager rewrites the grid (drag / resize / collapse).
@@ -223,13 +238,72 @@ export function apply(ctx: ClientContext): void {
       const setVisible = (open: boolean): void => {
         terminalOpen = open
         col.style.display = open ? 'flex' : 'none'
-        launcher.style.display = open ? 'none' : 'flex'
         reconcileGrid()
         window.dispatchEvent(new CustomEvent(EV.terminalState, { detail: open }))
       }
       const onToggleTerminal = (): void => setVisible(!terminalOpen)
       window.addEventListener(EV.toggleTerminal, onToggleTerminal)
-      launcher.addEventListener('click', () => setVisible(true))
+
+      // Drag the handle to resize the terminal column (left = wider).
+      handle.addEventListener('pointerdown', (event: PointerEvent): void => {
+        if (event.button !== 0) return
+        event.preventDefault()
+        handle.setPointerCapture(event.pointerId)
+        const startX = event.clientX
+        const startWidth = terminalWidth
+        let rafId: number | null = null
+        let pendingWidth: number | null = null
+        let latestWidth = startWidth
+
+        document.body.style.userSelect = 'none'
+        document.body.style.cursor = 'col-resize'
+        frame.setAttribute('data-dragging', '')
+        handle.setAttribute('data-dragging', '')
+
+        const flush = (): void => {
+          if (pendingWidth === null) return
+          latestWidth = pendingWidth
+          terminalWidth = pendingWidth
+          reconcileGrid()
+        }
+
+        const computeWidth = (clientX: number): number => {
+          const deltaX = startX - clientX
+          return Math.min(MAX_TERM_WIDTH, Math.max(MIN_TERM_WIDTH, startWidth + deltaX))
+        }
+
+        const finish = (clientX: number | null): void => {
+          handle.removeEventListener('pointermove', onMove)
+          handle.removeEventListener('pointerup', onUp)
+          handle.removeEventListener('pointercancel', onCancel)
+          try { handle.releasePointerCapture(event.pointerId) } catch { /* already released */ }
+          document.body.style.userSelect = ''
+          document.body.style.cursor = ''
+          frame.removeAttribute('data-dragging')
+          handle.removeAttribute('data-dragging')
+          if (rafId !== null) { cancelAnimationFrame(rafId); rafId = null }
+          flush()
+          const finalWidth = clientX === null ? latestWidth : computeWidth(clientX)
+          terminalWidth = finalWidth
+          reconcileGrid()
+          writeTermWidth(finalWidth)
+        }
+
+        const onMove = (e: PointerEvent): void => {
+          if (e.buttons === 0) { finish(e.clientX); return }
+          pendingWidth = computeWidth(e.clientX)
+          if (rafId === null) {
+            rafId = requestAnimationFrame(() => { rafId = null; flush() })
+          }
+        }
+        const onUp = (e: PointerEvent): void => finish(e.clientX)
+        const onCancel = (): void => finish(null)
+
+        handle.addEventListener('pointermove', onMove)
+        handle.addEventListener('pointerup', onUp)
+        handle.addEventListener('pointercancel', onCancel)
+      })
+
       root.render(createElement(TerminalPanel, { ctx, api, onClose: () => setVisible(false) }))
 
       disposeFrame = () => {
@@ -238,7 +312,7 @@ export function apply(ctx: ClientContext): void {
         window.removeEventListener(EV.toggleTerminal, onToggleTerminal)
         root.unmount()
         col.remove()
-        launcher.remove()
+        handle.remove()
       }
     })
     return () => {

package/src/client/term/AnimatedDock.tsx

@@ -1,132 +1,43 @@
 /**
- * AnimatedDock — a macOS-style magnification button group rendered into the
- * conversation session header (the `conversation.session.header.utilities`
- * slot, ordered to the LEFT of the official "Session log" button).
+ * AnimatedDock — the terminal dock button rendered into the conversation
+ * session header (the `conversation.session.header.utilities` slot, ordered to
+ * the LEFT of the official "Session log" button).
  *
- * This is a faithful port of the 21st.dev "Animated Dock" component: it uses
- * framer-motion's `useMotionValue` + `useSpring` + `useTransform` so each
- * circular icon scales toward the cursor with real spring physics — the
- * buttery feel you can't get from a CSS transition. Magnification is driven by
- * `transform: scale()` (NOT `width`), so it never reflows the layout and the
- * dock stays perfectly stable under the cursor.
- * Icons come from lucide-react. The dock itself is a frosted-glass pill.
+ * Each plugin owns its own dock button independently: dsh-term renders this
+ * terminal button, dsh-file-manager renders its own file-panel button. The two
+ * are fully decoupled — install either alone and you get just its button;
+ * install both and both buttons appear side by side with shared magnification
+ * (coordinated through window CustomEvents, see DockItem.tsx).
  *
- * Two entries wire to the two right-side panels through window CustomEvents
- * (a cross-plugin bridge so this component never imports the file-manager
- * bundle):
- *
- *   - terminal -> `dsh-dock:toggle-terminal`   (handled in dsh-term index)
- *   - file     -> `dsh-dock:toggle-filepanel`  (handled in dsh-file-manager)
- *
- * Active (open) state is mirrored back through `dsh-dock:terminal-state` /
- * `dsh-dock:filepanel-state` so the icons highlight in lockstep with the
- * actual panels.
+ * Clicking broadcasts `dsh-dock:toggle-terminal` (handled in dsh-term index);
+ * the open state is mirrored back through `dsh-dock:terminal-state`.
  * @module dsh-term/client/AnimatedDock
  */
+import { useEffect, useState, type ReactElement } from 'react'
+import { DockItem } from './DockItem.tsx'
 
-import { useEffect, useRef, useState, type ReactElement, type ReactNode } from 'react'
-import { motion, useMotionValue, useSpring, useTransform, type MotionValue } from 'framer-motion'
-import { Terminal, FolderOpen } from 'lucide-react'
-import styles from './animated-dock.module.css'
-
-/** Cross-plugin event names (kept as literals to avoid cross-bundle imports). */
 const EV = {
   toggleTerminal: 'dsh-dock:toggle-terminal',
-  toggleFile: 'dsh-dock:toggle-filepanel',
   terminalState: 'dsh-dock:terminal-state',
-  fileState: 'dsh-dock:filepanel-state',
 } as const
 
-/** Resting / peak icon size (px). */
-const BASE = 40
-const MAX = 58
-/** Magnification factor at the cursor (MAX / BASE). Driven via CSS `scale()`
- *  so it never reflows the layout — this is what removed the old "jitter". */
-const MAX_SCALE = MAX / BASE
-/** Cursor distance (px) over which magnification falls to zero. */
-const DIST = 120
-/** Spring tuning. Near-critically damped (ratio ≈ 0.94) so the icon settles
- *  smoothly with essentially no overshoot. The old `damping: 0.35` was
- *  effectively zero damping and caused the wild oscillation. */
-const DAMPING = 28
-const STIFFNESS = 220
-
 export function AnimatedDock(): ReactElement {
-  const mouseX = useMotionValue<number>(Infinity)
-  const [terminalActive, setTerminalActive] = useState(false)
-  const [fileActive, setFileActive] = useState(false)
-
-  // Mirror the real panel open-state back into the icon highlight.
+  const [active, setActive] = useState(false)
   useEffect(() => {
-    const onTerm = (e: Event): void => setTerminalActive(Boolean((e as CustomEvent).detail))
-    const onFile = (e: Event): void => setFileActive(Boolean((e as CustomEvent).detail))
-    window.addEventListener(EV.terminalState, onTerm)
-    window.addEventListener(EV.fileState, onFile)
-    return () => {
-      window.removeEventListener(EV.terminalState, onTerm)
-      window.removeEventListener(EV.fileState, onFile)
-    }
+    const onState = (e: Event): void => setActive(Boolean((e as CustomEvent).detail))
+    window.addEventListener(EV.terminalState, onState)
+    return () => window.removeEventListener(EV.terminalState, onState)
   }, [])
-
-  return (
-    <motion.div
-      className={styles.dock}
-      onMouseMove={(e) => mouseX.set(e.clientX)}
-      onMouseLeave={() => mouseX.set(Infinity)}
-      aria-label="工具坞"
-    >
-      <DockItem
-        mouseX={mouseX}
-        active={terminalActive}
-        label="终端"
-        onClick={() => window.dispatchEvent(new CustomEvent(EV.toggleTerminal))}
-      >
-        <Terminal size={20} strokeWidth={2} />
-      </DockItem>
-      <DockItem
-        mouseX={mouseX}
-        active={fileActive}
-        label="文件面板"
-        onClick={() => window.dispatchEvent(new CustomEvent(EV.toggleFile))}
-      >
-        <FolderOpen size={20} strokeWidth={2} />
-      </DockItem>
-    </motion.div>
-  )
-}
-
-/** A single magnifying icon. Its `scale` is a spring driven by cursor distance.
- *  Because we animate `transform` (not `width`), the layout never reflows, so
- *  there is no neighbour-push feedback loop and the dock stays rock-steady. */
-function DockItem(props: {
-  mouseX: MotionValue<number>
-  active: boolean
-  label: string
-  onClick: () => void
-  children: ReactNode
-}): ReactElement {
-  const ref = useRef<HTMLButtonElement>(null)
-  const distance = useTransform(props.mouseX, (val) => {
-    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: BASE }
-    return val - bounds.x - bounds.width / 2
-  })
-  const scale = useSpring(
-    useTransform(distance, [-DIST, 0, DIST], [1, MAX_SCALE, 1]),
-    { damping: DAMPING, stiffness: STIFFNESS },
-  )
   return (
-    <motion.button
-      ref={ref}
-      type="button"
-      style={{ scale }}
-      className={`${styles.item}${props.active ? ` ${styles.active}` : ''}`}
-      onClick={props.onClick}
-      aria-label={props.label}
-      aria-pressed={props.active}
-      title={props.label}
+    <DockItem
+      active={active}
+      label="终端"
+      onClick={() => window.dispatchEvent(new CustomEvent(EV.toggleTerminal))}
     >
-      <span className={styles.tooltip}>{props.label}</span>
-      {props.children}
-    </motion.button>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="4 17 10 11 4 5" />
+        <line x1="12" y1="19" x2="20" y2="19" />
+      </svg>
+    </DockItem>
   )
 }

package/src/client/term/DockItem.tsx

@@ -0,0 +1,42 @@
+/**
+ * DockItem — a round dock button for the conversation session header.
+ * Each plugin owns its own DockItem copy (terminal in dsh-term, file-panel in
+ * dsh-file-manager). Hover scales the button up via pure CSS — no JS event
+ * coordination, no shared motion value.
+ * @module dsh-term/client/DockItem
+ */
+import { type ReactElement, type ReactNode } from 'react'
+
+const STYLE_ID = 'dsh-dock-item-style'
+
+function ensureStyle(): void {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(STYLE_ID) !== null) return
+  const tag = document.createElement('style')
+  tag.id = STYLE_ID
+  tag.textContent = '.dsh-dock-item{width:32px;height:32px;border:none;border-radius:9999px;background:#000;color:#fff;cursor:pointer;position:relative;transition:transform .15s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center}.dsh-dock-item:hover{transform:scale(1.15);background:#1a1a1a}.dsh-dock-item-active{background:var(--aion-primary,#6ea0ff)}.dsh-dock-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:2px 8px;font-size:12px;line-height:1.4;white-space:nowrap;color:#fff;background:rgba(20,20,30,.9);border:1px solid rgba(255,255,255,.12);border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.dsh-dock-item:hover .dsh-dock-tooltip{opacity:1}'
+  document.head.appendChild(tag)
+}
+
+ensureStyle()
+
+export function DockItem(props: {
+  active: boolean
+  label: string
+  onClick: () => void
+  children: ReactNode
+}): ReactElement {
+  return (
+    <button
+      type="button"
+      className={`dsh-dock-item${props.active ? ' dsh-dock-item-active' : ''}`}
+      onClick={props.onClick}
+      aria-label={props.label}
+      aria-pressed={props.active}
+      title={props.label}
+    >
+      <span className="dsh-dock-tooltip">{props.label}</span>
+      {props.children}
+    </button>
+  )
+}

package/src/client/term/TerminalPanel.tsx

@@ -45,11 +45,35 @@ function adoptXtermStyles(): void {
 /** Terminal theme matching the shell's light/dark marker. */
 function themeOf(): Record<string, string> {
   const dark = document.body.dataset.dsDarkTheme !== undefined
+  if (dark) {
+    return {
+      background: '#0e0e0e',
+      foreground: '#ced3da',
+      cursor: '#ced3da',
+      selectionBackground: 'rgba(255,255,255,0.2)',
+    }
+  }
   return {
-    background: dark ? '#0e0e0e' : '#ffffff',
-    foreground: dark ? '#ced3da' : '#1f2329',
-    cursor: dark ? '#ced3da' : '#1f2329',
-    selectionBackground: dark ? 'rgba(255,255,255,0.2)' : 'rgba(22,93,255,0.25)',
+    background: '#ffffff',
+    foreground: '#1f2329',
+    cursor: '#1f2329',
+    selectionBackground: 'rgba(22,93,255,0.25)',
+    black: '#1f2329',
+    red: '#d4393b',
+    green: '#167c2e',
+    yellow: '#b58900',
+    blue: '#0a4d8c',
+    magenta: '#a020a0',
+    cyan: '#0379a6',
+    white: '#5a5f66',
+    brightBlack: '#6a6f76',
+    brightRed: '#e5585a',
+    brightGreen: '#1a9c3a',
+    brightYellow: '#d6a200',
+    brightBlue: '#1a6fcf',
+    brightMagenta: '#c040c0',
+    brightCyan: '#1aa0d6',
+    brightWhite: '#2f353b',
   }
 }