@deepseek-ai/dsh-client-ui-layout 0.0.1-rc.2 → 0.0.1-rc.3

package/README.i18n.yaml

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

package/README.md

@@ -6,7 +6,7 @@ Shell plugin: three-column AppFrame (drag handles and concession chain) plus the
 
 AppFrame always mounts the conversation and details columns; a connected Session renders through `SessionProvider`. The transient layout store starts the sidebar at its default width and details closed, and it never reads or writes `localStorage`. Hero and other unselected states also derive a zero rendered details width without changing that stored preference. AppFrame retains the last non-blank Session id across those states: the first Session remains closed, an explicit details action opens the contract default width, returning to the same Session restores its unchanged width, and selecting a different Session closes details before paint. The conversation owner share is empty, while the sidebar owner share contains only `collapsed` and `width`; registrants obtain business data from standard hooks and actions from their own inject faces.
 
-The `/client` exports are the plugin body (`apply`/`inject`), `LayoutService`, and the four owner-share interfaces. AppFrame, the panel store, and the concession solver remain package-internal.
+The `/client` exports are the plugin body (`apply`/`inject`), `LayoutController`, and the four owner-share interfaces. AppFrame, the panel store, and the concession solver remain package-internal.
 
 ## Model Experience
 

package/README.zh.md

@@ -6,7 +6,7 @@
 
 AppFrame 始终挂载会话栏和详情栏；已连接 Session 通过 `SessionProvider` 渲染。布局 store 是瞬时状态，侧边栏以默认宽度启动，详情栏则保持关闭，且该 store 从不读写 `localStorage`。hero 和其他未选中状态也会将详情栏的渲染宽度派生为零，但不会改变存储的宽度偏好。AppFrame 会跨越这些状态保留最后一个非 blank 会话 id：首个会话保持关闭；显式打开详情栏的操作会使用约定默认宽度；返回同一会话时恢复其未改变的宽度；选择不同会话时，详情栏会在绘制前关闭。会话 owner share 为空，侧边栏 owner share 只包含 `collapsed` 和 `width`；注册方通过标准钩子获取业务数据，并从各自的 inject 接口获取操作。
 
-`/client` 导出表层包含插件主体（`apply`／`inject`）、`LayoutService` 和四个 owner-share 接口。AppFrame、面板 store 与让步求解器仍属于包内部。
+`/client` 导出表层包含插件主体（`apply`／`inject`）、`LayoutController` 和四个 owner-share 接口。AppFrame、面板 store 与让步求解器仍属于包内部。
 
 ## 模型体验
 

package/lib/client.js

@@ -32,7 +32,7 @@ window.__ModuleLoader__.load({
 		* @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, 280, 420);
+			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,
@@ -53,7 +53,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/deepseek-harness/deepseek-harness/packages/client/ui-layout/src/client/AppFrame.module.css.mjs
-		const css = ".pI_x6G_frame{background:var(--dsw-alias-bg-base);height:100%;transition:grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out);grid-template-rows:100%;display:grid;position:relative;overflow:hidden}.pI_x6G_frame[data-dragging]{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_frame{transition:none}}.pI_x6G_sidebarCol{background:var(--dsw-specific-sidebar-fill);border-right:1px solid var(--dsw-alias-border-l1);min-width:0;overflow:hidden}.pI_x6G_centerCol{flex-direction:column;min-width:0;display:flex;overflow:hidden}.pI_x6G_detailsCol{border-left:1px solid var(--dsw-alias-border-l2);min-width:0;overflow:hidden}.pI_x6G_frame[data-details-collapsed] .pI_x6G_detailsCol{border-left:none}.pI_x6G_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}.pI_x6G_frame[data-dragging] .pI_x6G_handle{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_handle{transition:none}}.pI_x6G_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%)}.pI_x6G_detailsCol:hover~.pI_x6G_handle[data-side=details]:after,.pI_x6G_handle[data-side=details]:hover:after,.pI_x6G_handle[data-side=details][data-dragging=true]:after{opacity:1}.pI_x6G_handle[data-side=details]:hover:after,.pI_x6G_handle[data-side=details][data-dragging=true]:after{background:var(--dsw-alias-button-floating-hover);border-color:var(--dsw-alias-border-l3)}";
+		const css = ".pI_x6G_frame{background:var(--dsw-alias-bg-base);height:100%;transition:grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out);grid-template-rows:100%;display:grid;position:relative;overflow:hidden}.pI_x6G_frame[data-dragging]{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_frame{transition:none}}.pI_x6G_sidebarCol{background:var(--dsw-specific-sidebar-fill);border-right:1px solid var(--dsw-alias-border-l1);min-width:0;overflow:hidden}.pI_x6G_centerCol{flex-direction:column;min-width:0;display:flex;overflow:hidden}.pI_x6G_detailsCol{border-left:1px solid var(--dsw-alias-border-l2);min-width:0;overflow:hidden}.pI_x6G_frame[data-details-collapsed] .pI_x6G_detailsCol{border-left:none}.pI_x6G_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}.pI_x6G_frame[data-dragging] .pI_x6G_handle{transition:none}@media (prefers-reduced-motion:reduce){.pI_x6G_handle{transition:none}}.pI_x6G_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%)}.pI_x6G_detailsCol:hover~.pI_x6G_handle[data-side=details]:after,.pI_x6G_handle[data-side=details]:hover:after,.pI_x6G_handle[data-side=details][data-dragging=true]:after{opacity:1}.pI_x6G_handle[data-side=details]:hover:after,.pI_x6G_handle[data-side=details][data-dragging=true]:after{background:var(--dsw-alias-button-floating-hover);border-color:var(--dsw-alias-border-l3)}.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");
@@ -63,9 +63,10 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var AppFrame_module_css_default = {
-			"frame": "pI_x6G_frame",
 			"sidebarCol": "pI_x6G_sidebarCol",
+			"frame": "pI_x6G_frame",
 			"centerCol": "pI_x6G_centerCol",
+			"overlayLayer": "pI_x6G_overlayLayer",
 			"detailsCol": "pI_x6G_detailsCol",
 			"handle": "pI_x6G_handle"
 		};
