@lijian-ui/dsh-file-manager 0.1.20

package/src/client/components/icons.tsx

@@ -0,0 +1,274 @@
+/**
+ * Inline 16px icon set for the panel surfaces (outline style, currentColor).
+ * No icon package is introduced; the set covers the explorer tree, SCM rows,
+ * and the preview toolbar/tabs with plain geometric shapes.
+ * @module dsh-filemgr/client/components/icons
+ */
+
+import type { JSX, SVGProps } from 'react'
+
+interface IconProps {
+  size?: number
+  className?: string
+}
+
+const base = (size: number): SVGProps<SVGSVGElement> => ({
+  width: size,
+  height: size,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.3,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': true,
+})
+
+export function FolderIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M2 3.5h4l1.5 2H14a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1Z" />
+    </svg>
+  )
+}
+
+export function FolderOpenIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M2 3.5h4l1.5 2H14a1 1 0 0 1 1 1v1H3.5a1 1 0 0 0-.96.72L1 13.5V4.5a1 1 0 0 1 1-1Z" />
+      <path d="M2.8 11.5 4 7.5h11l-1.4 4a1 1 0 0 1-.96.72H3.76a1 1 0 0 1-.96-.72Z" />
+    </svg>
+  )
+}
+
+export function FileIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M4 2h5l3 3v9H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" />
+      <path d="M9 2v3h3" />
+    </svg>
+  )
+}
+
+export function FileCodeIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M4 2h5l3 3v9H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" />
+      <path d="M9 2v3h3" />
+      <path d="m6.2 8.6-1.4 1.4 1.4 1.4M9.8 8.6l1.4 1.4-1.4 1.4" />
+    </svg>
+  )
+}
+
+export function FileImageIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M4 2h5l3 3v9H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" />
+      <path d="M9 2v3h3" />
+      <circle cx="6.2" cy="6.8" r="1" />
+      <path d="m5 11 1.8-1.8 1.4 1.4 1.3-1.3L12 12" />
+    </svg>
+  )
+}
+
+export function FileTextIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M4 2h5l3 3v9H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" />
+      <path d="M9 2v3h3" />
+      <path d="M6 9h4M6 11.2h4" />
+    </svg>
+  )
+}
+
+export function ChevronRightIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="m6 3.5 4.5 4.5L6 12.5" />
+    </svg>
+  )
+}
+
+export function ChevronDownIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="m3.5 6 4.5 4.5L12.5 6" />
+    </svg>
+  )
+}
+
+export function CloseIcon({ size = 12, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="m3.5 3.5 9 9M12.5 3.5l-9 9" />
+    </svg>
+  )
+}
+
+export function PlusIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M8 3v10M3 8h10" />
+    </svg>
+  )
+}
+
+export function MinusIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M3 8h10" />
+    </svg>
+  )
+}
+
+export function UndoIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M5 3.5 2.5 6 5 8.5" />
+      <path d="M2.5 6h8a3.5 3.5 0 0 1 0 7h-3" />
+    </svg>
+  )
+}
+
+export function RefreshIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M13 8a5 5 0 1 1-1.6-3.65" />
+      <path d="M13.5 2v2.8h-2.8" />
+    </svg>
+  )
+}
+
+export function SplitIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <rect x="2" y="2.5" width="12" height="11" rx="1" />
+      <path d="M8 2.5v11" />
+    </svg>
+  )
+}
+
+export function CodeIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="m5.5 4.5-4 3.5 4 3.5M10.5 4.5l4 3.5-4 3.5" />
+    </svg>
+  )
+}
+
+export function EyeIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z" />
+      <circle cx="8" cy="8" r="2" />
+    </svg>
+  )
+}
+
+export function SaveIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M3 2.5h8l2.5 2.5v8.5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1Z" />
+      <path d="M5 2.5v3.5h4.5V2.5M5 13.5V9.5h6v4" />
+    </svg>
+  )
+}
+
+export function DownloadIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M8 2v7.5M4.5 6.5 8 10l3.5-3.5" />
+      <path d="M2.5 13h11" />
+    </svg>
+  )
+}
+
+export function ExternalIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M9 2.5h4.5V7" />
+      <path d="M13.5 2.5 7.5 8.5" />
+      <path d="M11.5 9v3.5a1 1 0 0 1-1 1H3.5a1 1 0 0 1-1-1V5.5a1 1 0 0 1 1-1H7" />
+    </svg>
+  )
+}
+
+export function SearchIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <circle cx="7" cy="7" r="4.5" />
+      <path d="m10.5 10.5 3 3" />
+    </svg>
+  )
+}
+
+export function BranchIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <circle cx="4" cy="3.5" r="1.5" />
+      <circle cx="4" cy="12.5" r="1.5" />
+      <circle cx="12" cy="6.5" r="1.5" />
+      <path d="M4 5v5M4 10.5c0-2 2-2.5 4-2.5s4-.5 4-1.5" />
+    </svg>
+  )
+}
+
+export function ListIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M2.5 4h11M2.5 8h11M2.5 12h11" />
+    </svg>
+  )
+}
+
+export function TreeIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M2.5 3.5h6M8.5 8h5M2.5 8h2" />
+      <path d="M6 3.5v7" />
+      <path d="M11 8v4.5h-2.5" />
+    </svg>
+  )
+}
+
+export function ShrinkIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M14 14 10 10M10 14v-4h4" />
+      <path d="M2 2l4 4M6 2v4H2" />
+    </svg>
+  )
+}
+
+export function ExpandRightIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M6 3.5 11.5 8 6 12.5" />
+    </svg>
+  )
+}
+
+export function EmptyFolderIcon({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <path d="M2 3.5h4l1.5 2H14a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1Z" opacity="0.55" />
+    </svg>
+  )
+}
+
+export function MaximizeIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <rect x="3" y="3" width="10" height="10" rx="1" />
+    </svg>
+  )
+}
+
+export function RestoreIcon({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg {...base(size)} className={className}>
+      <rect x="3" y="5" width="8" height="8" rx="1" />
+      <path d="M6.5 3.5h5a1 1 0 0 1 1 1V10" />
+    </svg>
+  )
+}

