@keith9681/dsh-sidebar 0.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (220) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +0 -0
  3. package/README_EN.md +0 -0
  4. package/cordis.patch.yml +49 -0
  5. package/lib/client-editor.js +34651 -0
  6. package/lib/client-mermaid.js +200629 -0
  7. package/lib/client-registry.js +13388 -0
  8. package/lib/client-terminal.js +8904 -0
  9. package/lib/client.js +13388 -0
  10. package/lib/index.js +3959 -0
  11. package/lib/invariant.js +22 -0
  12. package/lib/types/agent-pty.d.ts +226 -0
  13. package/lib/types/browser-probe.d.ts +15 -0
  14. package/lib/types/bundle-route.d.ts +12 -0
  15. package/lib/types/client/BrowserView.d.ts +22 -0
  16. package/lib/types/client/DiffTab.d.ts +6 -0
  17. package/lib/types/client/DiffView.d.ts +51 -0
  18. package/lib/types/client/EditorHost.d.ts +12 -0
  19. package/lib/types/client/FileTree.d.ts +36 -0
  20. package/lib/types/client/GitView.d.ts +8 -0
  21. package/lib/types/client/OrphanedTab.d.ts +11 -0
  22. package/lib/types/client/PdfView.d.ts +6 -0
  23. package/lib/types/client/RenderBoundary.d.ts +32 -0
  24. package/lib/types/client/SandboxStatusBar.d.ts +10 -0
  25. package/lib/types/client/SideCardSection.d.ts +74 -0
  26. package/lib/types/client/SideChatView.d.ts +16 -0
  27. package/lib/types/client/Sidebar.d.ts +6 -0
  28. package/lib/types/client/SubagentView.d.ts +16 -0
  29. package/lib/types/client/TabBar.d.ts +43 -0
  30. package/lib/types/client/TerminalView.d.ts +24 -0
  31. package/lib/types/client/TextEditor.d.ts +10 -0
  32. package/lib/types/client/TreePanel.d.ts +23 -0
  33. package/lib/types/client/UploadOverlay.d.ts +20 -0
  34. package/lib/types/client/add-plugin-modal.d.ts +15 -0
  35. package/lib/types/client/api.d.ts +268 -0
  36. package/lib/types/client/binary-download.d.ts +12 -0
  37. package/lib/types/client/breakpoints.d.ts +12 -0
  38. package/lib/types/client/browser.d.ts +50 -0
  39. package/lib/types/client/builtins/index.d.ts +18 -0
  40. package/lib/types/client/builtins/tabs.d.ts +11 -0
  41. package/lib/types/client/builtins/viewers.d.ts +3 -0
  42. package/lib/types/client/chunk-loader.d.ts +124 -0
  43. package/lib/types/client/chunks/editor.d.ts +9 -0
  44. package/lib/types/client/chunks/mermaid.d.ts +10 -0
  45. package/lib/types/client/chunks/terminal.d.ts +9 -0
  46. package/lib/types/client/cm-themes.d.ts +24 -0
  47. package/lib/types/client/conversation-draft.d.ts +14 -0
  48. package/lib/types/client/desktop-env.d.ts +35 -0
  49. package/lib/types/client/editable-state.d.ts +27 -0
  50. package/lib/types/client/editor-load.d.ts +66 -0
  51. package/lib/types/client/frame-batcher.d.ts +24 -0
  52. package/lib/types/client/icons.d.ts +57 -0
  53. package/lib/types/client/image-types.d.ts +3 -0
  54. package/lib/types/client/ime-guard.d.ts +36 -0
  55. package/lib/types/client/index.d.ts +19 -0
  56. package/lib/types/client/intercept.d.ts +33 -0
  57. package/lib/types/client/lang.d.ts +12 -0
  58. package/lib/types/client/lazy-chunk.d.ts +25 -0
  59. package/lib/types/client/link-intercept.d.ts +42 -0
  60. package/lib/types/client/locales.d.ts +366 -0
  61. package/lib/types/client/mermaid-blocks.d.ts +41 -0
  62. package/lib/types/client/mermaid-sanitize.d.ts +2 -0
  63. package/lib/types/client/mermaid.d.ts +12 -0
  64. package/lib/types/client/open-when-sized.d.ts +20 -0
  65. package/lib/types/client/open-with-settings.d.ts +4 -0
  66. package/lib/types/client/open-with.d.ts +87 -0
  67. package/lib/types/client/openpath-intercept.d.ts +41 -0
  68. package/lib/types/client/paths.d.ts +35 -0
  69. package/lib/types/client/pdf-types.d.ts +2 -0
  70. package/lib/types/client/plugin-settings.d.ts +8 -0
  71. package/lib/types/client/plugins-shared.d.ts +27 -0
  72. package/lib/types/client/plugins-tabs.d.ts +3 -0
  73. package/lib/types/client/plugins-viewers.d.ts +3 -0
  74. package/lib/types/client/prefs.d.ts +41 -0
  75. package/lib/types/client/produced-files.d.ts +23 -0
  76. package/lib/types/client/selection-payload.d.ts +27 -0
  77. package/lib/types/client/service.d.ts +440 -0
  78. package/lib/types/client/settings-nav-icon.d.ts +19 -0
  79. package/lib/types/client/shell-presets.d.ts +48 -0
  80. package/lib/types/client/sidechat-transcript.d.ts +103 -0
  81. package/lib/types/client/split-pane.d.ts +30 -0
  82. package/lib/types/client/state.d.ts +359 -0
  83. package/lib/types/client/subagent-detect.d.ts +54 -0
  84. package/lib/types/client/subagent-jobs.d.ts +63 -0
  85. package/lib/types/client/tab-content-memo.d.ts +33 -0
  86. package/lib/types/client/terminal-font.d.ts +20 -0
  87. package/lib/types/client/theme.d.ts +45 -0
  88. package/lib/types/client/titlebar-strip.d.ts +23 -0
  89. package/lib/types/client/upload.d.ts +69 -0
  90. package/lib/types/client/wco.d.ts +47 -0
  91. package/lib/types/config.d.ts +64 -0
  92. package/lib/types/context-types.d.ts +603 -0
  93. package/lib/types/fs-operations.d.ts +28 -0
  94. package/lib/types/fs-search.d.ts +24 -0
  95. package/lib/types/fs-tree.d.ts +51 -0
  96. package/lib/types/git.d.ts +82 -0
  97. package/lib/types/html-route.d.ts +59 -0
  98. package/lib/types/index.d.ts +47 -0
  99. package/lib/types/invariant.d.ts +15 -0
  100. package/lib/types/jobs-routes.d.ts +45 -0
  101. package/lib/types/open-external.d.ts +24 -0
  102. package/lib/types/prefs-shared.d.ts +225 -0
  103. package/lib/types/pty-deps.d.ts +78 -0
  104. package/lib/types/pty-manager.d.ts +168 -0
  105. package/lib/types/sidechat-core.d.ts +172 -0
  106. package/lib/types/sidechat-routes.d.ts +30 -0
  107. package/lib/types/subagent-activity.d.ts +44 -0
  108. package/lib/types/subagent-live-route.d.ts +44 -0
  109. package/lib/types/tools.d.ts +31 -0
  110. package/lib/types/trust-fence.d.ts +24 -0
  111. package/lib/types/wire.d.ts +38 -0
  112. package/package.json +173 -0
  113. package/scripts/install.ps1 +289 -0
  114. package/scripts/install.sh +287 -0
  115. package/src/agent-pty.ts +527 -0
  116. package/src/browser-probe.ts +26 -0
  117. package/src/bundle-route.ts +129 -0
  118. package/src/client/BrowserView.tsx +253 -0
  119. package/src/client/DiffTab.tsx +110 -0
  120. package/src/client/DiffView.tsx +305 -0
  121. package/src/client/EditorHost.tsx +525 -0
  122. package/src/client/FileTree.tsx +653 -0
  123. package/src/client/GitView.tsx +558 -0
  124. package/src/client/OrphanedTab.tsx +27 -0
  125. package/src/client/PdfView.tsx +110 -0
  126. package/src/client/RenderBoundary.tsx +49 -0
  127. package/src/client/SandboxStatusBar.tsx +60 -0
  128. package/src/client/SideCardSection.module.css +960 -0
  129. package/src/client/SideCardSection.tsx +1152 -0
  130. package/src/client/SideChatView.module.css +437 -0
  131. package/src/client/SideChatView.tsx +644 -0
  132. package/src/client/Sidebar.tsx +1148 -0
  133. package/src/client/SubagentView.module.css +547 -0
  134. package/src/client/SubagentView.tsx +883 -0
  135. package/src/client/TabBar.tsx +305 -0
  136. package/src/client/TerminalView.tsx +383 -0
  137. package/src/client/TextEditor.tsx +500 -0
  138. package/src/client/TreePanel.tsx +273 -0
  139. package/src/client/UploadOverlay.tsx +62 -0
  140. package/src/client/add-plugin-modal.tsx +199 -0
  141. package/src/client/api.ts +335 -0
  142. package/src/client/binary-download.tsx +23 -0
  143. package/src/client/breakpoints.ts +51 -0
  144. package/src/client/browser.ts +119 -0
  145. package/src/client/builtins/index.ts +37 -0
  146. package/src/client/builtins/tabs.tsx +331 -0
  147. package/src/client/builtins/viewers.tsx +125 -0
  148. package/src/client/chunk-loader.ts +351 -0
  149. package/src/client/chunks/editor.tsx +9 -0
  150. package/src/client/chunks/mermaid.tsx +10 -0
  151. package/src/client/chunks/terminal.tsx +9 -0
  152. package/src/client/cm-themes.ts +129 -0
  153. package/src/client/conversation-draft.ts +29 -0
  154. package/src/client/css-modules.d.ts +5 -0
  155. package/src/client/desktop-env.ts +72 -0
  156. package/src/client/editable-state.ts +70 -0
  157. package/src/client/editor-load.ts +92 -0
  158. package/src/client/frame-batcher.ts +56 -0
  159. package/src/client/icons.tsx +161 -0
  160. package/src/client/image-types.ts +8 -0
  161. package/src/client/ime-guard.ts +47 -0
  162. package/src/client/index.tsx +369 -0
  163. package/src/client/intercept.tsx +110 -0
  164. package/src/client/lang.ts +103 -0
  165. package/src/client/layout.css +94 -0
  166. package/src/client/lazy-chunk.tsx +89 -0
  167. package/src/client/link-intercept.ts +73 -0
  168. package/src/client/locales.ts +734 -0
  169. package/src/client/mermaid-blocks.ts +110 -0
  170. package/src/client/mermaid-sanitize.ts +93 -0
  171. package/src/client/mermaid.tsx +401 -0
  172. package/src/client/open-when-sized.ts +43 -0
  173. package/src/client/open-with-settings.tsx +135 -0
  174. package/src/client/open-with.ts +221 -0
  175. package/src/client/openpath-intercept.ts +62 -0
  176. package/src/client/paths.ts +47 -0
  177. package/src/client/pdf-types.ts +4 -0
  178. package/src/client/plugin-settings.ts +43 -0
  179. package/src/client/plugins-shared.ts +29 -0
  180. package/src/client/plugins-tabs.ts +87 -0
  181. package/src/client/plugins-viewers.ts +30 -0
  182. package/src/client/prefs.ts +207 -0
  183. package/src/client/produced-files.ts +91 -0
  184. package/src/client/selection-payload.ts +86 -0
  185. package/src/client/service.ts +838 -0
  186. package/src/client/settings-nav-icon.ts +45 -0
  187. package/src/client/shell-presets.ts +83 -0
  188. package/src/client/sidebar.module.css +2577 -0
  189. package/src/client/sidechat-transcript.ts +321 -0
  190. package/src/client/split-pane.tsx +322 -0
  191. package/src/client/state.ts +1175 -0
  192. package/src/client/subagent-detect.ts +137 -0
  193. package/src/client/subagent-jobs.ts +161 -0
  194. package/src/client/tab-content-memo.ts +46 -0
  195. package/src/client/terminal-font.ts +28 -0
  196. package/src/client/theme.ts +110 -0
  197. package/src/client/titlebar-strip.ts +37 -0
  198. package/src/client/upload.ts +187 -0
  199. package/src/client/wco.ts +120 -0
  200. package/src/config.ts +155 -0
  201. package/src/context-types.ts +610 -0
  202. package/src/fs-operations.ts +99 -0
  203. package/src/fs-search.ts +86 -0
  204. package/src/fs-tree.ts +158 -0
  205. package/src/git.ts +244 -0
  206. package/src/html-route.ts +106 -0
  207. package/src/index.ts +1132 -0
  208. package/src/invariant.ts +32 -0
  209. package/src/jobs-routes.ts +257 -0
  210. package/src/open-external.ts +90 -0
  211. package/src/prefs-shared.ts +268 -0
  212. package/src/pty-deps.ts +240 -0
  213. package/src/pty-manager.ts +376 -0
  214. package/src/sidechat-core.ts +468 -0
  215. package/src/sidechat-routes.ts +344 -0
  216. package/src/subagent-activity.ts +91 -0
  217. package/src/subagent-live-route.ts +93 -0
  218. package/src/tools.ts +479 -0
  219. package/src/trust-fence.ts +77 -0
  220. package/src/wire.ts +100 -0
