{"_id":"@buddhilive/dsh-client-ui-attachment","name":"@buddhilive/dsh-client-ui-attachment","dist-tags":{"alpha":"0.1.2-alpha.3","latest":"0.1.2-alpha.3"},"versions":{"0.1.2-alpha.3":{"name":"@buddhilive/dsh-client-ui-attachment","description":"Dynamic attachment presentation plugin for conversation input, message-image, and trajectory image slots","version":"0.1.2-alpha.3","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/Buddhilive/buddhi-ai-harness.git","directory":"packages/client/ui-attachment"},"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":["@buddhilive/dsh-client-ui-chat","@buddhilive/dsh-client-ui-conversation","@buddhilive/dsh-client-ui-renderer","@buddhilive/dsh-client-ui-trajectory"],"platform":"web"}},"license":"MIT","dependencies":{"clsx":"^2.0.0"},"devDependencies":{"@types/react":"~18.3.1","@types/react-dom":"~18.3.0","react":"^18.2.0","react-dom":"^18.2.0","@deepseek-ai/cordis":"^4.0.2","@buddhilive/dsh-invariants":"^0.1.2-alpha.3","@buddhilive/dsh-client-ui-chat":"^0.1.2-alpha.3","@buddhilive/dsh-client-ui-conversation":"^0.1.2-alpha.3","@buddhilive/dsh-client-ui-trajectory":"^0.1.2-alpha.3","@buddhilive/dsh-client-ui-renderer":"^0.1.2-alpha.3","@buddhilive/dsh-client-ui-primitives":"^0.1.2-alpha.3","@buddhilive/dsh-client-ui-slots":"^0.1.2-alpha.3","@buddhilive/dsh-attachment":"^0.1.2-alpha.3"},"peerDependencies":{"@deepseek-ai/cordis":"^4.0.2"},"scripts":{"bundle":"tsdown","watch":"tsdown --watch"},"_id":"@buddhilive/dsh-client-ui-attachment@0.1.2-alpha.3","bugs":{"url":"https://github.com/Buddhilive/buddhi-ai-harness/issues"},"homepage":"https://github.com/Buddhilive/buddhi-ai-harness#readme","_integrity":"sha512-f9jfJbKbuAz0qn1LQwwTjpUwWQWGvtQ2vwi3op8jooJiirPawiUei19d5yukRnCmPnbI+/CnJOpSJzqvg6dJGA==","_resolved":"C:\\DevDojo\\Buddhi\\buddhi-ai-harness\\dist\\npm\\buddhilive-dsh-client-ui-attachment-0.1.2-alpha.3.tgz","_from":"file:C:/DevDojo/Buddhi/buddhi-ai-harness/dist/npm/buddhilive-dsh-client-ui-attachment-0.1.2-alpha.3.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-f9jfJbKbuAz0qn1LQwwTjpUwWQWGvtQ2vwi3op8jooJiirPawiUei19d5yukRnCmPnbI+/CnJOpSJzqvg6dJGA==","shasum":"378ec3af88b1d25dbbc9e33880d93e8ae9545d13","tarball":"https://registry.npmjs.org/@buddhilive/dsh-client-ui-attachment/-/dsh-client-ui-attachment-0.1.2-alpha.3.tgz","fileCount":18,"unpackedSize":62819,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCKxIi8mP3eblTByqhbV0/N+9X6iLV7DStykYAwRE6nTwIhAI42MuxjuYWmBEYoI5UZlb4jlFW7hczYwl48wjpglrgX"}]},"_npmUser":{"name":"buddhilive","email":"visitbudkavin@gmail.com"},"directories":{},"maintainers":[{"name":"buddhilive","email":"visitbudkavin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dsh-client-ui-attachment_0.1.2-alpha.3_1788166090852_0.8207997300273495"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-31T08:48:10.720Z","0.1.2-alpha.3":"2026-08-31T08:48:10.993Z","modified":"2026-08-31T08:48:11.145Z"},"maintainers":[{"name":"buddhilive","email":"visitbudkavin@gmail.com"}],"description":"Dynamic attachment presentation plugin for conversation input, message-image, and trajectory image slots","homepage":"https://github.com/Buddhilive/buddhi-ai-harness#readme","repository":{"type":"git","url":"git+https://github.com/Buddhilive/buddhi-ai-harness.git","directory":"packages/client/ui-attachment"},"bugs":{"url":"https://github.com/Buddhilive/buddhi-ai-harness/issues"},"license":"MIT","readme":"---\ndescription: \"对话 UI 的附件呈现：草稿图片栏、文档拖放目标、历史图片画廊与原图灯箱；供 Web 附件体验的用户与维护者阅读。\"\nkind: \"package-reference\"\n---\n\n# @buddhilive/dsh-client-ui-attachment\n\n[English](README.md) | 中文\n\n## 概述\n\n本包渲染对话 UI 中与附件相关的一切：composer 下的待发送草稿图片、全视口拖放邀请层、Chat 与 Trajectory 中的持久图片，以及查看原图的灯箱。它是纯呈现层——附件数据、图片加载与回调都经声明槽位来自 conversation 包。需要 DeepSeek Chat 风格的图片体验时选择它；非图片文件在此没有任何表面。\n\n## 目录\n\n- [使用本包](#use-this-package)\n- [理解实现](#understand-the-implementation)\n- [进一步探索](#further-exploration)\n- [模型体验](#model-experience)\n- [已知限制与延期工作](#known-limitations-and-deferred-work)\n- [开发备注](#dev-note)\n\n-----\n\n<a id=\"use-this-package\"></a>\n## 使用本包\n\n与 [`ui-conversation`](../ui-conversation/README.zh.md) 一起挂载本插件；它等待 conversation 包的槽位声明，并把自身表面注册进这些槽位。用户随即看到：带逐图删除与点击打开的草稿图片栏、带上限说明的拖放遮罩、按数量定尺寸的消息图片，以及支持 Escape／遮罩／关闭按钮的灯箱。\n\n### 草稿图片\n\n草稿图片以固定 64px 缩略图呈现在一行横向滚动条中；溢出隐藏时由边缘箭头翻页，滚动条保持隐藏。新增条目滚动到栏尾展示，删除保持原位，单击经持有方的 `onOpen` 打开原图。\n\n### 消息图片与灯箱\n\n一条消息仅有的一张图按长边 240px 渲染（宽高比钳制在 [0.25, 4]，从不放大）；多图中的一张渲染为固定 64px 方块。加载完成的图片单击打开文档级灯箱；加载失败则显示重试控件。灯箱按 Escape、按下遮罩或点关闭按钮关闭，并把焦点还给打开者。\n\n### 拖放遮罩\n\n文件拖拽悬停页面时，全视口遮罩宣布可拖放：插画、标题，接受拖放时再加一行上限说明。遮罩只呈现状态——接受或拒绝由持有方的 document 级监听器决定。\n\n-----\n\n<a id=\"understand-the-implementation\"></a>\n## 理解实现\n\n<details>\n<summary>实现细节——点击展开</summary>\n\n插件通过 `ctx.slots.inject` 等待 `conversation.input.attachments`、`conversation.message.images` 与 `conversation.trajectory.images`。随后它注册 composer rail、文档拖放目标、供 Chat 和 Trajectory 共用的历史图片 gallery，以及原图灯箱。呈现组件保持纯 props：conversation 槽位持有方提供附件数据、图片加载、回调与语言包翻译器；包入口不导出任何组件。\n\n| 文件 | 职责 |\n|---|---|\n| [`src/client/ComposerAttachments.tsx`](src/client/ComposerAttachments.tsx) | 草稿图片栏＋拖放遮罩的组装 |\n| [`src/AttachmentRail.tsx`](src/AttachmentRail.tsx) | 滚动缩略图栏、滚轮转换、边缘箭头 |\n| [`src/client/MessageImages.tsx`](src/client/MessageImages.tsx) | 每消息画廊＋灯箱的组装 |\n| [`src/MessageImage.tsx`](src/MessageImage.tsx) | 单图尺寸、加载／重试、点击打开；本地提交回显预览直接显示其 object URL |\n| [`src/ImageLightbox.tsx`](src/ImageLightbox.tsx) | 铺在共享遮罩上的文档级模态预览 |\n| [`src/DropOverlay.tsx`](src/DropOverlay.tsx) | 不接收指针事件的拖拽邀请 portal |\n\n</details>\n\n-----\n\n<a id=\"further-exploration\"></a>\n## 进一步探索\n\n当附件面不够用时阅读以下页面。它们从本包填充的槽位进入拥有输入流程的会话外壳。\n\n- [ui-conversation](../ui-conversation/README.zh.md)——声明附件槽位并拥有 composer 与图片摄入。\n- [Web 客户端架构](../../../.agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.zh.md)——浏览器插件行如何加载并注册槽位。\n- [客户端包映射](../README.zh.md)——相邻的浏览器 UI 包。\n\n-----\n\n<a id=\"model-experience\"></a>\n## 模型体验\n\n无，因为该插件只渲染由对话 UI 提供的附件状态，不贡献模型可见输入。\n\n#### KV Cache 影响\n\n无；该包既不组装也不发送提供方请求。\n\n## 已知限制与延期工作\n\n<a id=\"known-limitations-and-deferred-work\"></a>\n\n\n这些限制界定了当前附件表面。它们是包约束，不是通用图片查看器对比或任务积压。\n\n- **仅支持图片**——非图片文件尚无附件栏卡片与历史渲染；DeepSeek Chat 风格的文件卡片和上传进度等输入框接受非图片附件后再做。\n- **灯箱无缩放与下载**——预览仅以适配视口的尺寸渲染原图。\n- **灯箱不锁定焦点**——它设置 `aria-modal` 并在关闭时归还焦点，但 Tab 仍可移动到背后的页面。\n\n<a id=\"dev-note\"></a>\n### 开发备注\n\n<details>\n<summary>维护者的工作上下文——点击展开</summary>\n\n无。\n\n</details>\n","readmeFilename":"README.zh.md","_rev":"1-d85ccee3b08b16d7787e317dd6209775"}