dsh-coding-sidebar 1.0.0

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