@prettier-ai/dsh-client-ui-layout 0.1.2-alpha.1

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: 5eba9ac8ce793092053d9b8c84daa8f737597c26
+README.zh.md: 1af81cea580d97cfa89365bdd79659933c0b2ae1

package/README.md

@@ -0,0 +1,88 @@
+---
+description: "Shell layout for the Web GUI: the three-column AppFrame with drag handles, concession behavior, 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 shell layout of the Web GUI: a three-column AppFrame with resizable sidebar and details panels, a concession chain that shrinks the details column and then auto-closes it when space runs out, and the `ctx.layout` panel-geometry service other plugins call to open or close the details column. It also seats the theme presenter, which projects the resolved color scheme, alias tokens, content font size, and `theme-color` metadata onto the document. Choose it for the standard window chrome; panel geometry is transient and 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
+
+Mount this plugin at the root slot; it then renders the app frame around whatever occupies the sidebar, conversation, and details columns. Users resize the sidebar by dragging its invisible hit strip and the details panel by dragging its floating pill; when the window narrows, only details shrinks, then auto-closes. A closed sidebar retains a 56px control rail; details closes to zero width.
+
+### 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 `register()` call contributes `AppFrame` into the runtime's built-in `'root'` slot and, in the same breath, declares the four child slots (`sidebar`, `conversation`, `details`, `shell.overlay`), seats the layout store (panel geometry), and wires the `ctx.layout` panel-action service. The transient layout store starts the sidebar at its default width and details closed, and never reads or writes `localStorage`. AppFrame always mounts the conversation and details columns; a connected Session renders through `SessionProvider`. 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.
+
+</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` and `details` columns.
+- [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 details closed; switching between distinct Session ids also closes details and forgets its dragged width, while unselected surfaces render details at zero width without modifying geometry.
+- **Concession-chain auto-close derives a zero width without touching the preferred width** — the panel restores itself when the window widens; consumers must not read the stored details width as the rendered truth.
+- **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>

package/README.zh.md

@@ -0,0 +1,88 @@
+---
+description: "Web GUI 的外壳布局：三栏 AppFrame、拖动手柄与让步行为、面板几何服务与主题呈现；供窗口外观的用户与维护者阅读。"
+kind: "package-reference"
+---
+
+# @deepseek-ai/dsh-client-ui-layout
+
+[English](README.md) | 中文
+
+## 概述
+
+本包提供 Web GUI 的外壳布局：一个三栏 AppFrame，带可缩放的侧栏与详情面板；一条让步链，在空间不足时先收缩详情栏、随后自动关闭它；以及 `ctx.layout` 面板几何服务，供其他插件调用以打开或关闭详情栏。它还承载主题呈现器，把解析后的配色方案、别名 token、正文字号与 `theme-color` 元数据投影到 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 槽位挂载本插件；它随即围绕占据侧栏、会话与详情栏的内容渲染应用框架。用户拖动不可见命中条带缩放侧栏、拖动浮动胶囊缩放详情面板；窗口变窄时只有详情栏收缩，随后自动关闭。关闭的侧栏保留 56px 控制栏；详情栏关闭到零宽度。
+
+### 主题呈现
+
+呈现器消费解析后的主题快照，并投影到 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>
+
+一次 `register()` 调用把 `AppFrame` 贡献进运行时的内建 `'root'` 槽位，并在同一刻声明四个子槽位（`sidebar`、`conversation`、`details`、`shell.overlay`）、安放布局 store（面板几何）并接好 `ctx.layout` 面板动作服务。瞬时布局 store 以默认宽度启动侧栏、保持详情栏关闭，从不读写 `localStorage`。AppFrame 始终挂载会话与详情两栏；已连接 Session 经 `SessionProvider` 渲染。它把所选 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` 与 `details` 栏。
+- [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>
+
+
+这些限制界定了当前布局行为。它们是当前包约束，不是通用窗口管理器对比或任务积压。
+
+- **面板几何是瞬时状态**——重新加载会恢复侧栏默认值并保持详情栏关闭；在不同会话 id 之间切换同样会关闭详情栏并忘记拖动后的宽度，而未选中表面以零宽度渲染详情栏却不修改几何。
+- **让步链自动关闭通过推导零宽度实现，不触碰偏好宽度**——窗口变宽时面板自行恢复；消费方不得把 store 中的详情宽度当作渲染真值。
+- **挤压重排期间无滚动锚定**——布局变化可能移动读者的视口。
+
+<a id="dev-note"></a>
+### 开发备注
+
+<details>
+<summary>维护者的工作上下文——点击展开</summary>
+
+无。
+
+</details>

package/lib/client.js

@@ -0,0 +1,490 @@
+window.__ModuleLoader__.load({
+	id: "@prettier-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 _prettier_ai_dsh_client_store = require("@prettier-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;
+		/**
+		* 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. Pure: no hysteresis —
+		* the output is a function of (viewport, preferences) only, so recovery on
+		* re-widening is automatic. Preferences re-clamp here because they cross the
+		* store boundary and callers may still supply stale ranges.
+		* @param viewport - available frame width in px.
+		* @param sidebar - sidebar width preference in px (0 = closed).
+		* @param details - details width preference in px (0 = closed).
+		* @returns resolved widths; details 0 means visually closed (never unmounted), while a closed sidebar keeps its compact rail.
+		*/
+		function computeColumns(viewport, sidebar, details) {
+			const s = sidebar === 0 ? 56 : clampWidth(sidebar, 264, 420);
+			const d0 = details === 0 ? 0 : clampWidth(details, 300, 520);
+			if (s + d0 + 640 <= viewport) return {
+				sidebar: s,
+				center: viewport - s - d0,
+				details: d0
+			};
+			const d1 = d0 === 0 ? 0 : Math.max(300, viewport - s - 640);
+			if (s + d1 + 640 <= viewport) return {
+				sidebar: s,
+				center: 640,
+				details: d1
+			};
+			return {
+				sidebar: s,
+				center: Math.max(0, viewport - s),
+				details: 0
+			};
+		}
+		//#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/dsh-publisher/dsh-publisher/upstream/packages/client/ui-layout/src/client/AppFrame.module.css.mjs
+		const css = ".OCJTjG_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}.OCJTjG_frame[data-dragging]{transition:none}@media (prefers-reduced-motion:reduce){.OCJTjG_frame{transition:none}}.OCJTjG_sidebarCol{background:var(--dsw-specific-sidebar-fill);border-right:1px solid var(--dsw-alias-border-l1);min-width:0;overflow:hidden}.OCJTjG_centerCol{flex-direction:column;min-width:0;display:flex;overflow:hidden}.OCJTjG_detailsCol{border-left:1px solid var(--dsw-alias-border-l2);min-width:0;overflow:hidden}.OCJTjG_frame[data-details-collapsed] .OCJTjG_detailsCol{border-left:none}.OCJTjG_handle{cursor:col-resize;z-index:2;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}.OCJTjG_frame[data-dragging] .OCJTjG_handle{transition:none}@media (prefers-reduced-motion:reduce){.OCJTjG_handle{transition:none}}.OCJTjG_handle[data-side=details]:after{content:\"\";box-sizing:border-box;background:var(--dsw-alias-button-floating-fill);border:1px solid var(--dsw-alias-border-l2-darkmode-thin);opacity:0;width:12px;height:32px;transition:opacity var(--ds-transition-duration-slow) var(--ds-ease-in-out), background var(--ds-transition-duration-slow) var(--ds-ease-in-out);border-radius:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.OCJTjG_detailsCol:hover~.OCJTjG_handle[data-side=details]:after,.OCJTjG_handle[data-side=details]:hover:after,.OCJTjG_handle[data-side=details][data-dragging=true]:after{opacity:1}.OCJTjG_handle[data-side=details]:hover:after,.OCJTjG_handle[data-side=details][data-dragging=true]:after{background:var(--dsw-alias-button-floating-hover);border-color:var(--dsw-alias-border-l3)}.OCJTjG_overlayLayer{z-index:20;pointer-events:none;position:absolute;inset:0}.OCJTjG_overlayLayer>*{pointer-events:auto}";
+		const tagId = "@prettier-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 = "@prettier-ai/dsh-client-ui-layout";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var AppFrame_module_css_default = {
+			"centerCol": "OCJTjG_centerCol",
+			"detailsCol": "OCJTjG_detailsCol",
+			"frame": "OCJTjG_frame",
+			"handle": "OCJTjG_handle",
+			"overlayLayer": "OCJTjG_overlayLayer",
+			"sidebarCol": "OCJTjG_sidebarCol"
+		};
+		//#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 |
+		* details), the drag handles (pointer capture + rAF throttle), the concession
+		* chain (columns.ts), and the child-slot render decisions: the sidebar slot
+		* renders HERE with live parameters from the concession solve, and the
+		* session-aware occupants render in fixed column positions; strict entries
+		* gate themselves on current-session availability while session-maybe
+		* entries retain identity. Pure component: everything arrives
+		* through the three 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
+			});
+		}
+		/** Details column grid item; width 0 keeps the subtree mounted (never unmount on close). */
+		function DetailsColumn(props) {
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: AppFrame_module_css_default.detailsCol,
+				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 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 onPointerDown = (0, react.useCallback)((e) => {
+				e.preventDefault();
+				e.currentTarget.setPointerCapture(e.pointerId);
+				origin.current = e.clientX;
+				latest.current = e.clientX;
+				callbacks.current.onStart();
+				setDragging(true);
+			}, []);
+			const onPointerMove = (0, react.useCallback)((e) => {
+				if (!e.currentTarget.hasPointerCapture(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 (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
+				e.currentTarget.releasePointerCapture(e.pointerId);
+				if (frame.current !== null) {
+					cancelAnimationFrame(frame.current);
+					frame.current = null;
+				}
+				callbacks.current.onDrag(latest.current - origin.current);
+				setDragging(false);
+				callbacks.current.onEnd();
+			}, []);
+			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
+			});
+		}
+		/** The three-column frame (see module doc). */
+		function AppFrame({ useStore, useSessions, actions, renderSlot, SessionProvider, t }) {
+			const panels = useStore((s) => s);
+			const detailsSession = useSessions((s) => {
+				const current = s.current;
+				return current !== void 0 && s.byId[current]?.blank === false ? current : void 0;
+			});
+			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, setViewport] = (0, react.useState)(() => window.innerWidth);
+			const lastSession = (0, react.useRef)(detailsSession);
+			(0, react.useLayoutEffect)(() => {
+				if (detailsSession === void 0) return;
+				if (lastSession.current !== void 0 && lastSession.current !== detailsSession) actions.closeDetails();
+				lastSession.current = detailsSession;
+			}, [actions, detailsSession]);
+			(0, react.useEffect)(() => {
+				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;
+				const observer = new ResizeObserver(() => {
+					raf ??= requestAnimationFrame(() => {
+						raf = null;
+						const width = el.getBoundingClientRect().width;
+						if (width > 0) setViewport(width);
+					});
+				});
+				observer.observe(el);
+				return () => {
+					observer.disconnect();
+					if (raf !== null) cancelAnimationFrame(raf);
+				};
+			}, []);
+			const narrow = viewport < SIDEBAR_AUTO_COLLAPSE;
+			(0, react.useEffect)(() => {
+				actions.setNarrow(narrow);
+			}, [actions, narrow]);
+			const sidebarCollapsed = narrow ? !panels.narrowExpanded : panels.sidebar === 0;
+			const cols = computeColumns(viewport, sidebarCollapsed ? 0 : panels.sidebar === 0 ? 280 : panels.sidebar, detailsSession === void 0 ? 0 : panels.details);
+			const colsRef = (0, react.useRef)(cols);
+			colsRef.current = cols;
+			const sidebarBase = (0, react.useRef)(0);
+			const detailsBase = (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 onDetailsStart = (0, react.useCallback)(() => {
+				detailsBase.current = colsRef.current.details;
+				setDragging(true);
+			}, []);
+			const onSidebarDrag = (0, react.useCallback)((dx) => {
+				actions.setSidebar(sidebarBase.current + dx);
+			}, [actions]);
+			const onDetailsDrag = (0, react.useCallback)((dx) => {
+				actions.setDetails(detailsBase.current - dx);
+			}, [actions]);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				ref: frameRef,
+				className: AppFrame_module_css_default.frame,
+				style: { gridTemplateColumns: `${cols.sidebar}px minmax(0, 1fr) ${cols.details}px` },
+				"data-sidebar-collapsed": sidebarCollapsed || void 0,
+				"data-details-collapsed": cols.details === 0 || void 0,
+				"data-dragging": dragging || void 0,
+				children: [
+					(0, react_jsx_runtime.jsx)(DocumentTitle, {
+						productTitle: "DeepSeek Harness",
+						...documentTitle === void 0 ? {} : { title: documentTitle }
+					}),
+					(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)(DetailsColumn, { children: (0, react_jsx_runtime.jsx)(SessionProvider, { children: renderSlot("details", {}) }) })] }),
+					(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
+					}),
+					cols.details > 0 && (0, react_jsx_runtime.jsx)(DragHandle, {
+						side: "details",
+						left: viewport - cols.details,
+						onStart: onDetailsStart,
+						onDrag: onDetailsDrag,
+						onEnd: onDragEnd
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region lib/types/client/stores.js
+		/**
+		* The root entry's transient layout store: panel geometry as plain widths in
+		* px (0 = closed). Module level exports the factory only — a module-level
+		* handle would pin the store's identity in the module
+		* cache (a de-facto singleton surviving plugin reloads). register() receives
+		* the factory (exclusive use: the framework instantiates per entry), AppFrame
+		* derives its PropsStore share from the return type, and the service face
+		* receives the bound actions through the registration's inject hook.
+		*/
+		/**
+		* Create the layout panel store handle. The preference IS the width, so
+		* closing a panel forgets its drag width — reopening restores the contract
+		* default. Actions are the complete write set: drag writes clamp
+		* into the panel's contract range and never cross the open/closed line;
+		* open/close transitions write 0 / the default explicitly. Below the
+		* auto-collapse breakpoint (AppFrame feeds setNarrow) the sidebar toggle
+		* flips the narrowExpanded override instead of the preference.
+		* @returns the store handle (spec + type + identity + factory in one).
+		*/
+		function createLayoutStore() {
+			return (0, _prettier_ai_dsh_client_store.defineStore)({
+				init: () => ({
+					sidebar: 280,
+					details: 0,
+					narrow: false,
+					narrowExpanded: false
+				}),
+				actions: {
+					setSidebar: (d, px) => {
+						d.sidebar = clampWidth(px, 264, 420);
+					},
+					setDetails: (d, px) => {
+						d.details = clampWidth(px, 300, 520);
+					},
+					toggleSidebar: (d) => {
+						if (d.narrow) d.narrowExpanded = !d.narrowExpanded;
+						else d.sidebar = d.sidebar === 0 ? 280 : 0;
+					},
+					setNarrow: (d, narrow) => {
+						if (d.narrow === narrow) return;
+						d.narrow = narrow;
+						d.narrowExpanded = false;
+					},
+					openDetails: (d) => {
+						if (d.details === 0) d.details = 360;
+					},
+					closeDetails: (d) => {
+						d.details = 0;
+					}
+				}
+			});
+		}
+		//#endregion
+		//#region lib/types/client/service.js
+		/** Cross-plugin panel-action face (ctx.layout). */
+		var LayoutController = class {
+			#panels;
+			/**
+			* 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();
+			}
+			/** Open the details panel (no-op when already open). */
+			openDetails() {
+				this.#require().openDetails();
+			}
+			/** Close the details panel. */
+			closeDetails() {
+				this.#require().closeDetails();
+			}
+			#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: {
+						"sidebar": {
+							kind: "single",
+							scope: "root"
+						},
+						"conversation": {
+							kind: "single",
+							scope: "session-maybe"
+						},
+						"details": {
+							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/invariant.js

@@ -0,0 +1,24 @@
+//#region lib/types/invariant.js
+/**
+* Package-owned invariant companion for `@prettier-ai/dsh-client-ui-layout`.
+* @module @prettier-ai/dsh-client-ui-layout/invariant
+*/
+const PACKAGE_NAME = "@prettier-ai/dsh-client-ui-layout";
+/** Cordis companion plugin name. */
+const name = "client-ui-layout-invariant";
+/** Service required before the companion can reserve package ownership. */
+const inject = ["invariants"];
+/**
+* No runtime invariant: the shell viewing-state store behind ctx.layout emits
+* no cordis events; clamp/prune/concession-chain
+* sequencing is asserted directly by this package's columns and service specs.
+*/
+const install = () => {};
+/**
+* Register this package's invariant companion.
+* @param ctx - Cordis context carrying the invariant service.
+* @returns the installed registration's disposer after setup succeeds.
+*/
+const apply = (ctx) => Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install));
+//#endregion
+export { apply, inject, name };

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

@@ -0,0 +1,7 @@
+import type { PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore } from '@prettier-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' | 'conversation' | 'details' | '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,60 @@
+/**
+ * Pure concession-chain column solver for the three-column AppFrame.
+ * Chain order is fixed by contract: keep center >= CENTER_MIN by shrinking
+ * details, then auto-closing it (derived zero width — preferred width
+ * preferences are never rewritten, so widening the window restores them).
+ * The sidebar never concedes: its rendered width is always the drag
+ * preference (or the collapsed rail), and center absorbs any remaining
+ * deficit as the last resort. Inputs are the layout store's plain width
+ * preferences (0 = closed); a closed sidebar resolves to the fixed
+ * SIDEBAR_COLLAPSED control rail while closed details resolve to zero width.
+ * The SIDEBAR_AUTO_COLLAPSE breakpoint is consumed by AppFrame, which decides
+ * the effective sidebar preference before solving; the solver itself stays
+ * breakpoint-free.
+ */
+/** Resolved widths for one frame; center may drop below CENTER_MIN only at the final fallback. */
+export interface Columns {
+    sidebar: number;
+    center: number;
+    details: number;
+}
+/** Center column floor; only the final fallback may go below it. */
+export declare const CENTER_MIN = 640;
+/** 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;
+/** Details drag clamp floor. */
+export declare const DETAILS_MIN = 300;
+/** Details drag clamp ceiling. */
+export declare const DETAILS_MAX = 520;
+/** Details width before any user drag. */
+export declare const DETAILS_DEFAULT = 360;
+/**
+ * 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. Pure: no hysteresis —
+ * the output is a function of (viewport, preferences) only, so recovery on
+ * re-widening is automatic. Preferences re-clamp here because they cross the
+ * store boundary and callers may still supply stale ranges.
+ * @param viewport - available frame width in px.
+ * @param sidebar - sidebar width preference in px (0 = closed).
+ * @param details - details width preference in px (0 = closed).
+ * @returns resolved widths; details 0 means visually closed (never unmounted), while a closed sidebar keeps its compact rail.
+ */
+export declare function computeColumns(viewport: number, sidebar: number, details: number): Columns;
+//# sourceMappingURL=columns.d.ts.map

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

@@ -0,0 +1,105 @@
+/**
+ * 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 '@prettier-ai/cordis';
+export { LayoutController } from './service.ts';
+export type { ILayout } from './service.ts';
+declare module '@prettier-ai/cordis' {
+    interface Context {
+        /** The outward face only; the concrete service stays inside this plugin. */
+        layout: import('./service.ts').ILayout;
+    }
+}
+declare module '@prettier-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 details column, shown when the layout opens it. OCCUPIED by
+         * ui-conversation's DetailsPanel, which declares the tool-details seat
+         * inside it — registering here replaces the column and takes that seat
+         * with it. Absent an occupant the column renders nothing.
+         *
+         * No owner props: the framework injects the session id and hooks for the
+         * `session` scope, and `ctx.layout` owns whether the column is open.
+         */
+        'details': {
+            kind: 'single';
+            scope: 'session';
+            owner: DetailsOwnerProps;
+        };
+        /**
+         * 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 {
+}
+/** Details owner share: empty — sessionId arrives as a framework-standard prop. */
+export interface DetailsOwnerProps {
+}
+/** 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,47 @@
+/**
+ * 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,
+ * details open/close from ui-conversation) — writes stay inside the store's
+ * declared action set, delivered as the registration's bound actions.
+ */
+import type { BoundActions } from '@prettier-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 outward layout face (`ctx.layout`): the panel transitions other
+ * plugins may trigger — 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;
+    /** Open the details panel (no-op when already open). */
+    openDetails(): void;
+    /** Close the details panel. */
+    closeDetails(): 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;
+    /** Open the details panel (no-op when already open). */
+    openDetails(): void;
+    /** Close the details panel. */
+    closeDetails(): void;
+}
+//# sourceMappingURL=service.d.ts.map

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

