@lijian-ui/dsh-file-manager 0.1.21 → 0.2.0

package/lib/types/client/layout.d.ts

@@ -53,7 +53,6 @@ export declare class PanelLayoutController {
     private explorerCol;
     private explorerHandle;
     private previewHandle;
-    private floatingButton;
     private styleObserver;
     private sizeObserver;
     private waitObserver;
@@ -82,9 +81,6 @@ export declare class PanelLayoutController {
      * the shell has no header (standalone installs, desktop variants).
      */
     private findHeaderBottom;
-    /** Position the floating button: docked at the top-right corner, just
-     * below the shell header's bottom divider (fallback: the chevron row). */
-    private positionFloatingButton;
     /** Apply one store update with transitions disabled for exactly one frame. */
     private instant;
     /** Re-write the frame grid and reposition handles + floating button. */

package/lib/types/client/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/client/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAiBH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,iFAAiF;AACjF,wBAAgB,eAAe,IAAI,WAAW,GAAG,IAAI,CAEpD;AAgBD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAkBvD;AAED,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAEtC;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAChF,MAAM,CAQR;AAED,+EAA+E;AAC/E,qBAAa,qBAAqB;IAiBpB,OAAO,CAAC,QAAQ,CAAC,MAAM;IAhBnC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,WAAW,CAA8B;IACjD,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,aAAa,CAA8B;IACnD,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,aAAa,CAAgC;IACrD,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,UAAU,CAAI;IACtB,4EAA4E;IAC5E,OAAO,CAAC,aAAa,CAA2B;IAChD,wFAAwF;IACxF,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,YAAY,CAA2C;IAC/D,OAAO,CAAC,SAAS,CAAwB;gBACZ,MAAM,EAAE,WAAW;IAEhD,+DAA+D;IAC/D,KAAK,IAAI,IAAI;IAYb,4EAA4E;IAC5E,OAAO,CAAC,MAAM;IAwId,8DAA8D;IAC9D,OAAO,CAAC,YAAY;IAkEpB,uEAAuE;IACvE,cAAc,IAAI,IAAI;IActB,uEAAuE;IACvE,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAOnC;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAWxB;8EAC0E;IAC1E,OAAO,CAAC,sBAAsB;IAa9B,8EAA8E;IAC9E,OAAO,CAAC,OAAO;IAef,wEAAwE;IACxE,OAAO,CAAC,SAAS;IAuEjB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAoBtB,gEAAgE;IAChE,OAAO,CAAC,oBAAoB;IAK5B,yCAAyC;IACzC,OAAO,IAAI,IAAI;CAchB"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/client/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAcH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,iFAAiF;AACjF,wBAAgB,eAAe,IAAI,WAAW,GAAG,IAAI,CAEpD;AAgBD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAkBvD;AAED,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAEtC;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAChF,MAAM,CAQR;AAED,+EAA+E;AAC/E,qBAAa,qBAAqB;IAiBpB,OAAO,CAAC,QAAQ,CAAC,MAAM;IAhBnC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,WAAW,CAA8B;IACjD,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,aAAa,CAA8B;IAEnD,OAAO,CAAC,aAAa,CAAgC;IACrD,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,UAAU,CAAI;IACtB,4EAA4E;IAC5E,OAAO,CAAC,aAAa,CAA2B;IAChD,wFAAwF;IACxF,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,YAAY,CAA2C;IAC/D,OAAO,CAAC,SAAS,CAAwB;gBACZ,MAAM,EAAE,WAAW;IAEhD,+DAA+D;IAC/D,KAAK,IAAI,IAAI;IAYb,4EAA4E;IAC5E,OAAO,CAAC,MAAM;IA0Hd,8DAA8D;IAC9D,OAAO,CAAC,YAAY;IAkEpB,uEAAuE;IACvE,cAAc,IAAI,IAAI;IActB,uEAAuE;IACvE,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAOnC;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAYxB,8EAA8E;IAC9E,OAAO,CAAC,OAAO;IAef,wEAAwE;IACxE,OAAO,CAAC,SAAS;IAiFjB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAkBtB,gEAAgE;IAChE,OAAO,CAAC,oBAAoB;IAK5B,yCAAyC;IACzC,OAAO,IAAI,IAAI;CAchB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lijian-ui/dsh-file-manager",
   "description": "DSH web GUI right-panel system: a pixel-faithful re-implementation of FileManager's Explorer + Preview columns (file tree, filename search, git changes, multi-tab preview of 10+ formats) driven by real host-side fs/git services, hot-pluggable via a profile bundle without any dsh source changes",
-  "version": "0.1.21",
+  "version": "0.2.0",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

package/src/client/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-file-manager/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/FilePanelDockItem.tsx

@@ -0,0 +1,40 @@
+/**
+ * FilePanelDockItem — the file-panel dock button rendered into the conversation
+ * session header (the `conversation.session.header.utilities` slot).
+ *
+ * This plugin owns its own dock button independently: dsh-term renders its own
+ * terminal button, dsh-file-manager renders this 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.
+ *
+ * Clicking broadcasts `dsh-dock:toggle-filepanel` (handled in dsh-file-manager
+ * index); the open state is mirrored back through `dsh-dock:filepanel-state`.
+ * @module dsh-file-manager/client/FilePanelDockItem
+ */
+import { useEffect, useState, type ReactElement } from 'react'
+import { DockItem } from './DockItem.tsx'
+
+const EV = {
+  toggleFile: 'dsh-dock:toggle-filepanel',
+  fileState: 'dsh-dock:filepanel-state',
+} as const
+
+export function FilePanelDockItem(): ReactElement {
+  const [active, setActive] = useState(false)
+  useEffect(() => {
+    const onState = (e: Event): void => setActive(Boolean((e as CustomEvent).detail))
+    window.addEventListener(EV.fileState, onState)
+    return () => window.removeEventListener(EV.fileState, onState)
+  }, [])
+  return (
+    <DockItem
+      active={active}
+      label="文件面板"
+      onClick={() => window.dispatchEvent(new CustomEvent(EV.toggleFile))}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="m6 14 1.45-2.9a2 2 0 0 1 1.79-1.1h11.76a2 2 0 0 1 1.94 1.5l1.55 6a2 2 0 0 1-1.94 2.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.5a2 2 0 0 1 1.59.79l.91 1.21a2 2 0 0 0 1.59.79H18a2 2 0 0 1 2 2v2" />
+      </svg>
+    </DockItem>
+  )
+}

package/src/client/index.ts

@@ -38,6 +38,7 @@ import { appendToDraft, appendFileReferenceChip } from './reference.ts'
 import { registerFileReferenceSource } from './file-source.ts'
 import type { FileReferenceSelection } from './preview/selection.ts'
 import './styles/chip.module.css'
+import { FilePanelDockItem } from './FilePanelDockItem.tsx'
 
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface LocaleNamespaceMap {
@@ -80,6 +81,20 @@ const panelApi = new PanelApi()
 
 /** Apply the browser half. */
 export function apply(ctx: ClientContext): void {
+  // Session header dock button (file-panel): each plugin owns its own button
+  // in conversation.session.header.utilities, so file-manager works standalone
+  // without dsh-term. Cross-button magnification is coordinated via window
+  // events (see DockItem.tsx).
+  ctx.inject(['slots'], (scope: ClientContext) => {
+    scope.slots.inject('conversation.session.header.utilities', () =>
+      scope.slots.register({
+        name: 'conversation.session.header.utilities',
+        id: 'filemgr-dock-item',
+        order: -2,
+        inject: () => ({}),
+      }, FilePanelDockItem))
+  })
+
   ctx.effect(() => ctx.locale.register(NS, dictionaries), 'dsh-filemgr: dictionaries')
 
   // The `file` reference source: registers the codec that serializes file

package/src/client/layout.ts

@@ -34,10 +34,7 @@ import {
 } from './store.ts'
 import { writeStoredNumber } from './persist.ts'
 import { maximizedGridTracks, maximizedOverlay } from './maximize.ts'
-import {
-  FLOATING_BUTTON_HEIGHT_PX, FLOATING_HEADER_GAP_PX,
-  clampFloatingTop, titlebarAreaHeight, topAlignedFloatingTop,
-} from './floating.ts'
+
 import type { LayoutStore } from './store.ts'
 
 /** The frame grid element (portals target it). */
@@ -123,7 +120,7 @@ export class PanelLayoutController {
   private explorerCol: HTMLDivElement | null = null
   private explorerHandle: HTMLDivElement | null = null
   private previewHandle: HTMLDivElement | null = null
-  private floatingButton: HTMLButtonElement | null = null
+
   private styleObserver: MutationObserver | null = null
   private sizeObserver: ResizeObserver | null = null
   private waitObserver: MutationObserver | null = null
@@ -191,26 +188,6 @@ export class PanelLayoutController {
     frame.appendChild(this.explorerHandle)
     frame.appendChild(this.previewHandle)
 
-    // The floating expand button (fixed, top-right corner) — DOM-level,
-    // no React. Docked exactly where the explorer's collapse chevron sits,
-    // so collapsing and re-expanding toggle in place (issue #374 follow-up);
-    // a click toggles the explorer.
-    this.floatingButton = document.createElement('button')
-    this.floatingButton.type = 'button'
-    this.floatingButton.className = 'filemgr-floating-expand'
-    this.floatingButton.setAttribute('aria-label', 'Expand explorer')
-    this.floatingButton.innerHTML = '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>'
-    this.floatingButton.addEventListener('click', () => { this.toggleExplorer() })
-    document.body.appendChild(this.floatingButton)
-
-    // Window Controls Overlay (dsh-desktop, issue #292): re-position when
-    // the titlebar area changes (button must stay below the window buttons).
-    const overlay = (navigator as Navigator & { windowControlsOverlay?: EventTarget }).windowControlsOverlay
-    if (overlay !== undefined) {
-      const onGeometryChange = (): void => { this.positionFloatingButton() }
-      overlay.addEventListener('geometrychange', onGeometryChange)
-      this.disposers.push(() => overlay.removeEventListener('geometrychange', onGeometryChange))
-    }
 
     // Esc restores a maximized panel (issue #315). Editing surfaces own Esc:
     // while an input/textarea/contenteditable is focused, leave it alone.
@@ -240,6 +217,12 @@ export class PanelLayoutController {
         // Our own write — keep it (the shell tracks are already mirrored).
         return
       }
+      // 6 tracks: dsh-term appended its track after our 5 — re-apply to
+      // update handle positions (they must offset left by dsh-term's width).
+      if (tracks.length === 6 && tracks.includes('[dsh-term]') && this.shellTracks.length === 3) {
+        this.applyGrid()
+        return
+      }
     }
     this.styleObserver = new MutationObserver(syncGrid)
     this.styleObserver.observe(frame, { attributes: true, attributeFilter: ['style'] })
@@ -393,20 +376,6 @@ export class PanelLayoutController {
     return Number.isFinite(bottom) ? bottom : null
   }
 
-  /** Position the floating button: docked at the top-right corner, just
-   * below the shell header's bottom divider (fallback: the chevron row). */
-  private positionFloatingButton(): void {
-    const el = this.floatingButton
-    if (el === null) return
-    const height = window.innerHeight
-    const titlebar = titlebarAreaHeight()
-    const headerBottom = this.findHeaderBottom()
-    const top = headerBottom !== null
-      ? clampFloatingTop(headerBottom + FLOATING_HEADER_GAP_PX, height, FLOATING_BUTTON_HEIGHT_PX, titlebar)
-      : topAlignedFloatingTop(height, FLOATING_BUTTON_HEIGHT_PX, titlebar)
-    el.style.top = `${Math.round(top)}px`
-    el.style.transform = 'none'
-  }
 
   /** Apply one store update with transitions disabled for exactly one frame. */
   private instant(fn: () => void): void {
@@ -445,9 +414,25 @@ export class PanelLayoutController {
     const explorer = this.layout.explorerWidthPx(state)
     const preview = this.layout.previewWidthPx(state)
 
+    // Detect dsh-term column (appended by the dsh-term plugin after our tracks).
+    // When present, preserve its track and offset handles left by its width.
+    // Check the grid tokens for [dsh-term] — the col element may exist but not
+    // have a track yet (initial mount), so display/width alone are unreliable.
+    const gridTokens = parseGridTracks(frame.style.gridTemplateColumns)
+    const hasDshTermTrack = gridTokens.includes('[dsh-term]')
+    const dshTermCol = hasDshTermTrack ? frame.querySelector<HTMLElement>('[data-dsh-term-col]') : null
+    const dshTermOpen = dshTermCol !== null
+      && dshTermCol.style.display !== 'none'
+      && dshTermCol.getBoundingClientRect().width > 0
+    const dshTermWidth = dshTermOpen ? Math.round(dshTermCol!.getBoundingClientRect().width) : 0
+
     // Five tracks: shell sidebar, center, shell details, preview, explorer.
-    frame.style.gridTemplateColumns =
+    // (Six when dsh-term is open — preserve its track so we don't clobber it.)
+    const baseGrid =
       `${this.shellTracks[0]} minmax(0, 1fr) ${this.shellTracks[2]} ${Math.round(preview)}px ${Math.round(explorer)}px`
+    frame.style.gridTemplateColumns = dshTermOpen
+      ? `${baseGrid} [dsh-term] ${dshTermWidth}px`
+      : baseGrid
 
     // Column contents follow the tracks (both columns always mounted).
     if (this.explorerCol !== null) {
@@ -457,15 +442,15 @@ export class PanelLayoutController {
       this.previewCol.style.visibility = preview > 0 ? 'visible' : 'hidden'
     }
 
-    // Handles: at the left edge of each panel.
+    // Handles: at the left edge of each panel (offset left by dsh-term if open).
     if (this.explorerHandle !== null) {
-      const left = Math.round(width - explorer)
+      const left = Math.round(width - explorer - dshTermWidth)
       this.explorerHandle.style.left = `${left}px`
       this.explorerHandle.style.marginLeft = `${-EXPLORER_HANDLE_WIDTH / 2}px`
       this.explorerHandle.style.display = explorer > 0 && state.root !== '' ? 'block' : 'none'
     }
     if (this.previewHandle !== null) {
-      const left = Math.round(width - explorer - preview)
+      const left = Math.round(width - explorer - preview - dshTermWidth)
       this.previewHandle.style.left = `${left}px`
       this.previewHandle.style.display = preview > 0 && state.root !== '' ? 'block' : 'none'
     }
@@ -485,15 +470,9 @@ export class PanelLayoutController {
       this.detailsHandle = frame.querySelector<HTMLElement>('[data-side="details"]')
     }
     if (this.detailsHandle !== null) {
-      this.detailsHandle.style.left = `${Math.round(width - detailsTrack - preview - explorer)}px`
+      this.detailsHandle.style.left = `${Math.round(width - detailsTrack - preview - explorer - dshTermWidth)}px`
     }
 
-    // Floating expand button: visible only when the explorer is collapsed.
-    if (this.floatingButton !== null) {
-      const show = state.root !== '' && state.explorerCollapsed
-      this.floatingButton.style.display = show ? 'flex' : 'none'
-      this.positionFloatingButton()
-    }
   }
 
   /**
@@ -515,11 +494,9 @@ export class PanelLayoutController {
       this.previewCol.style.visibility = target === 'preview' ? 'visible' : 'hidden'
       this.previewCol.classList.toggle('filemgr-maximized', target === 'preview' && overlay)
     }
-    // No drag chrome while maximized: nothing to resize, and the floating
-    // button only makes sense for the collapsed explorer.
+    // No drag chrome while maximized: nothing to resize.
     if (this.explorerHandle !== null) this.explorerHandle.style.display = 'none'
     if (this.previewHandle !== null) this.previewHandle.style.display = 'none'
-    if (this.floatingButton !== null) this.floatingButton.style.display = 'none'
   }
 
   /** Remove the narrow-screen overlay class from both columns. */
@@ -538,7 +515,7 @@ export class PanelLayoutController {
     this.explorerCol?.remove()
     this.explorerHandle?.remove()
     this.previewHandle?.remove()
-    this.floatingButton?.remove()
+
     if (this.instantTimer !== undefined) clearTimeout(this.instantTimer)
     if (frameElement === this.frame) frameElement = null
     this.frame = null

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

@@ -188,85 +188,13 @@
   }
 }
 
-/* Drag handles: 2px visual line, 6px + brand on hover/active. */
+/* Drag handles: invisible, col-resize cursor only (like DSH native sidebar). */
 :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;
+  cursor: col-resize;
 }
 
-/* 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