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

package/src/client/hooks/useResizableSplit.ts

@@ -1,91 +1,91 @@
-/**
- * The panel system's single drag engine hook — a thin React wrapper over the
- * framework-free machinery in drag.ts (FileManager's useResizableSplit
- * architecture, re-implemented): px or ratio units, range-validated
- * localStorage persistence, double-click reset to the default width.
- * @module dsh-filemgr/client/hooks/useResizableSplit
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { PointerEvent as ReactPointerEvent } from 'react'
-import { handlePointerDragStart } from '../drag.ts'
-import { readStoredNumber, writeStoredNumber } from '../persist.ts'
-
-export interface UseResizableSplitOptions {
-  /** Default width (px or percent). */
-  defaultWidth?: number
-  /** Minimum (same unit). */
-  minWidth?: number
-  /** Maximum (same unit). */
-  maxWidth?: number
-  /** localStorage key (preference persistence). */
-  storageKey?: string
-  /** 'px' for fixed pixel widths, 'ratio' for percents (default 'ratio'). */
-  unit?: 'px' | 'ratio'
-}
-
-export interface DragHandleProps {
-  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void
-  onDoubleClick: () => void
-}
-
-/**
- * Resizable-split engine.
- * @param options - width contract + persistence key.
- * @returns current width, the committed setter, handle props, and the clamp.
- */
-export function useResizableSplit(options: UseResizableSplitOptions = {}) {
-  const {
-    defaultWidth = 50,
-    minWidth = 20,
-    maxWidth = 80,
-    storageKey,
-    unit = 'ratio',
-  } = options
-  const isPx = unit === 'px'
-
-  const [width, setWidthState] = useState(() =>
-    storageKey === undefined
-      ? defaultWidth
-      : readStoredNumber(storageKey, minWidth, maxWidth, defaultWidth))
-
-  // The pointer-down closure reads the width at drag START without rebinding.
-  const widthRef = useRef(width)
-  useEffect(() => {
-    widthRef.current = width
-  }, [width])
-
-  /** The committed setter: state + storage (validated) + resize event. */
-  const setWidth = useCallback((value: number) => {
-    setWidthState(value)
-    if (storageKey !== undefined) writeStoredNumber(storageKey, value)
-    try {
-      window.dispatchEvent(new CustomEvent('preview-panel-resize', { detail: { width: value } }))
-    } catch {
-      // event dispatch is best-effort
-    }
-  }, [storageKey])
-
-  const clamp = useCallback((value: number): number => {
-    return Math.min(maxWidth, Math.max(minWidth, value))
-  }, [minWidth, maxWidth])
-
-  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
-    const el = event.currentTarget as HTMLDivElement
-    handlePointerDragStart(event.nativeEvent, el, {
-      reverse: el.dataset.reverse === 'true',
-      getStartWidth: () => widthRef.current,
-      compute: (startWidth, deltaX) => clamp(startWidth + deltaX),
-      onFrame: (value) => setWidthState(value),
-      onEnd: (value) => setWidth(value),
-    })
-  }, [clamp, setWidth])
-
-  const handleDoubleClick = useCallback(() => {
-    setWidth(defaultWidth)
-  }, [defaultWidth, setWidth])
-
-  const handleProps: DragHandleProps = { onPointerDown: handlePointerDown, onDoubleClick: handleDoubleClick }
-
-  return { width, setWidth, handleProps, clamp, isPx }
-}
+/**
+ * The panel system's single drag engine hook — a thin React wrapper over the
+ * framework-free machinery in drag.ts (FileManager's useResizableSplit
+ * architecture, re-implemented): px or ratio units, range-validated
+ * localStorage persistence, double-click reset to the default width.
+ * @module dsh-filemgr/client/hooks/useResizableSplit
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { PointerEvent as ReactPointerEvent } from 'react'
+import { handlePointerDragStart } from '../drag.ts'
+import { readStoredNumber, writeStoredNumber } from '../persist.ts'
+
+export interface UseResizableSplitOptions {
+  /** Default width (px or percent). */
+  defaultWidth?: number
+  /** Minimum (same unit). */
+  minWidth?: number
+  /** Maximum (same unit). */
+  maxWidth?: number
+  /** localStorage key (preference persistence). */
+  storageKey?: string
+  /** 'px' for fixed pixel widths, 'ratio' for percents (default 'ratio'). */
+  unit?: 'px' | 'ratio'
+}
+
+export interface DragHandleProps {
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void
+  onDoubleClick: () => void
+}
+
+/**
+ * Resizable-split engine.
+ * @param options - width contract + persistence key.
+ * @returns current width, the committed setter, handle props, and the clamp.
+ */
+export function useResizableSplit(options: UseResizableSplitOptions = {}) {
+  const {
+    defaultWidth = 50,
+    minWidth = 20,
+    maxWidth = 80,
+    storageKey,
+    unit = 'ratio',
+  } = options
+  const isPx = unit === 'px'
+
+  const [width, setWidthState] = useState(() =>
+    storageKey === undefined
+      ? defaultWidth
+      : readStoredNumber(storageKey, minWidth, maxWidth, defaultWidth))
+
+  // The pointer-down closure reads the width at drag START without rebinding.
+  const widthRef = useRef(width)
+  useEffect(() => {
+    widthRef.current = width
+  }, [width])
+
+  /** The committed setter: state + storage (validated) + resize event. */
+  const setWidth = useCallback((value: number) => {
+    setWidthState(value)
+    if (storageKey !== undefined) writeStoredNumber(storageKey, value)
+    try {
+      window.dispatchEvent(new CustomEvent('preview-panel-resize', { detail: { width: value } }))
+    } catch {
+      // event dispatch is best-effort
+    }
+  }, [storageKey])
+
+  const clamp = useCallback((value: number): number => {
+    return Math.min(maxWidth, Math.max(minWidth, value))
+  }, [minWidth, maxWidth])
+
+  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const el = event.currentTarget as HTMLDivElement
+    handlePointerDragStart(event.nativeEvent, el, {
+      reverse: el.dataset.reverse === 'true',
+      getStartWidth: () => widthRef.current,
+      compute: (startWidth, deltaX) => clamp(startWidth + deltaX),
+      onFrame: (value) => setWidthState(value),
+      onEnd: (value) => setWidth(value),
+    })
+  }, [clamp, setWidth])
+
+  const handleDoubleClick = useCallback(() => {
+    setWidth(defaultWidth)
+  }, [defaultWidth, setWidth])
+
+  const handleProps: DragHandleProps = { onPointerDown: handlePointerDown, onDoubleClick: handleDoubleClick }
+
+  return { width, setWidth, handleProps, clamp, isPx }
+}

