@pactor-app/chat 0.1.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/chat",
-  "version": "0.1.0",
+  "version": "1.1.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": {
-    "lucide-react": "^1.31.0",
-    "@pactor-app/runtime": "0.1.0",
-    "@pactor-app/markdown": "0.1.0",
-    "@pactor-app/core": "0.1.0",
-    "@pactor-app/permission": "0.1.0"
+    "@pactor-app/ui": "1.1.0",
+    "@pactor-app/permission": "1.1.0",
+    "@pactor-app/markdown": "1.1.0",
+    "@pactor-app/core": "1.1.0",
+    "@pactor-app/runtime": "1.1.0"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -65,8 +65,7 @@
     "@types/react-dom": "^19.2.4",
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "@pactor-app/ui": "0.1.0"
+    "react-dom": "^19.2.8"
   },
   "scripts": {
     "build": "tsup",

package/styles.css

@@ -109,6 +109,37 @@
     'Times New Roman', serif;
 }
 
+/* ------------------------------------------------------------
+ * chrome DSL 渲染层（spec: chat-chrome-dsl / chrome 令牌映射）：
+ * DSL 渲染的 chrome 子树（宿主 @pactor-app/ui 组件消费 shadcn
+ * 语义令牌）统一包在本容器内，把 --pactor-chat-* 映射为 shadcn
+ * 语义令牌——--pactor-chat-* 仍为皮肤唯一配置入口，暗色经上方
+ * [data-pactor-theme='dark'] 覆盖链自动生效。
+ * display:contents 使容器不参与布局；自定义属性沿 DOM 树继承，
+ * 不受 display:contents 影响。
+ * ------------------------------------------------------------ */
+.pactor-chat-chrome {
+  display: contents;
+  --background: var(--pactor-chat-bg);
+  --foreground: var(--pactor-chat-fg);
+  --card: var(--pactor-chat-card);
+  --card-foreground: var(--pactor-chat-fg);
+  --popover: var(--pactor-chat-card);
+  --popover-foreground: var(--pactor-chat-fg);
+  --primary: var(--pactor-chat-primary);
+  --primary-foreground: var(--pactor-chat-primary-fg);
+  --secondary: var(--pactor-chat-muted);
+  --secondary-foreground: var(--pactor-chat-fg);
+  --muted: var(--pactor-chat-muted);
+  --muted-foreground: var(--pactor-chat-muted-fg);
+  --accent: var(--pactor-chat-muted);
+  --accent-foreground: var(--pactor-chat-fg);
+  --destructive: var(--pactor-chat-danger);
+  --border: var(--pactor-chat-border);
+  --input: var(--pactor-chat-border);
+  --ring: var(--pactor-chat-primary);
+}
+
 /* ============================================================
  * 2. 布局（chat 布局 + 消息区）
  * ============================================================ */
@@ -186,194 +217,87 @@
 }
 
 /* ------------------------------------------------------------
- * AppShell（spec: chat-app-shell）：侧栏 + 主区外壳。
- * 桌面（≥768px）flex 同行；移动端（<768px）侧栏退出文档流
- * 变为覆盖抽屉，布局切换全部由媒体查询表达，JS 只管开合。
-/* AppShell（spec: chat-app-shell）：侧栏 + 主区外壳。
- * 桌面（≥768px）flex 同行；移动端（<768px）侧栏退出文档流
- * 变为覆盖抽屉，布局切换全部由媒体查询表达，JS 只管开合。
- * 高度填满父容器（height: 100%）：嵌入任意定高容器即正确；
- * 父级无定高时退化为内容高度。standalone 顶层挂载时宿主
- * 容器定高（如 100dvh）属宿主职责（嵌入契约）。
+ * AppShell（spec: chat-app-shell / chat-on-ui-sidebar）：外壳结构与
+ * 交互由 ui Sidebar 承担（data-slot 结构），chat 侧仅做令牌映射与
+ * 尺寸对齐——--pactor-chat-* 仍为皮肤唯一配置入口，暗色经覆盖链
+ * 自动生效。高度填满父容器（AppShell 传入 h-full min-h-0）。
  * ------------------------------------------------------------ */
 
 .pactor-chat-shell {
-  display: flex;
-  height: 100%;
   overflow: hidden;
   background: var(--pactor-chat-bg);
   color: var(--pactor-chat-fg);
   font-size: 14px;
   line-height: 1.6;
-}
-
-/* 桌面：侧栏为固定宽度 flex 列；背景独立令牌（决策 D5：比工作区
- * 暖白灰深一档），暗色经令牌覆盖自动生效 */
-.pactor-chat-shell__sidebar {
+  /* ui Sidebar 消费的 sidebar 系列语义令牌 → chat 令牌（映射手法与
+     .pactor-chat-chrome 一致） */
+  --sidebar: var(--pactor-chat-sidebar-bg);
+  --sidebar-foreground: var(--pactor-chat-fg);
+  --sidebar-border: var(--pactor-chat-border);
+  --sidebar-accent: var(--pactor-chat-muted);
+  --sidebar-accent-foreground: var(--pactor-chat-fg);
+  --sidebar-primary: var(--pactor-chat-primary);
+  --sidebar-primary-foreground: var(--pactor-chat-primary-fg);
+  --sidebar-ring: var(--pactor-chat-primary);
+}
+
+/* 侧栏宽度对齐令牌（覆盖 ui 的 w-60；icon rail 64px 与历史一致） */
+.pactor-chat-shell [data-slot='sidebar'] {
   width: var(--pactor-chat-sidebar-width);
-  flex-shrink: 0;
-  border-right: 1px solid var(--pactor-chat-border);
-  background: var(--pactor-chat-sidebar-bg);
 }
 