@@ -0,0 +1,48 @@
+/**
+ * The root entry's transient layout store: panel geometry as plain widths in
+ * px (0 = closed). Module level exports the factory only — a module-level
+ * handle would pin the store's identity in the module
+ * cache (a de-facto singleton surviving plugin reloads). register() receives
+ * the factory (exclusive use: the framework instantiates per entry), AppFrame
+ * derives its PropsStore share from the return type, and the service face
+ * receives the bound actions through the registration's inject hook.
+ */
+import { type EngineStoreHandle } from '@prettier-ai/dsh-client-store';
+/**
+ * Layout store state: panel width preferences in px (0 = closed), plus the
+ * narrow-viewport pair — `narrow` mirrors AppFrame's breakpoint reading
+ * (viewport < SIDEBAR_AUTO_COLLAPSE) so toggleSidebar can pick semantics, and
+ * `narrowExpanded` is the manual override that re-expands the auto-collapsed
+ * sidebar over the squeezed center without rewriting the width preference.
+ */
+type LayoutState = {
+    sidebar: number;
+    details: number;
+    narrow: boolean;
+    narrowExpanded: 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;
+    setDetails: (draft: LayoutState, px: number) => void;
+    toggleSidebar: (draft: LayoutState) => void;
+    setNarrow: (draft: LayoutState, narrow: boolean) => void;
+    openDetails: (draft: LayoutState) => void;
+    closeDetails: (draft: LayoutState) => void;
+};
+/**
+ * Create the layout panel store handle. The preference IS the width, so
+ * closing a panel forgets its drag width — reopening restores the contract
+ * default. Actions are the complete write set: drag writes clamp
+ * into the panel's contract range and never cross the open/closed line;
+ * open/close transitions write 0 / the default explicitly. Below the
+ * auto-collapse breakpoint (AppFrame feeds setNarrow) the sidebar toggle
+ * flips the narrowExpanded override instead of the preference.
+ * @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 '@prettier-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/lib/types/invariant.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Package-owned invariant companion for `@prettier-ai/dsh-client-ui-layout`.
+ * @module @prettier-ai/dsh-client-ui-layout/invariant
+ */
+import type { Context } from '@prettier-ai/cordis';
+/** Cordis companion plugin name. */
+export declare const name = "client-ui-layout-invariant";
+/** Service required before the companion can reserve package ownership. */
+export declare const inject: string[];
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Cordis context carrying the invariant service.
+ * @returns the installed registration's disposer after setup succeeds.
+ */
+export declare const apply: (ctx: Context) => Promise<() => void>;
+//# sourceMappingURL=invariant.d.ts.map

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@prettier-ai/dsh-client-ui-layout",
+  "description": "Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)",
+  "version": "0.1.2-alpha.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/deepseek-ai/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"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@prettier-ai/dsh-client-locale",
+        "@prettier-ai/dsh-client-ui-renderer",
+        "@prettier-ai/dsh-client-ui-session",
+        "@prettier-ai/dsh-client-ui-theme"
+      ],
+      "platform": "web"
+    }
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-theme": "^0.1.2-alpha.1",
+    "@prettier-ai/cordis": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "~18.3.1",
+    "react": "^18.2.0",
+    "@prettier-ai/dsh-client-store": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-slots": "^0.1.2-alpha.1",
+    "@prettier-ai/dsh-client-ui-theme": "^0.1.2-alpha.1",
+    "@prettier-ai/cordis": "^4.0.1",
+    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.1"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  }
+}