@lijian-ui/dsh-file-manager 0.1.20

package/src/client/styles/tokens.module.css

@@ -0,0 +1,480 @@
+/**
+ * The panel design system: FileManager's measured tokens (light/dark), scoped to
+ * the plugin's own root elements so they never leak into the shell. Light
+ * values are the defaults; the controller flips `data-filemgr-dark` on every
+ * root element when the GUI theme is dark (the shell's theme service emits
+ * theme/change; the controller mirrors it).
+ *
+ * The two rules at the top are intentionally GLOBAL (hence the :global()
+ * wrapper): the token variables must be readable by DOM-created chrome — the
+ * panel columns and drag handles are appended by the layout controller outside
+ * any React subtree — so they live on :root. Every other rule below is still
+ * scoped to `.filemgr-root` / the plugin's own class names.
+ *
+ * Values are the browser-measured ones from the research report (section 5.2)
+ * — including the aou ramp reversal in dark mode and the missing --bg-7.
+ */
+:global(:root) {
+  --aion-bg-base: #ffffff;
+  --aion-bg-1: #f9fafb;
+  --aion-bg-2: #f2f3f5;
+  --aion-bg-3: #e5e6eb;
+  --aion-bg-hover: #f3f4f6;
+  --aion-bg-active: #e5e6eb;
+  --aion-text-primary: #000000;
+  --aion-text-secondary: #454d5f;
+  --aion-text-tertiary: #86909c;
+  --aion-text-disabled: #c9cdd4;
+  --aion-primary: #165dff;
+  --aion-success: #00b42a;
+  --aion-warning: #ff7d00;
+  --aion-danger: #f53f3f;
+  --aion-brand: #7583b2;
+  --aion-aou-1: #eff0f6;
+  --aion-aou-2: #e5e7f0;
+  --aion-aou-3: #d1d5e5;
+  --aion-aou-4: #b5bcd6;
+  --aion-aou-5: #97a0c5;
+  --aion-aou-6: #7583b2;
+  --aion-fill-2: #f2f3f5;
+  --aion-fill-3: #e5e6eb;
+  --aion-border-base: #e5e6eb;
+  --aion-overlay-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+  --aion-font-sans: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue",
+    "PingFang SC", "Microsoft YaHei", sans-serif;
+  --aion-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+}
+
+/* The shell marks dark mode with body[data-ds-dark-theme]; the panel tokens
+   follow it with zero JS wiring (the theme service toggles the attribute).
+   Scoped to body so third-party themes cannot override them from :root.
+   Global by intent (tokens reach the DOM-added columns/handles); the dark
+   color-scheme is only asserted here so the host's own light default wins. */
+:global(body[data-ds-dark-theme]) {
+  --aion-bg-base: #0e0e0e;
+  --aion-bg-1: #1a1a1a;
+  --aion-bg-2: #262626;
+  --aion-bg-3: #333333;
+  --aion-bg-hover: #1f1f1f;
+  --aion-bg-active: #2d2d2d;
+  --aion-text-primary: #ffffff;
+  --aion-text-secondary: #ced3da;
+  --aion-text-tertiary: #737373;
+  --aion-text-disabled: #737373;
+  --aion-primary: #4d9fff;
+  --aion-success: #23c343;
+  --aion-warning: #ff9a2e;
+  --aion-danger: #f76560;
+  --aion-brand: #a1aacb;
+  --aion-aou-1: #2a2a2a;
+  --aion-aou-2: #3d4150;
+  --aion-aou-3: #525a77;
+  --aion-aou-4: #6a749b;
+  --aion-aou-5: #838fba;
+  --aion-aou-6: #a1aacb;
+  --aion-fill-2: rgba(255, 255, 255, 0.08);
+  --aion-fill-3: rgba(255, 255, 255, 0.12);
+  --aion-border-base: #333333;
+  --aion-overlay-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  color-scheme: dark;
+}
+
+
+/* Shared base for every plugin-owned surface. */
+:global(.filemgr-root) {
+  font-family: var(--aion-font-sans);
+  font-size: 13px;
+  color: var(--aion-text-primary);
+  background-color: var(--aion-bg-1);
+}
+
+:global(.filemgr-root *),
+:global(.filemgr-root *::before),
+:global(.filemgr-root *::after) {
+  box-sizing: border-box;
+}
+
+/* Thin scrollbars matching the shell look. */
+:global(.filemgr-root ::-webkit-scrollbar) {
+  width: 8px;
+  height: 8px;
+}
+:global(.filemgr-root ::-webkit-scrollbar-thumb) {
+  background: var(--aion-bg-3);
+  border-radius: 4px;
+}
+:global(.filemgr-root ::-webkit-scrollbar-thumb:hover) {
+  background: var(--aion-bg-4, #c9cdd4);
+}
+:global(.filemgr-root ::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+/* prefers-reduced-motion: kill every panel animation globally. */
+@media (prefers-reduced-motion: reduce) {
+  :global(.filemgr-root *),
+  :global(.filemgr-root *::before),
+  :global(.filemgr-root *::after) {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* ── frame-level chrome (created by the layout controller) ──────────────── */
+
+/* The shell frame's grid transition must not animate panel width changes. */
+:global([data-dsh-frame][data-filemgr-instant]) {
+  transition: none !important;
+}
+
+/* Panel columns are plain grid items; overflow hidden so width 0 clips.
+   z-index 30 lifts the columns above the shell.overlay slot layer (the core
+   AppFrame renders it as ::global(.overlayLayer) at z-index 20, inset:0 over
+   the whole frame). Right-edge overlay plugins would otherwise paint on top of
+   the Explorer / Preview columns' content (issue #195). Kept below dialogs
+   (1000+) so modals/toasts still stack above the panels. Matches the tab-bar
+   z-index 30 convention (issues #169 / #87), so the three stay consistent.
+   Full-screen drawer overlays (e.g. the biaoqingbao emoji manager) must
+   therefore render at the ROOT stacking context (portal to document.body,
+   z in (100, 1000)) to cover the panels AND the frame chrome (drag handles
+   and the floating expand button stack at 30/100 — they overlap the column
+   tracks, so lowering them below the columns would bury them under the
+   opaque panels and kill drag/click hit-testing, issue #234 follow-up). */
+:global(.filemgr-preview-col),
+:global(.filemgr-explorer-col) {
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--aion-bg-1);
+  z-index: 30;
+}
+
+:global(.filemgr-preview-col) {
+  /* 1px left border only — no outer margins (FileManager contract). */
+  border-left: 1px solid var(--aion-bg-3);
+}
+
+/* Maximized narrow-screen overlay (issue #315): on viewports below the
+   breakpoint the maximized column leaves the grid and covers the whole
+   window (mobile-friendly full-screen mode). The layout controller toggles
+   this class; removing it restores the normal grid position. Above the
+   columns/chrome (60) and below dialogs (1000+). */
+:global(.filemgr-preview-col.filemgr-maximized),
+:global(.filemgr-explorer-col.filemgr-maximized) {
+  position: fixed !important;
+  inset: 0;
+  z-index: 60;
+}
+
+:global(.filemgr-explorer-col) {
+  border-left: 1px solid var(--aion-bg-3);
+}
+
+/* Preview region enter animation (0.25s, translateX(20px) + fade). */
+:global(.filemgr-preview-col.filemgr-preview-enter) {
+  animation: filemgr-preview-enter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes filemgr-preview-enter {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Drag handles: 2px visual line, 6px + brand on hover/active. */
+:global(.filemgr-explorer-handle),
+:global(.filemgr-preview-handle) {
+  touch-action: none;
+}
+:global(.filemgr-explorer-handle::after),
+:global(.filemgr-preview-handle::after) {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  border-radius: 9999px;
+  background-color: var(--aion-bg-3);
+  opacity: 0.9;
+  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+:global(.filemgr-explorer-handle:hover::after),
+:global(.filemgr-explorer-handle:active::after),
+:global(.filemgr-preview-handle:hover::after),
+:global(.filemgr-preview-handle:active::after) {
+  width: 6px;
+  background-color: var(--aion-brand);
+}
+/* The preview handle's line sits at its right edge (its hit zone extends
+   left); the explorer's at its left edge. */
+:global(.filemgr-preview-handle::after) {
+  left: auto;
+  right: 0;
+  opacity: 0.3;
+}
+:global(.filemgr-preview-handle:hover::after),
+:global(.filemgr-preview-handle:active::after) {
+  opacity: 1;
+}
+
+/* Floating expand button (explorer collapsed). Docked at the viewport's
+   top-right corner, just below the shell header's bottom divider (the
+   horizontal line under the "Session log" row) — the layout controller
+   sets an inline top for that, so the button never overlaps the header
+   chrome (issues #374 / #292). Above the columns (z 30): when the preview
+   region is open it overlaps the rightmost column track, so anything
+   lower would be painted under the opaque column and stop receiving
+   clicks (issue #234 follow-up). Full-screen overlay drawers must render
+   at the ROOT stacking context (z 100~1000) to cover it.
+   The top below is only the pre-JS fallback (the chevron row); the
+   controller overwrites it inline. */
+:global(.filemgr-floating-expand) {
+  position: fixed;
+  top: calc(6px + env(titlebar-area-height, 0px));
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--aion-bg-2);
+  color: var(--aion-text-secondary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  z-index: 100;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+:global(.filemgr-floating-expand:hover) {
+  background-color: var(--aion-bg-3);
+  color: var(--aion-text-primary);
+}
+:global(.filemgr-floating-expand:active) {
+  background-color: var(--aion-bg-active);
+}
+:global(.filemgr-floating-expand:focus-visible) {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+
+/* The collapse chevron inside the explorer tab bar (top-right). It rides
+   the explorer column's stacking context (the column stacks at z 30), so
+   its own z-index only orders it against tab-bar siblings; full-screen
+   overlay drawers must render at the ROOT stacking context (z 100~1000)
+   to cover it (issue #234). */
+:global(.filemgr-collapse-chevron) {
+  position: absolute;
+  /* In desktop wrappers with the Window Controls Overlay, the native
+     window buttons occupy the top-right corner of the webview; shift the
+     chevron below that strip. Browsers report 0px, so layout is
+     unchanged there (issue #169). */
+  top: calc(6px + env(titlebar-area-height, 0px));
+  right: 8px;
+  z-index: 30;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--aion-text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+:global(.filemgr-collapse-chevron:hover) {
+  background-color: var(--aion-bg-3);
+  color: var(--aion-text-primary);
+}
+:global(.filemgr-collapse-chevron:active) {
+  background-color: var(--aion-bg-active);
+}
+:global(.filemgr-collapse-chevron:focus-visible) {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+
+/* Confirm dialog backdrop + card. */
+:global(.filemgr-overlay) {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+}
+:global(.filemgr-dialog) {
+  width: 400px;
+  max-width: calc(100vw - 48px);
+  border-radius: 16px;
+  background: var(--aion-bg-base);
+  box-shadow: var(--aion-overlay-shadow);
+  overflow: hidden;
+  font-family: var(--aion-font-sans);
+}
+:global(.filemgr-dialog-title) {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--aion-text-primary);
+  padding: 16px 20px 8px;
+}
+:global(.filemgr-dialog-body) {
+  font-size: 13px;
+  color: var(--aion-text-secondary);
+  padding: 0 20px;
+  line-height: 1.6;
+}
+:global(.filemgr-dialog-actions) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+:global(.filemgr-btn) {
+  height: 28px;
+  padding: 0 14px;
+  border: 1px solid var(--aion-bg-3);
+  border-radius: 4px;
+  background: var(--aion-bg-base);
+  color: var(--aion-text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+:global(.filemgr-btn:hover) {
+  background: var(--aion-bg-hover);
+}
+:global(.filemgr-btn:active) {
+  background: var(--aion-bg-active);
+}
+:global(.filemgr-btn:focus-visible) {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+:global(.filemgr-btn-primary) {
+  background: var(--aion-primary);
+  border-color: var(--aion-primary);
+  color: #ffffff;
+}
+:global(.filemgr-btn-primary:hover) {
+  background: var(--aion-primary);
+  opacity: 0.9;
+}
+:global(.filemgr-btn-primary:active) {
+  opacity: 0.75;
+  filter: saturate(0.9);
+}
+:global(.filemgr-btn-danger) {
+  background: var(--aion-danger);
+  border-color: var(--aion-danger);
+  color: #ffffff;
+}
+:global(.filemgr-btn-danger:hover) {
+  opacity: 0.9;
+}
+:global(.filemgr-btn-danger:active) {
+  opacity: 0.75;
+}
+
+/* Context menu (tab right-click / tree right-click). */
+:global(.filemgr-menu) {
+  position: fixed;
+  z-index: 1100;
+  min-width: 160px;
+  padding: 4px;
+  border-radius: 8px;
+  background: var(--aion-bg-base);
+  box-shadow: var(--aion-overlay-shadow);
+  border: 1px solid var(--aion-bg-3);
+  font-family: var(--aion-font-sans);
+}
+:global(.filemgr-menu-item) {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: var(--aion-text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+:global(.filemgr-menu-item:hover) {
+  background: var(--aion-fill-2);
+}
+:global(.filemgr-menu-item:focus-visible) {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: -2px;
+}
+:global(.filemgr-menu-item-disabled) {
+  color: var(--aion-text-disabled);
+  cursor: default;
+}
+:global(.filemgr-menu-item-disabled:hover) {
+  background: transparent;
+}
+:global(.filemgr-menu-sep) {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--aion-bg-3);
+}
+
+/* Prompt dialog text input. */
+:global(.filemgr-input) {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--aion-bg-3);
+  border-radius: 6px;
+  background: var(--aion-bg-base);
+  color: var(--aion-text-primary);
+  font-size: 13px;
+  font-family: var(--aion-font-sans);
+  outline: none;
+  box-sizing: border-box;
+}
+:global(.filemgr-input:focus) {
+  border-color: var(--aion-primary);
+}
+
+/* Toast. */
+:global(.filemgr-toast) {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1200;
+  max-width: 70vw;
+  padding: 8px 14px;
+  border-radius: 6px;
+  background: var(--aion-bg-base);
+  color: var(--aion-text-primary);
+  font-size: 13px;
+  font-family: var(--aion-font-sans);
+  box-shadow: var(--aion-overlay-shadow);
+  border: 1px solid var(--aion-bg-3);
+  animation: filemgr-toast-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes filemgr-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}

package/src/core/types.ts

@@ -0,0 +1,162 @@
+/**
+ * Wire vocabulary shared by the host data services and the browser client:
+ * the request/response shapes of the /filemgr/* routes and the stable
+ * error codes the client maps onto copy. Pure types — no runtime code.
+ *
+ * The design follows FileManager's right-panel system (Apache-2.0, re-implemented
+ * from measured behavior, not copied code): the explorer column is a lazy
+ * directory tree, the preview column opens files as tabs, and the SCM tab
+ * reads the repository's real working-tree state.
+ * @module dsh-filemgr/core/types
+ */
+
+/** Envelope every /filemgr JSON response carries. */
+export type PanelEnvelope<T> =
+  | { ok: true; value: T }
+  | { ok: false; error: PanelError }
+
+/** Stable rejection codes (host-authored; the client prefers its own copy by code). */
+export type PanelErrorCode =
+  | 'workspace-unknown'
+  | 'path-outside-root'
+  | 'not-found'
+  | 'is-directory'
+  | 'read-failed'
+  | 'write-conflict'
+  | 'write-failed'
+  | 'search-failed'
+  | 'git-unavailable'
+  | 'git-failed'
+  | 'internal'
+
+/** One rejection with a human-readable host message. */
+export interface PanelError {
+  code: PanelErrorCode
+  message: string
+}
+
+/** One filesystem entry in a directory listing (path is relative to the root). */
+export interface FsEntry {
+  /** Display name (basename). */
+  name: string
+  /** Path relative to the project root, '/' separated; '' is the root itself. */
+  path: string
+  isDir: boolean
+  /** Size in bytes (0 for directories). */
+  size: number
+  /** Last-modified epoch millis (0 for directories). */
+  mtime: number
+}
+
+/** The listing of one directory. */
+export interface DirListing {
+  /** Canonical root path the listing is relative to. */
+  root: string
+  /** Sorted entries (directories first, then files, both case-insensitive alpha). */
+  entries: FsEntry[]
+  /** True when the entry count was capped at MAX_ENTRIES (a giant flat dir). */
+  truncated: boolean
+}
+
+/** The result of reading one file for preview. */
+export interface FileRead {
+  /** Text content (decoded utf-8), or a data URL for image kinds. */
+  content: string
+  /** True when the text was truncated at the preview ceiling. */
+  truncated: boolean
+  /** Total size in bytes. */
+  size: number
+  /** Last-modified epoch millis (the write-conflict base). */
+  mtime: number
+  /** Image dimensions when the file is an image (host decodes via probe). */
+  image?: { width: number; height: number }
+}
+
+/** One filename-search hit. */
+export interface SearchHit {
+  /** Path relative to the root. */
+  path: string
+  /** Display name (basename). */
+  name: string
+  isDir: boolean
+}
+
+/** The filename-search result. */
+export interface SearchView {
+  /** The query the hits were ranked for. */
+  query: string
+  hits: SearchHit[]
+  /** True when the hit cap cut the result stream. */
+  truncated: boolean
+}
+
+/** Working-tree state of one change row. */
+export type GitFileState = 'created' | 'modified' | 'deleted' | 'renamed' | 'conflicted' | 'untracked' | 'unknown'
+
+/** One change row in a git status. */
+export interface GitChangeRow {
+  /** Path relative to the repo root. */
+  path: string
+  /** Original path for renames (old -> new). */
+  oldPath?: string
+  state: GitFileState
+  /** True when the change sits in the index (staged). */
+  staged: boolean
+}
+
+/** The git status view of one repo root. */
+export interface GitStatusView {
+  /** Repo root (git rev-parse --show-toplevel). */
+  root: string
+  /** Current branch name; '' when detached. */
+  branch: string
+  /** Staged changes (index vs HEAD). */
+  staged: GitChangeRow[]
+  /** Unstaged changes (worktree vs index). */
+  unstaged: GitChangeRow[]
+  /** Untracked files (worktree, not in index). */
+  untracked: GitChangeRow[]
+}
+
+/** The result of a stage/unstage/discard batch. */
+export interface GitBatchResult {
+  /** Rows the operation actually changed (post-op status snapshot for these paths). */
+  applied: string[]
+  /** Paths the host refused to touch. */
+  failed: string[]
+}
+
+/** One preview tab identity as persisted. */
+export interface PreviewTabMeta {
+  /** Stable tab id (root + path + type). */
+  id: string
+  /** Display title (basename). */
+  title: string
+  /** Project root the file belongs to. */
+  root: string
+  /** File path relative to the root. */
+  path: string
+  contentType: PreviewContentType
+  /** Whether the tab carries unsaved edits. */
+  dirty?: boolean
+  /** Last write timestamp the tab's content was based on (conflict base). */
+  mtime?: number
+  /** When the tab was last touched (LRU ordering within a scope). */
+  savedAt: number
+}
+
+/** Preview content kinds the panel can render. */
+export type PreviewContentType =
+  | 'markdown'
+  | 'html'
+  | 'code'
+  | 'diff'
+  | 'csv'
+  | 'pdf'
+  | 'word'
+  | 'excel'
+  | 'ppt'
+  | 'image'
+  | 'text'
+  | 'url'
+  | 'unsupported'