package/src/client/components/overlay.tsx

@@ -0,0 +1,225 @@
+/**
+ * Minimal overlay primitives for the panel: a toast and a context menu,
+ * rendered through plain DOM + portals so they can live outside the grid
+ * columns (fixed positioning, high z-index).
+ * @module dsh-filemgr/client/components/overlay
+ */
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import type { JSX } from 'react'
+import { t } from '../locales.ts'
+import type { FileManagerPanelKey } from '../locales.ts'
+
+/** One transient toast message. */
+export function toast(message: string): void {
+  const el = document.createElement('div')
+  el.className = 'filemgr-toast'
+  el.textContent = message
+  document.body.appendChild(el)
+  setTimeout(() => {
+    el.style.opacity = '0'
+    el.style.transition = 'opacity 0.2s ease'
+  }, 1800)
+  setTimeout(() => el.remove(), 2100)
+}
+
+/** One context-menu entry (separators carry no handler). */
+export interface MenuEntry {
+  key: string
+  label: string
+  disabled?: boolean
+  danger?: boolean
+  onSelect?: () => void
+}
+
+export interface MenuState {
+  x: number
+  y: number
+  entries: MenuEntry[]
+}
+
+/** The shared context-menu portal host (one at a time). */
+export function ContextMenu({ state, onClose }: { state: MenuState | null; onClose: () => void }): JSX.Element | null {
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
+
+  useLayoutEffect(() => {
+    if (state === null) {
+      setPosition(null)
+      return
+    }
+    // Keep the menu inside the viewport.
+    const width = 180
+    const height = state.entries.length * 28 + 12
+    setPosition({
+      x: Math.min(state.x, window.innerWidth - width - 8),
+      y: Math.min(state.y, window.innerHeight - height - 8),
+    })
+  }, [state])
+
+  useEffect(() => {
+    if (state === null) return
+    const close = (event: Event): void => {
+      // A pointerdown inside the menu must not close it — the menu item's own
+      // onClick still needs to run (and microtask-less onClose before onSelect
+      // would unmount the item mid-click). Only close on outside clicks.
+      if (event.target instanceof Element && event.target.closest('[data-menu-root]') !== null) return
+      onClose()
+    }
+    const key = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('pointerdown', close, { capture: true })
+    window.addEventListener('blur', onClose)
+    window.addEventListener('keydown', key)
+    window.addEventListener('contextmenu', onClose)
+    return () => {
+      window.removeEventListener('pointerdown', close, { capture: true })
+      window.removeEventListener('blur', onClose)
+      window.removeEventListener('keydown', key)
+      window.removeEventListener('contextmenu', onClose)
+    }
+  }, [state, onClose])
+
+  if (state === null || position === null) return null
+  return createPortal(
+    <div
+      className="filemgr-menu"
+      data-menu-root=""
+      style={{ left: position.x, top: position.y }}
+      onPointerDown={(event) => event.stopPropagation()}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      {state.entries.map((entry) => (
+        <div key={entry.key}>
+          {entry.label === '---' ? (
+            <div className="filemgr-menu-sep" />
+          ) : (
+            <div
+              className={`filemgr-menu-item${entry.disabled === true ? ' filemgr-menu-item-disabled' : ''}`}
+              onClick={() => {
+                if (entry.disabled === true) return
+                onClose()
+                entry.onSelect?.()
+              }}
+              role="menuitem"
+            >
+              {entry.label}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>,
+    document.body,
+  )
+}
+
+/** A single-text-input dialog (rename, new file / new folder). */
+export function PromptDialog({
+  title,
+  initialValue,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+}: {
+  title: string
+  initialValue?: string
+  confirmLabel?: string
+  onConfirm: (value: string) => void
+  onCancel: () => void
+}): JSX.Element {
+  const [value, setValue] = useState(initialValue ?? '')
+  const inputRef = useRef<HTMLInputElement>(null)
+  useLayoutEffect(() => {
+    inputRef.current?.focus()
+    inputRef.current?.select()
+  }, [])
+  const commit = (): void => {
+    const trimmed = value.trim()
+    if (trimmed === '') return
+    onConfirm(trimmed)
+  }
+  useEffect(() => {
+    const key = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onCancel()
+    }
+    window.addEventListener('keydown', key)
+    return () => window.removeEventListener('keydown', key)
+  }, [onCancel])
+  return createPortal(
+    <div className="filemgr-overlay" onPointerDown={onCancel}>
+      <div className="filemgr-dialog" onPointerDown={(event) => event.stopPropagation()}>
+        <div className="filemgr-dialog-title">{title}</div>
+        <div className="filemgr-dialog-body">
+          <input
+            ref={inputRef}
+            className="filemgr-input"
+            value={value}
+            placeholder={initialValue ?? ''}
+            aria-label={title}
+            onChange={(event) => setValue(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') commit()
+            }}
+          />
+        </div>
+        <div className="filemgr-dialog-actions">
+          <button type="button" className="filemgr-btn" onClick={onCancel}>{t('common.cancel')}</button>
+          <button
+            type="button"
+            className="filemgr-btn filemgr-btn-primary"
+            disabled={value.trim() === ''}
+            onClick={commit}
+          >
+            {confirmLabel ?? t('common.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+/** A confirmation dialog (dirty-close confirm, discard confirm). */
+export function ConfirmDialog({
+  title,
+  body,
+  confirmLabel,
+  danger,
+  onConfirm,
+  onCancel,
+}: {
+  title: string
+  body: string
+  confirmLabel?: string
+  danger?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}): JSX.Element {
+  useEffect(() => {
+    const key = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onCancel()
+    }
+    window.addEventListener('keydown', key)
+    return () => window.removeEventListener('keydown', key)
+  }, [onCancel])
+  return createPortal(
+    <div className="filemgr-overlay" onPointerDown={onCancel}>
+      <div className="filemgr-dialog" onPointerDown={(event) => event.stopPropagation()}>
+        <div className="filemgr-dialog-title">{title}</div>
+        <div className="filemgr-dialog-body">{body}</div>
+        <div className="filemgr-dialog-actions">
+          <button type="button" className="filemgr-btn" onClick={onCancel}>{t('common.cancel')}</button>
+          <button
+            type="button"
+            className={`filemgr-btn ${danger === true ? 'filemgr-btn-danger' : 'filemgr-btn-primary'}`}
+            onClick={onConfirm}
+          >
+            {confirmLabel ?? t('common.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/client/css-modules.d.ts

@@ -0,0 +1,5 @@
+/** CSS Modules typing for the tsdown CSS-inline preset (hashed class map). */
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}

package/src/client/drag/DragFileInlay.tsx

@@ -0,0 +1,89 @@
+/**
+ * Composer dock inlay: the drop target for explorer file drags. It mounts
+ * in the official `conversation.input.dock` band (a session-scoped list
+ * slot declared by the shipped ui-conversation rc.6 shell), so it stacks
+ * with the git-graph chip above the composer card. While a file row is
+ * dragged over the page it shows a hint strip; on drop it splices the
+ * workspace-relative path into the active session's draft through the
+ * conversation input facade.
+ *
+ * The document-level listeners only claim drags carrying our custom MIME —
+ * the composer host's own drop handling (OS image files) is untouched. The
+ * host's `dragover` refuses every drop it does not claim, so this inlay
+ * must `preventDefault` its own drags to make the drop land.
+ * @module dsh-filemgr/client/drag/DragFileInlay
+ */
+
+import { useEffect, useRef, useState, type ReactElement } from 'react'
+import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import { FILE_DRAG_MIME, hasFileDrag, isValidFileDragPayload } from './file-drag.ts'
+import { t } from '../locales.ts'
+import dragCss from '../styles/drag.module.css'
+
+/** Injected business face of the drag inlay (session-routed). */
+export interface DragFileInjected {
+  /** Splice a workspace-relative path into the active session's draft. */
+  insertPath: (path: string) => boolean
+}
+
+/** Composed props: the dock's runtime share (sessionId) + the injected verb. */
+export type DragFileInlayProps =
+  PropsRuntime<'conversation.input.dock'>
+  & DragFileInjected
+
+/**
+ * The composer dock entry: a zero-height anchor that shows a hint strip
+ * while a file row is dragged over the page and inserts the path on drop.
+ * @param props - the composed dock entry props.
+ */
+export function DragFileInlay(props: DragFileInlayProps): ReactElement {
+  const [active, setActive] = useState(false)
+  const depth = useRef(0)
+
+  useEffect(() => {
+    const reset = (): void => {
+      depth.current = 0
+      setActive(false)
+    }
+    const onDragOver = (event: DragEvent): void => {
+      if (!hasFileDrag(event.dataTransfer?.types)) return
+      event.preventDefault()
+      depth.current += 1
+      setActive(true)
+    }
+    const onDragLeave = (event: DragEvent): void => {
+      if (!hasFileDrag(event.dataTransfer?.types)) return
+      depth.current = Math.max(0, depth.current - 1)
+      if (depth.current === 0) setActive(false)
+    }
+    const onDrop = (event: DragEvent): void => {
+      if (!hasFileDrag(event.dataTransfer?.types)) return
+      event.preventDefault()
+      const path = event.dataTransfer?.getData(FILE_DRAG_MIME) ?? ''
+      reset()
+      if (isValidFileDragPayload(path)) props.insertPath(path)
+    }
+    const onDragEnd = (): void => reset()
+    document.addEventListener('dragover', onDragOver)
+    document.addEventListener('dragleave', onDragLeave)
+    document.addEventListener('drop', onDrop)
+    window.addEventListener('dragend', onDragEnd)
+    return () => {
+      document.removeEventListener('dragover', onDragOver)
+      document.removeEventListener('dragleave', onDragLeave)
+      document.removeEventListener('drop', onDrop)
+      window.removeEventListener('dragend', onDragEnd)
+    }
+  }, [props.insertPath])
+
+  return (
+    <div
+      className={active ? `${dragCss.strip} ${dragCss.stripActive}` : dragCss.strip}
+      data-testid="filemgr-drag-inlay"
+      aria-live="polite"
+    >
+      {active ? <span className={dragCss.stripText}>{t('explorer.drag.dropHint')}</span> : null}
+    </div>
+  )
+}

package/src/client/drag/file-drag.ts

@@ -0,0 +1,67 @@
+/**
+ * Pure drag-to-composer helpers shared by the explorer rows (the drag
+ * source) and the composer dock inlay (the drop target): the custom MIME
+ * type, the drag-state detector, and the draft-splicing rule. Deliberately
+ * framework-free so the splicing math is unit-testable in isolation.
+ *
+ * The composer host only accepts OS image drops (its document-level drop
+ * handler checks `dataTransfer.types` for `Files` and routes through the
+ * image pipeline), so a workspace file needs its own MIME. A plain relative
+ * path is inserted into the draft — the agent reads the file through its
+ * existing tools without any prefix grammar.
+ * @module dsh-filemgr/client/drag/file-drag
+ */
+
+/** Custom MIME carrying a workspace-relative file path. */
+export const FILE_DRAG_MIME = 'application/x-dsh-file'
+
+/**
+ * Whether a drag event carries our file payload.
+ * @param types - the live `dataTransfer.types` list (read-only during drag).
+ * @returns true when our MIME is present.
+ */
+export function hasFileDrag(types: readonly string[] | undefined): boolean {
+  return types !== undefined && types.includes(FILE_DRAG_MIME)
+}
+
+/**
+ * Whether a drop payload is a plausible workspace-relative path. The custom
+ * MIME only proves the drag carries *some* string — a foreign page can set it
+ * too, so the payload itself is validated before it reaches the draft:
+ * relative POSIX shape only; no absolute paths, no '..' segments, no
+ * backslashes, no control characters, and a sane length.
+ * @param path - the raw payload from dataTransfer.
+ * @returns true when the payload is safe to splice into the draft.
+ */
+export function isValidFileDragPayload(path: string): boolean {
+  if (path === '' || path.length > 512) return false
+  if (path.startsWith('/') || path.includes('\\')) return false
+  // eslint-disable-next-line no-control-regex
+  if (/[\x00-\x1f\x7f]/.test(path)) return false
+  if (path.split('/').some(segment => segment === '..')) return false
+  return true
+}
+
+/**
+ * Splice a workspace-relative path into a composer draft at the caret.
+ *
+ * Separator rule: one space is added before the path unless the caret sits
+ * at the start of the draft or right after whitespace; one space is added
+ * after the path unless the caret sits at the end of the draft or right
+ * before whitespace. Empty path or an out-of-range caret are no-ops.
+ *
+ * @param draft - the current draft text.
+ * @param path - the relative path to insert.
+ * @param caret - insertion offset (default: the end of the draft).
+ * @returns the next draft; the caller owns writing it through the input
+ * facade.
+ */
+export function insertPathIntoDraft(draft: string, path: string, caret?: number): string {
+  if (path === '') return draft
+  const at = caret === undefined ? draft.length : Math.min(Math.max(caret, 0), draft.length)
+  const before = draft.slice(0, at)
+  const after = draft.slice(at)
+  const needBefore = before !== '' && !/\s$/.test(before)
+  const needAfter = after !== '' && !/^\s/.test(after)
+  return before + (needBefore ? ' ' : '') + path + (needAfter ? ' ' : '') + after
+}