@crazx/dsh-client-ui-layout 0.1.5-alpha.1.zw.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DeepSeek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.i18n.yaml

@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# 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: 0e353e21f39ba8a84e661f1c540db2c2424bcbfa
+README.zh.md: 16471fdabb46bbfb35158ef85aa2544db4ceae93

package/README.md

@@ -0,0 +1,92 @@
+---
+description: "Shell layout for the Web GUI: the three-column AppFrame whose right column is a track for an edge-anchored panel, the panel-geometry service, and theme presentation; for users and maintainers of the window chrome."
+kind: "package-reference"
+---
+
+# @deepseek-ai/dsh-client-ui-layout
+
+English | [中文](README.zh.md)
+
+## Summary
+
+This package provides the Web GUI's three-column AppFrame, edge-column widths, and `ctx.layout` presentation control. The right column concedes space before the center; its occupant renders fullscreen while the frame retains the wide-screen track underneath. The theme presenter owns color scheme, alias tokens, content font size, and document metadata. Layout state resets on reload.
+
+## Table of Contents
+
+- [Use this package](#use-this-package)
+- [Understand the implementation](#understand-the-implementation)
+- [Further Exploration](#further-exploration)
+- [Model Experience](#model-experience)
+- [Known Limitations and Deferred Work](#known-limitations-and-deferred-work)
+- [Dev Note](#dev-note)
+
+-----
+
+<a id="use-this-package"></a>
+## Use this package
+
+The root slot composes the sidebar, conversation, and right column. The sidebar spans 264–420px, defaults to 280px, and retains a 56px rail when collapsed; below 1024px it collapses automatically, and opening the right panel collapses a manually expanded sidebar. The right panel first opens at 45% of the viewport, then retains the user's pixel preference, capped at 70%. To protect 400px for the center, the frame first reduces the right panel to 300px, then reports insufficient room so its occupant closes it, and only then compresses the center further. Dragging has no transition delay; the right handle is absent while closed or fullscreen.
+
+### 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.
+
+-----
+
+<a id="understand-the-implementation"></a>
+## Understand the implementation
+
+<details>
+<summary>Implementation internals — click to expand</summary>
+
+One registration declares four child slots and binds `ctx.layout` methods `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. The store owns the single frame-width measurement, width preferences, and the occupant's presentation report. 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 always mounts the conversation and right columns; a connected Session renders through `SessionProvider`, and without one the right column is an empty zero-width track. It projects the selected Session title over the build-configured product title or the localized `common.brand.localBuild` fallback, so locale revisions update document metadata with the root entry. 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>
+
+-----
+
+<a id="further-exploration"></a>
+## Further Exploration
+
+Read these pages when the layout surface is not enough. They move from the frame to the columns it renders and the theme it presents.
+
+- [ui-sidebar](../ui-sidebar/README.md) — occupies the `sidebar` column and its seats.
+- [ui-conversation](../ui-conversation/README.md) — occupies the `conversation` column.
+- [ui-sidebar-right](../ui-sidebar-right/README.md) — occupies the `rightbar` column with one docking surface per session.
+- [ui-theme](../ui-theme/README.md) — the theme seam whose resolved snapshots the presenter consumes.
+- [Web client architecture](../../../.agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.md) — how browser plugin rows load and register slots.
+
+-----
+
+<a id="model-experience"></a>
+## Model Experience
+
+None, as the layout shell manages browser viewing state; nothing here reaches a model request.
+
+#### KV Cache effect
+
+None; this package neither assembles nor sends a provider request.
+
+## Known Limitations and Deferred Work
+
+<a id="known-limitations-and-deferred-work"></a>
+
+
+These limits define the current layout behavior. They are current package constraints, not a general window-manager comparison or a task backlog.
+
+- **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.
+- **No scroll anchoring during squeeze reflow** — layout changes may move the reader's viewport.
+
+<a id="dev-note"></a>
+### Dev Note
+
+<details>
+<summary>Working context for maintainers — click to expand</summary>
+
+None.
+
+</details>
+
+**Runtime invariant:** No companion is published. The shell viewing-state store behind ctx.layout emits no cordis events; clamp and track sequencing is asserted directly by this package's columns and service specs.

package/README.zh.md

@@ -0,0 +1,92 @@
+---
+description: "Web GUI 的外壳布局：三栏 AppFrame——其右栏是贴边面板的轨道——面板几何服务与主题呈现；供窗口外观的用户与维护者阅读。"
+kind: "package-reference"
+---
+
+# @deepseek-ai/dsh-client-ui-layout
+
+[English](README.md) | 中文
+
+## 概述
+
+本包提供 Web GUI 的三栏 AppFrame、左右栏宽度与 `ctx.layout` 呈现控制。右栏先让步以保护中栏空间，全屏由占用方呈现，框架保留宽屏底层轨道。主题呈现器负责配色、别名 token、正文字号与 document 元数据；布局状态在刷新后重置。
+
+## 目录
+
+- [使用本包](#use-this-package)
+- [理解实现](#understand-the-implementation)
+- [进一步探索](#further-exploration)
+- [模型体验](#model-experience)
+- [已知限制与延期工作](#known-limitations-and-deferred-work)
+- [开发备注](#dev-note)
+
+-----
+
+<a id="use-this-package"></a>
+## 使用本包
+
+本插件在 root slot 组合侧栏、会话与右栏。左栏为264～420px，默认280px，收起后保留56px；窗口低于1024px时自动收起，打开右栏也会收起手动展开的左栏。右栏首次打开使用窗口宽度的45%，之后保留用户像素偏好，上限为70%；中栏不足400px时先把右栏压到300px，仍不足则通知占用方收起，最后才继续压缩中栏。拖拽跟手且无过渡延迟，关闭或全屏时不显示右栏拖拽区。
+
+### 主题呈现
+
+呈现器消费解析后的主题快照，并投影到 document：`html { color-scheme }` 驱动原生 UA 控件，依据当前配色方案设置 `body[data-ds-dark-theme]`，把主题的别名 token 与 `--dsh-content-font-size` 设为 body 上的内联变量，并持有一个 `<meta name="theme-color">`，其内容随计算后的 body 背景色更新。释放呈现器时，它会连同其他全局写入一起移除自己的元数据节点。
+
+-----
+
+<a id="understand-the-implementation"></a>
+## 理解实现
+
+<details>
+<summary>实现细节——点击展开</summary>
+
+一次注册声明四个子slot并绑定 `ctx.layout` 的 `toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。store持有唯一的frame宽度测量、左右栏偏好及占用方报告的呈现状态。`rightbar` 的owner参数为实际 `width`、`viewportWidth` 与普通呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 始终挂载会话与右栏；已连接 Session 经 `SessionProvider` 渲染，没有 Session 时右栏是一条空的零宽轨道。它把所选 Session 标题投影到构建配置的产品标题或本地化 `common.brand.localBuild` 回退值之上，因此 locale revision 会随根 entry 一起更新文档元数据。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号与 token 变量，再把渲染出的背景测量为唯一的颜色依据。 全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列宽。 退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
+
+</details>
+
+-----
+
+<a id="further-exploration"></a>
+## 进一步探索
+
+当布局面不够用时阅读以下页面。它们从框架进入它所渲染的栏与它所呈现的主题。
+
+- [ui-sidebar](../ui-sidebar/README.zh.md)——占据 `sidebar` 栏及其座位。
+- [ui-conversation](../ui-conversation/README.zh.md)——占据 `conversation` 栏。
+- [ui-sidebar-right](../ui-sidebar-right/README.zh.md)——以每会话一个停靠面占据 `rightbar` 栏。
+- [ui-theme](../ui-theme/README.zh.md)——呈现器消费其解析快照的主题 seam。
+- [Web 客户端架构](../../../.agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.zh.md)——浏览器插件行如何加载并注册槽位。
+
+-----
+
+<a id="model-experience"></a>
+## 模型体验
+
+无。布局外壳管理浏览器查看状态；这里没有任何内容进入模型请求。
+
+#### KV Cache 影响
+
+无；该包既不组装也不发送提供方请求。
+
+## 已知限制与延期工作
+
+<a id="known-limitations-and-deferred-work"></a>
+
+
+这些限制界定了当前布局行为。它们是当前包约束，不是通用窗口管理器对比或任务积压。
+
+- **面板几何是瞬时状态**——重新加载会恢复侧栏默认值并隐藏右侧面板；每个拖出的宽度都是一份框架级偏好，不是按 Session 的事实。
+- **极窄窗口**——右栏关闭后，中栏仍可能小于400px；左侧56px控制栏保留。
+- **轨道与面板沿同一条曲线运动**——框架的轨道过渡和占位方的滑入读取同一组时长与缓动变量；占位方若自用一套，挤压时面板边缘就会与对话边缘脱开。
+- **挤压重排期间无滚动锚定**——布局变化可能移动读者的视口。
+
+<a id="dev-note"></a>
+### 开发备注
+
+<details>
+<summary>维护者的工作上下文——点击展开</summary>
+
+无。
+
+</details>
+
+**运行时不变式：** 不发布伴生入口。`ctx.layout` 后的 viewing-state store 不发出 Cordis 事件；clamp 与轨道的时序由本包的 columns 与 service 规格直接断言。

package/lib/client.js

@@ -0,0 +1,560 @@
+window.__ModuleLoader__.load({
+	id: "@deepseek-ai/dsh-client-ui-layout",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
+		let _deepseek_ai_dsh_client_store = require("@deepseek-ai/dsh-client-store");
+		/** Viewport width below which the sidebar auto-collapses to the rail (deepsuite
+		* LG breakpoint); a manual toggle below it re-expands over the squeezed center
+		* (stores.ts narrowExpanded). */
+		const SIDEBAR_AUTO_COLLAPSE = 1024;
+		/** Maximum normal right panel width as a fraction of the frame. */
+		const RIGHTBAR_MAX_RATIO = .7;
+		/** First-open right panel preference as a fraction of the frame. */
+		const RIGHTBAR_DEFAULT_RATIO = .45;
+		/**
+		* Clamp a panel width into its contract range.
+		* @param px - requested width.
+		* @param min - range lower bound.
+		* @param max - range upper bound.
+		* @returns the clamped width.
+		*/
+		function clampWidth(px, min, max) {
+			return Math.min(max, Math.max(min, Math.round(px)));
+		}
+		/**
+		* Solve the three column widths for one viewport frame.
+		* @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).
+		* @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);
+			const available = viewport - s - 400;
+			const r = rightbar === 0 || available < 300 ? 0 : Math.min(available, clampWidth(rightbar, 300, viewport * RIGHTBAR_MAX_RATIO));
+			return {
+				sidebar: s,
+				center: Math.max(0, viewport - s - r),
+				rightbar: r
+			};
+		}
+		//#endregion
+		//#region lib/types/client/DocumentTitle.js
+		/**
+		* Project the selected durable session title into the browser title and
+		* restore the build-selected product title when unmounted.
+		* @param props - Selected session title projection.
+		* @returns No rendered content.
+		*/
+		function DocumentTitle({ title, productTitle }) {
+			(0, react.useEffect)(() => {
+				document.title = title === void 0 ? productTitle : `${title} — ${productTitle}`;
+				return () => {
+					document.title = productTitle;
+				};
+			}, [productTitle, title]);
+			return null;
+		}
+		//#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:auto minmax(0,1fr);display:grid;position:relative;overflow:hidden}.pI_x6G_toolbarRow{grid-area:1/1/auto/-1;min-width:0;min-height:0}.pI_x6G_sidebarCol{background:var(--dsw-specific-sidebar-fill);border-right:.5px solid var(--dsw-alias-border-l3);grid-row:2;min-width:0;overflow:hidden}.pI_x6G_centerCol{flex-direction:column;grid-row:2;min-width:0;display:flex;overflow:hidden}.pI_x6G_frame[data-dragging]{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_frame{transition: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{grid-row:2;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");
+			tag.dataset.plugin = "@deepseek-ai/dsh-client-ui-layout";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var AppFrame_module_css_default = {
+			"centerCol": "pI_x6G_centerCol",
+			"frame": "pI_x6G_frame",
+			"handle": "pI_x6G_handle",
+			"overlayLayer": "pI_x6G_overlayLayer",
+			"rightbarCol": "pI_x6G_rightbarCol",
+			"sidebarCol": "pI_x6G_sidebarCol",
+			"toolbarRow": "pI_x6G_toolbarRow"
+		};
+		//#endregion
+		//#region lib/types/client/AppFrame.js
+		/**
+		* Three-column shell frame, registered into the built-in 'root' slot (the web
+		* shell renders only 'root'). Owns the grid tracks (sidebar | center |
+		* rightbar), the drag handles (pointer capture + rAF throttle), the column
+		* solve (columns.ts), and the child-slot render decisions: the sidebar slot
+		* renders HERE with live parameters from that solve, and the session-aware
+		* occupants render in fixed column positions; the strict right-column entry
+		* gates itself on current-session availability while the session-maybe
+		* conversation retains identity.
+		*
+		* The right column is a track, not a box: its occupant draws its panel anchored
+		* to the frame's right edge at the resolved normal width, and the
+		* track only decides whether the centre makes room for it. The occupant reports
+		* shown/track/fullscreen through `ctx.layout`; fullscreen keeps the reported
+		* track but hides the outer resize handle. Everything arrives through the framework
+		* shares — zero cordis or framework imports, zero self-made hooks.
+		*/
+		/** Center column grid item (session-body building block). */
+		function CenterColumn(props) {
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: AppFrame_module_css_default.centerCol,
+				children: props.children
+			});
+		}
+		/**
+		* 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.
+		*/
+		function RightbarColumn(props) {
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: AppFrame_module_css_default.rightbarCol,
+				"data-rightbar-col": true,
+				children: props.children
+			});
+		}
+		/**
+		* One drag handle: pointer capture, rAF-throttled dx reports against the drag-start origin.
+		* `side` keys the hover-reveal CSS to the owning column.
+		*/
+		function DragHandle(props) {
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const origin = (0, react.useRef)(0);
+			const latest = (0, react.useRef)(0);
+			const frame = (0, react.useRef)(null);
+			const capture = (0, react.useRef)(null);
+			const callbacks = (0, react.useRef)({
+				onStart: props.onStart,
+				onDrag: props.onDrag,
+				onEnd: props.onEnd
+			});
+			callbacks.current = {
+				onStart: props.onStart,
+				onDrag: props.onDrag,
+				onEnd: props.onEnd
+			};
+			const endDrag = (0, react.useCallback)(() => {
+				const active = capture.current;
+				if (active === null) return;
+				capture.current = null;
+				if (frame.current !== null) {
+					cancelAnimationFrame(frame.current);
+					frame.current = null;
+				}
+				if (active.element.hasPointerCapture(active.id)) active.element.releasePointerCapture(active.id);
+				setDragging(false);
+				callbacks.current.onEnd();
+			}, []);
+			(0, react.useEffect)(() => endDrag, [endDrag]);
+			const onPointerDown = (0, react.useCallback)((e) => {
+				if (e.button !== 0 || capture.current !== null) return;
+				e.preventDefault();
+				e.currentTarget.setPointerCapture(e.pointerId);
+				capture.current = {
+					element: e.currentTarget,
+					id: e.pointerId
+				};
+				origin.current = e.clientX;
+				latest.current = e.clientX;
+				callbacks.current.onStart();
+				setDragging(true);
+			}, []);
+			const onPointerMove = (0, react.useCallback)((e) => {
+				if (capture.current?.id !== e.pointerId) return;
+				latest.current = e.clientX;
+				frame.current ??= requestAnimationFrame(() => {
+					frame.current = null;
+					callbacks.current.onDrag(latest.current - origin.current);
+				});
+			}, []);
+			const onPointerUp = (0, react.useCallback)((e) => {
+				if (capture.current?.id !== e.pointerId) return;
+				callbacks.current.onDrag(e.clientX - origin.current);
+				endDrag();
+			}, [endDrag]);
+			const onPointerCancel = (0, react.useCallback)((e) => {
+				if (capture.current?.id === e.pointerId) endDrag();
+			}, [endDrag]);
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: AppFrame_module_css_default.handle,
+				style: { left: props.left },
+				"data-side": props.side,
+				"data-dragging": dragging || void 0,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onPointerCancel,
+				onLostPointerCapture: onPointerCancel
+			});
+		}
+		/** The three-column frame (see module doc). */
+		function AppFrame({ useStore, useSessions, actions, renderSlot, SessionProvider, t }) {
+			const panels = useStore((s) => s);
+			const documentTitle = useSessions((s) => {
+				const current = s.current;
+				return current === void 0 ? void 0 : s.byId[current]?.title;
+			});
+			const frameRef = (0, react.useRef)(null);
+			const viewport = panels.viewportWidth;
+			(0, react.useLayoutEffect)(() => {
+				const el = frameRef.current;
+				/* v8 ignore next -- the ref is always attached by effect time: the frame div renders unconditionally. */
+				if (el === null) return;
+				let raf = null;
+				let disposed = false;
+				const measure = () => {
+					const width = el.getBoundingClientRect().width;
+					if (width > 0) actions.setViewportWidth(width);
+				};
+				measure();
+				const observer = new ResizeObserver(() => {
+					if (disposed) return;
+					raf ??= requestAnimationFrame(() => {
+						raf = null;
+						measure();
+					});
+				});
+				observer.observe(el);
+				return () => {
+					disposed = true;
+					observer.disconnect();
+					if (raf !== null) cancelAnimationFrame(raf);
+				};
+			}, [actions]);
+			const narrow = viewport < SIDEBAR_AUTO_COLLAPSE;
+			const sidebarCollapsed = narrow ? !panels.narrowExpanded : panels.sidebar === 0;
+			const sidebarPreference = sidebarCollapsed ? 0 : panels.sidebar === 0 ? 280 : panels.sidebar;
+			const rightbarPreference = panels.rightbar ?? viewport * .45;
+			const normal = computeColumns(viewport, !panels.rightbarShown && narrow ? 0 : sidebarPreference, rightbarPreference);
+			const cols = computeColumns(viewport, sidebarPreference, panels.rightbarTrack ? rightbarPreference : 0);
+			const colsRef = (0, react.useRef)(cols);
+			colsRef.current = cols;
+			const rightbarWidth = (0, react.useRef)(normal.rightbar);
+			rightbarWidth.current = normal.rightbar;
+			const sidebarBase = (0, react.useRef)(0);
+			const rightbarBase = (0, react.useRef)(0);
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const onDragEnd = (0, react.useCallback)(() => {
+				setDragging(false);
+			}, []);
+			const onSidebarStart = (0, react.useCallback)(() => {
+				sidebarBase.current = colsRef.current.sidebar;
+				setDragging(true);
+			}, []);
+			const onSidebarDrag = (0, react.useCallback)((dx) => {
+				actions.setSidebar(sidebarBase.current + dx);
+			}, [actions]);
+			const onRightbarStart = (0, react.useCallback)(() => {
+				rightbarBase.current = rightbarWidth.current;
+				setDragging(true);
+			}, []);
+			const onRightbarDrag = (0, react.useCallback)((dx) => {
+				actions.setRightbar(rightbarBase.current - dx);
+			}, [actions]);
+			const productTitle = {}.DSH_CLIENT_TITLE ?? t("brand.localBuild");
+			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` },
+				"data-sidebar-collapsed": sidebarCollapsed || void 0,
+				"data-rightbar-collapsed": cols.rightbar === 0 || void 0,
+				"data-rightbar-fullscreen": panels.rightbarFullscreen || void 0,
+				"data-rightbar-instant": panels.rightbarInstant || void 0,
+				"data-dragging": dragging || void 0,
+				children: [
+					(0, react_jsx_runtime.jsx)(DocumentTitle, {
+						productTitle,
+						...documentTitle === void 0 ? {} : { title: documentTitle }
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: AppFrame_module_css_default.toolbarRow,
+						"data-shell-toolbar-row": true,
+						children: renderSlot("shell.toolbar", {})
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: AppFrame_module_css_default.sidebarCol,
+						children: renderSlot("sidebar", {
+							collapsed: sidebarCollapsed,
+							width: cols.sidebar
+						})
+					}),
+					(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(CenterColumn, { children: renderSlot("conversation", {}) }), (0, react_jsx_runtime.jsx)(RightbarColumn, { children: (0, react_jsx_runtime.jsx)(SessionProvider, { children: renderSlot("rightbar", {
+						width: normal.rightbar,
+						viewportWidth: viewport,
+						canShow: normal.rightbar > 0
+					}) }) })] }),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: AppFrame_module_css_default.overlayLayer,
+						"data-shell-overlay": true,
+						children: renderSlot("shell.overlay", {})
+					}),
+					!sidebarCollapsed && (0, react_jsx_runtime.jsx)(DragHandle, {
+						side: "sidebar",
+						left: cols.sidebar,
+						onStart: onSidebarStart,
+						onDrag: onSidebarDrag,
+						onEnd: onDragEnd
+					}),
+					panels.rightbarShown && !panels.rightbarFullscreen && normal.rightbar > 0 && (0, react_jsx_runtime.jsx)(DragHandle, {
+						side: "rightbar",
+						left: viewport - normal.rightbar,
+						onStart: onRightbarStart,
+						onDrag: onRightbarDrag,
+						onEnd: onDragEnd
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region lib/types/client/stores.js
+		/**
+		* Root-owned frame measurement, panel preferences, and presentation reports.
+		* The registration supplies a fresh store and binds its actions to ctx.layout.
+		*/
+		/**
+		* Create the layout panel store handle. For the sidebar the preference IS the
+		* width, so closing it forgets its drag width — reopening restores the contract
+		* default. The right panel initializes at 45% of the frame on first opening
+		* and keeps that px preference across resizes and close. Drag writes clamp to
+		* the current frame's range. Narrow sidebar toggles change only the expansion
+		* override; opening the right panel clears that override.
+		* @returns the store handle (spec + type + identity + factory in one).
+		*/
+		function createLayoutStore() {
+			return (0, _deepseek_ai_dsh_client_store.defineStore)({
+				init: () => ({
+					sidebar: 280,
+					viewportWidth: window.innerWidth,
+					narrowExpanded: false,
+					rightbar: null,
+					rightbarShown: false,
+					rightbarTrack: false,
+					rightbarFullscreen: false,
+					rightbarInstant: false
+				}),
+				actions: {
+					setSidebar: (d, px) => {
+						d.rightbarInstant = false;
+						d.sidebar = clampWidth(px, 264, 420);
+					},
+					toggleSidebar: (d) => {
+						d.rightbarInstant = false;
+						if (d.viewportWidth < 1024) d.narrowExpanded = !d.narrowExpanded;
+						else d.sidebar = d.sidebar === 0 ? 280 : 0;
+					},
+					setViewportWidth: (d, width) => {
+						if (d.viewportWidth === width) return;
+						d.rightbarInstant = false;
+						if (d.viewportWidth < 1024 !== width < 1024) d.narrowExpanded = false;
+						d.viewportWidth = width;
+					},
+					setRightbar: (d, px) => {
+						d.rightbarInstant = false;
+						d.rightbar = clampWidth(px, 300, Math.max(300, d.viewportWidth * RIGHTBAR_MAX_RATIO));
+					},
+					openRightbar: (d, track, fullscreen) => {
+						if (!d.rightbarShown || d.rightbarTrack !== track || d.rightbarFullscreen !== fullscreen) d.rightbarInstant = d.rightbarFullscreen && !fullscreen;
+						if (!d.rightbarShown && d.viewportWidth < 1024) d.narrowExpanded = false;
+						d.rightbar ??= Math.max(300, Math.round(d.viewportWidth * RIGHTBAR_DEFAULT_RATIO));
+						d.rightbarShown = true;
+						d.rightbarTrack = track;
+						d.rightbarFullscreen = fullscreen;
+					},
+					closeRightbar: (d) => {
+						if (d.rightbarShown) d.rightbarInstant = d.rightbarFullscreen;
+						d.rightbarShown = false;
+						d.rightbarTrack = false;
+						d.rightbarFullscreen = false;
+					}
+				}
+			});
+		}
+		//#endregion
+		//#region lib/types/client/service.js
+		/** Cross-plugin panel-action face (ctx.layout). */
+		var LayoutController = class {
+			#panels;
+			#toolbarHosts = null;
+			#toolbarListeners = /* @__PURE__ */ new Set();
+			/**
+			* Adopt the root entry's bound store actions. Called from the root
+			* registration's inject hook (a sanctioned assembly side effect), so the
+			* face is live from the entry's first render; on entry re-register the
+			* fresh actions overwrite the stale set.
+			* @param actions - bound actions of the entry's layout store instance.
+			*/
+			attachPanels(actions) {
+				this.#panels = actions;
+			}
+			/** Toggle the sidebar panel (closed ⟷ contract default width). */
+			toggleSidebar() {
+				this.#require().toggleSidebar();
+			}
+			/** Report the right panel's track and fullscreen presentation. */
+			openRightbar(track, fullscreen) {
+				this.#require().openRightbar(track, fullscreen);
+			}
+			/** Report the right panel as hidden: no track, no handle. */
+			closeRightbar() {
+				this.#require().closeRightbar();
+			}
+			/** Publish the desktop toolbar's host pair (identity replaces wholesale). */
+			setToolbarHosts(hosts) {
+				this.#toolbarHosts = hosts;
+				for (const listener of this.#toolbarListeners) listener(hosts);
+			}
+			/** Release the pair only when the registry still holds THIS caller's pair. */
+			releaseToolbarHosts(hosts) {
+				if (this.#toolbarHosts !== hosts) return;
+				this.#toolbarHosts = null;
+				for (const listener of this.#toolbarListeners) listener(null);
+			}
+			/** The current host pair, or null while no desktop toolbar is mounted. */
+			getToolbarHosts() {
+				return this.#toolbarHosts;
+			}
+			/** Subscribe to toolbar-host changes; the header portals while non-null. */
+			onToolbarHosts(listener) {
+				this.#toolbarListeners.add(listener);
+				return () => {
+					this.#toolbarListeners.delete(listener);
+				};
+			}
+			#require() {
+				if (this.#panels === void 0) throw new Error("layout: panel actions not wired (root entry not mounted)");
+				return this.#panels;
+			}
+		};
+		//#endregion
+		//#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";
+		/** 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. */
+		var ThemePresenter = class {
+			/** Token names this presenter wrote in the last apply (its retraction set). */
+			appliedTokens = [];
+			/** The single metadata node this presenter inserts and removes. */
+			themeColorMeta;
+			/** Create the presenter-owned metadata node before the first snapshot arrives. */
+			constructor() {
+				this.themeColorMeta = document.createElement("meta");
+				this.themeColorMeta.name = "theme-color";
+			}
+			/**
+			* Project a snapshot onto the document: set root `color-scheme` and the body
+			* palette attribute from `active.colorScheme` (never the id — `system` is
+			* resolved upstream), publish the content font-size axis, then replace the
+			* previously applied token variables with `active.tokens`. Browser
+			* theme-color metadata follows the computed body background after those
+			* writes, so the rendered palette remains the color authority.
+			* @param snapshot - resolved theme snapshot from ctx.theme.
+			*/
+			apply(snapshot) {
+				const scheme = snapshot.active.colorScheme;
+				document.documentElement.style.colorScheme = scheme;
+				const body = document.body;
+				if (scheme === "dark") body.setAttribute(DARK_ATTRIBUTE, "");
+				else body.removeAttribute(DARK_ATTRIBUTE);
+				body.style.setProperty(CONTENT_FONT_SIZE_VARIABLE, `${snapshot.fontSize}px`);
+				for (const name of this.appliedTokens) body.style.removeProperty(name);
+				this.appliedTokens = [];
+				for (const [name, value] of Object.entries(snapshot.active.tokens)) {
+					body.style.setProperty(name, value);
+					this.appliedTokens.push(name);
+				}
+				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. */
+			dispose() {
+				document.documentElement.style.removeProperty("color-scheme");
+				const body = document.body;
+				body.removeAttribute(DARK_ATTRIBUTE);
+				body.style.removeProperty(CONTENT_FONT_SIZE_VARIABLE);
+				for (const name of this.appliedTokens) body.style.removeProperty(name);
+				this.appliedTokens = [];
+				this.themeColorMeta.remove();
+			}
+		};
+		//#endregion
+		//#region lib/types/client/index.js
+		/** Required services (cordis fiber inject — the loader passes all module exports as an object plugin). */
+		const inject = [
+			"slots",
+			"theme",
+			"locale"
+		];
+		/**
+		* Client plugin body: provide ctx.layout, then one register() call — AppFrame
+		* into 'root' with the four child-slot declarations, the layout store seat,
+		* and the inject hook that hands the store's bound actions to the service.
+		* @param ctx - client root context.
+		*/
+		function apply(ctx) {
+			const layout = new LayoutController();
+			ctx.effect(() => {
+				const disposeService = ctx.reflect.provide("layout", layout);
+				const disposeRegistration = ctx.slots.register({
+					name: "root",
+					locale: "common",
+					children: {
+						"shell.toolbar": {
+							kind: "single",
+							scope: "session-maybe"
+						},
+						"sidebar": {
+							kind: "single",
+							scope: "root"
+						},
+						"conversation": {
+							kind: "single",
+							scope: "session-maybe"
+						},
+						"rightbar": {
+							kind: "single",
+							scope: "session"
+						},
+						"shell.overlay": {
+							kind: "list",
+							scope: "root"
+						}
+					},
+					store: createLayoutStore,
+					inject: (actions) => {
+						layout.attachPanels(actions);
+						return {};
+					}
+				}, AppFrame);
+				return () => {
+					disposeRegistration();
+					disposeService();
+				};
+			}, "ui-layout: service + root registration");
+			ctx.effect(() => {
+				const presenter = new ThemePresenter();
+				presenter.apply(ctx.theme.getTheme());
+				const off = ctx.on("theme/change", (snapshot) => {
+					presenter.apply(snapshot);
+				});
+				return () => {
+					off();
+					presenter.dispose();
+				};
+			}, "ui-layout: theme presenter");
+		}
+		//#endregion
+		exports.LayoutController = LayoutController;
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map

package/lib/index.js

@@ -0,0 +1,6 @@
+//#region lib/types/index.js
+/** Host loader entry for the browser-only layout plugin. */
+/** Provides no host-side behavior. */
+function apply() {}
+//#endregion
+export { apply };

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

@@ -0,0 +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<'shell.toolbar' | 'sidebar' | 'conversation' | 'rightbar' | 'shell.overlay'> & PropsStore<ReturnType<typeof createLayoutStore>> & PropsLocale<'common'>;
+/** The three-column frame (see module doc). */
+export declare function AppFrame({ useStore, useSessions, actions, renderSlot, SessionProvider, t, }: AppFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=AppFrame.d.ts.map

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

@@ -0,0 +1,15 @@
+/** Props for the browser title projection. */
+export interface DocumentTitleProps {
+    /** Durable title of the selected session, or undefined for the product title. */
+    title?: string;
+    /** Build-configured or localized product title. */
+    productTitle: string;
+}
+/**
+ * Project the selected durable session title into the browser title and
+ * restore the build-selected product title when unmounted.
+ * @param props - Selected session title projection.
+ * @returns No rendered content.
+ */
+export declare function DocumentTitle({ title, productTitle }: DocumentTitleProps): null;
+//# sourceMappingURL=DocumentTitle.d.ts.map

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

@@ -0,0 +1,49 @@
+/**
+ * Normal column geometry: the right column shrinks, then loses its track,
+ * before the center drops below its minimum. The sidebar never concedes here;
+ * AppFrame supplies its effective preference after responsive collapse.
+ */
+/** Resolved widths for one frame. */
+export interface Columns {
+    sidebar: number;
+    center: number;
+    rightbar: number;
+}
+/** Center width protected while the normal right column is open. */
+export declare const CENTER_MIN = 400;
+/** Sidebar drag clamp floor. */
+export declare const SIDEBAR_MIN = 264;
+/** Sidebar drag clamp ceiling. */
+export declare const SIDEBAR_MAX = 420;
+/** Sidebar width before any user drag. */
+export declare const SIDEBAR_DEFAULT = 280;
+/** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
+export declare const SIDEBAR_COLLAPSED = 56;
+/** Viewport width below which the sidebar auto-collapses to the rail (deepsuite
+ * LG breakpoint); a manual toggle below it re-expands over the squeezed center
+ * (stores.ts narrowExpanded). */
+export declare const SIDEBAR_AUTO_COLLAPSE = 1024;
+/** Right column drag clamp floor. */
+export declare const RIGHTBAR_MIN = 300;
+/** Maximum normal right panel width as a fraction of the frame. */
+export declare const RIGHTBAR_MAX_RATIO = 0.7;
+/** First-open right panel preference as a fraction of the frame. */
+export declare const RIGHTBAR_DEFAULT_RATIO = 0.45;
+/**
+ * Clamp a panel width into its contract range.
+ * @param px - requested width.
+ * @param min - range lower bound.
+ * @param max - range upper bound.
+ * @returns the clamped width.
+ */
+export declare function clampWidth(px: number, min: number, max: number): number;
+/**
+ * Solve the three column widths for one viewport frame.
+ * @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).
+ * @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;
+//# sourceMappingURL=columns.d.ts.map

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

@@ -0,0 +1,135 @@
+/**
+ * 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
+ * layout store (panel geometry), and wires the panel-action service face.
+ * ctx.layout is the cross-plugin panel-action contract; navigation state lives
+ * with the runtime sessions service. A second effect seats the theme
+ * presenter, which projects ctx.theme snapshots onto document.body.
+ */
+import type { Context as ClientContext } from '@deepseek-ai/cordis';
+export { LayoutController } from './service.ts';
+export type { ILayout, ToolbarHosts } from './service.ts';
+declare module '@deepseek-ai/cordis' {
+    interface Context {
+        /** The outward face only; the concrete service stays inside this plugin. */
+        layout: import('./service.ts').ILayout;
+    }
+}
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface SlotMap {
+        /**
+         * The whole left column. OCCUPIED by ui-sidebar's SidebarRoot, which
+         * declares the workspace and settings seats inside it — registering here
+         * replaces the navigation column outright rather than adding to it, and
+         * the seats it declares disappear with it. To add something to the
+         * sidebar, register into one of those inner seats instead.
+         *
+         * The occupant receives the frame's live column state (collapsed, width)
+         * and is expected to render the compact control rail while collapsed.
+         */
+        'sidebar': {
+            kind: 'single';
+            scope: 'root';
+            owner: SidebarOwnerProps;
+        };
+        /**
+         * The whole center column, across both the no-session hero and a live
+         * conversation. OCCUPIED by ui-conversation's ConversationRoot, which
+         * declares the session body, composer, and input seats inside it —
+         * registering here replaces the entire conversation surface (and removes
+         * every seat it declares) rather than adding to it.
+         *
+         * Current-session-optional: the occupant owns both states without
+         * changing its React identity, so it keeps its own state across a session
+         * switch. It receives no owner props; session facts arrive through the
+         * framework hooks of the `session-maybe` scope.
+         */
+        'conversation': {
+            kind: 'single';
+            scope: 'session-maybe';
+            owner: ConvOwnerProps;
+        };
+        /**
+         * The right column: a track the centre makes room for, or nothing. OCCUPIED
+         * by the right Sidebar, which uses the resolved column width in normal
+         * mode and covers the viewport in fullscreen, retaining the wide-screen
+         * column reservation underneath.
+         *
+         * Whether the panel is shown, and whether it takes a track, is the
+         * occupant's own recorded business — it reports the composition of its
+         * expanded and presentation state through `ctx.layout`, and the frame sizes
+         * the track and places the resize handle from that. The expand control is
+         * not this column's: it is a button in the conversation header. With no
+         * current session nothing is mounted here.
+         */
+        'rightbar': {
+            kind: 'single';
+            scope: 'session';
+            owner: RightbarOwnerProps;
+        };
+        /**
+         * The unified desktop toolbar row: the frame's first grid row spanning
+         * every column (macOS toolbar look with the native traffic lights inside
+         * its leading inset). OCCUPIED by the desktop bridge's DesktopToolbar,
+         * which renders the portal hosts the session header projects into.
+         *
+         * Session-maybe scope so the occupant receives the standard session
+         * shares (it derives the title/workspace face) while staying mounted
+         * across no-session/session transitions. With no occupant the row is an
+         * empty auto track — zero height — so plain web, Windows, and Linux
+         * layouts are pixel-identical to the single-row frame.
+         */
+        'shell.toolbar': {
+            kind: 'single';
+            scope: 'session-maybe';
+            owner: ConvOwnerProps;
+        };
+        /**
+         * Frame-wide floating layer, above every column and outside their scroll
+         * containers. Deliberately generic and unowned by any feature: a badge, a
+         * toast stack or a status pill all belong here, and entries order among
+         * themselves. The layer itself is click-through — entries opt back into
+         * pointer events — so an occupant never blocks the app underneath.
+         *
+         * This is the additive seat for a frame-wide surface of your own: a fresh
+         * `id` is added beside the shipped entries instead of replacing them.
+         */
+        'shell.overlay': {
+            kind: 'list';
+            scope: 'root';
+        };
+    }
+}
+/** Sidebar owner share: live column state from the frame's concession solve. */
+export interface SidebarOwnerProps {
+    /** True when the sidebar is closed (the column renders the compact control rail). */
+    collapsed: boolean;
+    /** Rendered column width in px (SIDEBAR_COLLAPSED when collapsed). */
+    width: number;
+}
+/** Conversation owner share: business state and actions belong to the registrant. */
+export interface ConvOwnerProps {
+}
+/** Right column owner share: resolved normal geometry and opening eligibility. */
+export interface RightbarOwnerProps {
+    /** Resolved normal panel width in px, not the saved preference; zero if it cannot fit. */
+    width: number;
+    /** Current frame width in px. */
+    viewportWidth: number;
+    /**
+     * Whether a normal right panel can retain 300px beside a 400px center.
+     * Before a narrow opening, includes the space from collapsing the left sidebar.
+     */
+    canShow: boolean;
+}
+/** Required services (cordis fiber inject — the loader passes all module exports as an object plugin). */
+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,
+ * and the inject hook that hands the store's bound actions to the service.
+ * @param ctx - client root context.
+ */
+export declare function apply(ctx: ClientContext): void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,95 @@
+/**
+ * LayoutController: the cross-plugin panel-action face behind ctx.layout.
+ * Panel geometry itself lives in the root entry's layout store (stores.ts);
+ * the current-session selection lives with the runtime sessions service, and
+ * the per-session active view dissolved into ui-conversation's session store
+ * (its only consumer). What remains here is the contract other plugins'
+ * apply worlds reach for panel transitions (sidebar toggle from ui-sidebar,
+ * right-panel show/hide from ui-sidebar-right) — writes stay inside the
+ * store's declared action set, delivered as the registration's bound actions.
+ */
+import type { BoundActions } from '@deepseek-ai/dsh-client-ui-slots';
+import type { createLayoutStore } from './stores.ts';
+/** The layout store's bound action set (framework-baked, draft params peeled). */
+export type PanelActions = BoundActions<ReturnType<typeof createLayoutStore>>;
+/**
+ * The two portal hosts a mounted desktop toolbar offers the session header:
+ * `centerHost` receives the title/lineage/actions/utilities cluster,
+ * `sessionEndHost` receives the rightbar corner so it stays the trailing
+ * item. Browser-local DOM elements only — never serialized, never sent
+ * through any Host RPC.
+ */
+export interface ToolbarHosts {
+    readonly centerHost: HTMLElement;
+    readonly sessionEndHost: HTMLElement;
+}
+/**
+ * The outward layout face (`ctx.layout`): the panel transitions other
+ * plugins may trigger, plus the toolbar host registry the session header
+ * portals into — and exactly what a test fake must supply. The
+ * attachPanels wiring hook stays on the concrete class (root-entry assembly
+ * only).
+ */
+export interface ILayout {
+    /** Toggle the sidebar panel (closed ⟷ contract default width). */
+    toggleSidebar(): void;
+    /**
+     * Report the right panel's presentation without changing its expanded state.
+     * @param track - whether the normal panel width reserves a grid track,
+     *   including beneath a fullscreen overlay.
+     * @param fullscreen - whether the panel covers the frame and hides its outer
+     *   resize handle; independent of the underlying grid track.
+     */
+    openRightbar(track: boolean, fullscreen: boolean): void;
+    /** Report the right panel as hidden: no track, no handle. */
+    closeRightbar(): void;
+    /**
+     * Publish the desktop toolbar's freshly mounted host pair, replacing any
+     * previous registration and notifying subscribers.
+     * @param hosts - the mounted host pair (both nodes attached).
+     */
+    setToolbarHosts(hosts: ToolbarHosts): void;
+    /**
+     * Release a previously published pair. Identity-guarded by reference
+     * equality: a stale HMR disposer releasing its OWN pair never clears a
+     * newer toolbar's registration.
+     * @param hosts - the exact pair this caller published.
+     */
+    releaseToolbarHosts(hosts: ToolbarHosts): void;
+    /** The current host pair, or null while no desktop toolbar is mounted. */
+    getToolbarHosts(): ToolbarHosts | null;
+    /**
+     * Subscribe to toolbar-host changes (mount, remount, unmount).
+     * @param listener - called with the new pair, or null when the header must
+     *   return to its in-place fallback.
+     * @returns the unsubscriber.
+     */
+    onToolbarHosts(listener: (hosts: ToolbarHosts | null) => void): () => void;
+}
+/** Cross-plugin panel-action face (ctx.layout). */
+export declare class LayoutController implements ILayout {
+    #private;
+    /**
+     * Adopt the root entry's bound store actions. Called from the root
+     * registration's inject hook (a sanctioned assembly side effect), so the
+     * face is live from the entry's first render; on entry re-register the
+     * fresh actions overwrite the stale set.
+     * @param actions - bound actions of the entry's layout store instance.
+     */
+    attachPanels(actions: PanelActions): void;
+    /** Toggle the sidebar panel (closed ⟷ contract default width). */
+    toggleSidebar(): void;
+    /** Report the right panel's track and fullscreen presentation. */
+    openRightbar(track: boolean, fullscreen: boolean): void;
+    /** Report the right panel as hidden: no track, no handle. */
+    closeRightbar(): void;
+    /** Publish the desktop toolbar's host pair (identity replaces wholesale). */
+    setToolbarHosts(hosts: ToolbarHosts): void;
+    /** Release the pair only when the registry still holds THIS caller's pair. */
+    releaseToolbarHosts(hosts: ToolbarHosts): void;
+    /** The current host pair, or null while no desktop toolbar is mounted. */
+    getToolbarHosts(): ToolbarHosts | null;
+    /** Subscribe to toolbar-host changes; the header portals while non-null. */
+    onToolbarHosts(listener: (hosts: ToolbarHosts | null) => void): () => void;
+}
+//# sourceMappingURL=service.d.ts.map

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

@@ -0,0 +1,62 @@
+/**
+ * Root-owned frame measurement, panel preferences, and presentation reports.
+ * The registration supplies a fresh store and binds its actions to ctx.layout.
+ */
+import { type EngineStoreHandle } from '@deepseek-ai/dsh-client-store';
+/**
+ * Transient layout preferences. Responsive concessions never rewrite widths;
+ * the right panel's expanded state belongs to its occupant.
+ */
+type LayoutState = {
+    sidebar: number;
+    /** Last positive frame measurement; window width bootstraps the first render. */
+    viewportWidth: number;
+    narrowExpanded: boolean;
+    /**
+     * Saved right panel width in px, or null before its first opening. Resizing
+     * the frame and closing the panel preserve this preference.
+     */
+    rightbar: number | null;
+    /**
+     * Whether the right panel is drawn at all, in either presentation.
+     *
+     * Derived chrome, not a source of truth: whether the right surface is
+     * expanded is a recorded fact owned by that surface, reported here so the
+     * frame can place the panel's resize handle. The occupant reports it; nothing
+     * else writes it.
+     */
+    rightbarShown: boolean;
+    /**
+     * Whether the normal panel width reserves a grid track, including beneath
+     * fullscreen. Reported by the occupant; always false while hidden.
+     */
+    rightbarTrack: boolean;
+    /** Reported fullscreen presentation; hides the outer resize handle. */
+    rightbarFullscreen: boolean;
+    /** Suppress transitions for a fullscreen exit until another geometry action. */
+    rightbarInstant: boolean;
+};
+/**
+ * Annotation twin of the actions literal below (the export needs a declared
+ * return type); drift fails assignability at the defineStore call.
+ */
+type LayoutActions = {
+    setSidebar: (draft: LayoutState, px: number) => void;
+    toggleSidebar: (draft: LayoutState) => void;
+    setViewportWidth: (draft: LayoutState, width: number) => void;
+    setRightbar: (draft: LayoutState, px: number) => void;
+    openRightbar: (draft: LayoutState, track: boolean, fullscreen: boolean) => void;
+    closeRightbar: (draft: LayoutState) => void;
+};
+/**
+ * Create the layout panel store handle. For the sidebar the preference IS the
+ * width, so closing it forgets its drag width — reopening restores the contract
+ * default. The right panel initializes at 45% of the frame on first opening
+ * and keeps that px preference across resizes and close. Drag writes clamp to
+ * the current frame's range. Narrow sidebar toggles change only the expansion
+ * override; opening the right panel clears that override.
+ * @returns the store handle (spec + type + identity + factory in one).
+ */
+export declare function createLayoutStore(): EngineStoreHandle<LayoutState, LayoutActions>;
+export {};
+//# sourceMappingURL=stores.d.ts.map

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

@@ -0,0 +1,37 @@
+/**
+ * Global theme DOM applier: projects the resolved ThemeSnapshot onto the
+ * 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
+ * `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.
+ */
+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";
+/** 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. */
+export declare class ThemePresenter {
+    /** Token names this presenter wrote in the last apply (its retraction set). */
+    private appliedTokens;
+    /** The single metadata node this presenter inserts and removes. */
+    private readonly themeColorMeta;
+    /** Create the presenter-owned metadata node before the first snapshot arrives. */
+    constructor();
+    /**
+     * Project a snapshot onto the document: set root `color-scheme` and the body
+     * palette attribute from `active.colorScheme` (never the id — `system` is
+     * resolved upstream), publish the content font-size axis, then replace the
+     * previously applied token variables with `active.tokens`. Browser
+     * theme-color metadata follows the computed body background after those
+     * writes, so the rendered palette remains the color authority.
+     * @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. */
+    dispose(): void;
+}
+//# sourceMappingURL=theme-presenter.d.ts.map

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+/** Host loader entry for the browser-only layout plugin. */
+/** Provides no host-side behavior. */
+export declare function apply(): void;
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@crazx/dsh-client-ui-layout",
+  "description": "Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)",
+  "version": "0.1.5-alpha.1.zw.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aka-danielZhang/deepseek-harness.git",
+    "directory": "packages/client/ui-layout"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-session",
+        "@deepseek-ai/dsh-client-ui-theme"
+      ],
+      "platform": "web"
+    }
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2"
+  },
+  "devDependencies": {
+    "@deepseek-ai/dsh-client-locale": "^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-store": "^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.1.5-alpha.1",
+    "@types/react": "~18.3.1",
+    "@deepseek-ai/cordis": "^4.0.2",
+    "react": "^18.2.0"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  }
+}