dsh-canvas-workspace 0.2.4-experimental.3 → 0.2.4-experimental.4

package/README.md

@@ -25,9 +25,15 @@
 
 Canvas 只在显示层处理历史和布局，不修改已有 DSH 会话事件。图片通过宿主授权的资源加载接口读取，不从展示文字推测附件。普通发送由原生输入框负责；测试不发送真实模型请求。
 
+## DSH 0.2.2 边界兼容
+
+修复新版宿主新增主面板包装层后，画布左侧仍保留原生侧栏轨道而裁切内容的问题。侧栏展开或收起进入画布都使用完整主区域，退出后恢复原来的侧栏状态、宽度和未发送草稿；不通过取消全局 `overflow` 掩盖边界。
+
+`node tests/frame-bounds.browser.mjs` 覆盖新旧主区域结构、不同侧栏/右栏宽度，并验证旧选择器会复现空白边界。`node tests/frame-bounds.host.mjs` 使用隔离的真实宿主，覆盖展开、收起、再展开进入与退出画布。可通过 `DSH_TEST_NODE`、`DSH_TEST_CLI`、`CHROMIUM_PATH` 指定测试运行时，不读取个人会话或调用模型。
+
 ## 开发与检查
 
-要求 Node.js `^22.19.0 || >=24`。当前开发依赖固定为 DSH `0.2.1-rc.3`；声明支持 `0.2.0-rc.2`、`0.2.1-rc.2` 与 `0.2.1-rc.3`，其它版本需单独验证。`0.2.4-experimental.2` 起直接支持 rc.3，安装时不需要版本兼容豁免。
+要求 Node.js `^22.19.0 || >=24`。当前开发依赖固定为 DSH `0.2.2-rc.1` 与 Cordis `4.1.0`；声明支持 `0.2.0-rc.2`、`0.2.1-rc.2`、`0.2.1-rc.3` 与 `0.2.2-rc.1`，其它版本需单独验证。源码修复版已适配 rc.1 新增的原生图片拖放接口，文件传输仍由宿主负责；旧宿主没有此服务时不阻塞画布加载。注意：该声明针对当前源码构建，不代表旧的 npm `0.2.4-experimental.2` 已包含这些适配。
 
 ```bash
 npm ci
@@ -44,6 +50,8 @@ npm run build
 
 桌面版的 `npm run test:host` 使用已安装的 macOS DSH、全新隔离 profile 和合成历史，覆盖原生画布页签与侧栏恢复。首次运行可用 `npm install --prefix .research/pnpm --ignore-scripts pnpm@11.28.5` 准备局部测试工具；不会改全局 pnpm 或个人 DSH 配置。
 
+`npm run test:touch` 增加两个画布入口的持续单指拖动回归（每轮 30 个采样、连续 3 轮，并检查松手后无回跳），避免只发送一次 move 漏掉触摸事件可取消性变化。相机移动不再重复渲染未变化的历史 Markdown/IUI 内容；12 条历史回复、60 次移动的 DOM 回归从 720 次正文渲染降为仅初始 12 次。
+
 `npm run test:touch` 使用 Chromium CDP 的真实多触点输入，覆盖横屏、竖屏、198×242 小屏及桌面视口，两个画布入口、双指中心缩放/平移、触点增减与替换、原生滚动/控件边界及取消恢复。浏览器已接管的滚动不会再转换为画布手势。本地自动化不等于 iOS Safari 真机验证；本次未做 iPhone、iPad 或 Apple Watch 真机测试。插件只调整页面内画布，不能修改或隐藏 Safari 的系统地址栏、标签栏与工具栏。
 
 `npm run dev` 启动独立 MOCK 演示。浏览器测试使用本地 Vite 页面，不连接用户当前运行中的 DSH；宿主测试脚本另需隔离的官方 DSH 测试环境。`npm run build` 生成宿主插件 `dist/` 与本地演示 `site/`。仓库包含可直接由现有 DSH 插件链接读取的 `dist/`，`site/` 和测试截图、日志不提交。

package/dist/client.js

@@ -418,7 +418,7 @@ function resolveWorkspacePath(cwd2, path2) {
   if (isAbsoluteWorkspacePath(path2)) return path2;
   if (cwd2 === void 0 || cwd2 === "") return path2;
   const separator = isWindowsStylePath(cwd2) && cwd2.includes("\\") ? "\\" : "/";
-  return `${cwd2.replace(/[/\\]+$/, "")}${separator}${path2.replace(/^[/\\]+/, "")}`;
+  return `${cwd2.replace(/[/\\]+$/, "")}${separator}${path2.replace(/^(?:\.?[/\\])+/, "")}`;
 }
 function fileMediaUrl(base, path2) {
   if (!/^https?:/u.test(base) && !base.startsWith("dsh-app://app/") || !isAbsoluteWorkspacePath(path2) || /^[/\\]{2}/u.test(path2) || /[\u0000-\u001f\u007f]/u.test(path2)) return void 0;
@@ -468,6 +468,28 @@ async function resolveNativeImageResource(base, cwd2, request) {
   return { ok: true, value: { src, alt } };
 }
 
+// src/host/native-file-drag.ts
+function createNativeFileDrag(ctx) {
+  let actions;
+  ctx.inject(["fileDrag"], (scope) => {
+    const current2 = scope.fileDrag.actions;
+    actions = current2;
+    scope.effect(() => () => {
+      if (actions === current2) actions = void 0;
+    });
+  });
+  return {
+    prepare(source, signal) {
+      if (!actions)
+        return Promise.reject(new Error("DSH file drag service unavailable"));
+      return actions.prepare(source, signal);
+    },
+    reportFailure() {
+      actions?.reportFailure();
+    }
+  };
+}
+
 // src/client.tsx
 var import_dsh_client_ui_primitives3 = require("@deepseek-ai/dsh-client-ui-primitives");
 
@@ -878,7 +900,8 @@ function useTouchViewport(stage, options) {
     cancelRef.current = cancel;
     const sample = (event) => {
       if ((event.type === "touchstart" || event.type === "touchmove") && !event.cancelable) {
-        cancel();
+        if (gesture.current.active) cancel();
+        else eligible.clear();
         return;
       }
       const rect = element3.getBoundingClientRect();
@@ -24429,7 +24452,7 @@ function ReplyBody({
     ] })
   ] });
 }
-function ReplyContent(props) {
+var ReplyContent = (0, import_react12.memo)(function ReplyContent2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     ReplyBoundary,
     {
@@ -24438,7 +24461,7 @@ function ReplyContent(props) {
       children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ReplyBody, { ...props }, props.messageId)
     }
   );
-}
+});
 
 // src/ui/UserMessageMedia.tsx
 var import_react13 = require("react");
@@ -24885,6 +24908,25 @@ function ChatCanvas({
     if (rail && typeof window.requestAnimationFrame === "function")
       rail.scrollTo({ top: rail.scrollTop, behavior: "instant" });
   };
+  (0, import_react15.useLayoutEffect)(() => {
+    const rail = userRail.current;
+    if (!rail) return;
+    const updateEdges = () => {
+      rail.dataset.overflowStart = String(rail.scrollTop > 1);
+      rail.dataset.overflowEnd = String(
+        rail.scrollTop + rail.clientHeight < rail.scrollHeight - 1
+      );
+    };
+    updateEdges();
+    rail.addEventListener("scroll", updateEdges, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateEdges);
+    observer?.observe(rail);
+    for (const child of rail.children) observer?.observe(child);
+    return () => {
+      rail.removeEventListener("scroll", updateEdges);
+      observer?.disconnect();
+    };
+  }, [pairScope, userMessageIds]);
   (0, import_react15.useLayoutEffect)(() => {
     const ids = pairs.userMessages.map((message) => message.id);
     const previous3 = seenRailMessages.current;
@@ -26065,6 +26107,16 @@ function ChatCanvas({
     iuiActions.current.set(key, pending);
     return pending;
   };
+  const iuiActionRef = (0, import_react15.useRef)(onIuiAction);
+  iuiActionRef.current = onIuiAction;
+  const handleIuiAction = (0, import_react15.useCallback)(
+    (action) => iuiActionRef.current(action),
+    []
+  );
+  const handleIuiResource = (0, import_react15.useMemo)(
+    () => resolveImage ? (request) => resolveImage(request, state.sessionId) : void 0,
+    [resolveImage, state.sessionId]
+  );
   const stop = async () => {
     const active = running.current;
     if (!active) return;
@@ -26469,8 +26521,8 @@ function ChatCanvas({
                                     iuiEnabled,
                                     renderMarkdown,
                                     renderImagePreview,
-                                    onIuiAction,
-                                    onIuiResource: resolveImage ? (request) => resolveImage(request, state.sessionId) : void 0
+                                    onIuiAction: handleIuiAction,
+                                    onIuiResource: handleIuiResource
                                   }
                                 ),
                                 reply.status === "running" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -30387,29 +30439,34 @@ var styles_default = `.canvas-app {
   border-radius: 20px;
   pointer-events: none;
 }
