@deepseek-ai/dsh-client-ui-layout 0.1.6-alpha.1 → 0.1.7-alpha.1

package/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-layout/README.md
-README.md: f150416b7fa2712bd3aae0096c9e6c823a7ddce4
-README.zh.md: 05e49b554770f6927ce92e9b42f26769facaa1ba
+README.md: b26b182f5ea2c727411910cc5f85819b9dfbcb2c
+README.zh.md: 58ef066ab05389898dc912500cd6b37f1a07824d

package/README.md

@@ -29,6 +29,12 @@ The root slot composes the sidebar, main content, and right column. The sidebar
 
 Global panels occupy the root-scoped `main` keyed slot; `conversation` is the reserved key for the Conversation. `ctx.layout.selectPanel(id)` selects a registered panel, and `null` selects the Conversation without changing the current Session. No global panel is registered by the shipped composition.
 
+### Window-chrome seat
+
+On macOS desktop (`html[data-platform='darwin']`, set only by the desktop preload) a collapsed sidebar hides its column entirely instead of keeping the rail, and the frame mounts the single root-scoped `shell.leading` seat at its top-left — beside the hiddenInset traffic lights, over every main panel; ui-sidebar occupies it with the reopen and New Session controls. While the seat is mounted the frame publishes `--dsh-frame-leading-clearance`, the inline band the window chrome occupies measured from the frame's left edge; a main panel whose content reaches the top-left corner pads by it so nothing lands under the lights or the controls. The frame also always publishes `--dsh-frame-top-clearance` (48px) on the root element, the constant step below the window's top strip; entry pages in the main panel (plugin manager and similar, not the conversation) pad their top by it, and overlay primitives (portal menus, bottom-anchored overlays, the settings panel) keep it as their top viewport margin — the root-element home lets overlays portalled to `document.body` read it too. The full-width window drag band is 52px; while the Conversation is selected and its header shows the view tab strip, the band deepens to the 76px header block (title row plus tab strip), so blank header space drags while header controls stay clickable.
+
+Windows Electron's `data-windows-titlebar` marker reserves the caption height above all columns and removes the collapsed sidebar rail. Only the content area's top-left corner has a 16px radius; the other corners and the internal divider remain square. The frame publishes `--dsh-windows-content-radius` and `--dsh-windows-sidebar-width` for ui-sidebar-right's fullscreen corner and sidebar clearance. Ordinary Web documents do not receive the marker; macOS retains its separate layout.
+
 ### Theme presentation
 
 The presenter consumes resolved theme snapshots and projects them onto the document: `html { color-scheme }` for native UA chrome, `body[data-ds-dark-theme]` from the active color scheme, the theme's alias tokens and `--dsh-content-font-size` as inline variables on body, and one owned `<meta name="theme-color">` whose content follows the computed body background. Disposing the presenter removes its metadata node with its other global writes.
@@ -43,7 +49,7 @@ The presenter consumes resolved theme snapshots and projects them onto the docum
 
 `selectPanel(id)` checks the live `main` registry before changing selection; an absent key throws and leaves the current panel intact. `beginNavigation()` returns an abort signal for an asynchronous UI navigation. A later call, a valid panel selection (including repeated selection), or layout disposal aborts that signal without cancelling underlying Session creation. Consumers check the signal before committing navigation or moving drafts.
 
-One registration declares four child slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `usePanelInfo` subscribes to the stable selection object; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
+One registration declares five child slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `usePanelInfo` subscribes to the stable selection object; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
 
 </details>
 
@@ -80,7 +86,7 @@ These limits define the current layout behavior. They are current package constr
 
 - **Panel geometry is transient** — reload restores the sidebar default and the right panel hidden; each dragged width is one frame-wide preference, not a per-Session fact.
 - **Extremely narrow windows** — after the right panel closes, the center may still fall below 400px; the left 56px rail remains.
-- **Track and panel travel on one shared curve** — the frame's track transition and the occupant's slide read the same duration and easing variables; an occupant that used its own would detach the panel's edge from the conversation's while squeezing.
+- **Track and panel travel on one shared curve only while animating** — during a discrete open/close the frame sets `data-animating` and its track transition and the occupant's slide read the same duration and easing variables; an occupant that used its own would detach the panel's edge from the conversation's while squeezing. Drags and instant presentation switches run transition-free, so the curve does not cover them.
 - **No scroll anchoring during squeeze reflow** — layout changes may move the reader's viewport.
 
 <a id="dev-note"></a>

