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

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

@@ -1,367 +1,376 @@
-/**
- * The panel design system: FileManager's tokens, scoped to the plugin's own
- * root elements so they never leak into the shell. The `--aion-*` names are
- * kept as an alias layer that forwards to the official `--dsw-*` token system
- * — dark-mode adaptation is handled by `--dsw-*` itself, so no per-theme
- * override block is needed.
- *
- * 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.
- */
-:global(:root) {
-  --aion-bg-base: var(--dsw-alias-bg-base);
-  --aion-bg-1: var(--dsw-alias-bg-layer-1);
-  --aion-bg-2: var(--dsw-alias-bg-layer-2);
-  --aion-bg-3: var(--dsw-alias-bg-layer-3);
-  --aion-bg-4: var(--dsw-alias-label-dimmed);
-  --aion-bg-hover: var(--dsw-alias-interactive-bg-hover);
-  --aion-bg-active: var(--dsw-alias-interactive-bg-active);
-  --aion-text-primary: var(--dsw-alias-label-primary);
-  --aion-text-secondary: var(--dsw-alias-label-secondary);
-  --aion-text-tertiary: var(--dsw-alias-label-tertiary);
-  --aion-text-disabled: var(--dsw-alias-label-dimmed);
-  --aion-primary: var(--dsw-alias-state-business-primary);
-  --aion-success: var(--dsw-alias-state-success-primary);
-  --aion-warning: var(--dsw-alias-state-warn-primary);
-  --aion-danger: var(--dsw-alias-state-error-primary);
-  --aion-brand: var(--dsw-alias-brand-primary);
-  --aion-aou-2: var(--dsw-alias-bg-layer-2);
-  --aion-aou-6: var(--dsw-alias-brand-primary);
-  --aion-fill-2: var(--dsw-alias-interactive-bg-hover);
-  --aion-fill-3: var(--dsw-alias-interactive-bg-hover-solid);
-  --aion-border-base: var(--dsw-alias-border-l2);
-  --aion-overlay-shadow: var(--dsw-shadow-lv2);
-  --aion-font-sans: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue",
-    "PingFang SC", "Microsoft YaHei", sans-serif;
-  --aion-font-mono: var(--dsw-alias-font-family-mono);
-}
-
-
-/* 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);
-}
-: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: invisible, col-resize cursor only (like DSH native sidebar). */
-:global(.filemgr-explorer-handle),
-:global(.filemgr-preview-handle) {
-  touch-action: none;
-  cursor: col-resize;
-}
-
-
-/* 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);
-  }
-}
+/**
+ * The panel design system: FileManager's tokens, scoped to the plugin's own
+ * root elements so they never leak into the shell. The `--aion-*` names are
+ * kept as an alias layer that forwards to the official `--dsw-*` token system
+ * — dark-mode adaptation is handled by `--dsw-*` itself, so no per-theme
+ * override block is needed.
+ *
+ * Scoped to BODY, not :root: since the official theme rc.2 the `--dsw-*`
+ * semantic tokens live on `body` (not html), so an alias defined at :root
+ * would substitute var() against an undefined name and compute to the
+ * guaranteed-invalid value (""), killing every background that consumes it.
+ * On body the dsw tokens resolve and the aliases inherit to all visible
+ * elements — including the DOM-created chrome (panel columns, drag handles,
+ * the '@' picker portal) appended outside any React subtree.
+ */
+:global(body) {
+  --aion-bg-base: var(--dsw-alias-bg-base);
+  --aion-bg-1: var(--dsw-alias-bg-layer-1);
+  --aion-bg-2: var(--dsw-alias-bg-layer-2);
+  --aion-bg-3: var(--dsw-alias-bg-layer-3);
+  --aion-bg-4: var(--dsw-alias-label-dimmed);
+  --aion-bg-hover: var(--dsw-alias-interactive-bg-hover);
+  --aion-bg-active: var(--dsw-alias-interactive-bg-active);
+  --aion-text-primary: var(--dsw-alias-label-primary);
+  --aion-text-secondary: var(--dsw-alias-label-secondary);
+  --aion-text-tertiary: var(--dsw-alias-label-tertiary);
+  --aion-text-disabled: var(--dsw-alias-label-dimmed);
+  --aion-primary: var(--dsw-alias-state-business-primary);
+  --aion-success: var(--dsw-alias-state-success-primary);
+  --aion-warning: var(--dsw-alias-state-warn-primary);
+  --aion-danger: var(--dsw-alias-state-error-primary);
+  --aion-brand: var(--dsw-alias-brand-primary);
+  --aion-aou-2: var(--dsw-alias-bg-layer-2);
+  --aion-aou-6: var(--dsw-alias-brand-primary);
+  --aion-fill-2: var(--dsw-alias-interactive-bg-hover);
+  --aion-fill-3: var(--dsw-alias-interactive-bg-hover-solid);
+  --aion-border-base: var(--dsw-alias-border-l2);
+  --aion-overlay-shadow: var(--dsw-shadow-lv2);
+  /* 官方字体 token；mono 用本地栈 —— 当前主题版本尚无 --dsw-alias-font-family-mono */
+  --aion-font-sans: var(--dsw-font-family);
+  --aion-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+}
+
+
+/* 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);
+}
+: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).
+     Use the semantic divider color (border-l2), NOT the bg-layer-3
+     background hint: bg-layer-3 is nearly indistinguishable from the
+     panel's own bg-layer-1 on both light and dark themes, so the
+     boundary vs. the shell was not visible. border-l2 is a real
+     stroke level with visible contrast in both themes. */
+  border-left: 1px solid var(--aion-border-base);
+}
+
+/* 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-border-base);
+}
+
+/* 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: invisible, col-resize cursor only (like DSH native sidebar). */
+:global(.filemgr-explorer-handle),
+:global(.filemgr-preview-handle) {
+  touch-action: none;
+  cursor: col-resize;
+}
+
+
+/* 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: var(--dsw-alias-bg-mask-1);
+}
+: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(--dsw-alias-button-primary-fill);
+  border-color: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+:global(.filemgr-btn-primary:hover) {
+  background: var(--dsw-alias-button-primary-hover);
+  border-color: var(--dsw-alias-button-primary-hover);
+}
+:global(.filemgr-btn-primary:active) {
+  background: var(--dsw-alias-button-primary-hover);
+  border-color: var(--dsw-alias-button-primary-hover);
+}
+:global(.filemgr-btn-danger) {
+  background: var(--aion-danger);
+  border-color: var(--aion-danger);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+:global(.filemgr-btn-danger:hover) {
+  background: color-mix(in srgb, var(--aion-danger) 88%, black);
+  border-color: color-mix(in srgb, var(--aion-danger) 88%, black);
+}
+:global(.filemgr-btn-danger:active) {
+  background: color-mix(in srgb, var(--aion-danger) 78%, black);
+  border-color: color-mix(in srgb, var(--aion-danger) 78%, black);
+}
+
+/* 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);
+  }
+}