-/* 框架模式（提供 brand / sidebarFooter 时）：品牌行 + 滚动区 + 底部区
- * 的 flex 列；未提供时侧栏直挂调用方内容（零渲染承诺） */
-.pactor-chat-shell__sidebar--framed {
-  display: flex;
-  flex-direction: column;
-}
-
-/* 桌面品牌行（决策 D3）：brand 左对齐，折叠钮在右 */
-.pactor-chat-shell__sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex-shrink: 0;
-  padding: 12px 12px 4px;
-}
-
-.pactor-chat-shell__brand {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] {
+  width: 64px;
 }
 
-/* 侧栏滚动区：菜单（height:100% + 自有 overflow）之外的任意内容
- * 也可滚动；底部区固定不随滚动 */
-.pactor-chat-shell__sidebar-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+/* 移动端顶栏高度与遮罩色对齐令牌 */
+.pactor-chat-shell [data-slot='sidebar-topbar'] {
+  height: var(--pactor-chat-shell-topbar-height);
 }
 
-.pactor-chat-shell__sidebar-footer {
-  flex-shrink: 0;
-  padding: 12px;
-  border-top: 1px solid var(--pactor-chat-border);
+.pactor-chat-shell [data-slot='sidebar-scrim'] {
+  background: var(--pactor-chat-shell-scrim);
 }
 
-/* 桌面折叠（icon rail，决策 D3）：收窄为图标栏——菜单只显图标，
- * label / badge / dot / 分组标题 / 底部区 / 品牌文案隐藏（图标以
- * title 属性兜底可访问名，见 ChatSidebarMenu）。仅桌面生效：移动端
- * 抽屉语义不受影响 */
-@media (min-width: 768px) {
-  .pactor-chat-shell__sidebar--collapsed {
-    width: 64px;
-  }
-
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-shell__sidebar-header {
-    justify-content: center;
-    padding-inline: 8px;
-  }
-
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-shell__brand {
-    display: none;
-  }
-
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu {
-    padding-inline: 8px;
-  }
-
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__item {
-    justify-content: center;
-    padding-inline: 0;
-  }
-
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__label,
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__badge,
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__dot,
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__group,
-  .pactor-chat-shell__sidebar--collapsed .pactor-chat-shell__sidebar-footer {
-    display: none;
-  }
+/* 桌面折叠（icon rail，决策 D3）：fallback 手写菜单降级为仅图标
+ * （DSL 路径的 ui Menu 经 useSidebarDrawer().collapsed 自感知，
+ * data-collapsed 仅在桌面折叠时出现，无需媒体查询） */
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] .pactor-chat-menu {
+  padding-inline: 8px;
 }
 
-.pactor-chat-shell__main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] .pactor-chat-menu__item {
+  justify-content: center;
+  padding-inline: 0;
 }
 
-/* 移动端顶栏：菜单按钮 + brand 插槽；桌面隐藏 */
-.pactor-chat-shell__topbar {
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] .pactor-chat-menu__label,
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] .pactor-chat-menu__badge,
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] .pactor-chat-menu__dot,
+.pactor-chat-shell [data-slot='sidebar'][data-collapsed] .pactor-chat-menu__group {
   display: none;
-  align-items: center;
-  gap: 4px;
-  height: var(--pactor-chat-shell-topbar-height);
-  flex-shrink: 0;
-  padding: 0 8px;
-  border-bottom: 1px solid var(--pactor-chat-border);
 }
 