@@ -230,6 +231,11 @@ window.__ModuleLoader__.load({
 						})
 					}),
 					(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: 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,
@@ -278,7 +284,7 @@ window.__ModuleLoader__.load({
 				}),
 				actions: {
 					setSidebar: (d, px) => {
-						d.sidebar = clampWidth(px, 280, 420);
+						d.sidebar = clampWidth(px, 264, 420);
 					},
 					setDetails: (d, px) => {
 						d.details = clampWidth(px, 300, 520);
@@ -304,7 +310,7 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region lib/types/client/service.js
 		/** Cross-plugin panel-action face (ctx.layout). */
-		var LayoutService = class {
+		var LayoutController = class {
 			#panels;
 			/**
 			* Adopt the root entry's bound store actions. Called from the root
@@ -393,7 +399,7 @@ window.__ModuleLoader__.load({
 		* @param ctx - client root context.
 		*/
 		function apply(ctx) {
-			const layout = new LayoutService();
+			const layout = new LayoutController();
 			ctx.effect(() => {
 				const disposeService = ctx.reflect.provide("layout", layout);
 				const disposeRegistration = ctx.slots.register({
@@ -410,6 +416,10 @@ window.__ModuleLoader__.load({
 						"details": {
 							kind: "single",
 							scope: "session"
+						},
+						"shell.overlay": {
+							kind: "list",
+							scope: "root"
 						}
 					},
 					store: createLayoutStore,
@@ -436,7 +446,7 @@ window.__ModuleLoader__.load({
 			}, "ui-layout: theme presenter");
 		}
 		//#endregion
-		exports.LayoutService = LayoutService;
+		exports.LayoutController = LayoutController;
 		exports.apply = apply;
 		exports.inject = inject;
 		return module.exports;

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

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

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

@@ -21,10 +21,10 @@ export interface Columns {
 /** 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 = 280;
+export declare const SIDEBAR_MIN = 264;
 /** Sidebar drag clamp ceiling. */
 export declare const SIDEBAR_MAX = 420;
-/** Sidebar width before any user drag (= the drag floor). */
+/** 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;

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

@@ -8,7 +8,7 @@
  * presenter, which projects ctx.theme snapshots onto document.body.
  */
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client';
-export { LayoutService } from './service.ts';
+export { LayoutController } from './service.ts';
 export type { ILayout } from './service.ts';
 declare module '@deepseek-ai/cordis' {
     interface Context {
@@ -18,21 +18,66 @@ declare module '@deepseek-ai/cordis' {
 }
 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 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. */

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

@@ -1,5 +1,5 @@
 /**
- * LayoutService: the cross-plugin panel-action face behind ctx.layout.
+ * 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
@@ -27,7 +27,7 @@ export interface ILayout {
     closeDetails(): void;
 }
 /** Cross-plugin panel-action face (ctx.layout). */
-export declare class LayoutService implements ILayout {
+export declare class LayoutController implements ILayout {
     #private;
     /**
      * Adopt the root entry's bound store actions. Called from the root

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-layout",
   "description": "Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)",
-  "version": "0.0.1-rc.2",
+  "version": "0.0.1-rc.3",
   "publishConfig": {
     "access": "restricted"
   },
@@ -41,20 +41,20 @@
   "license": "BSD-3-Clause",
   "peerDependencies": {
     "react": "^18.2.0",
-    "@deepseek-ai/dsh-client-runtime": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-theme": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-invariants": "^0.0.1-rc.2",
+    "@deepseek-ai/dsh-client-runtime": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-invariants": "^0.0.1-rc.3",
     "@deepseek-ai/cordis": "^4.0.1-rc.1"
   },
   "devDependencies": {
     "@types/react": "~18.3.1",
     "react": "^18.2.0",
-    "@deepseek-ai/dsh-client-locale": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-client-runtime": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-theme": "^0.0.1-rc.2",
-    "@deepseek-ai/dsh-invariants": "^0.0.1-rc.2",
+    "@deepseek-ai/dsh-client-runtime": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-client-locale": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.0.1-rc.3",
+    "@deepseek-ai/dsh-invariants": "^0.0.1-rc.3",
     "@deepseek-ai/cordis": "^4.0.1-rc.1"
   },
   "files": [