package/src/client/hooks/useStore.ts

@@ -1,15 +1,15 @@
-/**
- * React bindings for the framework-free stores: useSyncExternalStore with a
- * stable snapshot (the stores return immutable snapshots, so selector-free
- * subscription is safe), plus a stable-callback helper for event handlers.
- * @module dsh-filemgr/client/hooks/useStore
- */
-
-import { useSyncExternalStore } from 'react'
-import type { StateHandle } from '../store.ts'
-
-/** Subscribe a component to one store (full snapshot). */
-export function useStore<S>(store: StateHandle<S>): S {
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
-}
-
+/**
+ * React bindings for the framework-free stores: useSyncExternalStore with a
+ * stable snapshot (the stores return immutable snapshots, so selector-free
+ * subscription is safe), plus a stable-callback helper for event handlers.
+ * @module dsh-filemgr/client/hooks/useStore
+ */
+
+import { useSyncExternalStore } from 'react'
+import type { StateHandle } from '../store.ts'
+
+/** Subscribe a component to one store (full snapshot). */
+export function useStore<S>(store: StateHandle<S>): S {
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+}
+

package/src/client/index.ts

@@ -34,8 +34,8 @@ import { MermaidChatEnhancer } from './chat/mermaid-chat.tsx'
 import { PlaceholderHint } from './chat/placeholder-hint.tsx'
 import { FilePickerHost } from './picker/FilePickerModal.tsx'
 import { handleFileRefClick } from './chat/file-ref.ts'
-import { appendToDraft, appendFileReferenceChip } from './reference.ts'
-import { registerFileReferenceSource } from './file-source.ts'
+import { appendToDraft, appendFileReferenceChip, appendSheetChip } from './reference.ts'
+import { registerFileReferenceSource, registerSheetReferenceSource } from './file-source.ts'
 import type { FileReferenceSelection } from './preview/selection.ts'
 import { FilePanelDockItem } from './FilePanelDockItem.tsx'
 