-.pactor-chat-shell__menu svg {
-  width: 18px;
-  height: 18px;
-}
+/* 对话列在 shell content 内的间距（content 区 padding 承担）与
+ * 面板打开时的贴右处理见下方 :has 规则 */
 
-.pactor-chat-shell__content {
-  flex: 1;
-  min-height: 0;
+/* shell 主内容区：列布局 + 内边距（ui Sidebar 的 sidebar-content 仅
+   min-w-0 flex-1，对话列间距由这里承担） */
+.pactor-chat-shell [data-slot='sidebar-content'] {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   padding: 12px 16px 16px;
 }
 
-/* 对话列在 shell content 内的间距（content 区 padding 承担）与
- * 面板打开时的贴右处理见下方 :has 规则 */
-
 /* 产出物面板打开（spec: chat-artifact-panel）：面板贴容器右缘——
  * 内容区右/上/下 padding 归零，面板 border-left 作分隔线 */
-.pactor-chat-shell__content:has(> .pactor-chat-inspector-host) {
+.pactor-chat-shell [data-slot='sidebar-content']:has(> .pactor-chat-inspector-host) {
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
 }
 
-/* 抽屉遮罩：仅打开时渲染；桌面隐藏 */
-.pactor-chat-shell__scrim {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  background: var(--pactor-chat-shell-scrim);
-}
-
-@media (max-width: 767px) {
-  .pactor-chat-shell__sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 50;
-    box-shadow: var(--pactor-chat-shadow-composer);
-    transform: translateX(-100%);
-    transition: transform 0.2s ease-out;
-  }
-
-  /* 移动端品牌维持顶栏现状（决策 D3）：抽屉内不重复渲染品牌行 */
-  .pactor-chat-shell__sidebar-header {
-    display: none;
-  }
-
-  .pactor-chat-shell__sidebar[data-open='true'] {
-    transform: translateX(0);
-  }
-
-  .pactor-chat-shell__scrim {
-    display: block;
-  }
-
-  .pactor-chat-shell__topbar {
-    display: flex;
-  }
-}
-
 /* ------------------------------------------------------------
  * ArtifactPanel（spec: chat-artifact-panel，设计决策 D2）：
  * 产出物预览面板。桌面（≥768px）为工作区右侧固定宽栏（flex 同行，
@@ -431,15 +355,6 @@
   touch-action: none;
 }
 
-.pactor-chat-inspector__resize:hover,
-.pactor-chat-inspector__resize:active {
-  background: color-mix(
-    in oklab,
-    var(--pactor-chat-primary) 35%,
-    transparent
-  );
-}
-
 .pactor-chat-inspector__header {
   display: flex;
   align-items: center;
@@ -576,6 +491,10 @@
 
 .pactor-chat-artifact-card__open {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
   padding: 4px 10px;
   border: 1px solid var(--pactor-chat-border);
   border-radius: var(--pactor-chat-radius-sm);
@@ -654,17 +573,6 @@
   align-items: center;
 }
 
-/* 未知图标名的占位圆点（不抛错的受控降级） */
-.pactor-chat-menu__icon-placeholder {
-  width: 6px;
-  height: 6px;
-  margin: 0 4px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background: var(--pactor-chat-muted-fg);
-  opacity: 0.5;
-}
-
 .pactor-chat-menu__label {
   flex: 1;
   min-width: 0;
@@ -759,6 +667,21 @@
   background: var(--pactor-chat-muted-fg);
 }
 
+/* Composer 承载坞（空态居中组与钉底位共用）：padding-bottom 为钉底态
+ * 与页面底部留出空白；composerBottom 槽（未提供不渲染）居中弱提示 */
+.pactor-chat-view__composer-dock {
+  width: 100%;
+  padding-bottom: 12px;
+}
+
+.pactor-chat-view__composer-bottom {
+  margin-top: 8px;
+  text-align: center;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 /* ============================================================
  * 3. 空状态（spec: chat-empty-state）
  * ============================================================ */
@@ -1105,7 +1028,7 @@ button.pactor-chat-trace__header:hover,
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin-left: 4px;
+  /* margin-left: 4px; */
 }
 
 .pactor-chat-trace__entry-title {
@@ -1460,6 +1383,53 @@ button.pactor-chat-trace__header:hover,
   flex: 1;
 }
 
+/* Composer footer 槽（spec: chat-composer-slots / Composer footer 槽）：
+   工具栏下方的自定义区域，结构与 ChatInput footer 一致（border-t 分隔） */
+.pactor-chat-composer__footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 -14px -12px;
+  padding: 8px 12px 0;
+  border-top: 1px solid var(--pactor-chat-border);
+}
+
+/* ------------------------------------------------------------
+ * Composer DSL 呈现路径（spec: chat-composer-on-chatinput）：
+ * 盒模型让位 ChatInput 容器（边框 / 圆角 / 阴影 / 内边距由
+ * ChatInput 承担，经 pactor-chat-chrome 令牌映射着色），本容器
+ * 只保留布局与拖放态；focus 高亮由 ChatInput 自身 focus-within
+ * ring 承担，避免双层描边。
+ * ------------------------------------------------------------ */
+.pactor-chat-composer--dsl {
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.pactor-chat-composer--dsl:focus-within {
+  border-color: transparent;
+}
+
+.pactor-chat-composer--dsl.pactor-chat-composer--dragover {
+  border-color: var(--pactor-chat-primary);
+  border-radius: var(--pactor-chat-radius-xl);
+}
+
+/* 输入高度下限 / 上限（与 ChatInput textarea 的 min-h-[60px] 一致；
+   自适应由 field-sizing-content 承担，超上限内部滚动） */
+.pactor-chat-composer--dsl [data-slot='chat-input'] textarea {
+  min-height: 60px;
+  max-height: 200px;
+}
+
+/* header 槽空态（无附件无 chips）时收起包装，避免多余上间距 */
+.pactor-chat-composer--dsl [data-slot='chat-input'] > .px-3.pt-3:empty {
+  display: none;
+}
+
 /* ------------------------------------------------------------
  * 内建锚定弹层 AnchoredPopover（chat-builtin-features 设计决策 D3）：
  * position: fixed，top/bottom/left 由 JS 按锚点计算（上方优先、
@@ -1558,28 +1528,70 @@ button.pactor-chat-trace__header:hover,
   font-size: 12.5px;
 }
 
-/* 内建模型 chip（Composer 工具栏右端，toolbarEnd 槽内容之前） */
+/* 内建模型 chip（Composer 工具栏右端，toolbarEnd 槽内容之前）：
+   无边框 ghost 形态（边框在工具栏里显脏），hover 以浅底反馈 */
 .pactor-chat-model-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
-  border: 1px solid var(--pactor-chat-border);
+  border: 1px solid transparent;
   border-radius: 999px;
-  background: var(--pactor-chat-card);
+  background: transparent;
   color: var(--pactor-chat-muted-fg);
   font-size: 12.5px;
   cursor: pointer;
   transition:
-    border-color 0.15s ease,
+    background-color 0.15s ease,
     color 0.15s ease;
 }
 
 .pactor-chat-model-chip:hover {
-  border-color: var(--pactor-chat-primary);
+  background: var(--pactor-chat-muted);
   color: var(--pactor-chat-fg);
 }
 
