@pactor-app/chat 1.17.0 → 1.18.0

package/README.md

@@ -136,7 +136,7 @@ body:
 ```
 
 - **菜单**：`menu: ChatMenuItem[]`（`key / label / icon? / badge? / disabled? / group?`）驱动内建侧栏；`icon` 为字符串名，映射内置 lucide 子集（plus / chat / history / settings / star / search / user / folder），未知名渲染占位圆点不抛错；`group` 渲染分组标题行；`activeMenuKey` 为受控 prop，典型用法是 `${state.x}` 绑定 + `events.onMenuSelect` 调 `setState` 闭环；disabled 项不触发 `onMenuSelect`。
-- **Header 三层**：`title` 标量 → `headerExtra?: DslNode | ReactNode`（标题右侧槽）→ `header?: DslNode | ReactNode`（整体替换内建 header）；`showHeader: false` 关闭。header 渲染为全宽容器（产物面板 host / with-header 包裹层）的直接子级，不随对话列限宽——产物面板调宽时保持通栏。DslNode 槽仅在页面运行时（DslRenderer）上下文内经 `useRenderer().renderChildren` 渲染；纯 React 场景传 ReactNode，误传 DslNode 时告警并跳过（不抛错）。
+- **Header 三层**：`title` 标量 → `headerExtra?: DslNode | ReactNode`（标题右侧槽）→ `header?: DslNode | ReactNode`（整体替换内建 header）；`showHeader: false` 关闭。header 收进产物面板 host 的 `__main` 左列（header + 对话区纵向堆叠）：面板打开时与对话区同宽、不覆盖面板上方（面板独占右列全高），面板关闭时随 `__main` 通栏；均不随对话列限宽。DslNode 槽仅在页面运行时（DslRenderer）上下文内经 `useRenderer().renderChildren` 渲染；纯 React 场景传 ReactNode，误传 DslNode 时告警并跳过（不抛错）。
 - **侧栏槽**：`sidebar?: DslNode | ReactNode` 提供时整体替代内建菜单侧栏（仍以 AppShell 承载）。
 - **产出物面板**：`artifact` / `panelOpen` 受控 props（典型 `${state.x}` 绑定），事件 `onArtifact`（part 就绪）/ `onOpenArtifact`（卡片打开）/ `onOpenArtifactList`（卡片区"查看所有产物"，典型接法 `setState panelOpen=true`，面板自动定位产物目录视图）/ `onPanelClose` / `onSelectArtifact`（下拉 / 目录列表切换，典型接法 `setState artifact=${event.artifact}`）；多产物清单由组合层自动从消息流归集，无需 DSL 接线；自定义预览经 `ChatServicesProvider` 注入 `artifactViewers`（函数不进 DSL）。详见上文 `<ArtifactPanel>` 与 `examples/chat/src/chat.page.yaml`。
 - **React 直连**：`<ChatServicesProvider>` + `<Chat>` 同样可直接作为 React 组件使用（events 即普通函数 props：`onSend?(text)` / `onMenuSelect?(key, item)`）。`createChatWorkspace` 工厂保留为兼容路径，内部已改为 provider + 同一组合逻辑（`ChatComposition`），行为不变。

package/dist/index.cjs

@@ -2008,14 +2008,14 @@ function ArtifactPanel({
     if (!panel) {
       return;
     }
-    const hostRect = panel.parentElement?.getBoundingClientRect();
-    const hostWidth = hostRect !== void 0 && hostRect.width > 0 ? hostRect.width : window.innerWidth;
-    const maxWidth = hostWidth * 2 / 3;
     const startWidth = panel.getBoundingClientRect().width;
     const startX = event.clientX;
     const prevUserSelect = document.body.style.userSelect;
     document.body.style.userSelect = "none";
     const onMove = (moveEvent) => {
+      const hostRect = panel.parentElement?.getBoundingClientRect();
+      const hostWidth = hostRect !== void 0 && hostRect.width > 0 ? hostRect.width : window.innerWidth;
+      const maxWidth = hostWidth * 2 / 3;
       const next = startWidth + (startX - moveEvent.clientX);
       setWidth(Math.round(Math.min(Math.max(next, 480), maxWidth)));
     };
@@ -4510,38 +4510,38 @@ function ChatComposition({
       main
     ] }) : main;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-inspector-host", children: [
-    workspaceHeader,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-inspector-host__row", children: [
-      main,
-      effectivePanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          "div",
-          {
-            className: "pactor-chat-inspector__scrim",
-            "aria-hidden": true,
-            onClick: handlePanelClose
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          ArtifactPanel,
-          {
-            artifact: effectiveArtifact,
-            artifacts: effectiveArtifacts,
-            activeArtifactId: effectiveArtifact?.id,
-            onSelectArtifact: handleSelectArtifact,
-            inspector,
-            onClose: handlePanelClose,
-            safeRegistry: services.safeRegistry,
-            user: services.user,
-            artifactViewers: services.artifactViewers,
-            viewRequest: listViewRequest,
-            onViewRequestConsumed: () => setListViewRequest(null)
-          }
-        )
-      ] }) : null
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pactor-chat-inspector-host", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-inspector-host__row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-inspector-host__main", children: [
+      workspaceHeader,
+      main
+    ] }),
+    effectivePanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: "pactor-chat-inspector__scrim",
+          "aria-hidden": true,
+          onClick: handlePanelClose
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ArtifactPanel,
+        {
+          artifact: effectiveArtifact,
+          artifacts: effectiveArtifacts,
+          activeArtifactId: effectiveArtifact?.id,
+          onSelectArtifact: handleSelectArtifact,
+          inspector,
+          onClose: handlePanelClose,
+          safeRegistry: services.safeRegistry,
+          user: services.user,
+          artifactViewers: services.artifactViewers,
+          viewRequest: listViewRequest,
+          onViewRequestConsumed: () => setListViewRequest(null)
+        }
+      )
+    ] }) : null
+  ] }) });
 }
 
 // src/chat-services.tsx

package/dist/index.js

@@ -1943,14 +1943,14 @@ function ArtifactPanel({
     if (!panel) {
       return;
     }
-    const hostRect = panel.parentElement?.getBoundingClientRect();
-    const hostWidth = hostRect !== void 0 && hostRect.width > 0 ? hostRect.width : window.innerWidth;
-    const maxWidth = hostWidth * 2 / 3;
     const startWidth = panel.getBoundingClientRect().width;
     const startX = event.clientX;
     const prevUserSelect = document.body.style.userSelect;
     document.body.style.userSelect = "none";
     const onMove = (moveEvent) => {
+      const hostRect = panel.parentElement?.getBoundingClientRect();
+      const hostWidth = hostRect !== void 0 && hostRect.width > 0 ? hostRect.width : window.innerWidth;
+      const maxWidth = hostWidth * 2 / 3;
       const next = startWidth + (startX - moveEvent.clientX);
       setWidth(Math.round(Math.min(Math.max(next, 480), maxWidth)));
     };
@@ -4450,38 +4450,38 @@ function ChatComposition({
       main
     ] }) : main;
   }
-  return /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-inspector-host", children: [
-    workspaceHeader,
-    /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-inspector-host__row", children: [
-      main,
-      effectivePanelOpen ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
-        /* @__PURE__ */ jsx18(
-          "div",
-          {
-            className: "pactor-chat-inspector__scrim",
-            "aria-hidden": true,
-            onClick: handlePanelClose
-          }
-        ),
-        /* @__PURE__ */ jsx18(
-          ArtifactPanel,
-          {
-            artifact: effectiveArtifact,
-            artifacts: effectiveArtifacts,
-            activeArtifactId: effectiveArtifact?.id,
-            onSelectArtifact: handleSelectArtifact,
-            inspector,
-            onClose: handlePanelClose,
-            safeRegistry: services.safeRegistry,
-            user: services.user,
-            artifactViewers: services.artifactViewers,
-            viewRequest: listViewRequest,
-            onViewRequestConsumed: () => setListViewRequest(null)
-          }
-        )
-      ] }) : null
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx18("div", { className: "pactor-chat-inspector-host", children: /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-inspector-host__row", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-inspector-host__main", children: [
+      workspaceHeader,
+      main
+    ] }),
+    effectivePanelOpen ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: "pactor-chat-inspector__scrim",
+          "aria-hidden": true,
+          onClick: handlePanelClose
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        ArtifactPanel,
+        {
+          artifact: effectiveArtifact,
+          artifacts: effectiveArtifacts,
+          activeArtifactId: effectiveArtifact?.id,
+          onSelectArtifact: handleSelectArtifact,
+          inspector,
+          onClose: handlePanelClose,
+          safeRegistry: services.safeRegistry,
+          user: services.user,
+          artifactViewers: services.artifactViewers,
+          viewRequest: listViewRequest,
+          onViewRequestConsumed: () => setListViewRequest(null)
+        }
+      )
+    ] }) : null
+  ] }) });
 }
 
 // src/chat-services.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/chat",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Pactor chat: AI message rendering protocol (message model, streaming reducer, safe registry, capability action) and chat runtime view (ChatView / MessageBubble / PartRenderer / Composer / chat layout)",
   "keywords": [
     "pactor",
@@ -49,11 +49,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@pactor-app/core": "1.17.0",
-    "@pactor-app/runtime": "1.17.0",
-    "@pactor-app/markdown": "1.17.0",
-    "@pactor-app/permission": "1.17.0",
-    "@pactor-app/ui": "1.17.0"
+    "@pactor-app/core": "1.18.0",
+    "@pactor-app/permission": "1.18.0",
+    "@pactor-app/markdown": "1.18.0",
+    "@pactor-app/runtime": "1.18.0",
+    "@pactor-app/ui": "1.18.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles.css

@@ -221,7 +221,8 @@
 /* ------------------------------------------------------------
  * ChatWorkspace（spec: chat-dsl-page）：createChatWorkspace 工厂
  * 返回组件的外层容器 = 对话列（ChatView）；工作区头部（header）
- * 上移为全宽容器的直接子级，不随对话列限宽。
+ * 收进面板 host 的 __main 左列——面板打开时与对话区同宽（不覆盖
+ * 面板上方），面板关闭时随 __main 通栏；不随对话列限宽。
  * ------------------------------------------------------------ */
 
 .pactor-chat-workspace {
@@ -357,9 +358,9 @@
  * 面板关闭 / 未配置时不渲染 DOM（组合层保证）。
  * ------------------------------------------------------------ */
 
-/* 面板打开时的容器：header 通栏（host 直接子级）+ 行内容器
- * （workspace / AppShell 与面板 flex 并排）；host 在 shell content
- * 内撑满剩余高度与宽度 */
+/* 面板打开时的容器：行内容器 __row 承载左右两列——__main 左列
+ * （header + 对话区，同宽；header 不覆盖面板上方）与面板右列
+ * （独占全高）；host 在 shell content 内撑满剩余高度与宽度 */
 .pactor-chat-inspector-host {
   display: flex;
   flex-direction: column;
@@ -370,8 +371,8 @@
   background: var(--pactor-chat-bg);
 }
 
-/* host 行内容器：对话列与面板的 flex 行（gutter 契约挂在行上——
- * host padding 会同时作用于通栏 header） */
+/* host 行内容器：__main 左列与面板的 flex 行（gutter 契约挂在行上——
+ * __main 内的 header / 对话列共享行 padding 的左 gutter） */
 .pactor-chat-inspector-host__row {
   display: flex;
   flex: 1;
@@ -379,15 +380,20 @@
   min-height: 0;
 }
 
-/* 面板打开时行内直子：AppShell 填满剩余空间；workspace 只缩不伸，
- * 宽度受 --pactor-chat-content-width 限宽，margin auto 在剩余空间内居中 */
-.pactor-chat-inspector-host__row > .pactor-chat-shell {
+/* __main 左列：header + 主区（AppShell / workspace）纵向堆叠，
+ * 宽度 = 行宽减去面板宽（面板打开时 header 与对话区同宽） */
+.pactor-chat-inspector-host__main {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-width: 0;
+  min-height: 0;
 }
 
-.pactor-chat-inspector-host__row > .pactor-chat-workspace {
-  flex: 0 1 auto;
+.pactor-chat-inspector-host__main > .pactor-chat-shell,
+.pactor-chat-inspector-host__main > .pactor-chat-workspace {
+  flex: 1;
+  min-height: 0;
   min-width: 0;
 }
 
@@ -408,8 +414,11 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  /* 默认宽对齐对话列；上限 host 宽 2/3（与拖拽夹取一致），下限 min-width 令牌 */
+  /* 默认宽对齐对话列；上限 host 宽 2/3（与拖拽夹取一致），下限 min-width 令牌。
+   * max-width 是拖拽 inline 宽度的硬兜底：inline width 不能覆盖 max-width，
+   * 拖拽夹取偏差 / 拖拽后窗口尺寸变化时面板也不会突破 2/3 上限 */
   width: min(var(--pactor-chat-inspector-width), calc(100% * 2 / 3));
+  max-width: calc(100% * 2 / 3);
   min-width: var(--pactor-chat-inspector-min-width);
   flex-shrink: 0;
   border-left: 1px solid var(--pactor-chat-border);
@@ -627,8 +636,10 @@
     right: 0;
     z-index: 50;
     box-shadow: var(--pactor-chat-shadow-composer);
-    /* 抽屉形态：宽度不超出视口，下限令牌不适用 */
+    /* 抽屉形态：宽度不超出视口，下限令牌不适用；
+     * max-width 兜底拖拽残留的 inline 宽度（桌面拖拽后切窄屏） */
     width: min(var(--pactor-chat-inspector-width), 92vw);
+    max-width: 92vw;
     min-width: 0;
   }
 
@@ -889,7 +900,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 24px 2px 4px;
+  padding: 24px 2px;
   scrollbar-width: thin;
   scrollbar-color: var(--pactor-chat-border) transparent;
   -webkit-mask-image: linear-gradient(
@@ -1065,8 +1076,6 @@
 .pactor-chat-message__actions {
   display: flex;
   gap: 4px;
-
-  opacity: 0;
   transition: opacity 0.15s ease;
 }
 
@@ -1090,7 +1099,6 @@
 .pactor-chat-message__time {
   flex-shrink: 0;
   color: var(--pactor-chat-muted-fg);
-  font-size: 11px;
   line-height: 18px;
 }