package/README.zh.md

@@ -29,6 +29,12 @@ kind: "package-reference"
 
 全局面板占据 root 作用域的 `main` keyed slot；`conversation` 是为会话界面保留的 key。`ctx.layout.selectPanel(id)` 选中已注册面板，`null` 则选中会话界面，但不改变当前会话。默认组合不注册任何全局面板。
 
+### 窗口 chrome 座
+
+在 macOS 桌面（`html[data-platform='darwin']`，仅由桌面 preload 设置）下，收起的侧边栏整列隐藏而非保留控制栏，框架在左上角挂载 root 作用域的单一 `shell.leading` 座——位于 hiddenInset 红绿灯旁，覆盖所有主面板；ui-sidebar 以重新打开与 New Session 控件占据该座。座挂载期间框架发布 `--dsh-frame-leading-clearance`：窗口 chrome 占据的行内带宽，自框架左边缘起量；内容抵达左上角的主面板以它做内边距，避免落在红绿灯或控件之下。框架还始终在根元素上发布 `--dsh-frame-top-clearance`（48px）：窗口顶带之下的固定下沉量；主面板中的入口型页面（插件管理器等类似页面，非对话）以它做顶部内边距，浮层原语（portal 菜单、底部锚定浮层、设置面板）以它做视口顶部安全边距——放在根元素上让 portal 到 document.body 的浮层也能读到。全宽窗口拖拽带为 52px；选中会话界面且其 header 显示视图 tab 条时，加深至 76px 的 header 块（标题行加 tab 条），header 空白处可拖拽，控件保持可点。
+
+Windows Electron 的 `data-windows-titlebar` 标记在所有列上方预留顶栏高度，并移除收起后的侧栏轨道。内容区仅左上角保留 16px 圆角，其余角和内部交界处保持直角。框架发布 `--dsh-windows-content-radius` 和 `--dsh-windows-sidebar-width`，供 ui-sidebar-right 的全屏圆角及侧栏避让使用。普通 Web 文档不会获得该标记；macOS 保留其独立布局。
+
 ### 主题呈现
 
 呈现器消费解析后的主题快照，并投影到 document：`html { color-scheme }` 驱动原生 UA 控件，依据当前配色方案设置 `body[data-ds-dark-theme]`，把主题的别名 token 与 `--dsh-content-font-size` 设为 body 上的内联变量，并持有一个 `<meta name="theme-color">`，其内容随计算后的 body 背景色更新。对呈现器执行 dispose（资源释放）时，它会连同其他全局写入一起移除自己的元数据节点。
@@ -43,7 +49,7 @@ kind: "package-reference"
 
 `selectPanel(id)` 在改变选中态前检查实时 `main` 注册表；缺失的 key 会抛错并保留当前面板。`beginNavigation()` 为异步 UI 导航返回 abort signal。后续调用、有效面板选择（包括重复选择）或布局释放会中止该 signal，但不取消底层会话创建。消费方在提交导航或搬移草稿前检查 signal。
 
-一次注册声明四个子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`usePanelInfo` 订阅引用稳定的选中态对象，AppFrame 订阅引用稳定的布局对象。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
+一次注册声明五个子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`usePanelInfo` 订阅引用稳定的选中态对象，AppFrame 订阅引用稳定的布局对象。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
 
 </details>
 
@@ -80,7 +86,7 @@ kind: "package-reference"
 
 - **面板几何是瞬时状态**——重新加载会恢复侧栏默认值并隐藏右侧面板；拖动设置的宽度是整个框架共用的一份偏好，而非每个会话各自的属性。
 - **极窄窗口**——右侧面板关闭后，中栏仍可能小于 400px；左侧 56px 控制栏仍会保留。
-- **轨道与面板沿同一条曲线运动**——框架的轨道过渡和占用方的滑入读取同一组时长与缓动变量；占用方若自用一套，挤压时面板边缘就会与会话界面的边缘脱开。
+- **轨道与面板仅在动画期间沿同一条曲线运动**——离散开合时框架设置 `data-animating`，其轨道过渡和占用方的滑入读取同一组时长与缓动变量；占用方若自用一套，挤压时面板边缘就会与会话界面的边缘脱开。拖拽和即时呈现切换不带过渡，因此该曲线不覆盖它们。
 - **挤压重排期间无滚动锚定**——布局变化可能移动读者的视口。
 
 <a id="dev-note"></a>

