@lijian-ui/dsh-file-manager 0.2.2 → 0.2.4

package/src/client/components/overlay.tsx

@@ -1,225 +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,
-  )
-}
+/**
+ * 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/drag/DragFileInlay.tsx

@@ -1,89 +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>
-  )
-}
+/**
+ * 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>
+  )
+}