package/src/client/sidebar.module.css ADDED
@@ -0,0 +1,2577 @@
1
+ /**
2
+ * Sidebar styles. Per the DSH web-styling rules every visual value rides the
3
+ * theme: --dsw-alias-* semantic tokens for colors, --dsw-font-* typography
4
+ * roles (size paired with line-height), and --ds-* for motion. The chrome
5
+ * mirrors the native DSH sidebar: flat (NO box-shadows anywhere), the
6
+ * sidebar fill surface, hairline borders, and the 28/36px circular icon
7
+ * controls with hover fills. No static palette values, no color literals, no
8
+ * theme selectors — light/dark adaptation is the theme package's job.
9
+ */
10
+
11
+ /* ── Shell ─────────────────────────────────────────────────────────────── */
12
+
13
+ /* Skinning contract (token-driven): every surface here consumes DSH's
14
+ generic tokens (`--dsw-alias-*`), NEVER `--dsw-specific-sidebar-fill` —
15
+ skin systems override that token to restyle the APP's own left-nav column
16
+ (dsh-web-ui skins make it translucent glass or theme colors, Aqua makes it
17
+ transparent), and a panel consuming it would lose its fill or clash with
18
+ the label tokens. The panels use the generic card surface
19
+ `--dsw-alias-bg-layer-1`, which every dsh-web-ui skin overrides — so
20
+ switching skins in the dsh-web-ui skin center re-skins the sidebar panels
21
+ automatically (see AGENTS.md §8). */
22
+
23
+ /* The unified panel host: a fixed, viewport-sized, click-transparent
24
+ containing block for every panel element. Panels are ABSOLUTE within it
25
+ (not fixed), so a desktop shell's intermediate wrapper transform can
26
+ never hijack their containing block — the host itself is the only fixed
27
+ element, appended directly to document.body. The layer sits at z-index 40
28
+ (below the app's overlay stack at 100+); each panel re-enables pointer
29
+ events on itself. Degraded mode ([data-dsh-panel-host-degraded]) covers
30
+ the rare shell that transforms <html>/<body> itself: the host becomes
31
+ absolute and the mount self-check pins it to the viewport every frame. */
32
+ :global([data-dsh-panel-host]) {
33
+ position: fixed;
34
+ inset: 0;
35
+ z-index: 40;
36
+ pointer-events: none;
37
+ }
38
+
39
+ :global([data-dsh-panel-host][data-dsh-panel-host-degraded]) {
40
+ position: absolute;
41
+ top: 0;
42
+ left: 0;
43
+ }
44
+
45
+ /* The persistent expand/collapse cluster at the top-right corner: two rail
46
+ controls side by side (bottom panel's glyph LEFT of the right panel's).
47
+ Always pinned to the viewport corner — inside the right panel's top-right
48
+ while it is open, sitting flush in the 34px tab strip (28px buttons at
49
+ top: 3) whose right end it really squeezes. z-index 45: above the panels
50
+ (40) but below the app's overlay stack (menus/tooltips/modals sit at
51
+ 100+), so a cordis approval popup is never hidden behind the workbench
52
+ (issue #52). Absolute within the panel host (the host's inset: 0 makes
53
+ viewport coordinates identical). */
54
+ .toggleCluster {
55
+ position: absolute;
56
+ /* env() resolves to 0 on devices without a top inset (desktops). */
57
+ top: calc(3px + env(safe-area-inset-top));
58
+ right: 10px;
59
+ z-index: 45;
60
+ display: flex;
61
+ flex-direction: row;
62
+ gap: 4px;
63
+ pointer-events: auto;
64
+ }
65
+
66
+ /* The tab strip of the OPEN right panel reserves the cluster's width at its
67
+ right end, so the tabs and the + menu genuinely yield space to the cluster
68
+ (never hiding under it). */
69
+ .panel:not(.panelHidden) .tabBar {
70
+ padding-right: 72px;
71
+ }
72
+
73
+ /* The closed-state affordance is the native rail icon control: a plain
74
+ 28px circle (the app's icon-button size — the cluster must stay inside
75
+ the 34px tab-strip band so it never covers the pane headers below),
76
+ transparent fill, secondary ink; hover raises the fill. No border, no
77
+ shadow — the icon alone is the affordance. */
78
+ .toggleButton {
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ width: 28px;
83
+ height: 28px;
84
+ border: none;
85
+ border-radius: 50%;
86
+ background: transparent;
87
+ color: var(--dsw-alias-label-secondary);
88
+ cursor: pointer;
89
+ transition:
90
+ background var(--ds-transition-duration-slow) var(--ds-ease-in-out),
91
+ color var(--ds-transition-duration-slow) var(--ds-ease-in-out);
92
+ }
93
+
94
+ .toggleButton:hover:not(:disabled) {
95
+ background: var(--dsw-alias-interactive-bg-hover);
96
+ color: var(--dsw-alias-label-primary);
97
+ }
98
+
99
+ .toggleButton:disabled {
100
+ opacity: 0.4;
101
+ cursor: default;
102
+ }
103
+
104
+ .panel {
105
+ position: absolute;
106
+ top: 0;
107
+ right: 0;
108
+ /* Full height: the bottom panel squeezes only the center column, so the
109
+ right panel never gives up any vertical position. */
110
+ bottom: 0;
111
+ /* z-index 40: above the app's in-flow content, below the app's overlay
112
+ stack (100+), so menus/tooltips/modals always win over the panels
113
+ (issue #52). The toggle cluster (45) sits above it; the corner handle
114
+ is a child and stacks within the panel. */
115
+ z-index: 40;
116
+ display: flex;
117
+ flex-direction: column;
118
+ /* Re-enable interaction inside the click-transparent panel host. */
119
+ pointer-events: auto;
120
+ /* The generic card surface (see the root contract above). Never
121
+ `--dsw-specific-sidebar-fill` — skin plugins restyle that token for the
122
+ app's own left nav and a panel consuming it loses its fill or clashes
123
+ with labels (#60/#105/#106). */
124
+ background: var(--dsw-alias-bg-layer-1);
125
+ border-left: 1px solid var(--dsw-alias-border-l2);
126
+ /* Bottom safe-area (notched phones): the drawer's bottom content clears
127
+ the home indicator; 0 on desktops. */
128
+ padding-bottom: env(safe-area-inset-bottom);
129
+ /* Expand/collapse slides the panel; fullscreen animates the width. */
130
+ transition:
131
+ transform var(--ds-transition-duration-slow) var(--ds-ease-in-out),
132
+ width var(--ds-transition-duration-slow) var(--ds-ease-in-out);
133
+ }
134
+
135
+ /* Collapsed: slid off-screen, interactive nothing, hidden after the slide. */
136
+ .panelHidden {
137
+ transform: translateX(102%);
138
+ pointer-events: none;
139
+ visibility: hidden;
140
+ transition:
141
+ transform var(--ds-transition-duration-slow) var(--ds-ease-in-out),
142
+ width var(--ds-transition-duration-slow) var(--ds-ease-in-out),
143
+ visibility 0s linear var(--ds-transition-duration-slow);
144
+ }
145
+
146
+ /* Width drags write at pointer cadence; easing would detach the edge. */
147
+ .panel[data-dragging] {
148
+ transition: none;
149
+ }
150
+
151
+ .panelResize {
152
+ position: absolute;
153
+ /* Centered on the panel edge (an 8px hit strip straddling the border, the
154
+ same pattern as the host's own frame handles). */
155
+ left: -4px;
156
+ top: 0;
157
+ bottom: 0;
158
+ width: 8px;
159
+ cursor: col-resize;
160
+ z-index: 2;
161
+ touch-action: none;
162
+ }
163
+
164
+ .panelResizeActive {
165
+ background: var(--dsw-alias-interactive-bg-hover-accent);
166
+ }
167
+
168
+ .panelBody {
169
+ flex: 1;
170
+ min-height: 0;
171
+ min-width: 0;
172
+ display: flex;
173
+ }
174
+
175
+ /* ── Bottom panel ──────────────────────────────────────────────────────── */
176
+
177
+ /* The bottom panel: an independent workbench at the bottom of the CENTER
178
+ column only (the Sidebar shell writes left/right inline: from the app's
179
+ own left sidebar to the right panel's left edge) — the sidebars never
180
+ give up any position. Same surface as the right panel, with a top
181
+ hairline instead of the left one. z-index 40 mirrors the right panel
182
+ (issue #52: below the app's overlay stack so popups win over the
183
+ workbench). */
184
+ .bottomPanel {
185
+ position: absolute;
186
+ bottom: 0;
187
+ z-index: 40;
188
+ display: flex;
189
+ flex-direction: column;
190
+ background: var(--dsw-alias-bg-layer-1);
191
+ border-top: 1px solid var(--dsw-alias-border-l2);
192
+ /* Re-enable interaction inside the click-transparent panel host. */
193
+ pointer-events: auto;
194
+ /* Bottom safe-area (notched phones); 0 on desktops. */
195
+ padding-bottom: env(safe-area-inset-bottom);
196
+ /* Expand/collapse slides the panel; height drags animate the height. */
197
+ transition:
198
+ transform var(--ds-transition-duration-slow) var(--ds-ease-in-out),
199
+ height var(--ds-transition-duration-slow) var(--ds-ease-in-out);
200
+ }
201
+
202
+ /* Collapsed: slid off-screen, interactive nothing, hidden after the slide. */
203
+ .bottomPanelHidden {
204
+ transform: translateY(102%);
205
+ pointer-events: none;
206
+ visibility: hidden;
207
+ transition:
208
+ transform var(--ds-transition-duration-slow) var(--ds-ease-in-out),
209
+ height var(--ds-transition-duration-slow) var(--ds-ease-in-out),
210
+ visibility 0s linear var(--ds-transition-duration-slow);
211
+ }
212
+
213
+ /* Height drags write at pointer cadence; easing would detach the edge. */
214
+ .bottomPanel[data-dragging] {
215
+ transition: none;
216
+ }
217
+
218
+ /* Layout isolation: panel-internal reflows (tabs, editors, terminals) never
219
+ leak into the app shell's layout, and the app shell's layout changes
220
+ never cascade through the panel subtree — the drag stays confined.
221
+ will-change: transform is only live while a drag is (the body attribute
222
+ toggles with the drag state), promoting the panels to their own layer
223
+ without paying the compositing cost at rest. */
224
+ .panel,
225
+ .bottomPanel {
226
+ contain: layout style;
227
+ }
228
+
229
+ body[data-dsh-sidebar-dragging] .panel,
230
+ body[data-dsh-sidebar-dragging] .bottomPanel {
231
+ will-change: transform;
232
+ }
233
+
234
+ /* The bottom panel's height drag: the top edge strip (mirror of the right
235
+ panel's width strip), centered on the border like the width strip. */
236
+ .bottomResize {
237
+ position: absolute;
238
+ left: 0;
239
+ right: 0;
240
+ top: -4px;
241
+ height: 8px;
242
+ cursor: row-resize;
243
+ z-index: 2;
244
+ touch-action: none;
245
+ }
246
+
247
+ .bottomResizeActive {
248
+ background: var(--dsw-alias-interactive-bg-hover-accent);
249
+ }
250
+
251
+ /* The bottom panel's close control: the app's icon-button pattern (28px
252
+ circle), pinned to the tab strip's right end — one tap collapses the
253
+ panel. The tab strips below reserve its width so the + menu never hides
254
+ under it. */
255
+ .bottomClose {
256
+ position: absolute;
257
+ top: 3px;
258
+ right: 6px;
259
+ z-index: 4;
260
+ display: inline-flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+ width: 28px;
264
+ height: 28px;
265
+ padding: 0;
266
+ border: none;
267
+ border-radius: 50%;
268
+ background: transparent;
269
+ color: var(--dsw-alias-label-secondary);
270
+ cursor: pointer;
271
+ flex: none;
272
+ }
273
+
274
+ .bottomClose:hover:not(:disabled) {
275
+ background: var(--dsw-alias-interactive-bg-hover);
276
+ color: var(--dsw-alias-label-primary);
277
+ }
278
+
279
+ /* The bottom panel's tab strips reserve the close control's width at their
280
+ right end, so the + menu never hides under it. */
281
+ .bottomPanel .tabBar {
282
+ padding-right: 40px;
283
+ }
284
+
285
+ /* ── Desktop drag-region opt-out ──────────────────────────────────────── */
286
+
287
+ /* Frameless desktop shells make the top strip of the web content draggable
288
+ (Electron `-webkit-app-region: drag`); pointer events over that strip are
289
+ swallowed as window drags unless the interactive element opts out
290
+ (issues #103/#111). The plugin's viewport-corner chrome must declare
291
+ `no-drag` itself — some shells (Tauri, older desktop builds, third-party
292
+ wrappers) have no blanket button rule. The property is a no-op in plain
293
+ browsers and in shells without drag regions — safe everywhere. */
294
+ .toggleCluster,
295
+ .toggleButton,
296
+ .tabBar {
297
+ -webkit-app-region: no-drag;
298
+ }
299
+
300
+ /* ── Position compatibility mode (Windows native title bar) ────────────── */
301
+
302
+ /* Windows frameless / hidden-title-bar windows draw the native caption
303
+ strip (minimize / maximize / close) at the window's top-right corner,
304
+ OVER the web content. When the user enables the "position compatibility"
305
+ pref, the sidebar yields the strip: the toggle cluster drops below it and
306
+ the right panel's content starts below it — the panel's surface still
307
+ spans the full height, so the caption buttons float over empty sidebar
308
+ fill (the VSCode hidden-title-bar look). The strip height is user-tunable
309
+ (`--dsh-title-bar-strip`, written by the Sidebar shell from
310
+ `titleBarStripPx`; 40px fallback). The bottom panel is unaffected: it
311
+ sits at the window's bottom, never under the top strip. */
312
+ :global(body[data-dsh-title-bar-compat]) .toggleCluster {
313
+ top: calc(var(--dsh-title-bar-strip, 40px) + 3px);
314
+ }
315
+
316
+ :global(body[data-dsh-title-bar-compat]) .panel {
317
+ /* The caption strip is drawn over the panel's own top edge: keep the
318
+ surface full-height and push the content (the tab strip) below the
319
+ strip instead. .panelResize is absolutely positioned and unaffected. */
320
+ padding-top: var(--dsh-title-bar-strip, 40px);
321
+ }
322
+
323
+ /* The shared corner (both panels open): the intersection of the right
324
+ panel's left edge and the bottom panel's top edge. Horizontal drags
325
+ resize the width, vertical drags the height — the two panels drag
326
+ against each other. Rendered INSIDE the right panel and positioned
327
+ relative to it (left edge + the bottom panel's height from the layout
328
+ variable), so no JS-written viewport coordinates are involved. The
329
+ z-index is panel-local (above the panel's content; the panel itself sits
330
+ at 40, below the app's overlay stack). */
331
+ .cornerHandle {
332
+ position: absolute;
333
+ left: -6px;
334
+ bottom: calc(var(--dsh-sidebar-height, 0px) + 6px);
335
+ width: 12px;
336
+ height: 12px;
337
+ z-index: 2;
338
+ cursor: nwse-resize;
339
+ touch-action: none;
340
+ }
341
+
342
+ .cornerHandle:hover,
343
+ .cornerHandle[data-dragging] {
344
+ background: var(--dsw-alias-interactive-bg-hover-accent);
345
+ }
346
+
347
+ /* Icon button: the app's own icon-button pattern (ui-workspace) — a 28px
348
+ circle, secondary label, hover fill; no border so the icon alone is the
349
+ affordance. */
350
+ .iconButton {
351
+ display: inline-flex;
352
+ align-items: center;
353
+ justify-content: center;
354
+ width: 28px;
355
+ height: 28px;
356
+ padding: 0;
357
+ border: none;
358
+ border-radius: 50%;
359
+ background: transparent;
360
+ color: var(--dsw-alias-label-secondary);
361
+ cursor: pointer;
362
+ flex: none;
363
+ }
364
+
365
+ .iconButton:hover:not(:disabled) {
366
+ background: var(--dsw-alias-interactive-bg-hover);
367
+ color: var(--dsw-alias-label-primary);
368
+ }
369
+
370
+ .iconButton:disabled {
371
+ opacity: 0.4;
372
+ cursor: default;
373
+ }
374
+
375
+ /* ── Workbench / split panes ───────────────────────────────────────────── */
376
+
377
+ .workbench {
378
+ flex: 1;
379
+ min-width: 0;
380
+ min-height: 0;
381
+ display: flex;
382
+ }
383
+
384
+ .split {
385
+ flex: 1;
386
+ min-width: 0;
387
+ min-height: 0;
388
+ display: flex;
389
+ }
390
+
391
+ .splitRow {
392
+ flex-direction: row;
393
+ }
394
+
395
+ .splitCol {
396
+ flex-direction: column;
397
+ }
398
+
399
+ .splitChild {
400
+ position: relative;
401
+ display: flex;
402
+ overflow: hidden;
403
+ }
404
+
405
+ .divider {
406
+ position: relative;
407
+ flex: none;
408
+ z-index: 3;
409
+ touch-action: none;
410
+ }
411
+
412
+ /* The hit area stays 7px wide enough to grab, but the visual is a 1px
413
+ hairline centered in it — a divider line, not a thick band. */
414
+ .dividerRow::after,
415
+ .dividerCol::after {
416
+ content: '';
417
+ position: absolute;
418
+ background: var(--dsw-alias-border-l2);
419
+ transition: background var(--ds-transition-duration-slow) var(--ds-ease-in-out);
420
+ }
421
+
422
+ .dividerRow {
423
+ width: 7px;
424
+ margin: 0 -2px;
425
+ cursor: col-resize;
426
+ }
427
+
428
+ .dividerRow::after {
429
+ top: 0;
430
+ bottom: 0;
431
+ left: 50%;
432
+ width: 1px;
433
+ transform: translateX(-50%);
434
+ }
435
+
436
+ .dividerCol {
437
+ height: 7px;
438
+ margin: -2px 0;
439
+ cursor: row-resize;
440
+ }
441
+
442
+ .dividerCol::after {
443
+ left: 0;
444
+ right: 0;
445
+ top: 50%;
446
+ height: 1px;
447
+ transform: translateY(-50%);
448
+ }
449
+
450
+ .divider:hover::after,
451
+ .dividerActive::after {
452
+ background: var(--dsw-alias-interactive-bg-hover-accent);
453
+ }
454
+
455
+ .pane {
456
+ position: relative;
457
+ flex: 1;
458
+ min-width: 0;
459
+ min-height: 0;
460
+ display: flex;
461
+ flex-direction: column;
462
+ background: var(--dsw-alias-bg-base);
463
+ }
464
+
465
+ .paneDrop {
466
+ outline: 1px solid var(--dsw-alias-interactive-bg-hover-accent);
467
+ outline-offset: -1px;
468
+ }
469
+
470
+ /* VSCode-style drag-to-edge drop zones (25% edges, 50% center). */
471
+ .dropOverlay {
472
+ position: absolute;
473
+ z-index: 6;
474
+ pointer-events: none;
475
+ background: var(--dsw-alias-interactive-bg-hover-accent);
476
+ opacity: 0.5;
477
+ }
478
+
479
+ .dropLeft {
480
+ left: 0;
481
+ top: 0;
482
+ bottom: 0;
483
+ width: 25%;
484
+ }
485
+
486
+ .dropRight {
487
+ right: 0;
488
+ top: 0;
489
+ bottom: 0;
490
+ width: 25%;
491
+ }
492
+
493
+ .dropUp {
494
+ top: 0;
495
+ left: 0;
496
+ right: 0;
497
+ height: 25%;
498
+ }
499
+
500
+ .dropDown {
501
+ bottom: 0;
502
+ left: 0;
503
+ right: 0;
504
+ height: 25%;
505
+ }
506
+
507
+ .dropCenter {
508
+ left: 25%;
509
+ right: 25%;
510
+ top: 25%;
511
+ bottom: 25%;
512
+ background: transparent;
513
+ outline: 2px dashed var(--dsw-alias-interactive-bg-hover-accent);
514
+ outline-offset: -2px;
515
+ }
516
+
517
+ .paneContent {
518
+ flex: 1;
519
+ min-height: 0;
520
+ display: flex;
521
+ flex-direction: column;
522
+ overflow: hidden;
523
+ }
524
+
525
+ /* One tab's mounted content; inactive tabs stay mounted but hidden so
526
+ switching never tears down terminals/editors (state survives). */
527
+ .paneTab {
528
+ flex: 1;
529
+ min-height: 0;
530
+ display: flex;
531
+ flex-direction: column;
532
+ }
533
+
534
+ .paneTabHidden {
535
+ display: none;
536
+ }
537
+
538
+ /* An empty pane's welcome cards: a responsive grid of compact cards,
539
+ centered in the pane (VS Code welcome-page style) — the cluster is
540
+ horizontally AND vertically centered when it fits, and `safe center`
541
+ falls back to top alignment if the pane is too short for it (nothing
542
+ becomes unreachable). */
543
+ .paneEmptyCards {
544
+ flex: 1;
545
+ min-height: 0;
546
+ display: grid;
547
+ grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
548
+ place-content: center;
549
+ place-content: safe center;
550
+ gap: 8px;
551
+ padding: 12px;
552
+ overflow: hidden;
553
+ }
554
+
555
+ .paneCard {
556
+ display: flex;
557
+ flex-direction: column;
558
+ align-items: center;
559
+ justify-content: center;
560
+ gap: 6px;
561
+ min-width: 0;
562
+ padding: 12px 8px;
563
+ border: 1px solid var(--dsw-alias-border-l1);
564
+ border-radius: 8px;
565
+ background: var(--dsw-alias-bg-layer-1);
566
+ color: var(--dsw-alias-label-secondary);
567
+ font: var(--dsw-font-xxs-strong-12);
568
+ cursor: pointer;
569
+ text-align: center;
570
+ }
571
+
572
+ .paneCard:hover:not(:disabled) {
573
+ background: var(--dsw-alias-interactive-bg-hover);
574
+ color: var(--dsw-alias-label-primary);
575
+ border-color: var(--dsw-alias-border-l2);
576
+ }
577
+
578
+ .paneCard:disabled {
579
+ opacity: 0.45;
580
+ cursor: default;
581
+ }
582
+
583
+ /* ── Tab strip ─────────────────────────────────────────────────────────── */
584
+
585
+ .tabBar {
586
+ flex: none;
587
+ display: flex;
588
+ align-items: stretch;
589
+ height: 34px;
590
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
591
+ background: var(--dsw-alias-bg-layer-1);
592
+ }
593
+
594
+ .tabBarDrop {
595
+ outline: 1px dashed var(--dsw-alias-interactive-bg-hover-accent);
596
+ outline-offset: -1px;
597
+ }
598
+
599
+ .tabList {
600
+ flex: 1;
601
+ min-width: 0;
602
+ display: flex;
603
+ overflow-x: auto;
604
+ scrollbar-width: none;
605
+ }
606
+
607
+ .tabList::-webkit-scrollbar {
608
+ display: none;
609
+ }
610
+
611
+ .tab {
612
+ flex: none;
613
+ max-width: 160px;
614
+ min-width: 64px;
615
+ display: flex;
616
+ align-items: center;
617
+ gap: 4px;
618
+ padding: 0 4px 0 10px;
619
+ font: var(--dsw-font-xxs-12);
620
+ color: var(--dsw-alias-label-secondary);
621
+ border-right: 1px solid var(--dsw-alias-border-l1);
622
+ background: transparent;
623
+ cursor: pointer;
624
+ user-select: none;
625
+ }
626
+
627
+ .tab:hover {
628
+ background: var(--dsw-alias-interactive-bg-hover);
629
+ }
630
+
631
+ .tabActive {
632
+ color: var(--dsw-alias-label-primary);
633
+ /* Native selected fill (Rows .sessionRow.selected) — no underline, no shadow. */
634
+ background: var(--dsw-alias-interactive-bg-active);
635
+ }
636
+
637
+ .tabTitle {
638
+ flex: 1;
639
+ min-width: 0;
640
+ overflow: hidden;
641
+ text-overflow: ellipsis;
642
+ white-space: nowrap;
643
+ }
644
+
645
+ /* One tab's descriptor badge (a count capped at 99+, or a short text). */
646
+ .tabBadge {
647
+ flex: none;
648
+ min-width: 16px;
649
+ height: 15px;
650
+ padding: 0 4px;
651
+ display: inline-flex;
652
+ align-items: center;
653
+ justify-content: center;
654
+ border-radius: 8px;
655
+ font: var(--dsw-font-xxxs-strong-11);
656
+ background: var(--dsw-alias-interactive-bg-hover);
657
+ color: var(--dsw-alias-brand-primary);
658
+ }
659
+
660
+ .tabClose {
661
+ display: inline-flex;
662
+ align-items: center;
663
+ justify-content: center;
664
+ width: 18px;
665
+ height: 18px;
666
+ padding: 0;
667
+ border: none;
668
+ border-radius: 4px;
669
+ background: transparent;
670
+ color: var(--dsw-alias-label-tertiary);
671
+ cursor: pointer;
672
+ flex: none;
673
+ }
674
+
675
+ .tabClose:hover {
676
+ background: var(--dsw-alias-interactive-bg-hover);
677
+ color: var(--dsw-alias-label-primary);
678
+ }
679
+
680
+ .tabBarPlus {
681
+ flex: none;
682
+ align-self: center;
683
+ /* Adjacent to the rightmost tab; sticky so overflowing tab rows keep it
684
+ visible at the right edge of the scrollport. */
685
+ position: sticky;
686
+ right: 0;
687
+ display: inline-flex;
688
+ align-items: center;
689
+ justify-content: center;
690
+ width: 22px;
691
+ height: 22px;
692
+ margin: 0 6px;
693
+ padding: 0;
694
+ border: none;
695
+ border-radius: 5px;
696
+ background: var(--dsw-alias-bg-layer-1);
697
+ color: var(--dsw-alias-label-tertiary);
698
+ cursor: pointer;
699
+ }
700
+
701
+ .tabBarPlus:hover {
702
+ background: var(--dsw-alias-interactive-bg-hover);
703
+ color: var(--dsw-alias-label-primary);
704
+ }
705
+
706
+ /* ── Explorer ──────────────────────────────────────────────────────────── */
707
+
708
+ .explorer {
709
+ flex: 1;
710
+ min-height: 0;
711
+ display: flex;
712
+ flex-direction: column;
713
+ }
714
+
715
+ .explorerHeader {
716
+ flex: none;
717
+ display: flex;
718
+ align-items: center;
719
+ justify-content: space-between;
720
+ gap: 8px;
721
+ height: 36px;
722
+ padding: 0 8px 0 12px;
723
+ }
724
+
725
+ .explorerRoot {
726
+ font: var(--dsw-font-s-14);
727
+ color: var(--dsw-alias-label-secondary);
728
+ overflow: hidden;
729
+ text-overflow: ellipsis;
730
+ white-space: nowrap;
731
+ }
732
+
733
+ .explorerBody {
734
+ flex: 1;
735
+ min-height: 0;
736
+ overflow-y: auto;
737
+ /* Deep trees truncate their labels instead of scrolling horizontally. */
738
+ overflow-x: hidden;
739
+ padding: 2px 6px 8px;
740
+ }
741
+
742
+ /* One tree row: the app's session-row cell (34px, radius 8, inset, hover
743
+ fill, 22px indent step, 14px ink) with a mount fade so expanding a
744
+ directory reveals its children gently (stable keys keep existing rows from
745
+ replaying it). */
746
+ .explorerRow {
747
+ display: flex;
748
+ align-items: center;
749
+ gap: 6px;
750
+ /* border-box keeps the inline indent padding (depth * 22 + 6) INSIDE the
751
+ row's 100% width — without it deep rows overflow and force a horizontal
752
+ scrollbar on the tree body. */
753
+ box-sizing: border-box;
754
+ width: 100%;
755
+ max-width: 100%;
756
+ height: 34px;
757
+ padding: 0 8px;
758
+ border: none;
759
+ background: transparent;
760
+ font: var(--dsw-font-s-14);
761
+ color: var(--dsw-alias-label-primary);
762
+ text-align: left;
763
+ cursor: pointer;
764
+ white-space: nowrap;
765
+ border-radius: 8px;
766
+ animation: dsh-row-in 150ms var(--ds-ease-in-out);
767
+ }
768
+
769
+ .explorerRow:hover {
770
+ background: var(--dsw-alias-interactive-bg-hover);
771
+ }
772
+
773
+ .explorerDir {
774
+ font: var(--dsw-font-s-strong-14);
775
+ }
776
+
777
+ .explorerHidden {
778
+ opacity: 0.45;
779
+ }
780
+
781
+ /* The link badge on symlink rows (folder and file rows alike). */
782
+ .explorerSymlink {
783
+ flex: none;
784
+ color: var(--dsw-alias-label-tertiary);
785
+ }
786
+
787
+ /* A symlink whose target is missing: error ink on the name (the row stays
788
+ clickable — the editor surfaces the read failure). */
789
+ .explorerBroken .explorerName {
790
+ color: var(--dsw-alias-state-error-primary);
791
+ }
792
+
793
+ .explorerName {
794
+ /* min-width: 0 lets the flex item shrink below its content so the label
795
+ truncates with an ellipsis instead of widening the row. */
796
+ min-width: 0;
797
+ overflow: hidden;
798
+ text-overflow: ellipsis;
799
+ white-space: nowrap;
800
+ }
801
+
802
+ /* The hover-revealed @-reference button at the row's far right (and the
803
+ transient "copied" label that replaces it after a copy). Hidden rows
804
+ keep the name at full width; hovering or focusing the row reveals it. */
805
+ .explorerRef {
806
+ flex: none;
807
+ display: none;
808
+ align-items: center;
809
+ height: 20px;
810
+ padding: 0 8px;
811
+ border: 1px solid var(--dsw-alias-border-l1);
812
+ border-radius: 999px;
813
+ background: var(--dsw-alias-bg-layer-2);
814
+ color: var(--dsw-alias-label-tertiary);
815
+ font: var(--dsw-font-xxxs-strong-11);
816
+ cursor: pointer;
817
+ }
818
+
819
+ .explorerRef:hover {
820
+ background: var(--dsw-alias-interactive-bg-hover);
821
+ color: var(--dsw-alias-label-primary);
822
+ }
823
+
824
+ .explorerRow:hover .explorerRef,
825
+ .explorerRow:focus-within .explorerRef {
826
+ display: inline-flex;
827
+ }
828
+
829
+ .explorerCopied {
830
+ flex: none;
831
+ font: var(--dsw-font-xxxs-11);
832
+ color: var(--dsw-alias-label-tertiary);
833
+ }
834
+
835
+ .explorerError {
836
+ font: var(--dsw-font-xxs-12);
837
+ color: var(--dsw-alias-state-error-primary);
838
+ cursor: default;
839
+ }
840
+
841
+ /* Mount fade for tree rows (the app's session-row reveal). */
842
+ @keyframes dsh-row-in {
843
+ from { opacity: 0; }
844
+ }
845
+
846
+ .explorerEmpty {
847
+ padding: 16px;
848
+ font: var(--dsw-font-xxs-12);
849
+ color: var(--dsw-alias-label-tertiary);
850
+ text-align: center;
851
+ }
852
+
853
+ /* Drag a file/folder over a tree row: the target directory row gets a filled
854
+ highlight (drops land inside it; file rows target their parent directory).
855
+ The zone frame around the whole tree is the portaled .uploadDropZone. */
856
+ .explorerRowDropTarget {
857
+ background: var(--dsw-alias-interactive-bg-hover);
858
+ outline: 1px dashed var(--dsw-alias-interactive-bg-hover-accent);
859
+ outline-offset: -1px;
860
+ }
861
+
862
+ /* The sidebar's drop surface: a pointer-inert frame portaled to
863
+ document.body, fixed over the explorer body's viewport rect at z-1001 —
864
+ above DSH's own whole-page drop mask (z-1000, see InputBar's
865
+ document-level intake). The giant box-shadow spread IS the full-viewport
866
+ mask (same token DSH uses for its drop mask): everything dims except the
867
+ zone rect, teaching the zone split — the dimmed conversation column still
868
+ takes drops into the chat natively, the clear frame marks the tree as the
869
+ workspace-upload zone. Deliberate exception to the "panel stays below the
870
+ DSH float stack" rule: transient and pointer-events none, so the drop
871
+ always lands on the row beneath. The hint pill docks at the TOP edge of
872
+ the zone (right under the search row, the first thing the eye meets),
873
+ leaving the rows — the actual drop targets — aimable. */
874
+ .uploadDropZone {
875
+ position: fixed;
876
+ z-index: 1001;
877
+ pointer-events: none;
878
+ display: flex;
879
+ align-items: flex-start;
880
+ justify-content: center;
881
+ padding: 12px;
882
+ border: 2px dashed var(--dsw-alias-interactive-bg-hover-accent);
883
+ border-radius: 10px;
884
+ box-shadow: 0 0 0 200vmax var(--dsw-alias-bg-mask-drop);
885
+ animation: dsh-row-in 150ms var(--ds-ease-in-out);
886
+ }
887
+
888
+ /* The zone's drop hero, docked at the TOP edge (right under the search
889
+ row, the first thing the eye meets): the colorful tray illustration over
890
+ the hint pill — stacked so the rows below stay aimable. */
891
+ .uploadDropHero {
892
+ display: flex;
893
+ flex-direction: column;
894
+ align-items: center;
895
+ gap: 10px;
896
+ max-width: 100%;
897
+ padding-top: 8px;
898
+ }
899
+
900
+ .uploadDropZonePill {
901
+ display: flex;
902
+ align-items: center;
903
+ gap: 6px;
904
+ max-width: 100%;
905
+ padding: 6px 12px;
906
+ border: 1px solid var(--dsw-alias-border-l2);
907
+ border-radius: 999px;
908
+ background: var(--dsw-alias-bg-layer-2);
909
+ box-shadow: var(--dsw-shadow-lv2);
910
+ color: var(--dsw-alias-label-primary);
911
+ font: var(--dsw-font-xxs-strong-12);
912
+ }
913
+
914
+ .uploadDropZoneText {
915
+ white-space: nowrap;
916
+ overflow: hidden;
917
+ text-overflow: ellipsis;
918
+ }
919
+
920
+ /* The left zone's invitation: centered in the viewport space beside the
921
+ tree (inline width = the zone's left edge), telling the user the dimmed
922
+ conversation column still accepts drops — into the chat, natively. */
923
+ .uploadDropChatHint {
924
+ position: fixed;
925
+ top: 0;
926
+ left: 0;
927
+ bottom: 0;
928
+ z-index: 1002;
929
+ pointer-events: none;
930
+ display: flex;
931
+ align-items: center;
932
+ justify-content: center;
933
+ padding: 24px;
934
+ animation: dsh-row-in 150ms var(--ds-ease-in-out);
935
+ }
936
+
937
+ /* The invitation's content: the colorful photo-cards illustration over the
938
+ label — the drop overlay is this flow's one brand moment, so it gets the
939
+ color the rest of the UI never does (palette borrowed from DSH's native
940
+ drop illustration so the two zones read as one family). */
941
+ .uploadDropChatCard {
942
+ display: flex;
943
+ flex-direction: column;
944
+ align-items: center;
945
+ gap: 12px;
946
+ max-width: 100%;
947
+ text-align: center;
948
+ color: var(--dsw-alias-label-primary);
949
+ font: var(--dsw-font-s-strong-14);
950
+ }
951
+
952
+ /* Full-window upload progress: blurred scrim + card (same mask/backdrop
953
+ tokens as the repo's Modal primitive; absolute within the tree panel so it
954
+ never covers the conversation column). */
955
+ .uploadOverlay {
956
+ position: absolute;
957
+ inset: 0;
958
+ z-index: 30;
959
+ display: flex;
960
+ align-items: center;
961
+ justify-content: center;
962
+ background: var(--dsw-alias-bg-mask-1);
963
+ backdrop-filter: var(--dsw-mask-blur);
964
+ animation: dsh-row-in 150ms var(--ds-ease-in-out);
965
+ }
966
+
967
+ .uploadOverlayCard {
968
+ display: flex;
969
+ flex-direction: column;
970
+ gap: 12px;
971
+ min-width: 280px;
972
+ max-width: min(420px, calc(100% - 48px));
973
+ padding: 20px 24px;
974
+ border: 1px solid var(--dsw-alias-border-inverted);
975
+ border-radius: 24px;
976
+ background: var(--dsw-alias-bg-layer-2);
977
+ box-shadow: var(--dsw-shadow-lv3);
978
+ }
979
+
980
+ .uploadOverlayTitle {
981
+ display: flex;
982
+ align-items: center;
983
+ gap: 8px;
984
+ font: var(--dsw-font-s-strong-14);
985
+ color: var(--dsw-alias-label-primary);
986
+ }
987
+
988
+ .uploadOverlayTitle > svg {
989
+ flex: none;
990
+ }
991
+
992
+ .uploadOverlayTitle > span {
993
+ min-width: 0;
994
+ white-space: nowrap;
995
+ overflow: hidden;
996
+ text-overflow: ellipsis;
997
+ }
998
+
999
+ .uploadOverlayProgress {
1000
+ height: 6px;
1001
+ border-radius: 3px;
1002
+ background: var(--dsw-alias-border-l2);
1003
+ overflow: hidden;
1004
+ }
1005
+
1006
+ .uploadOverlayProgressFill {
1007
+ height: 100%;
1008
+ border-radius: 3px;
1009
+ background: var(--dsw-alias-interactive-bg-hover-accent);
1010
+ transition: width 150ms var(--ds-ease-in-out);
1011
+ }
1012
+
1013
+ .uploadOverlayStatus {
1014
+ min-height: 1em;
1015
+ font: var(--dsw-font-xxs-12);
1016
+ font-variant-numeric: tabular-nums;
1017
+ color: var(--dsw-alias-label-tertiary);
1018
+ white-space: nowrap;
1019
+ overflow: hidden;
1020
+ text-overflow: ellipsis;
1021
+ }
1022
+
1023
+ .uploadOverlayCancel {
1024
+ align-self: flex-end;
1025
+ height: 28px;
1026
+ padding: 0 14px;
1027
+ border: 1px solid var(--dsw-alias-border-l2);
1028
+ border-radius: 8px;
1029
+ background: transparent;
1030
+ color: var(--dsw-alias-label-primary);
1031
+ font: var(--dsw-font-xxs-strong-12);
1032
+ cursor: pointer;
1033
+ }
1034
+
1035
+ .uploadOverlayCancel:hover:not(:disabled) {
1036
+ background: var(--dsw-alias-interactive-bg-hover);
1037
+ border-color: var(--dsw-alias-border-l2);
1038
+ }
1039
+
1040
+ .uploadOverlayCancel:disabled {
1041
+ opacity: 0.4;
1042
+ cursor: default;
1043
+ }
1044
+
1045
+ /* ── Editor ────────────────────────────────────────────────────────────── */
1046
+
1047
+ .editor {
1048
+ flex: 1;
1049
+ min-height: 0;
1050
+ display: flex;
1051
+ flex-direction: column;
1052
+ }
1053
+
1054
+ .editorHeader {
1055
+ flex: none;
1056
+ display: flex;
1057
+ align-items: center;
1058
+ gap: 6px;
1059
+ padding: 4px 8px;
1060
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1061
+ }
1062
+
1063
+ .editorTitle {
1064
+ flex: 1;
1065
+ min-width: 0;
1066
+ font: var(--dsw-font-xxs-strong-12);
1067
+ color: var(--dsw-alias-label-secondary);
1068
+ overflow: hidden;
1069
+ text-overflow: ellipsis;
1070
+ white-space: nowrap;
1071
+ }
1072
+
1073
+ /* Merged mode (the editorExplorer pref): the header's path input replaces
1074
+ the plain title, and a toggleable file tree docks at the tab's right edge. */
1075
+ .editorPathInput {
1076
+ flex: 1;
1077
+ min-width: 0;
1078
+ height: 28px;
1079
+ padding: 0 10px;
1080
+ border: 1px solid var(--dsw-alias-border-l1);
1081
+ border-radius: 6px;
1082
+ background: var(--dsw-alias-bg-layer-1);
1083
+ color: var(--dsw-alias-label-primary);
1084
+ font: var(--dsw-font-xxs-12);
1085
+ }
1086
+
1087
+ .editorPathInput:focus {
1088
+ outline: none;
1089
+ border-color: var(--dsw-alias-border-l2);
1090
+ }
1091
+
1092
+ /* The tree-panel toggle in the header: active = panel open (the selected
1093
+ fill of the tab strip). */
1094
+ .editorTreeToggleActive {
1095
+ color: var(--dsw-alias-label-primary);
1096
+ background: var(--dsw-alias-interactive-bg-active);
1097
+ }
1098
+
1099
+ .editorBody {
1100
+ flex: 1;
1101
+ min-height: 0;
1102
+ display: flex;
1103
+ }
1104
+
1105
+ .editorMain {
1106
+ flex: 1;
1107
+ min-width: 0;
1108
+ min-height: 0;
1109
+ display: flex;
1110
+ flex-direction: column;
1111
+ }
1112
+
1113
+ /* The docked file tree: the wrapper owns the (drag-adjustable) width and
1114
+ the hairline separation; the resize handle is a wider invisible strip on
1115
+ its left edge with a hover affordance. */
1116
+ .editorTreeDock {
1117
+ position: relative;
1118
+ flex: none;
1119
+ min-height: 0;
1120
+ display: flex;
1121
+ border-left: 1px solid var(--dsw-alias-border-l1);
1122
+ }
1123
+
1124
+ .editorTreeResize {
1125
+ position: absolute;
1126
+ top: 0;
1127
+ bottom: 0;
1128
+ /* Inside the dock (left edge): pointer capture on the handle keeps the
1129
+ drag alive even when the pointer leaves the strip. */
1130
+ left: 0;
1131
+ width: 6px;
1132
+ cursor: col-resize;
1133
+ touch-action: none;
1134
+ z-index: 3;
1135
+ }
1136
+
1137
+ .editorTreeResize:hover {
1138
+ background: var(--dsw-alias-border-l2);
1139
+ }
1140
+
1141
+ .editorTreePanel {
1142
+ /* Relative so the upload overlay and drop pill can cover the tree exactly. */
1143
+ position: relative;
1144
+ flex: 1;
1145
+ min-width: 0;
1146
+ min-height: 0;
1147
+ display: flex;
1148
+ flex-direction: column;
1149
+ }
1150
+
1151
+ /* The tree panel's full-window form (the `full` prop): fill the tab body. */
1152
+ .editorTreePanelFull {
1153
+ flex: 1;
1154
+ }
1155
+
1156
+ .editorTreeSearch {
1157
+ flex: none;
1158
+ display: flex;
1159
+ align-items: center;
1160
+ gap: 4px;
1161
+ padding: 6px 8px;
1162
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1163
+ }
1164
+
1165
+ .editorSearchInput {
1166
+ flex: 1;
1167
+ min-width: 0;
1168
+ height: 26px;
1169
+ padding: 0 10px;
1170
+ border: 1px solid var(--dsw-alias-border-l1);
1171
+ border-radius: 6px;
1172
+ background: var(--dsw-alias-bg-layer-1);
1173
+ color: var(--dsw-alias-label-primary);
1174
+ font: var(--dsw-font-xxs-12);
1175
+ }
1176
+
1177
+ .editorSearchInput:focus {
1178
+ outline: none;
1179
+ border-color: var(--dsw-alias-border-l2);
1180
+ }
1181
+
1182
+ .editorSearchHint {
1183
+ padding: 8px 12px;
1184
+ font: var(--dsw-font-xxs-12);
1185
+ color: var(--dsw-alias-label-tertiary);
1186
+ }
1187
+
1188
+ .editorSearchResult {
1189
+ display: block;
1190
+ width: 100%;
1191
+ padding: 4px 8px;
1192
+ border: none;
1193
+ border-radius: 6px;
1194
+ background: transparent;
1195
+ color: var(--dsw-alias-label-primary);
1196
+ font: var(--dsw-font-xxs-12);
1197
+ text-align: left;
1198
+ cursor: pointer;
1199
+ overflow: hidden;
1200
+ text-overflow: ellipsis;
1201
+ white-space: nowrap;
1202
+ }
1203
+
1204
+ .editorSearchResult:hover {
1205
+ background: var(--dsw-alias-interactive-bg-hover);
1206
+ }
1207
+
1208
+ .editorStatus {
1209
+ font: var(--dsw-font-xxxs-11);
1210
+ color: var(--dsw-alias-label-tertiary);
1211
+ }
1212
+
1213
+ .editorStatusError {
1214
+ color: var(--dsw-alias-state-error-primary);
1215
+ }
1216
+
1217
+ .dirtyDot {
1218
+ width: 7px;
1219
+ height: 7px;
1220
+ border-radius: 50%;
1221
+ background: var(--dsw-alias-state-warn-primary);
1222
+ flex: none;
1223
+ }
1224
+
1225
+ .editorPlaceholder {
1226
+ flex: 1;
1227
+ display: flex;
1228
+ align-items: center;
1229
+ justify-content: center;
1230
+ font: var(--dsw-font-xxs-12);
1231
+ color: var(--dsw-alias-label-tertiary);
1232
+ padding: 16px;
1233
+ text-align: center;
1234
+ }
1235
+
1236
+ /* The unregistered tab type shown by the orphaned-tab placeholder. */
1237
+ .orphanedType {
1238
+ display: block;
1239
+ margin-top: 8px;
1240
+ font-size: 12px;
1241
+ opacity: 0.7;
1242
+ overflow-wrap: anywhere;
1243
+ }
1244
+
1245
+ /* Binary / download-only files (legacy OLE .doc/.xls/.ppt, unknown binaries):
1246
+ a centered notice plus a download link — the user always gets the file. */
1247
+ .editorBinary {
1248
+ flex: 1;
1249
+ display: flex;
1250
+ flex-direction: column;
1251
+ align-items: center;
1252
+ justify-content: center;
1253
+ gap: 12px;
1254
+ padding: 24px 16px;
1255
+ text-align: center;
1256
+ }
1257
+
1258
+ .editorBinaryNotice {
1259
+ font: var(--dsw-font-xxs-12);
1260
+ color: var(--dsw-alias-label-tertiary);
1261
+ }
1262
+
1263
+ .editorDownloadLink {
1264
+ display: inline-flex;
1265
+ align-items: center;
1266
+ gap: 6px;
1267
+ padding: 6px 14px;
1268
+ border: 1px solid var(--dsw-alias-border-l2);
1269
+ border-radius: 6px;
1270
+ background: var(--dsw-alias-bg-layer-2);
1271
+ color: var(--dsw-alias-label-primary);
1272
+ font: var(--dsw-font-xxs-strong-12);
1273
+ text-decoration: none;
1274
+ cursor: pointer;
1275
+ transition:
1276
+ background var(--ds-transition-duration-slow) var(--ds-ease-in-out),
1277
+ border-color var(--ds-transition-duration-slow) var(--ds-ease-in-out);
1278
+ }
1279
+
1280
+ .editorDownloadLink:hover {
1281
+ background: var(--dsw-alias-interactive-bg-hover);
1282
+ border-color: var(--dsw-alias-border-l2);
1283
+ }
1284
+
1285
+ .editorError {
1286
+ padding: 12px 16px;
1287
+ font: var(--dsw-font-xxs-12);
1288
+ color: var(--dsw-alias-state-error-primary);
1289
+ }
1290
+
1291
+ .editorBanner {
1292
+ flex: none;
1293
+ padding: 4px 12px;
1294
+ font: var(--dsw-font-xxxs-11);
1295
+ color: var(--dsw-alias-state-warn-label);
1296
+ background: var(--dsw-alias-state-warn-tertiary);
1297
+ }
1298
+
1299
+ /* Live sandbox status row (HTML preview / browser tab): GREEN while the
1300
+ sandbox is on (with the one-tap temporary unlock), RED while it is off
1301
+ (global setting or temporary unlock) — the red state is the persistent
1302
+ warning that the page runs on the GUI's own origin. */
1303
+ .sandboxStatus {
1304
+ flex: none;
1305
+ display: flex;
1306
+ align-items: center;
1307
+ gap: 8px;
1308
+ padding: 4px 10px;
1309
+ font: var(--dsw-font-xxxs-11);
1310
+ }
1311
+
1312
+ .sandboxStatusOn {
1313
+ color: var(--dsw-alias-label-secondary);
1314
+ background: var(--dsw-alias-bg-layer-1);
1315
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1316
+ }
1317
+
1318
+ .sandboxStatusOff {
1319
+ color: var(--dsw-alias-state-error-primary);
1320
+ background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);
1321
+ border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
1322
+ }
1323
+
1324
+ .sandboxDot {
1325
+ flex: none;
1326
+ width: 6px;
1327
+ height: 6px;
1328
+ border-radius: 50%;
1329
+ background: var(--dsw-alias-state-success-primary);
1330
+ }
1331
+
1332
+ .sandboxStatusOff .sandboxDot {
1333
+ background: var(--dsw-alias-state-error-primary);
1334
+ }
1335
+
1336
+ .sandboxStatusText {
1337
+ flex: 1;
1338
+ min-width: 0;
1339
+ overflow: hidden;
1340
+ text-overflow: ellipsis;
1341
+ white-space: nowrap;
1342
+ }
1343
+
1344
+ .sandboxAction {
1345
+ flex: none;
1346
+ padding: 2px 8px;
1347
+ border: 1px solid var(--dsw-alias-border-l2);
1348
+ border-radius: 6px;
1349
+ background: transparent;
1350
+ font: inherit;
1351
+ color: inherit;
1352
+ cursor: pointer;
1353
+ }
1354
+
1355
+ .sandboxAction:hover {
1356
+ background: var(--dsw-alias-interactive-bg-hover);
1357
+ }
1358
+
1359
+ /* The HTML preview iframe: fills the editor body. Route-src (never srcdoc)
1360
+ so the frame is cross-origin by construction even if the sandbox
1361
+ attribute is ever dropped; sandboxed by default (see TextEditor). */
1362
+ .editorHtml {
1363
+ flex: 1;
1364
+ min-height: 0;
1365
+ width: 100%;
1366
+ border: none;
1367
+ background: var(--dsw-alias-bg-base);
1368
+ }
1369
+
1370
+ /* ── Browser tab ──────────────────────────────────────────────────────── */
1371
+
1372
+ .browser {
1373
+ flex: 1;
1374
+ min-height: 0;
1375
+ display: flex;
1376
+ flex-direction: column;
1377
+ }
1378
+
1379
+ .browserBar {
1380
+ flex: none;
1381
+ display: flex;
1382
+ align-items: center;
1383
+ gap: 4px;
1384
+ padding: 6px 8px;
1385
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1386
+ }
1387
+
1388
+ .browserInput {
1389
+ flex: 1;
1390
+ min-width: 0;
1391
+ height: 28px;
1392
+ padding: 0 10px;
1393
+ border: 1px solid var(--dsw-alias-border-l1);
1394
+ border-radius: 6px;
1395
+ background: var(--dsw-alias-bg-layer-1);
1396
+ color: var(--dsw-alias-label-primary);
1397
+ font: var(--dsw-font-xxs-12);
1398
+ }
1399
+
1400
+ .browserInput:focus {
1401
+ outline: none;
1402
+ border-color: var(--dsw-alias-border-l2);
1403
+ }
1404
+
1405
+ .browserMessage {
1406
+ flex: none;
1407
+ padding: 4px 12px;
1408
+ font: var(--dsw-font-xxxs-11);
1409
+ color: var(--dsw-alias-state-warn-label);
1410
+ background: var(--dsw-alias-state-warn-tertiary);
1411
+ }
1412
+
1413
+ .browserFrame {
1414
+ flex: 1;
1415
+ min-height: 0;
1416
+ width: 100%;
1417
+ border: none;
1418
+ background: var(--dsw-alias-bg-base);
1419
+ }
1420
+
1421
+ .browserStart {
1422
+ flex: 1;
1423
+ min-height: 0;
1424
+ display: flex;
1425
+ align-items: center;
1426
+ justify-content: center;
1427
+ padding: 20px;
1428
+ text-align: center;
1429
+ font: var(--dsw-font-xs-13);
1430
+ color: var(--dsw-alias-label-tertiary);
1431
+ }
1432
+
1433
+ /* Embed-refusal panel (X-Frame-Options / frame-ancestors): replaces the
1434
+ blank refused iframe with the reason + open-in-browser actions. */
1435
+ .browserBlocked {
1436
+ flex: 1;
1437
+ min-height: 0;
1438
+ display: flex;
1439
+ flex-direction: column;
1440
+ align-items: center;
1441
+ justify-content: center;
1442
+ gap: 6px;
1443
+ padding: 24px;
1444
+ text-align: center;
1445
+ color: var(--dsw-alias-state-warn-primary);
1446
+ }
1447
+
1448
+ .browserBlockedTitle {
1449
+ font: var(--dsw-font-xxs-strong-12);
1450
+ color: var(--dsw-alias-label-primary);
1451
+ }
1452
+
1453
+ .browserBlockedDesc {
1454
+ max-width: 280px;
1455
+ font: var(--dsw-font-xxxs-11);
1456
+ color: var(--dsw-alias-label-secondary);
1457
+ }
1458
+
1459
+ .browserBlockedActions {
1460
+ display: flex;
1461
+ gap: 8px;
1462
+ margin-top: 6px;
1463
+ }
1464
+
1465
+ .browserBlockedButton {
1466
+ padding: 4px 12px;
1467
+ border: 1px solid var(--dsw-alias-border-l2);
1468
+ border-radius: 6px;
1469
+ background: var(--dsw-alias-bg-layer-1);
1470
+ color: var(--dsw-alias-label-primary);
1471
+ font: var(--dsw-font-xxxs-11);
1472
+ cursor: pointer;
1473
+ }
1474
+
1475
+ .browserBlockedButton:hover {
1476
+ background: var(--dsw-alias-interactive-bg-hover);
1477
+ }
1478
+
1479
+ .editorCm {
1480
+ flex: 1;
1481
+ min-height: 0;
1482
+ overflow: hidden;
1483
+ background: transparent;
1484
+ }
1485
+
1486
+ .editorCmHidden {
1487
+ display: none;
1488
+ }
1489
+
1490
+ /* CodeMirror fills the pane; the theme supplies its own token palette
1491
+ (a designed dark theme, same policy as the xterm palette). */
1492
+ .editorCm :global(.cm-editor) {
1493
+ height: 100%;
1494
+ }
1495
+
1496
+ .editorCm :global(.cm-editor.cm-focused) {
1497
+ outline: none;
1498
+ }
1499
+
1500
+ /* Preview / edit segmented toggle (markdown and other previewable files). */
1501
+ .editorModeToggle {
1502
+ flex: none;
1503
+ display: inline-flex;
1504
+ align-items: center;
1505
+ gap: 2px;
1506
+ padding: 2px;
1507
+ border: 1px solid var(--dsw-alias-border-l1);
1508
+ border-radius: 6px;
1509
+ background: var(--dsw-alias-bg-layer-1);
1510
+ }
1511
+
1512
+ .editorModeButton {
1513
+ padding: 2px 8px;
1514
+ border: none;
1515
+ border-radius: 4px;
1516
+ background: transparent;
1517
+ color: var(--dsw-alias-label-tertiary);
1518
+ font: var(--dsw-font-xxxs-11);
1519
+ cursor: pointer;
1520
+ }
1521
+
1522
+ .editorModeButton:hover {
1523
+ color: var(--dsw-alias-label-primary);
1524
+ }
1525
+
1526
+ .editorModeActive {
1527
+ background: var(--dsw-alias-bg-base);
1528
+ color: var(--dsw-alias-label-primary);
1529
+ }
1530
+
1531
+ .editorImageWrap {
1532
+ flex: 1;
1533
+ min-height: 0;
1534
+ display: flex;
1535
+ align-items: center;
1536
+ justify-content: center;
1537
+ overflow: auto;
1538
+ padding: 12px;
1539
+ }
1540
+
1541
+ .editorImage {
1542
+ max-width: 100%;
1543
+ max-height: 100%;
1544
+ object-fit: contain;
1545
+ }
1546
+
1547
+ .editorMd {
1548
+ flex: 1;
1549
+ min-height: 0;
1550
+ overflow-y: auto;
1551
+ padding: 10px 14px;
1552
+ font: var(--dsw-font-xs-13);
1553
+ }
1554
+
1555
+ /* ── Mermaid diagram block (markdown preview, mermaid lazy chunk) ────────
1556
+ Mirrors the md-code-block chrome the DSH CodeBlock renders, so a diagram
1557
+ reads as a peer of the surrounding fences: hairline border, layer-2
1558
+ header with the info string + copy action, layer-1 body. The SVG body is
1559
+ static (no bindFunctions) and sanitized (no foreignObject/script/@attrs/
1560
+ hrefs), so it carries no event surface beyond the copy button; the body
1561
+ click opens the zoom modal on a sanitized clone. */
1562
+
1563
+ .mermaidWrap {
1564
+ margin: 6px 0;
1565
+ border: 1px solid var(--dsw-alias-border-l1);
1566
+ border-radius: 6px;
1567
+ background: var(--dsw-alias-bg-layer-1);
1568
+ overflow: hidden;
1569
+ }
1570
+
1571
+ .mermaidHeader {
1572
+ display: flex;
1573
+ align-items: center;
1574
+ justify-content: space-between;
1575
+ gap: 6px;
1576
+ padding: 4px 8px;
1577
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1578
+ background: var(--dsw-alias-bg-layer-2);
1579
+ }
1580
+
1581
+ .mermaidInfo {
1582
+ font: var(--dsw-font-xxxs-strong-11);
1583
+ color: var(--dsw-alias-label-tertiary);
1584
+ }
1585
+
1586
+ .mermaidCopy {
1587
+ display: inline-flex;
1588
+ align-items: center;
1589
+ gap: 4px;
1590
+ padding: 0 6px;
1591
+ height: 20px;
1592
+ border: none;
1593
+ border-radius: 4px;
1594
+ background: transparent;
1595
+ color: var(--dsw-alias-label-secondary);
1596
+ font: var(--dsw-font-xxxs-11);
1597
+ cursor: pointer;
1598
+ }
1599
+
1600
+ .mermaidCopy:hover {
1601
+ background: var(--dsw-alias-interactive-bg-hover);
1602
+ color: var(--dsw-alias-label-primary);
1603
+ }
1604
+
1605
+ .mermaidBody {
1606
+ display: flex;
1607
+ justify-content: center;
1608
+ padding: 10px;
1609
+ overflow: auto;
1610
+ cursor: zoom-in;
1611
+ }
1612
+
1613
+ .mermaidBody :global(svg) {
1614
+ max-width: 100%;
1615
+ height: auto;
1616
+ }
1617
+
1618
+ .mermaidError {
1619
+ padding: 6px 10px;
1620
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1621
+ color: var(--dsw-alias-state-error-primary);
1622
+ font: var(--dsw-font-xxxs-11);
1623
+ }
1624
+
1625
+ /* The diagram source shown under a render error (helps fixing the fence). */
1626
+ .mermaidCode {
1627
+ margin: 0;
1628
+ padding: 8px 10px;
1629
+ overflow: auto;
1630
+ font: var(--dsw-font-xxxs-11);
1631
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1632
+ }
1633
+
1634
+ /* The mermaid markdown container (single MarkdownText pass): a swapped
1635
+ code block keeps its React-managed .md-code-block wrapper in the tree
1636
+ (reconciliation safety), but the wrapper's own box is suppressed so only
1637
+ the diagram chrome renders; the swapped-in host div flows as a block. */
1638
+ .mermaidMarkdown :global(.md-code-block[data-mermaid-processed]) {
1639
+ display: contents;
1640
+ }
1641
+
1642
+ /* ── Mermaid zoom modal (click-to-enlarge; portalled to document.body) ──
1643
+ Fixed overlay above the DSH overlay stack (1000+), token-driven surface.
1644
+ The stage centers the (sanitized, cloned) svg and the modal owns the
1645
+ transform; the drag/zoom listeners live in the component, nothing here
1646
+ targets global class names. */
1647
+
1648
+ .mermaidModal {
1649
+ position: fixed;
1650
+ inset: 0;
1651
+ z-index: 1000;
1652
+ display: flex;
1653
+ flex-direction: column;
1654
+ align-items: center;
1655
+ justify-content: center;
1656
+ background: var(--dsw-alias-bg-mask-1);
1657
+ backdrop-filter: blur(2px);
1658
+ }
1659
+
1660
+ .mermaidModalToolbar {
1661
+ position: absolute;
1662
+ top: 16px;
1663
+ right: 16px;
1664
+ display: flex;
1665
+ gap: 8px;
1666
+ z-index: 10;
1667
+ }
1668
+
1669
+ .mermaidModalButton {
1670
+ width: 36px;
1671
+ height: 36px;
1672
+ border-radius: 8px;
1673
+ border: 1px solid var(--dsw-alias-border-l1);
1674
+ background: var(--dsw-alias-bg-layer-2);
1675
+ color: var(--dsw-alias-label-primary);
1676
+ font: var(--dsw-font-xs-strong-13);
1677
+ cursor: pointer;
1678
+ display: inline-flex;
1679
+ align-items: center;
1680
+ justify-content: center;
1681
+ }
1682
+
1683
+ .mermaidModalButton:hover {
1684
+ background: var(--dsw-alias-interactive-bg-hover);
1685
+ }
1686
+
1687
+ .mermaidModalStage {
1688
+ width: 90vw;
1689
+ height: 80vh;
1690
+ overflow: hidden;
1691
+ position: relative;
1692
+ display: flex;
1693
+ align-items: center;
1694
+ justify-content: center;
1695
+ }
1696
+
1697
+ .mermaidModalStage :global(svg) {
1698
+ max-width: none;
1699
+ max-height: none;
1700
+ cursor: grab;
1701
+ transform-origin: center center;
1702
+ user-select: none;
1703
+ -webkit-user-drag: none;
1704
+ background: var(--dsw-alias-bg-layer-1);
1705
+ padding: 16px;
1706
+ border-radius: 12px;
1707
+ }
1708
+
1709
+ .mermaidModalStage :global(svg):active {
1710
+ cursor: grabbing;
1711
+ }
1712
+
1713
+ .mermaidModalHint {
1714
+ position: absolute;
1715
+ bottom: 16px;
1716
+ left: 50%;
1717
+ transform: translateX(-50%);
1718
+ color: var(--dsw-alias-label-tertiary);
1719
+ font: var(--dsw-font-xxxs-11);
1720
+ pointer-events: none;
1721
+ }
1722
+
1723
+ /* The floating "add to conversation" button anchored above a text
1724
+ selection in the preview/code viewers. Portalled to document.body and
1725
+ position:fixed, so the editor's overflow clips cannot crop it; flat
1726
+ chrome like the rest of the sidebar (hairline border, layer-2 fill,
1727
+ hover fill — no shadow). */
1728
+ .selectionPopup {
1729
+ position: fixed;
1730
+ z-index: 60;
1731
+ transform: translate(-50%, calc(-100% - 8px));
1732
+ display: inline-flex;
1733
+ align-items: center;
1734
+ height: 28px;
1735
+ padding: 0 10px;
1736
+ border: 1px solid var(--dsw-alias-border-l1);
1737
+ border-radius: 6px;
1738
+ background: var(--dsw-alias-bg-layer-2);
1739
+ color: var(--dsw-alias-label-primary);
1740
+ font: var(--dsw-font-xxxs-strong-11);
1741
+ white-space: nowrap;
1742
+ cursor: pointer;
1743
+ }
1744
+
1745
+ .selectionPopup:hover {
1746
+ background: var(--dsw-alias-interactive-bg-hover);
1747
+ }
1748
+
1749
+ .editorPdf {
1750
+ flex: 1;
1751
+ min-height: 0;
1752
+ display: flex;
1753
+ flex-direction: column;
1754
+ background: var(--dsw-alias-bg-base);
1755
+ }
1756
+
1757
+ .editorPdfToolbar {
1758
+ flex: none;
1759
+ display: flex;
1760
+ justify-content: flex-end;
1761
+ padding: 6px 8px;
1762
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
1763
+ }
1764
+
1765
+ .editorPdfStage {
1766
+ position: relative;
1767
+ flex: 1;
1768
+ min-height: 0;
1769
+ display: flex;
1770
+ }
1771
+
1772
+ .editorPdfFrame {
1773
+ flex: 1;
1774
+ min-height: 0;
1775
+ width: 100%;
1776
+ border: none;
1777
+ background: var(--dsw-alias-bg-base);
1778
+ }
1779
+
1780
+ .editorPdfFrameBlocked {
1781
+ pointer-events: none;
1782
+ }
1783
+
1784
+ .editorPdfDragShield {
1785
+ position: absolute;
1786
+ inset: 0;
1787
+ z-index: 4;
1788
+ pointer-events: none;
1789
+ background: transparent;
1790
+ }
1791
+
1792
+ .editorPdfDragShieldActive {
1793
+ pointer-events: auto;
1794
+ }
1795
+
1796
+ /* Tab drag must switch iframe hit-testing before the pointer can enter the
1797
+ Chromium PDF browsing context. The body flag is set synchronously by the
1798
+ drag source, avoiding React render timing entirely. */
1799
+ :global(body[data-dsh-tab-dragging]) .editorPdfFrame {
1800
+ pointer-events: none !important;
1801
+ }
1802
+
1803
+ :global(body[data-dsh-tab-dragging]) .editorPdfDragShield {
1804
+ pointer-events: auto !important;
1805
+ }
1806
+
1807
+ /* ── Terminal ──────────────────────────────────────────────────────────── */
1808
+
1809
+ .terminalWrap {
1810
+ flex: 1;
1811
+ min-height: 0;
1812
+ position: relative;
1813
+ display: flex;
1814
+ flex-direction: column;
1815
+ background: var(--dsw-alias-bg-base);
1816
+ }
1817
+
1818
+ .terminal {
1819
+ flex: 1;
1820
+ min-height: 0;
1821
+ padding: 6px 4px 6px 8px;
1822
+ }
1823
+
1824
+ .terminal :global(.xterm) {
1825
+ height: 100%;
1826
+ }
1827
+
1828
+ .terminalBanner {
1829
+ flex: none;
1830
+ display: flex;
1831
+ align-items: center;
1832
+ flex-wrap: wrap;
1833
+ gap: 8px;
1834
+ padding: 3px 10px;
1835
+ font: var(--dsw-font-xxxs-11);
1836
+ color: var(--dsw-alias-state-warn-label);
1837
+ background: var(--dsw-alias-state-warn-tertiary);
1838
+ }
1839
+
1840
+ /* The attempted ws URL, shown when the connection failed (diagnosis). */
1841
+ .terminalBannerUrl {
1842
+ flex-basis: 100%;
1843
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1844
+ word-break: break-all;
1845
+ opacity: 0.85;
1846
+ }
1847
+
1848
+ .boundaryError {
1849
+ position: fixed;
1850
+ right: 0;
1851
+ top: 0;
1852
+ bottom: 0;
1853
+ z-index: 50;
1854
+ display: flex;
1855
+ flex-direction: column;
1856
+ gap: 8px;
1857
+ align-items: flex-start;
1858
+ padding: 16px;
1859
+ background: var(--dsw-alias-bg-layer-1);
1860
+ border-left: 1px solid var(--dsw-alias-border-l2);
1861
+ font: var(--dsw-font-xxs-12);
1862
+ color: var(--dsw-alias-state-error-primary);
1863
+ overflow: auto;
1864
+ }
1865
+
1866
+ .terminalRetry {
1867
+ flex: none;
1868
+ padding: 1px 8px;
1869
+ border: 1px solid var(--dsw-alias-border-l2);
1870
+ border-radius: 999px;
1871
+ background: var(--dsw-alias-bg-layer-2);
1872
+ color: var(--dsw-alias-label-secondary);
1873
+ font: var(--dsw-font-xxxs-strong-11);
1874
+ cursor: pointer;
1875
+ }
1876
+
1877
+ .terminalRetry:hover {
1878
+ background: var(--dsw-alias-interactive-bg-hover);
1879
+ color: var(--dsw-alias-label-primary);
1880
+ }
1881
+
1882
+ /* The node-pty dependency failure banner (issue #140): a taller warn block
1883
+ carrying the pasteable repair command (bash / cmd / PowerShell). */
1884
+ .terminalDepsBanner {
1885
+ flex: none;
1886
+ display: flex;
1887
+ flex-direction: column;
1888
+ gap: 6px;
1889
+ padding: 10px;
1890
+ font: var(--dsw-font-xxs-12);
1891
+ color: var(--dsw-alias-state-warn-label);
1892
+ background: var(--dsw-alias-state-warn-tertiary);
1893
+ }
1894
+
1895
+ .terminalDepsTitle {
1896
+ font: var(--dsw-font-xxs-strong-12);
1897
+ color: var(--dsw-alias-state-warn-primary);
1898
+ }
1899
+
1900
+ .terminalDepsHint {
1901
+ opacity: 0.9;
1902
+ }
1903
+
1904
+ .terminalDepsCommandRow {
1905
+ display: flex;
1906
+ align-items: flex-start;
1907
+ gap: 8px;
1908
+ }
1909
+
1910
+ /* The command the user pastes into a terminal / cmd. Selectable, wrapping,
1911
+ and scrollable when long (Windows paths can get very long). */
1912
+ .terminalRepairCommand {
1913
+ flex: 1;
1914
+ min-width: 0;
1915
+ margin: 0;
1916
+ padding: 6px 8px;
1917
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1918
+ font-size: 11px;
1919
+ line-height: 1.5;
1920
+ white-space: pre-wrap;
1921
+ word-break: break-all;
1922
+ user-select: text;
1923
+ color: var(--dsw-alias-label-primary);
1924
+ background: var(--dsw-alias-bg-layer-2);
1925
+ border: 1px solid var(--dsw-alias-border-l2);
1926
+ border-radius: 4px;
1927
+ max-height: 160px;
1928
+ overflow: auto;
1929
+ }
1930
+
1931
+ .terminalDepsNote {
1932
+ opacity: 0.85;
1933
+ }
1934
+
1935
+ .terminalDepsActions {
1936
+ display: flex;
1937
+ align-items: center;
1938
+ gap: 8px;
1939
+ }
1940
+
1941
+ /* The PER-TAB error strip: fills one tab's content area (unlike
1942
+ .boundaryError, the full-height fixed rail for shell-level crashes), so a
1943
+ crashing viewer/editor never hides the toggle cluster or the other tabs. */
1944
+ .tabBoundaryError {
1945
+ flex: 1;
1946
+ min-height: 0;
1947
+ display: flex;
1948
+ flex-direction: column;
1949
+ gap: 8px;
1950
+ align-items: flex-start;
1951
+ padding: 12px 16px;
1952
+ overflow: auto;
1953
+ font: var(--dsw-font-xxs-12);
1954
+ color: var(--dsw-alias-state-error-primary);
1955
+ }
1956
+
1957
+ /* ── Git ───────────────────────────────────────────────────────────────── */
1958
+
1959
+ .git {
1960
+ flex: 1;
1961
+ min-height: 0;
1962
+ min-width: 0;
1963
+ display: flex;
1964
+ flex-direction: column;
1965
+ overflow-y: auto;
1966
+ /* Tab pages never scroll horizontally: content wraps or truncates to the
1967
+ panel width instead of panning sideways. */
1968
+ overflow-x: hidden;
1969
+ }
1970
+
1971
+ .gitHeader {
1972
+ flex: none;
1973
+ display: flex;
1974
+ align-items: center;
1975
+ gap: 8px;
1976
+ height: 36px;
1977
+ padding: 0 8px 0 12px;
1978
+ }
1979
+
1980
+ .gitBranchSelect {
1981
+ flex: 1;
1982
+ min-width: 0;
1983
+ height: 26px;
1984
+ padding: 0 6px;
1985
+ border: 1px solid var(--dsw-alias-border-l2);
1986
+ border-radius: 6px;
1987
+ background: var(--dsw-alias-bg-base);
1988
+ color: var(--dsw-alias-label-primary);
1989
+ font: var(--dsw-font-xxs-12);
1990
+ }
1991
+
1992
+ .gitSection {
1993
+ border-top: 1px solid var(--dsw-alias-border-l1);
1994
+ }
1995
+
1996
+ .gitSectionHeader {
1997
+ display: flex;
1998
+ align-items: center;
1999
+ justify-content: space-between;
2000
+ padding: 6px 12px 4px;
2001
+ font: var(--dsw-font-xxxs-strong-11);
2002
+ color: var(--dsw-alias-label-tertiary);
2003
+ text-transform: uppercase;
2004
+ }
2005
+
2006
+ .gitLink {
2007
+ border: none;
2008
+ background: transparent;
2009
+ font: var(--dsw-font-xxxs-11);
2010
+ color: var(--dsw-alias-brand-primary);
2011
+ cursor: pointer;
2012
+ padding: 0;
2013
+ }
2014
+
2015
+ .gitLink:hover:not(:disabled) {
2016
+ text-decoration: underline;
2017
+ }
2018
+
2019
+ .gitLink:disabled {
2020
+ opacity: 0.4;
2021
+ cursor: default;
2022
+ }
2023
+
2024
+ .gitRow {
2025
+ display: flex;
2026
+ align-items: center;
2027
+ gap: 6px;
2028
+ min-height: 34px;
2029
+ margin: 0 6px;
2030
+ padding: 0 8px;
2031
+ border-radius: 8px;
2032
+ animation: dsh-row-in 150ms var(--ds-ease-in-out);
2033
+ }
2034
+
2035
+ .gitRow:hover {
2036
+ background: var(--dsw-alias-interactive-bg-hover);
2037
+ }
2038
+
2039
+ .gitRowSelected {
2040
+ background: var(--dsw-alias-interactive-bg-active);
2041
+ }
2042
+
2043
+ .gitRowMain {
2044
+ flex: 1;
2045
+ min-width: 0;
2046
+ display: flex;
2047
+ align-items: center;
2048
+ gap: 8px;
2049
+ border: none;
2050
+ background: transparent;
2051
+ padding: 3px 0;
2052
+ cursor: pointer;
2053
+ text-align: left;
2054
+ }
2055
+
2056
+ .gitBadge {
2057
+ flex: none;
2058
+ width: 20px;
2059
+ height: 16px;
2060
+ display: inline-flex;
2061
+ align-items: center;
2062
+ justify-content: center;
2063
+ border-radius: 4px;
2064
+ font: var(--dsw-font-xxxs-strong-11);
2065
+ background: var(--dsw-alias-interactive-bg-hover);
2066
+ color: var(--dsw-alias-label-secondary);
2067
+ }
2068
+
2069
+ .gitName {
2070
+ flex: 1;
2071
+ min-width: 0;
2072
+ overflow: hidden;
2073
+ text-overflow: ellipsis;
2074
+ white-space: nowrap;
2075
+ font: var(--dsw-font-s-14);
2076
+ color: var(--dsw-alias-label-primary);
2077
+ }
2078
+
2079
+ .gitEmpty {
2080
+ padding: 4px 12px 8px;
2081
+ font: var(--dsw-font-xxs-12);
2082
+ color: var(--dsw-alias-label-tertiary);
2083
+ }
2084
+
2085
+ .gitPlaceholder {
2086
+ padding: 16px;
2087
+ font: var(--dsw-font-xxs-12);
2088
+ color: var(--dsw-alias-label-tertiary);
2089
+ text-align: center;
2090
+ }
2091
+
2092
+ .gitError {
2093
+ padding: 8px 12px;
2094
+ font: var(--dsw-font-xxs-12);
2095
+ color: var(--dsw-alias-state-error-primary);
2096
+ white-space: pre-wrap;
2097
+ }
2098
+
2099
+ .gitDiff {
2100
+ border-top: 1px solid var(--dsw-alias-border-l1);
2101
+ padding: 8px;
2102
+ }
2103
+
2104
+ /* The diff tab (a change opened from the git panel, like VSCode's diff
2105
+ editor): header + scrollable diff body, no horizontal panning. */
2106
+ .gitDiffTab {
2107
+ flex: 1;
2108
+ min-height: 0;
2109
+ min-width: 0;
2110
+ display: flex;
2111
+ flex-direction: column;
2112
+ overflow-y: auto;
2113
+ overflow-x: hidden;
2114
+ }
2115
+
2116
+ .gitDiffTabHeader {
2117
+ flex: none;
2118
+ display: flex;
2119
+ align-items: center;
2120
+ gap: 8px;
2121
+ height: 36px;
2122
+ padding: 0 8px 0 12px;
2123
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
2124
+ }
2125
+
2126
+ .gitDiffTabTitle {
2127
+ flex: 1;
2128
+ min-width: 0;
2129
+ overflow: hidden;
2130
+ text-overflow: ellipsis;
2131
+ white-space: nowrap;
2132
+ font: var(--dsw-font-xxs-strong-12);
2133
+ color: var(--dsw-alias-label-primary);
2134
+ }
2135
+
2136
+ /* One changed file's section: path header, hunk headers, aligned lines. */
2137
+ .gitDiffFile {
2138
+ width: 100%;
2139
+ display: flex;
2140
+ align-items: baseline;
2141
+ gap: 6px;
2142
+ padding: 8px 2px 2px;
2143
+ border: 0;
2144
+ background: transparent;
2145
+ color: inherit;
2146
+ text-align: left;
2147
+ cursor: pointer;
2148
+ }
2149
+
2150
+ .gitDiffFile:disabled {
2151
+ cursor: default;
2152
+ }
2153
+
2154
+ .gitDiffFile:hover:not(:disabled) {
2155
+ background: var(--dsw-alias-interactive-bg-hover);
2156
+ }
2157
+
2158
+ .gitDiffFileChevron {
2159
+ flex: none;
2160
+ color: var(--dsw-alias-label-tertiary);
2161
+ transform: rotate(0deg);
2162
+ }
2163
+
2164
+ .gitDiffFileChevronExpanded {
2165
+ transform: rotate(90deg);
2166
+ }
2167
+
2168
+ .gitDiffFilePath {
2169
+ font: var(--dsw-font-xxs-strong-12);
2170
+ color: var(--dsw-alias-label-primary);
2171
+ overflow: hidden;
2172
+ text-overflow: ellipsis;
2173
+ white-space: nowrap;
2174
+ }
2175
+
2176
+ .gitDiffFileOld {
2177
+ flex: none;
2178
+ font: var(--dsw-font-xxxs-11);
2179
+ color: var(--dsw-alias-label-tertiary);
2180
+ overflow: hidden;
2181
+ text-overflow: ellipsis;
2182
+ white-space: nowrap;
2183
+ max-width: 40%;
2184
+ }
2185
+
2186
+ .gitDiffFileTag {
2187
+ flex: none;
2188
+ padding: 0 6px;
2189
+ border: 1px solid var(--dsw-alias-border-l2);
2190
+ border-radius: 999px;
2191
+ font: var(--dsw-font-xxxs-strong-11);
2192
+ color: var(--dsw-alias-label-secondary);
2193
+ }
2194
+
2195
+ .gitDiffHunk {
2196
+ display: flex;
2197
+ gap: 8px;
2198
+ padding: 3px 2px;
2199
+ font: var(--dsw-font-markdown-code-block-small);
2200
+ color: var(--dsw-alias-label-tertiary);
2201
+ }
2202
+
2203
+ .gitDiffHunkHeader {
2204
+ flex: none;
2205
+ color: var(--dsw-alias-label-secondary);
2206
+ }
2207
+
2208
+ .gitDiffHunkSection {
2209
+ overflow: hidden;
2210
+ text-overflow: ellipsis;
2211
+ white-space: nowrap;
2212
+ }
2213
+
2214
+ /* One aligned diff line: old gutter / new gutter / code. Lines WRAP instead
2215
+ of scrolling horizontally (the tab-page rule: fill the width adaptively),
2216
+ with the long-token fallback breaking anywhere a space never comes. */
2217
+ .gitDiffLine {
2218
+ display: flex;
2219
+ align-items: stretch;
2220
+ font: var(--dsw-font-markdown-code-block-small);
2221
+ line-height: 20px;
2222
+ white-space: pre-wrap;
2223
+ overflow-wrap: anywhere;
2224
+ min-width: 0;
2225
+ }
2226
+
2227
+ .gitDiffNum {
2228
+ flex: none;
2229
+ width: 36px;
2230
+ padding-right: 8px;
2231
+ text-align: right;
2232
+ color: var(--dsw-alias-label-tertiary);
2233
+ user-select: none;
2234
+ }
2235
+
2236
+ .gitDiffCode {
2237
+ flex: 1;
2238
+ min-width: 0;
2239
+ overflow: visible;
2240
+ }
2241
+
2242
+ .gitDiffCtx {
2243
+ color: var(--dsw-alias-label-primary);
2244
+ }
2245
+
2246
+ .gitDiffDel {
2247
+ color: var(--dsw-alias-state-error-primary);
2248
+ background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
2249
+ }
2250
+
2251
+ .gitDiffAdd {
2252
+ color: var(--dsw-alias-state-success-primary);
2253
+ background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 12%, transparent);
2254
+ }
2255
+
2256
+ .gitDiffMeta {
2257
+ padding-left: 2px;
2258
+ }
2259
+
2260
+ .gitDiffMetaText {
2261
+ font: var(--dsw-font-xxxs-11);
2262
+ font-style: italic;
2263
+ color: var(--dsw-alias-label-tertiary);
2264
+ }
2265
+
2266
+ .gitDiffExpand {
2267
+ display: block;
2268
+ width: 100%;
2269
+ margin: 4px 0;
2270
+ border: none;
2271
+ background: transparent;
2272
+ font: var(--dsw-font-xxs-12);
2273
+ color: var(--dsw-alias-brand-primary);
2274
+ cursor: pointer;
2275
+ text-align: center;
2276
+ }
2277
+
2278
+ .gitDiffExpand:hover {
2279
+ background: var(--dsw-alias-interactive-bg-hover);
2280
+ }
2281
+
2282
+ .gitConfirmDesc {
2283
+ margin: 0;
2284
+ font: var(--dsw-font-s-14);
2285
+ color: var(--dsw-alias-label-primary);
2286
+ white-space: pre-wrap;
2287
+ }
2288
+
2289
+ .gitCommit {
2290
+ display: flex;
2291
+ gap: 6px;
2292
+ padding: 8px 12px;
2293
+ border-top: 1px solid var(--dsw-alias-border-l1);
2294
+ align-items: center;
2295
+ }
2296
+
2297
+ .gitCommitInput {
2298
+ flex: 1;
2299
+ min-width: 0;
2300
+ }
2301
+
2302
+ .gitCommitButton {
2303
+ flex: none;
2304
+ height: 26px;
2305
+ padding: 0 12px;
2306
+ border: none;
2307
+ border-radius: 6px;
2308
+ background: var(--dsw-alias-button-primary-fill);
2309
+ color: var(--dsw-alias-label-primary-inverted);
2310
+ font: var(--dsw-font-xxs-strong-12);
2311
+ cursor: pointer;
2312
+ }
2313
+
2314
+ .gitCommitButton:hover:not(:disabled) {
2315
+ background: var(--dsw-alias-button-primary-hover);
2316
+ }
2317
+
2318
+ .gitCommitButton:disabled {
2319
+ opacity: 0.45;
2320
+ cursor: default;
2321
+ }
2322
+
2323
+ /* A history row: line 1 = hash + subject, line 2 = ref badges + author/date
2324
+ (badges live on the second line so they never crowd the subject). */
2325
+ .gitLogRow {
2326
+ display: flex;
2327
+ flex-direction: column;
2328
+ gap: 2px;
2329
+ padding: 5px 12px;
2330
+ cursor: pointer;
2331
+ border-radius: 8px;
2332
+ }
2333
+
2334
+ .gitLogRow:hover {
2335
+ background: var(--dsw-alias-interactive-bg-hover);
2336
+ }
2337
+
2338
+ .gitLogLine1 {
2339
+ display: flex;
2340
+ align-items: baseline;
2341
+ gap: 8px;
2342
+ min-width: 0;
2343
+ }
2344
+
2345
+ .gitLogHash {
2346
+ flex: none;
2347
+ font: var(--dsw-font-markdown-code-block-small);
2348
+ color: var(--dsw-alias-label-tertiary);
2349
+ }
2350
+
2351
+ .gitLogLine2 {
2352
+ display: flex;
2353
+ align-items: center;
2354
+ gap: 6px;
2355
+ min-width: 0;
2356
+ flex-wrap: wrap;
2357
+ }
2358
+
2359
+ .gitLogRef {
2360
+ flex: none;
2361
+ padding: 0 5px;
2362
+ border: 1px solid var(--dsw-alias-border-l2);
2363
+ border-radius: 999px;
2364
+ font: var(--dsw-font-xxxs-strong-11);
2365
+ color: var(--dsw-alias-brand-primary);
2366
+ white-space: nowrap;
2367
+ }
2368
+
2369
+ .gitLogSubject {
2370
+ flex: 1;
2371
+ min-width: 0;
2372
+ overflow: hidden;
2373
+ text-overflow: ellipsis;
2374
+ white-space: nowrap;
2375
+ font: var(--dsw-font-s-14);
2376
+ color: var(--dsw-alias-label-primary);
2377
+ }
2378
+
2379
+ .gitLogMeta {
2380
+ font: var(--dsw-font-xxxs-11);
2381
+ color: var(--dsw-alias-label-tertiary);
2382
+ }
2383
+
2384
+ .gitLogMore {
2385
+ display: block;
2386
+ width: calc(100% - 24px);
2387
+ margin: 4px 12px 8px;
2388
+ padding: 6px 0;
2389
+ border: 1px solid var(--dsw-alias-border-l2);
2390
+ border-radius: 6px;
2391
+ background: transparent;
2392
+ font: var(--dsw-font-xxs-12);
2393
+ color: var(--dsw-alias-label-secondary);
2394
+ cursor: pointer;
2395
+ }
2396
+
2397
+ .gitLogMore:hover:not(:disabled) {
2398
+ background: var(--dsw-alias-interactive-bg-hover);
2399
+ color: var(--dsw-alias-label-primary);
2400
+ }
2401
+
2402
+ .gitLogMore:disabled {
2403
+ opacity: 0.5;
2404
+ cursor: default;
2405
+ }
2406
+
2407
+ /* ── Intercepted produced-files row ────────────────────────────────────── */
2408
+
2409
+ .producedRow {
2410
+ display: flex;
2411
+ align-items: center;
2412
+ gap: 8px;
2413
+ flex-wrap: wrap;
2414
+ padding: 4px 0;
2415
+ }
2416
+
2417
+ .producedLabel {
2418
+ font: var(--dsw-font-xxs-12);
2419
+ color: var(--dsw-alias-label-tertiary);
2420
+ }
2421
+
2422
+ .producedChip {
2423
+ display: inline-flex;
2424
+ align-items: center;
2425
+ gap: 4px;
2426
+ max-width: 200px;
2427
+ padding: 2px 8px;
2428
+ border: 1px solid var(--dsw-alias-border-l2);
2429
+ border-radius: 999px;
2430
+ background: var(--dsw-alias-bg-layer-2);
2431
+ color: var(--dsw-alias-label-secondary);
2432
+ font: var(--dsw-font-xxs-12);
2433
+ cursor: pointer;
2434
+ overflow: hidden;
2435
+ }
2436
+
2437
+ .producedChip:hover {
2438
+ background: var(--dsw-alias-interactive-bg-hover);
2439
+ color: var(--dsw-alias-label-primary);
2440
+ }
2441
+
2442
+ .producedChip span {
2443
+ overflow: hidden;
2444
+ text-overflow: ellipsis;
2445
+ white-space: nowrap;
2446
+ }
2447
+
2448
+ .producedMore {
2449
+ font: var(--dsw-font-xxs-12);
2450
+ color: var(--dsw-alias-label-tertiary);
2451
+ }
2452
+
2453
+ /* ── Shared interaction rules ──────────────────────────────────────────── */
2454
+
2455
+ /* Keyboard focus stays visible on every interactive control (the styling
2456
+ policy requires focus visibility; the accent token doubles as the ring). */
2457
+ .toggleButton:focus-visible,
2458
+ .bottomClose:focus-visible,
2459
+ .iconButton:focus-visible,
2460
+ .tab:focus-visible,
2461
+ .tabClose:focus-visible,
2462
+ .tabBarPlus:focus-visible,
2463
+ .paneCard:focus-visible,
2464
+ .explorerRow:focus-visible,
2465
+ .explorerRef:focus-visible,
2466
+ .gitRowMain:focus-visible,
2467
+ .gitLink:focus-visible,
2468
+ .gitCommitButton:focus-visible,
2469
+ .gitLogRow:focus-visible,
2470
+ .gitLogMore:focus-visible,
2471
+ .gitDiffFile:focus-visible,
2472
+ .gitDiffExpand:focus-visible,
2473
+ .terminalRetry:focus-visible,
2474
+ .editorModeButton:focus-visible,
2475
+ .editorDownloadLink:focus-visible,
2476
+ .editorPptxButton:focus-visible,
2477
+ .editorDocxZoomRange:focus-visible {
2478
+ outline: 2px solid var(--dsw-alias-interactive-bg-hover-accent);
2479
+ outline-offset: -1px;
2480
+ }
2481
+
2482
+ /* Reduced motion: no slides, fades or color transitions. */
2483
+ @media (prefers-reduced-motion: reduce) {
2484
+ .panel,
2485
+ .panelHidden,
2486
+ .bottomPanel,
2487
+ .bottomPanelHidden,
2488
+ .toggleCluster,
2489
+ .toggleButton,
2490
+ .tab,
2491
+ .tabBarPlus,
2492
+ .paneCard,
2493
+ .explorerRow,
2494
+ .gitRow,
2495
+ .divider,
2496
+ .dividerRow::after,
2497
+ .dividerCol::after {
2498
+ transition: none;
2499
+ animation: none;
2500
+ }
2501
+ }
2502
+
2503
+ /* ── Narrow (mobile) viewport ──────────────────────────────────────────── */
2504
+
2505
+ /* Pairs with NARROW_MAX_WIDTH = 768 in src/client/breakpoints.ts: widths
2506
+ strictly below 768px (i.e. max-width: 767px) switch the sidebar to the
2507
+ mobile layout — one full-screen drawer (the bottom panel's tabs were
2508
+ migrated into the right tree), one toggle button. The structural
2509
+ switches (which panels render, the migration) are JS-driven via
2510
+ useNarrowViewport; this block only adapts the pure style details. */
2511
+ @media (max-width: 767px) {
2512
+ /* The toggle cluster holds a single button on narrow viewports (the
2513
+ bottom panel button is not rendered), so the open panel's tab strip
2514
+ reserves 40px instead of the desktop 72px — the tabs and + menu still
2515
+ yield space to the one remaining control. */
2516
+ .panel:not(.panelHidden) .tabBar {
2517
+ padding-right: 40px;
2518
+ }
2519
+
2520
+ /* Narrower tabs: a phone-width drawer fits more open tabs before the
2521
+ strip scrolls. */
2522
+ .tab {
2523
+ min-width: 48px;
2524
+ max-width: 128px;
2525
+ }
2526
+ }
2527
+
2528
+ /* The file tree "open with" menu rows: the label area is a BLOCK-level flex
2529
+ row that fills the primitives `.itemLabel` span (which is itself `flex: 1`
2530
+ inside the row), so the trailing control — the pushpin on submenu rows,
2531
+ the chevron on the submenu parent — docks at the row's far right, exactly
2532
+ like the trailing check on selected rows of every other menu. */
2533
+ .openWithLabel {
2534
+ display: flex;
2535
+ align-items: center;
2536
+ gap: 8px;
2537
+ width: 100%;
2538
+ min-width: 0;
2539
+ }
2540
+
2541
+ .openWithName {
2542
+ flex: 1 1 auto;
2543
+ min-width: 0;
2544
+ overflow: hidden;
2545
+ text-overflow: ellipsis;
2546
+ white-space: nowrap;
2547
+ }
2548
+
2549
+ /* The trailing "expands into a submenu" chevron on the open-with parent row
2550
+ (the primitives Menu renders no arrow for submenu parents). */
2551
+ .openWithChevron {
2552
+ flex: none;
2553
+ color: var(--dsw-alias-label-tertiary);
2554
+ }
2555
+
2556
+ /* The pushpin toggle on an "open with" submenu row: brand ink once the
2557
+ target is pinned to the menu's top level. */
2558
+ .openWithPin {
2559
+ flex: none;
2560
+ display: inline-flex;
2561
+ align-items: center;
2562
+ justify-content: center;
2563
+ width: 20px;
2564
+ height: 20px;
2565
+ border-radius: 6px;
2566
+ color: var(--dsw-alias-label-tertiary);
2567
+ cursor: pointer;
2568
+ }
2569
+
2570
+ .openWithPin:hover {
2571
+ background: var(--dsw-alias-interactive-bg-hover);
2572
+ color: var(--dsw-alias-label-primary);
2573
+ }
2574
+
2575
+ .openWithPinActive {
2576
+ color: var(--dsw-alias-state-business-primary);
2577
+ }