@@ -107,6 +107,7 @@ export function apply(ctx: ClientContext): void {
   // `slash/input-insert-reference` chip can send. Inert as a menu
   // participant — the '@' tree modal is our own picker, not the shell menu.
   ctx.effect(() => registerFileReferenceSource(ctx), 'dsh-filemgr: file reference source')
+  ctx.effect(() => registerSheetReferenceSource(ctx), 'dsh-filemgr: sheet reference source')
 
   // The '@' picker is our own tree modal (pi-desktop style), NOT the shell's
   // flat trigger menu: a bare `@` in the composer opens FilePickerHost
@@ -218,6 +219,7 @@ export function apply(ctx: ClientContext): void {
       const layout = new PanelLayoutController(stores.layout)
       const disposers: Array<() => void> = []
       let disposeGitEvents: (() => void) | undefined
+      let disposeFsEvents: (() => void) | undefined
       let currentRoot = ''
       let lastPreviewOpen = false
 
@@ -244,6 +246,14 @@ export function apply(ctx: ClientContext): void {
         return appendFileReferenceChip(ctx, sessionId, selection)
       }
 
+      // The preview Excel "引用到对话" action: mint a `sheet` chip (appearance
+      // only) appended at the draft end, serializing the
+      // `相对路径!Sheet名!Range` token on submit.
+      const onInsertSheetReference = (path: string, sheetName: string, range: string): boolean => {
+        const sessionId = ctx.sessions.list.getSnapshot().current as SessionId | undefined
+        return appendSheetChip(ctx, sessionId, path, { sheetName, range })
+      }
+
       // The project root follows the active session's cwd; switching sessions
       // re-binds every store (widths, collapse, tree, tabs persist per root).
       const bindRoot = (): void => {
@@ -260,6 +270,8 @@ export function apply(ctx: ClientContext): void {
         // switches; syncGitSubscription re-evaluates it below.
         disposeGitEvents?.()
         disposeGitEvents = undefined
+        disposeFsEvents?.()
+        disposeFsEvents = undefined
         const previewOpen = stores.preview.getSnapshot().open
         lastPreviewOpen = previewOpen
         layoutSetRoot(stores.layout, root, previewOpen)
@@ -268,6 +280,7 @@ export function apply(ctx: ClientContext): void {
         stores.preview.setRoot(root)
 
         syncGitSubscription()
+        syncFsSubscription()
       }
 
       /**
@@ -301,8 +314,33 @@ export function apply(ctx: ClientContext): void {
           disposeGitEvents = undefined
         }
       }
+
+      /**
+       * Live-filesystem notifications: the host watches the workspace root
+       * while any SSE stream is open (recursive fs.watch + debounce) and emits
+       * `{kind:'fs'}` on out-of-band writes — chiefly an agent/LLM subprocess
+       * creating or editing a work product directly on disk (which never
+       * touches the /filemgr/* write APIs). Refresh the explorer so the new
+       * file shows up without a manual UI action. The subscription mirrors the
+       * panel lifecycle: only while a session root exists AND the explorer
+       * panel is visible (CollapsiblePanel/折叠 keeps the dock icon hot).
+       */
+      const syncFsSubscription = (): void => {
+        const root = currentRoot
+        const visible = !stores.layout.getSnapshot().explorerCollapsed
+        const want = root !== '' && visible
+        if (want && disposeFsEvents === undefined) {
+          disposeFsEvents = subscribePanelEvents(root, (event) => {
+            if (event.kind === 'fs') void stores.explorer.handleFsChange()
+          })
+        } else if (!want && disposeFsEvents !== undefined) {
+          disposeFsEvents()
+          disposeFsEvents = undefined
+        }
+      }
       disposers.push(ctx.sessions.list.subscribe(bindRoot))
       disposers.push(stores.explorer.subscribe(syncGitSubscription))
+      disposers.push(stores.layout.subscribe(syncFsSubscription))
       bindRoot()
 
       // Header tool-dock bridge (dsh-term's AnimatedDock): the "file panel"
@@ -347,7 +385,7 @@ export function apply(ctx: ClientContext): void {
       // Mount everything. DOM failures degrade the panels, never the GUI.
       try {
         layout.mount()
-        mountPanels(stores, () => layout.toggleExplorer(), onReference, onAddFileReference, ctx.locale)
+        mountPanels(stores, () => layout.toggleExplorer(), onReference, onAddFileReference, onInsertSheetReference, ctx.locale)
       } catch (error) {
         console.error('[dsh-filemgr] mount failed:', error)
       }
@@ -388,6 +426,7 @@ export function apply(ctx: ClientContext): void {
         document.removeEventListener('visibilitychange', onVisibilityChange)
         document.removeEventListener('click', onFileRefClick)
         disposeGitEvents?.()
+        disposeFsEvents?.()
         langObserver?.disconnect()
         pickerRoot.unmount()
         pickerHostEl.remove()