+/* ModelSelect DSL 路径（spec: chat-on-ui-components）：ui Select
+   收敛到工具栏节奏（触发器尺寸与 chip 相当，颜色经 chrome 令牌映射）；
+   触发器同为无边框 ghost 形态（覆盖 shadcn Select 的表单边框/阴影），
+   与 fallback chip 视觉一致 */
+.pactor-chat-model-select {
+  width: auto;
+  min-width: 112px;
+  font-size: 12.5px;
+}
+
+.pactor-chat-model-select [data-slot='select-trigger'] {
+  height: auto;
+  gap: 4px;
+  padding: 4px 10px;
+  border-color: transparent;
+  border-radius: 999px;
+  box-shadow: none;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12.5px;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.pactor-chat-model-select [data-slot='select-trigger']:hover {
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-fg);
+}
+
+/* 实心图标（spec: chat-icon-convergence）：停止钮方形等需 fill 的
+   图标（ui Icon 走描边体系，fill 经 CSS 覆盖 lucide svg 的 fill=none） */
+.pactor-chat-icon-fill {
+  fill: currentColor;
+}
+
+/* ArtifactPanel 标题栏 DSL 路径（spec: chat-on-ui-components）：
+   chrome 容器 display:contents，DSL Flex 占满标题行 */
+.pactor-chat-inspector__header-dsl {
+  width: 100%;
+}
+
 .pactor-chat-model-chip__label {
   max-width: 160px;
   overflow: hidden;