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

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: 582c5fbea271caf0f45f9ee22c10d21f7412bf38
+README.zh.md: 14e3f429284c5c3a519fa47e1156a510b7271f91

package/README.md

@@ -29,6 +29,8 @@ 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.
 
+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.

package/README.zh.md

@@ -29,6 +29,8 @@ kind: "package-reference"
 
 全局面板占据 root 作用域的 `main` keyed slot；`conversation` 是为会话界面保留的 key。`ctx.layout.selectPanel(id)` 选中已注册面板，`null` 则选中会话界面，但不改变当前会话。默认组合不注册任何全局面板。
 
+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（资源释放）时，它会连同其他全局写入一起移除自己的元数据节点。

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);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}[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{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}[data-platform=darwin] .pI_x6G_sidebarCol{background:color-mix(in srgb, var(--dsw-specific-sidebar-fill) 60%, transparent);border-right:none}[data-platform=darwin] .pI_x6G_centerCol{background:var(--dsw-alias-bg-base);border-left:.5px solid var(--dsw-alias-border-l3)}[data-platform=darwin] [data-sidebar-collapsed] .pI_x6G_centerCol{border-left:none}.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 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");
@@ -234,8 +236,9 @@ 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 collapsedWidth = document.documentElement.dataset.platform === "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);
@@ -277,7 +280,10 @@ window.__ModuleLoader__.load({
 			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(0, 1fr) ${cols.rightbar}px`
+				},
 				"data-sidebar-collapsed": sidebarCollapsed || void 0,
 				"data-rightbar-collapsed": cols.rightbar === 0 || void 0,
 				"data-rightbar-fullscreen": layoutInfo.rightbarFullscreen || void 0,
@@ -441,6 +447,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 +480,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 +494,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);

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/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.6-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -43,14 +43,14 @@
   "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.6-alpha.2",
+    "@deepseek-ai/dsh-client-locale": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-store": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.6-alpha.2",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.1.6-alpha.2",
+    "@deepseek-ai/cordis": "^4.0.2"
   },
   "files": [
     "lib/index.js",