+/* A soft reading scrim, not a grey rectangular pane over the canvas. */
 .canvas-app .chat-user-history-glass {
   position: absolute;
-  /* Keep blur inside the rounded message-list background, without a top halo. */
   inset: 0;
   z-index: 0;
   border-radius: inherit;
   clip-path: inset(0 round 20px);
-  background: color-mix(in srgb, var(--cw-surface) 18%, transparent);
-  -webkit-backdrop-filter: blur(22px) saturate(0.95);
-  backdrop-filter: blur(22px) saturate(0.95);
+  background: linear-gradient(
+    to right,
+    transparent,
+    color-mix(in srgb, var(--cw-bg) 42%, transparent) 28%,
+    color-mix(in srgb, var(--cw-bg) 72%, transparent)
+  );
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
   -webkit-mask-image:
     linear-gradient(
       to right,
       transparent,
-      #000 8px,
-      #000 calc(100% - 8px),
+      #000 28px,
+      #000 calc(100% - 12px),
       transparent
     ),
     linear-gradient(
       to bottom,
       transparent,
-      #000 8px,
-      #000 calc(100% - 8px),
+      #000 24px,
+      #000 calc(100% - 24px),
       transparent
     );
   -webkit-mask-composite: source-in;
@@ -30417,15 +30474,15 @@ var styles_default = `.canvas-app {
     linear-gradient(
       to right,
       transparent,
-      #000 8px,
-      #000 calc(100% - 8px),
+      #000 28px,
+      #000 calc(100% - 12px),
       transparent
     ),
     linear-gradient(
       to bottom,
       transparent,
-      #000 8px,
-      #000 calc(100% - 8px),
+      #000 24px,
+      #000 calc(100% - 24px),
       transparent
     );
   mask-composite: intersect;
@@ -30454,6 +30511,39 @@ var styles_default = `.canvas-app {
   -webkit-user-select: none;
   user-select: none;
 }
+/* Overflow is a scroll affordance, not a hard cut through a blue bubble.
+   Keep fades proportional on tiny watch/landscape rails. */
+.canvas-app .chat-user-history {
+  --rail-fade-start: 0px;
+  --rail-fade-end: 0px;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--rail-fade-start),
+    #000 calc(100% - var(--rail-fade-end)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--rail-fade-start),
+    #000 calc(100% - var(--rail-fade-end)),
+    transparent
+  );
+}
+.canvas-app .chat-user-history[data-overflow-start="true"] {
+  --rail-fade-start: min(24px, 16%);
+}
+.canvas-app .chat-user-history[data-overflow-end="true"] {
+  --rail-fade-end: min(24px, 16%);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .canvas-app .chat-user-history-glass {
+    background: var(--cw-surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 .canvas-app .chat-user-message-group {
   /* Give percentage bubble limits a definite rail width, not shrink-to-fit. */
   width: 100%;
@@ -31251,6 +31341,9 @@ var styles_default = `.canvas-app {
 }
 
 /* Match public slot/region markers only while our native View is mounted.
+   DSH 0.2.2 wraps the main slot in MainPanel. Match the frame child containing
+   the slot, not only a direct slot child, so the hidden sidebar leaves no
+   phantom clipping column. Do not remove the real viewport clipping boundary.
    Keep the right track and stored widths intact; exit restores the host layout. */
 :has(> [data-shell-overlay]):has([data-canvas-conversation-view])
   > :has(> [data-slot="sidebar"]),
@@ -31261,7 +31354,7 @@ var styles_default = `.canvas-app {
   display: none;
 }
 :has(> [data-shell-overlay]):has([data-canvas-conversation-view])
-  > :has(> [data-slot="main"]) {
+  > :has([data-slot="main"]) {
   grid-column: 1 / 3;
   grid-row: 1;
   border-left: none;
@@ -31516,14 +31609,17 @@ function NativeNavigationIcon() {
 function NativeSendIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_dsh_client_ui_primitives2.IconSendOutlineMedium, { size: 16 });
 }
-function renderNativeMarkdown(text8, streaming = false, cwd2) {
+function renderNativeMarkdown(text8, streaming, cwd2, fileDrag) {
   const pathImages = typeof document === "undefined" ? void 0 : createNativePathImages(document.baseURI, cwd2);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     import_dsh_client_ui_primitives2.MarkdownDelegateProvider,
     {
       fileImages: pathImages ? {
         resolve: pathImages.resolve,
-        labels: imageLabels
+        labels: imageLabels,
+        // Before 0.2.2 the renderer ignores this extra property. Current
+        // hosts receive their own transfer service through the adapter.
+        fileDrag
       } : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         import_dsh_client_ui_primitives2.MarkdownText,
@@ -31680,7 +31776,8 @@ function CanvasChat(props) {
       renderMarkdown: (text8, streaming, sessionId) => renderNativeMarkdown(
         text8,
         streaming,
-        sessionId ? hostSessions.find((session) => session.id === sessionId)?.cwd : void 0
+        sessionId ? hostSessions.find((session) => session.id === sessionId)?.cwd : void 0,
+        props.fileDrag
       ),
       renderImagePreview: renderNativeImagePreview,
       loadUserImage: (attachment, sessionId) => props.loadUserImage(sessionId, attachment),
@@ -31728,12 +31825,14 @@ function CanvasConversationView(props) {
   ) });
 }
 function apply(ctx) {
+  const fileDrag = createNativeFileDrag(ctx);
   const adapter = createDshAdapter(ctx);
   const demo = new URLSearchParams(location.search).get("canvasMock") === "1";
   const selected = demo ? createMockAdapter() : adapter;
   const returnToNative = () => ctx.layout.selectPanel(null);
   const accountActions = createNativeAccountActions(returnToNative);
   const canvasFace = () => ({
+    fileDrag,
     adapter: selected,
     mode: selected.kind,
     onExit: returnToNative,