package/lib/client.js

@@ -30,11 +30,13 @@ window.__ModuleLoader__.load({
 		* @param viewport - available frame width in px.
 		* @param sidebar - sidebar width preference in px (0 = closed).
 		* @param rightbar - requested right panel width in px (0 = no track).
+		* @param collapsedWidth - track width of the closed sidebar; the default keeps
+		*   the icon rail, 0 hides the column entirely (macOS desktop).
 		* @returns actual widths after shrinking or removing the right track; only
 		*   without that track may the center fall below its minimum, down to zero.
 		*/
-		function computeColumns(viewport, sidebar, rightbar) {
-			const s = sidebar === 0 ? 56 : clampWidth(sidebar, 264, 420);
+		function computeColumns(viewport, sidebar, rightbar, collapsedWidth = 56) {
+			const s = sidebar === 0 ? collapsedWidth : clampWidth(sidebar, 264, 420);
 			const available = viewport - s - 400;
 			const r = rightbar === 0 || available < 300 ? 0 : Math.min(available, clampWidth(rightbar, 300, viewport * RIGHTBAR_MAX_RATIO));
 			return {
@@ -55,7 +57,7 @@ window.__ModuleLoader__.load({
 		function DocumentTitle({ useSessions, usePanelInfo, productTitle }) {
 			const showSessionTitle = usePanelInfo((info) => info.activePanelId === null);
 			const title = useSessions((state) => {
-				const current = state.current;
+				const current = Object.values(state.byId).find((session) => (session.retainedBy.mainView ?? 0) > 0)?.id;
 				return !showSessionTitle || current === void 0 ? void 0 : state.byId[current]?.title;
 			});
 			(0, react.useEffect)(() => {
@@ -68,7 +70,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/deepseek-harness/deepseek-harness/packages/client/ui-layout/src/client/AppFrame.module.css.mjs
-		const css = ".pI_x6G_frame{background:var(--dsw-alias-bg-base);height:100%;transition:grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out);grid-template-rows:100%;display:grid;position:relative;overflow:hidden}.pI_x6G_frame[data-dragging]{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_frame{transition:none}}.pI_x6G_sidebarCol{background:var(--dsw-specific-sidebar-fill);border-right:.5px solid var(--dsw-alias-border-l3);min-width:0;overflow:hidden}.pI_x6G_centerCol{flex-direction:column;min-width:0;display:flex;overflow:hidden}.pI_x6G_handle{cursor:col-resize;z-index:11;touch-action:none;width:8px;transition:left var(--ds-transition-duration-slow) var(--ds-ease-in-out);margin-left:-4px;position:absolute;top:0;bottom:0}.pI_x6G_frame[data-dragging] .pI_x6G_handle,.pI_x6G_frame[data-rightbar-fullscreen],.pI_x6G_frame[data-rightbar-fullscreen] .pI_x6G_handle,.pI_x6G_frame[data-rightbar-instant],.pI_x6G_frame[data-rightbar-instant] .pI_x6G_handle{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_handle{transition:none}}.pI_x6G_rightbarCol{min-width:0;position:relative;overflow:visible}.pI_x6G_overlayLayer{z-index:20;pointer-events:none;position:absolute;inset:0}.pI_x6G_overlayLayer>*{pointer-events:auto}";
+		const css = ".pI_x6G_frame{background:var(--dsw-alias-bg-base);grid-template-rows:100%;height:100%;display:grid;position:relative;overflow:hidden}.pI_x6G_frame[data-animating]{transition:grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out)}.pI_x6G_frame[data-dragging]{transition:none}[data-windows-titlebar] .pI_x6G_frame{--dsh-windows-content-radius:16px;box-sizing:border-box;padding-top:var(--dsh-windows-titlebar-height);background:var(--dsw-specific-sidebar-fill);grid-template-rows:minmax(0,1fr)}[data-windows-titlebar] .pI_x6G_centerCol{background:var(--dsw-alias-bg-base);border-radius:var(--dsh-windows-content-radius) 0 0 0;corner-shape:round}[data-windows-titlebar] .pI_x6G_frame:before{content:\"\";height:var(--dsh-windows-titlebar-height);background:var(--dsw-specific-sidebar-fill);-webkit-app-region:drag;position:absolute;inset:0 0 auto}[data-windows-titlebar] .pI_x6G_sidebarCol{border-right:none}[data-windows-titlebar] .pI_x6G_handle{top:var(--dsh-windows-titlebar-height)}@media (prefers-reduced-motion:reduce){.pI_x6G_frame[data-animating]{transition:none}}.pI_x6G_sidebarCol{background:var(--dsw-specific-sidebar-fill);border-right:.5px solid var(--dsw-alias-border-l3);min-width:0;overflow:hidden}.pI_x6G_centerCol{flex-direction:column;min-width:0;display:flex;overflow:hidden}[data-platform=darwin] .pI_x6G_frame{background:0 0}html[data-platform=darwin]{--dsh-frame-top-clearance:48px}[data-platform=darwin] .pI_x6G_sidebarCol{background:linear-gradient(to bottom, #7a9bf01a, #7a9bf000 35%, #8f89b800 68%, #8f89b817), color-mix(in srgb, color-mix(in srgb, var(--dsw-specific-sidebar-fill) 97%, #7a9bf0) 40%, transparent);border-right:none}[data-platform=darwin] [data-ds-dark-theme] .pI_x6G_sidebarCol{background:linear-gradient(to bottom, #7a9bf014, #7a9bf000 35%, #8f89b800 68%, #8f89b812), color-mix(in srgb, var(--dsw-specific-sidebar-fill) 50%, transparent)}@media (prefers-reduced-transparency:reduce){[data-platform=darwin] .pI_x6G_sidebarCol,[data-platform=darwin] [data-ds-dark-theme] .pI_x6G_sidebarCol{background:color-mix(in srgb, var(--dsw-specific-sidebar-fill) 90%, transparent)}}[data-platform=darwin] .pI_x6G_centerCol{background:var(--dsw-alias-bg-base);border-left:.5px solid var(--dsw-alias-border-l3)}[data-platform=darwin] .pI_x6G_rightbarCol{background:var(--dsw-alias-bg-base)}[data-platform=darwin] [data-sidebar-collapsed] .pI_x6G_centerCol{border-left:none}[data-platform=darwin] .pI_x6G_frame[data-sidebar-collapsed]{--dsh-frame-leading-clearance:160px}[data-platform=darwin][data-fullscreen] .pI_x6G_frame[data-sidebar-collapsed]{--dsh-frame-leading-clearance:84px}[data-platform=darwin][data-fullscreen] .pI_x6G_leadingSeat{left:12px}.pI_x6G_leadingBand{pointer-events:none;-webkit-app-region:drag;height:52px;position:absolute;top:0;left:0;right:0}.pI_x6G_frame[data-panel-conversation]:has([data-conversation-tabs]) .pI_x6G_leadingBand{height:76px}.pI_x6G_leadingSeat{z-index:15;-webkit-app-region:no-drag;align-items:center;display:flex;position:absolute;top:11px;left:88px}.pI_x6G_handle{cursor:col-resize;z-index:11;touch-action:none;width:8px;margin-left:-4px;position:absolute;top:0;bottom:0}.pI_x6G_frame[data-animating] .pI_x6G_handle{transition:left var(--ds-transition-duration-slow) var(--ds-ease-in-out)}.pI_x6G_frame[data-dragging] .pI_x6G_handle,.pI_x6G_frame[data-rightbar-fullscreen],.pI_x6G_frame[data-rightbar-fullscreen] .pI_x6G_handle,.pI_x6G_frame[data-rightbar-instant],.pI_x6G_frame[data-rightbar-instant] .pI_x6G_handle{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_frame[data-animating] .pI_x6G_handle{transition:none}}.pI_x6G_rightbarCol{min-width:0;position:relative;overflow:visible}.pI_x6G_overlayLayer{z-index:20;pointer-events:none;position:absolute;inset:0}.pI_x6G_overlayLayer>*{pointer-events:auto}";
 		const tagId = "@deepseek-ai/dsh-client-ui-layout/AppFrame.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -81,6 +83,8 @@ window.__ModuleLoader__.load({
 			"centerCol": "pI_x6G_centerCol",
 			"frame": "pI_x6G_frame",
 			"handle": "pI_x6G_handle",
+			"leadingBand": "pI_x6G_leadingBand",
+			"leadingSeat": "pI_x6G_leadingSeat",
 			"overlayLayer": "pI_x6G_overlayLayer",
 			"rightbarCol": "pI_x6G_rightbarCol",
 			"sidebarCol": "pI_x6G_sidebarCol"
@@ -115,6 +119,23 @@ window.__ModuleLoader__.load({
 			return renderSlot("main", {}, { entryKey: usePanelInfo((info) => info.activePanelId) ?? "conversation" });
 		}
 		/**
+		* Marks the frame while the Conversation is selected — the deepened drag band
+		* (AppFrame.module.css) keys off the attribute. A DOM write from a child keeps
+		* the frame itself out of the panel subscription: selecting a panel must not
+		* re-render the columns.
+		*/
+		function ConversationMarker({ usePanelInfo, frameRef }) {
+			const conversationActive = usePanelInfo((info) => info.activePanelId === null);
+			(0, react.useLayoutEffect)(() => {
+				const frame = frameRef.current;
+				/* v8 ignore next -- the ref is attached by effect time: the marker renders inside the frame div. */
+				if (frame === null) return;
+				if (conversationActive) frame.setAttribute("data-panel-conversation", "");
+				else frame.removeAttribute("data-panel-conversation");
+			}, [conversationActive, frameRef]);
+			return null;
+		}
+		/**
 		* Right column grid item. Zero-width unless the occupant asked for a track; the
 		* occupant's panel is positioned against the column's right edge, which never
 		* moves, so it can hang over the centre when there is no track.
@@ -234,8 +255,10 @@ window.__ModuleLoader__.load({
 			const sidebarCollapsed = narrow ? !layoutInfo.narrowExpanded : layoutInfo.sidebar === 0;
 			const sidebarPreference = sidebarCollapsed ? 0 : layoutInfo.sidebar === 0 ? 280 : layoutInfo.sidebar;
 			const rightbarPreference = layoutInfo.rightbar ?? viewport * .45;
-			const normal = computeColumns(viewport, !layoutInfo.rightbarShown && narrow ? 0 : sidebarPreference, rightbarPreference);
-			const cols = computeColumns(viewport, sidebarPreference, layoutInfo.rightbarTrack ? rightbarPreference : 0);
+			const darwin = document.documentElement.dataset.platform === "darwin";
+			const collapsedWidth = darwin || document.documentElement.hasAttribute("data-windows-titlebar") ? 0 : 56;
+			const normal = computeColumns(viewport, !layoutInfo.rightbarShown && narrow ? 0 : sidebarPreference, rightbarPreference, collapsedWidth);
+			const cols = computeColumns(viewport, sidebarPreference, layoutInfo.rightbarTrack ? rightbarPreference : 0, collapsedWidth);
 			const colsRef = (0, react.useRef)(cols);
 			colsRef.current = cols;
 			const rightbarWidth = (0, react.useRef)(normal.rightbar);
@@ -243,6 +266,36 @@ window.__ModuleLoader__.load({
 			const sidebarBase = (0, react.useRef)(0);
 			const rightbarBase = (0, react.useRef)(0);
 			const [dragging, setDragging] = (0, react.useState)(false);
+			const [animating, setAnimating] = (0, react.useState)(0);
+			const trackToggle = `${sidebarCollapsed}:${layoutInfo.rightbarTrack}`;
+			const previousToggle = (0, react.useRef)(trackToggle);
+			const previousViewport = (0, react.useRef)(viewport);
+			(0, react.useLayoutEffect)(() => {
+				const viewportChanged = previousViewport.current !== viewport;
+				previousViewport.current = viewport;
+				if (previousToggle.current === trackToggle) return;
+				previousToggle.current = trackToggle;
+				if (viewportChanged) return;
+				setAnimating((token) => token + 1);
+			}, [trackToggle, viewport]);
+			(0, react.useEffect)(() => {
+				if (animating === 0) return;
+				const frame = frameRef.current;
+				/* v8 ignore next -- the ref is always attached by effect time: the frame div renders unconditionally. */
+				if (frame === null) return;
+				const settle = () => {
+					setAnimating(0);
+				};
+				const onTransitionEnd = (event) => {
+					if (event.target === frame && event.propertyName === "grid-template-columns") settle();
+				};
+				frame.addEventListener("transitionend", onTransitionEnd);
+				const timer = setTimeout(settle, 600);
+				return () => {
+					frame.removeEventListener("transitionend", onTransitionEnd);
+					clearTimeout(timer);
+				};
+			}, [animating]);
 			const onDragEnd = (0, react.useCallback)(() => {
 				setDragging(false);
 			}, []);
@@ -261,6 +314,7 @@ window.__ModuleLoader__.load({
 				actions.setRightbar(rightbarBase.current - dx);
 			}, [actions]);
 			const productTitle = "DeepSeek Harness";
+			const rightbarMax = cols.rightbar === 0 ? 0 : clampWidth(rightbarPreference, 300, viewport * RIGHTBAR_MAX_RATIO);
 			const sidebar = (0, react.useMemo)(() => renderSlot("sidebar", {
 				collapsed: sidebarCollapsed,
 				width: cols.sidebar
@@ -274,16 +328,30 @@ window.__ModuleLoader__.load({
 				renderSlot
 			}), [usePanelInfo, renderSlot]);
 			const overlays = (0, react.useMemo)(() => renderSlot("shell.overlay", {}), [renderSlot]);
+			const leading = (0, react.useMemo)(() => renderSlot("shell.leading", {}), [renderSlot]);
+			const leadingMounted = darwin && sidebarCollapsed;
 			return (0, react_jsx_runtime.jsxs)("div", {
 				ref: frameRef,
 				className: AppFrame_module_css_default.frame,
-				style: { gridTemplateColumns: `${cols.sidebar}px minmax(0, 1fr) ${cols.rightbar}px` },
+				style: {
+					...document.documentElement.hasAttribute("data-windows-titlebar") ? { "--dsh-windows-sidebar-width": `${cols.sidebar}px` } : {},
+					gridTemplateColumns: `${cols.sidebar}px minmax(${cols.rightbar === 0 ? 0 : 400}px, 1fr) minmax(0px, ${rightbarMax}px)`
+				},
 				"data-sidebar-collapsed": sidebarCollapsed || void 0,
 				"data-rightbar-collapsed": cols.rightbar === 0 || void 0,
 				"data-rightbar-fullscreen": layoutInfo.rightbarFullscreen || void 0,
 				"data-rightbar-instant": layoutInfo.rightbarInstant || void 0,
 				"data-dragging": dragging || void 0,
+				"data-animating": animating > 0 || void 0,
 				children: [
+					darwin && (0, react_jsx_runtime.jsx)("div", {
+						className: AppFrame_module_css_default.leadingBand,
+						"data-shell-leading-band": true
+					}),
+					(0, react_jsx_runtime.jsx)(ConversationMarker, {
+						usePanelInfo,
+						frameRef
+					}),
 					(0, react_jsx_runtime.jsx)(DocumentTitle, {
 						productTitle,
 						useSessions,
@@ -303,6 +371,11 @@ window.__ModuleLoader__.load({
 						"data-shell-overlay": true,
 						children: overlays
 					}),
+					leadingMounted && (0, react_jsx_runtime.jsx)("div", {
+						className: AppFrame_module_css_default.leadingSeat,
+						"data-shell-leading": true,
+						children: leading
+					}),
 					!sidebarCollapsed && (0, react_jsx_runtime.jsx)(DragHandle, {
 						side: "sidebar",
 						left: cols.sidebar,
@@ -441,6 +514,14 @@ window.__ModuleLoader__.load({
 		//#region lib/types/client/theme-presenter.js
 		/** Body attribute selecting the dark base palette in the token stylesheets. */
 		const DARK_ATTRIBUTE = "data-ds-dark-theme";
+		/**
+		* Root attribute publishing the theme source (`light`, `dark`, or `system`)
+		* for host shells that mirror it into native window chrome (the Electron
+		* preload forwards it to `nativeTheme.themeSource` so macOS vibrancy follows
+		* the app theme). `system` only when the preference is `system`; a fixed
+		* preference (including registered theme ids) publishes its resolved scheme.
+		*/
+		const THEME_SOURCE_ATTRIBUTE = "data-ds-theme-source";
 		/** Body variable carrying the user's content font size in px. */
 		const CONTENT_FONT_SIZE_VARIABLE = "--dsh-content-font-size";
 		/** Applies theme snapshots to the document; one instance per plugin fiber. */
@@ -466,6 +547,7 @@ window.__ModuleLoader__.load({
 			apply(snapshot) {
 				const scheme = snapshot.active.colorScheme;
 				document.documentElement.style.colorScheme = scheme;
+				document.documentElement.setAttribute(THEME_SOURCE_ATTRIBUTE, snapshot.preference === "system" ? "system" : scheme);
 				const body = document.body;
 				if (scheme === "dark") body.setAttribute(DARK_ATTRIBUTE, "");
 				else body.removeAttribute(DARK_ATTRIBUTE);
@@ -479,9 +561,13 @@ window.__ModuleLoader__.load({
 				this.themeColorMeta.content = getComputedStyle(body).backgroundColor;
 				if (!this.themeColorMeta.isConnected) document.head.append(this.themeColorMeta);
 			}
-			/** Retract root color-scheme, the palette attribute, token variables, the font-size axis, and the owned metadata node. */
+			/**
+			* Retract root color-scheme, the theme-source attribute, the palette
+			* attribute, token variables, the font-size axis, and the owned metadata node.
+			*/
 			dispose() {
 				document.documentElement.style.removeProperty("color-scheme");
+				document.documentElement.removeAttribute(THEME_SOURCE_ATTRIBUTE);
 				const body = document.body;
 				body.removeAttribute(DARK_ATTRIBUTE);
 				body.style.removeProperty(CONTENT_FONT_SIZE_VARIABLE);
@@ -500,7 +586,7 @@ window.__ModuleLoader__.load({
 		];
 		/**
 		* Client plugin body: provide ctx.layout, then one register() call — AppFrame
-		* into 'root' with the four child-slot declarations, the layout store seat,
+		* into 'root' with the five child-slot declarations, the layout store seat,
 		* and the shared root instance supplying commands and the panel-info source.
 		* @param ctx - client root context.
 		*/
@@ -540,6 +626,10 @@ window.__ModuleLoader__.load({
 						"shell.overlay": {
 							kind: "list",
 							scope: "root"
+						},
+						"shell.leading": {
+							kind: "single",
+							scope: "root"
 						}
 					},
 					store

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

@@ -1,7 +1,7 @@
 import type { PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots';
 import type { createLayoutStore } from './stores.ts';
 /** Full composed props: runtime share + child-slot render share + store share. */
-export type AppFrameProps = PropsRuntime<'root'> & PropsRenderSlots<'sidebar' | 'main' | 'rightbar' | 'shell.overlay'> & PropsStore<ReturnType<typeof createLayoutStore>> & PropsLocale<'common'>;
+export type AppFrameProps = PropsRuntime<'root'> & PropsRenderSlots<'sidebar' | 'main' | 'rightbar' | 'shell.overlay' | 'shell.leading'> & PropsStore<ReturnType<typeof createLayoutStore>> & PropsLocale<'common'>;
 /** The three-column frame (see module doc). */
 export declare function AppFrame({ useStore, useSessions, usePanelInfo, actions, renderSlot, t, }: AppFrameProps): import("react").JSX.Element;
 //# sourceMappingURL=AppFrame.d.ts.map

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

@@ -42,8 +42,10 @@ export declare function clampWidth(px: number, min: number, max: number): number
  * @param viewport - available frame width in px.
  * @param sidebar - sidebar width preference in px (0 = closed).
  * @param rightbar - requested right panel width in px (0 = no track).
+ * @param collapsedWidth - track width of the closed sidebar; the default keeps
+ *   the icon rail, 0 hides the column entirely (macOS desktop).
  * @returns actual widths after shrinking or removing the right track; only
  *   without that track may the center fall below its minimum, down to zero.
  */
-export declare function computeColumns(viewport: number, sidebar: number, rightbar: number): Columns;
+export declare function computeColumns(viewport: number, sidebar: number, rightbar: number, collapsedWidth?: number): Columns;
 //# sourceMappingURL=columns.d.ts.map

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

@@ -1,7 +1,7 @@
 /**
  * Layout plugin, browser half: one register() call contributes AppFrame into
  * the runtime's built-in 'root' slot and, in the same breath, declares the
- * four child slots (declaration = exclusive render authority), seats the
+ * five child slots (declaration = exclusive render authority), seats the
  * layout store (panel geometry), and wires the panel-action service face.
  * ctx.layout selects the main panel and controls column geometry; Session
  * selection belongs to the Session Controller. A second effect seats the theme
@@ -81,6 +81,23 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
             kind: 'list';
             scope: 'root';
         };
+        /**
+         * Window-chrome seat at the frame's top-left, over every main panel.
+         * Mounted only while the sidebar column is fully hidden (macOS desktop
+         * collapse; other platforms keep the rail), so the occupant can assume the
+         * frame edge is the window edge and the macOS traffic lights sit before it.
+         * OCCUPIED by ui-sidebar's reopen/New Session controls.
+         *
+         * While the seat is mounted the frame publishes
+         * `--dsh-frame-leading-clearance` (the inline inset the seat's band
+         * occupies, measured from the frame's left edge); a main panel whose
+         * content reaches the top-left corner pads by it so nothing lands under
+         * the lights or the controls.
+         */
+        'shell.leading': {
+            kind: 'single';
+            scope: 'root';
+        };
     }
 }
 /** Sidebar owner share: live column state from the frame's concession solve. */
@@ -106,7 +123,7 @@ export interface RightbarOwnerProps {
 export declare const inject: string[];
 /**
  * Client plugin body: provide ctx.layout, then one register() call — AppFrame
- * into 'root' with the four child-slot declarations, the layout store seat,
+ * into 'root' with the five child-slot declarations, the layout store seat,
  * and the shared root instance supplying commands and the panel-info source.
  * @param ctx - client root context.
  */

package/lib/types/client/theme-presenter.d.ts

@@ -3,7 +3,8 @@
  * document — `html { color-scheme }` for native UA chrome (scrollbars, form
  * controls), `body[data-ds-dark-theme]` for the token palette, the active
  * theme's alias-token overrides as inline CSS variables on body, the content
- * font-size axis (`--dsh-content-font-size`), and one presenter-owned
+ * font-size axis (`--dsh-content-font-size`), `html[data-ds-theme-source]`
+ * for native-chrome mirroring, and one presenter-owned
  * `meta[name="theme-color"]` for surrounding browser UI. Pure DOM writes, no
  * React involvement; the presenter only ever retracts what it wrote itself,
  * so foreign attributes, metadata, and inline styles survive.
@@ -11,6 +12,14 @@
 import type { ThemeSnapshot } from '@deepseek-ai/dsh-client-ui-theme/client';
 /** Body attribute selecting the dark base palette in the token stylesheets. */
 export declare const DARK_ATTRIBUTE = "data-ds-dark-theme";
+/**
+ * Root attribute publishing the theme source (`light`, `dark`, or `system`)
+ * for host shells that mirror it into native window chrome (the Electron
+ * preload forwards it to `nativeTheme.themeSource` so macOS vibrancy follows
+ * the app theme). `system` only when the preference is `system`; a fixed
+ * preference (including registered theme ids) publishes its resolved scheme.
+ */
+export declare const THEME_SOURCE_ATTRIBUTE = "data-ds-theme-source";
 /** Body variable carrying the user's content font size in px. */
 export declare const CONTENT_FONT_SIZE_VARIABLE = "--dsh-content-font-size";
 /** Applies theme snapshots to the document; one instance per plugin fiber. */
@@ -31,7 +40,10 @@ export declare class ThemePresenter {
      * @param snapshot - resolved theme snapshot from ctx.theme.
      */
     apply(snapshot: ThemeSnapshot): void;
-    /** Retract root color-scheme, the palette attribute, token variables, the font-size axis, and the owned metadata node. */
+    /**
+     * Retract root color-scheme, the theme-source attribute, the palette
+     * attribute, token variables, the font-size axis, and the owned metadata node.
+     */
     dispose(): void;
 }
 //# sourceMappingURL=theme-presenter.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-layout",
   "description": "Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)",
-  "version": "0.1.6-alpha.1",
+  "version": "0.1.7-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,19 +38,19 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.2"
+    "@deepseek-ai/cordis": "^4.0.3"
   },
   "devDependencies": {
     "@types/react": "~18.3.1",
     "react": "^18.2.0",
-    "@deepseek-ai/dsh-brand": "^0.1.6-alpha.1",
-    "@deepseek-ai/dsh-client-locale": "^0.1.6-alpha.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.6-alpha.1",
-    "@deepseek-ai/dsh-client-ui-session": "^0.1.6-alpha.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.6-alpha.1",
-    "@deepseek-ai/dsh-client-store": "^0.1.6-alpha.1",
-    "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-client-ui-theme": "^0.1.6-alpha.1"
+    "@deepseek-ai/dsh-brand": "^0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-store": "^0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.7-alpha.1",
+    "@deepseek-ai/cordis": "^4.0.3",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.1.7-alpha.1"
   },
   "files": [
     "lib/index.js",