dsh-snap-line 0.0.0-stage → 1.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lhuo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,202 @@
+# SnapLine
+
+> A clothesline of polaroid photos hanging under the DeepSeek Harness message composer.
+
+[中文](README.md) · **English**
+
+[![CI](https://github.com/LMhuo/dsh-snap-line/actions/workflows/ci.yml/badge.svg)](https://github.com/LMhuo/dsh-snap-line/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![Node.js](https://img.shields.io/badge/node-%3E%3D20-339933?logo=node.js&logoColor=white)](package.json)
+[![npm](https://img.shields.io/npm/v/dsh-snap-line?logo=npm)](https://www.npmjs.com/package/dsh-snap-line)
+[![DeepSeek Harness](https://img.shields.io/badge/DeepSeek%20Harness-0.2.x-4d6bfe)](https://github.com/deepseek-ai)
+
+SnapLine is a UI bundle for [DeepSeek Harness](https://github.com/deepseek-ai). It draws a gently sagging clothesline just under the chat composer, hung with a row of polaroid photos that sway in the breeze. Five hand-drawn illustrations ship by default; drop your own images into `photos/` and they replace the illustrations within seconds, no restart needed.
+
+![SnapLine preview](docs/images/preview.png)
+
+## Table of contents
+
+- [Features](#features)
+- [Screenshots](#screenshots)
+- [Install](#install)
+- [Use your own photos](#use-your-own-photos)
+- [How it works](#how-it-works)
+- [Development](#development)
+- [Compatibility](#compatibility)
+- [FAQ](#faq)
+- [Contributing](#contributing)
+- [Changelog](#changelog)
+- [License](#license)
+
+## Features
+
+- **Two places, one artwork**: hangs in the conversation's `conversation.composer.dock` slot (tight under the composer, never covering controls) and on the blank New Session hero;
+- **Five built-in illustrations**: the line is never empty when `photos/` has no images;
+- **Your own photos**: `.jpg` `.jpeg` `.png` `.webp` `.gif` `.avif`, natural filename order, live refresh within five seconds after adding, removing or replacing files;
+- **Adaptive layout**: up to six photos, evenly sampled when there are more; the more photos, the tighter they sit, each with its own tilt and sway rhythm;
+- **Restrained interaction**: hovering only uses CSS `:hover` and `transform` to give a photo a small nudge that settles back; clicking opens a lightbox — no mouse listeners, no extra re-renders;
+- **Keyboard friendly**: photos are focusable with Tab and open the lightbox with Enter or Space; while the lightbox is open Tab stays on its close button, Escape / backdrop / close button all dismiss it, and focus returns to the photo that opened it;
+- **Named for screen readers**: the clothesline, every photo, the lightbox and its close button carry bilingual Chinese/English accessible names;
+- **Respects system preferences**: `prefers-reduced-motion` disables the sway animation;
+- **Zero runtime dependencies**: plain ESM, no build step; `react` / `react-dom` come from the Harness module table;
+- **Photos never leave your machine**: the Host half serves them over the Harness web server's same-origin route; the plugin makes no external requests.
+
+## Screenshots
+
+| New Session hero | Lightbox |
+| --- | --- |
+| ![New Session hero with the enlarged clothesline](docs/images/hero.png) | ![Lightbox with an enlarged photo](docs/images/lightbox.png) |
+
+## Install
+
+SnapLine is a Harness bundle, so it can be installed from npm, GitHub or a local directory — an agent inside Harness does it through `plugin_manager`.
+
+### Option 1: npm (recommended)
+
+Published on npm as [`dsh-snap-line`](https://www.npmjs.com/package/dsh-snap-line).
+
+- Ask the Harness agent to install `dsh-snap-line` with `plugin_manager`'s `install_bundle`; or
+- run this in a terminal:
+
+```bash
+dsh plugin --profile <profile> add dsh-snap-line
+```
+
+DSH installs it from npm, composes the Host half from `dsh.bundle.patch` and loads the Client half from `dsh.client`. Once the plugin is listed in the community plugin market (awesome-dsh-plugin), it can also be installed by searching for it there.
+
+### Option 2: install from GitHub
+
+Send the repository URL to the Harness agent and ask it to install the bundle with `install_bundle`:
+
+```text
+https://github.com/LMhuo/dsh-snap-line.git
+```
+
+The `github:LMhuo/dsh-snap-line` shorthand works too. DSH installs it into the current profile with pnpm, then composes the Host half from `dsh.bundle.patch` and loads the Client half from `dsh.client`.
+
+When it finishes, the plugin appears in Harness's plugin list (the bundle list in `~/.dsh/profiles/<profile>/package.json`) and starts rendering under the composer.
+
+### Option 3: clone locally, then install (best for development)
+
+```bash
+git clone https://github.com/LMhuo/dsh-snap-line.git
+```
+
+Then ask the Harness agent to install that directory's **absolute path** with `install_bundle`. It writes a `link:` dependency into the current profile's `package.json` and adds it to the bundle list — no manual profile editing.
+
+### Disable and remove
+
+- Toggle the plugin off in Harness's plugin settings; or
+- Ask the agent to call `plugin_manager`'s `set_bundle` (disable / enable) or `remove_bundle` (remove).
+
+## Use your own photos
+
+The photo folder is **`photos/` inside the plugin package**:
+
+| Install style | Photo folder |
+| --- | --- |
+| Local directory / `link:` | `photos/` in this repository |
+| npm / GitHub install | `~/.dsh/profiles/<profile>/node_modules/dsh-snap-line/photos/` |
+
+> npm and GitHub installs ship without a `photos/` folder (private photos are never packed), so create that folder yourself.
+
+Drop images in and that's it:
+
+- Sorted by natural filename order (`1.jpg`, `2.jpg`, `10.jpg` — correctly ordered); non-ASCII filenames work too;
+- Up to six photos are shown; extras are evenly sampled;
+- Added, removed or replaced files show up within five seconds, no restart;
+- An empty folder brings back the built-in illustrations.
+
+> **Privacy**: images in `photos/` never enter Git and are never packed into the npm tarball (see `.gitignore` and `files` in `package.json`), so private photos are fine. They are served only by the local Harness port and never uploaded — but any local process that can reach that port can read them.
+
+## How it works
+
+```text
+photos/ ── Host half (index.js) ── GET /dsh-snap-line/photos.json ──┐
+                                                                    ├── Client half (client.js)
+photos/<name> ── GET /dsh-snap-line/photos/<name> ──────────────────┘    └── SVG clothesline + polaroid frames
+```
+
+- **Host half** (`index.js`): registers a `kind: 'prefix'` route at `/dsh-snap-line` for the photo manifest and the images. `lib/photos.js` is plain Node and rejects path traversal, hidden filenames and unknown media types, so it is unit-testable on its own;
+- **Client half** (`client.js`): registers in the `conversation.composer.dock` slot (`order: 2`) and polls the manifest every five seconds, rendering user photos or the built-in illustrations;
+- **Lightbox**: open it by clicking a photo, or by focusing one with Tab and pressing Enter / Space; Escape, the backdrop or the close button dismiss it, focus returns to the photo, and the page behind it does not scroll while it is open.
+- **New Session hero**: the Host renders `conversation.composer.dock` only for an active Session, so the blank hero has just an empty `[data-composer-dock]` container. The Client half also registers `HeroClothesline` on `shell.overlay`, checks every 250 ms for `[data-content-phase="hero"] [data-composer-dock]`, and portals the same clothesline into it via `react-dom`'s `createPortal`, scaled to 2× the measured composer width (capped at 600px). Once a real conversation mounts its dock entry, the hero copy steps aside; if `react-dom` or `shell.overlay` is unavailable it silently skips, leaving the normal dock rendering intact;
+- the dock slot is a fit-content flex row, so an SVG with `width: 100%` collapses to its intrinsic 300px — the conversation clothesline stays ~300px wide. The hero copy therefore uses an explicit pixel width instead of `max-width`.
+
+## Development
+
+```bash
+npm test       # node --test: photo listing, file route, manifest consistency — all tests
+npm run check  # syntax check + full test suite
+```
+
+No build step and no runtime dependencies. Editing `client.js` hot-reloads the browser half via HMR; editing `index.js` needs the plugin entry to be disabled and re-enabled once.
+
+For local debugging, install this repository as a `link:` bundle (option 3) so edits take effect immediately.
+
+### Repository layout
+
+```text
+dsh-snap-line/
+├── index.js            # Host half: registers the /dsh-snap-line prefix route
+├── lib/photos.js       # Photo listing / reading / route resource (plain Node, unit-tested)
+├── client.js           # Client half: clothesline SVG, slot registration, lightbox
+├── cordis.patch.yml    # Host plugin row inserted by the bundle
+├── locale/             # English and Chinese display metadata for the plugin manager
+├── icon.svg            # Vector icon shown in the plugin list
+├── screenshots.json    # Market screenshot list (points at docs/images)
+├── photos/             # Your photos (not committed by default)
+├── docs/               # README previews, market screenshots and the PNG icon
+├── test/               # node:test suites
+└── .github/workflows/  # GitHub Actions CI
+```
+
+## Compatibility
+
+| Item | Requirement |
+| --- | --- |
+| DeepSeek Harness | 0.2.x (web platform; developed against 0.2.2) |
+| Node.js | ≥ 20 (development and tests only; the runtime uses Harness's bundled Node) |
+| Plugin shape | bundle (`dsh` field in `package.json` + `cordis.patch.yml`) |
+
+The plugin declares `engines.dsh: ^0.2.0` in `package.json`: a Harness outside that range skips the bundle instead of loading something incompatible. If you need a wider range, the profile's `compatibility.json` supports per-bundle version exemptions.
+
+## FAQ
+
+**I added photos but the clothesline did not change.**
+Make sure they are in the `photos/` folder from the table above, then wait five seconds (the polling interval). Check that the extension is supported and the filename does not start with `.` (hidden files are ignored). With more than six photos only six are shown, evenly sampled.
+
+**Are my photos uploaded or published?**
+No. They are served by the local Harness web server over a same-origin route; the plugin makes no external requests and never writes photos into Git or the npm tarball.
+
+**Does it block clicks on the composer?**
+No. The wrapper is `pointer-events: none`; only the photo frames opt back in for hover and the lightbox click.
+
+**Can I change the number or size of photos?**
+Yes — edit `MAX_PHOTOS` (count), `HERO_SVG_WIDTH` (hero width) and `TILTS` / `DELAYS` / `DURATIONS` (tilt and sway rhythm) in `client.js`.
+
+**Does it support dark theme?**
+Currently it uses a fixed warm paper palette and does not follow the Harness theme. PRs welcome.
+
+**How do I upgrade?**
+npm installs: check for updates in the plugin market, or ask the agent to `install_bundle` again. Git installs: ask the agent to install the latest commit again, or `remove_bundle` first and reinstall. Every release is documented in [CHANGELOG.md](CHANGELOG.md).
+
+**Can I use it with a keyboard?**
+Yes. Photos are focusable with Tab and Enter / Space opens the lightbox; Tab stays on the close button while it is open, Escape closes it, and focus returns to the photo. 
+
+**Is commercial use allowed?**
+Yes, under the MIT license.
+
+## Contributing
+
+- Bugs and feature requests: open an issue with your Harness version, install style and reproduction steps;
+- Code: run `npm run check` first so all tests pass, then open a PR;
+- The project is also mirrored on [Gitee](https://gitee.com/Lhuo/dsh-snap-line); issues are welcome in either place.
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md).
+
+## License
+
+[MIT](LICENSE) © 2026 Lhuo

package/README.md

@@ -1,3 +1,202 @@
-# Temporary Holding Version
+# SnapLine
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> 一条挂在 DeepSeek Harness 消息输入框下方的照片晾衣绳。
+
+**中文** · [English](README.en.md)
+
+[![CI](https://github.com/LMhuo/dsh-snap-line/actions/workflows/ci.yml/badge.svg)](https://github.com/LMhuo/dsh-snap-line/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![Node.js](https://img.shields.io/badge/node-%3E%3D20-339933?logo=node.js&logoColor=white)](package.json)
+[![npm](https://img.shields.io/npm/v/dsh-snap-line?logo=npm)](https://www.npmjs.com/package/dsh-snap-line)
+[![DeepSeek Harness](https://img.shields.io/badge/DeepSeek%20Harness-0.2.x-4d6bfe)](https://github.com/deepseek-ai)
+
+SnapLine 是 [DeepSeek Harness](https://github.com/deepseek-ai) 的界面插件（bundle）。它在聊天输入框下方画一条微微下垂的晾衣绳，夹上一排拍立得照片，照片随风轻轻摆动。默认是五张手绘小画；把照片放进 `photos/` 文件夹，就会换成你自己的照片，几秒内自动刷新，无需重启。
+
+![SnapLine 预览](docs/images/preview.png)
+
+## 目录
+
+- [特性](#特性)
+- [截图](#截图)
+- [安装](#安装)
+- [使用自己的照片](#使用自己的照片)
+- [工作原理](#工作原理)
+- [开发](#开发)
+- [兼容性](#兼容性)
+- [常见问题](#常见问题)
+- [贡献](#贡献)
+- [更新日志](#更新日志)
+- [License](#license)
+
+## 特性
+
+- **两个位置都会出现**：既挂在会话页的 `conversation.composer.dock` 插槽里（紧贴输入框下方、不遮挡操作），也出现在新会话首页的空白 Hero 里；
+- **自带五张手绘插画**：`photos/` 为空时使用内置插画，不会出现空荡荡的绳子；
+- **换成自己的照片**：支持 `.jpg` `.jpeg` `.png` `.webp` `.gif` `.avif`，按文件名自然排序，增删后 5 秒内自动刷新；
+- **排版自适应**：最多显示 6 张，超过时均匀抽样；照片越多排得越密，每张有自己的倾斜角度与摆动节奏；
+- **交互克制**：悬停只靠 CSS `:hover` 与 `transform` 让照片轻轻晃一下再回正，点击打开灯箱预览，没有鼠标监听、没有多余重渲染；
+- **键盘友好**：照片可以用 Tab 聚焦，Enter / 空格打开灯箱；灯箱打开后 Tab 被约束在关闭按钮上，Esc、点击背景或关闭按钮都能退出，关闭后焦点回到打开它的照片；
+- **读屏器可读**：晾衣绳、每张照片、灯箱与关闭按钮都有中英双语的无障碍名称；
+- **尊重系统偏好**：`prefers-reduced-motion` 开启时不做摆动动画；
+- **零运行时依赖**：纯 ESM、无构建步骤，`react` / `react-dom` 复用 Harness 内置模块；
+- **照片不出本机**：Host 半通过 Harness web server 的同源路由提供图片，插件不发起任何外部请求。
+
+## 截图
+
+| 新会话首页 | 灯箱预览 |
+| --- | --- |
+| ![新会话首页：晾衣绳会自动放大](docs/images/hero.png) | ![灯箱预览：点击照片放大](docs/images/lightbox.png) |
+
+## 安装
+
+SnapLine 是 Harness 的 bundle 插件，可以走 npm、GitHub 或本地目录；安装由 Harness 里的 Agent 通过 `plugin_manager` 完成。
+
+### 方式一：npm（推荐）
+
+已发布到 npm：[`dsh-snap-line`](https://www.npmjs.com/package/dsh-snap-line)。
+
+- 让 Harness Agent 用 `plugin_manager` 的 `install_bundle` 安装 `dsh-snap-line`；
+- 或在终端运行：
+
+```bash
+dsh plugin --profile <profile> add dsh-snap-line
+```
+
+DSH 会从 npm 装好，并按 `dsh.bundle.patch` 组合 Host 半、按 `dsh.client` 加载 Client 半。收录到社区插件市场（awesome-dsh-plugin）后，也可以直接在 Harness 的插件市场里搜索安装。
+
+### 方式二：从 GitHub 安装
+
+把仓库地址发给 Harness Agent，并让它用 `install_bundle` 安装：
+
+```text
+https://github.com/LMhuo/dsh-snap-line.git
+```
+
+也支持 `github:LMhuo/dsh-snap-line` 简写。DSH 会先用 pnpm 把它装进当前 profile，再按 `dsh.bundle.patch` 组合 Host 半、按 `dsh.client` 加载 Client 半。
+
+安装成功后，插件会出现在 Harness 的插件列表（`~/.dsh/profiles/<profile>/package.json` 的 bundle 列表）里，并自动在输入框下方生效。
+
+### 方式三：本地克隆后安装（开发 / 调试推荐）
+
+```bash
+git clone https://github.com/LMhuo/dsh-snap-line.git
+```
+
+然后让 Harness Agent 用 `plugin_manager` 的 `install_bundle` 安装这个目录的**绝对路径**。`install_bundle` 会在当前 profile 的 `package.json` 中写入 `link:` 依赖并加入 bundle 列表，无需手动改 profile 文件。
+
+### 停用与卸载
+
+- 在 Harness 的插件设置里停用；
+- 或让 Agent 调用 `plugin_manager` 的 `set_bundle`（停用 / 启用）与 `remove_bundle`（移除）。
+
+## 使用自己的照片
+
+照片目录是**插件包目录下的 `photos/`**：
+
+| 安装方式 | 照片目录 |
+| --- | --- |
+| 本地目录 / `link:` 安装 | 本仓库的 `photos/` |
+| npm / GitHub 安装 | `~/.dsh/profiles/<profile>/node_modules/dsh-snap-line/photos/` |
+
+> npm 与 GitHub 安装的包默认不带 `photos/` 目录（私人照片不会被打进包），需要自己新建这个文件夹。
+
+把图片放进去即可：
+
+- 按文件名自然排序（`1.jpg`、`2.jpg`、`10.jpg` 顺序正确），中文文件名同样支持；
+- 最多显示 6 张，更多照片会均匀抽取 6 张；
+- 增删或替换后 5 秒内自动刷新，无需重启 Harness；
+- 清空文件夹会恢复插件内置的插画照片。
+
+> **隐私**：`photos/` 中的照片不会进入 Git，也不会被打进 npm 包（见 `.gitignore` 与 `package.json` 的 `files`），可以放心放私人照片。照片只由本机 Harness 端口提供，插件不会上传；但能访问该端口的本机进程可以看到这些图片。
+
+## 工作原理
+
+```text
+photos/ ──Host 半 (index.js)── GET /dsh-snap-line/photos.json ──┐
+                                                                ├── Client 半 (client.js)
+photos/<name> ── GET /dsh-snap-line/photos/<name> ──────────────┘    └── SVG 晾衣绳 + 拍立得相框
+```
+
+- **Host 半**（`index.js`）：用 `webServer.register({ kind: 'prefix', path: '/dsh-snap-line' })` 提供照片清单与图片。`lib/photos.js` 是纯 Node 实现，拒绝目录穿越、隐藏文件名和未知媒体类型，可独立测试；
+- **Client 半**（`client.js`）：注册到 `conversation.composer.dock` 插槽（`order: 2`），每 5 秒轮询一次清单，按清单渲染照片或内置插画；
+- **灯箱**：点击照片（或 Tab 聚焦后按 Enter / 空格）打开；Esc、点击背景或关闭按钮退出，关闭后焦点回到打开它的照片，灯箱打开期间背景不滚动。
+- **新会话首页**：Host 只在有 Session 时渲染 `conversation.composer.dock`，空白 Hero 里只有一个空的 `[data-composer-dock]` 容器。Client 半额外向 `shell.overlay` 注册 `HeroClothesline`，每 250ms 检查页面里是否存在 `[data-content-phase="hero"] [data-composer-dock]`，若有则通过 `react-dom` 的 `createPortal` 把同一条晾衣绳画进该容器，并按量到的输入框宽度放大到 2 倍（600px 封顶）。进入正常会话、dock 版出现后自动让位，不会重复显示；拿不到 `react-dom` 或 `shell.overlay` 时静默跳过，不影响 dock 渲染；
+- dock 插槽本身是 fit-content 的 flex 行，SVG 的 `width: 100%` 会退回固有 300px，所以会话页晾衣绳一直是 300px 左右；Hero 版因此使用显式像素宽度，而不是改 `max-width`。
+
+## 开发
+
+```bash
+npm test       # node --test：照片清单、静态文件路由、清单一致性等全部用例
+npm run check  # 语法检查 + 全部测试
+```
+
+没有构建步骤，也没有运行时依赖。修改 `client.js` 会通过 HMR 自动刷新浏览器半；修改 `index.js` 后需要在插件设置里停用再启用一次。
+
+本地调试时推荐用上面的「方式三」以 `link:` 方式安装本仓库，这样改代码即时生效。
+
+### 目录结构
+
+```text
+dsh-snap-line/
+├── index.js            # Host 半：注册 /dsh-snap-line 前缀路由
+├── lib/photos.js       # 照片清单 / 读取 / 路由资源（纯 Node，可单独测试）
+├── client.js           # Client 半：晾衣绳 SVG、插槽注册、灯箱
+├── cordis.patch.yml    # bundle 插入的 Host 插件行
+├── locale/             # 插件管理器中显示的中英文标题与描述
+├── icon.svg            # 插件列表里显示的矢量图标
+├── screenshots.json    # 插件市场卡片用的截图清单（指向 docs/images）
+├── photos/             # 你自己的照片（默认不提交）
+├── docs/               # README 预览图、市场截图与 PNG 图标
+├── test/               # node:test 测试
+└── .github/workflows/  # GitHub Actions CI
+```
+
+## 兼容性
+
+| 项目 | 要求 |
+| --- | --- |
+| DeepSeek Harness | 0.2.x（Web 平台；开发验证于 0.2.2） |
+| Node.js | ≥ 20（仅开发与测试需要，运行时使用 Harness 内置 Node） |
+| 插件形态 | bundle（`package.json` 的 `dsh` 字段 + `cordis.patch.yml`） |
+
+插件在 `package.json` 的 `engines.dsh` 中声明 `^0.2.0`：Harness 低于该范围时会跳过加载，避免在不兼容的版本上出错。需要更宽的兼容性时，可以用 profile 的 `compatibility.json` 做版本豁免。
+
+## 常见问题
+
+**放了照片但晾衣绳上没有变化？**
+先确认照片放进了上表对应的 `photos/` 目录，再等 5 秒（轮询间隔）。检查扩展名是否在支持列表内、文件名是否以 `.` 开头（隐藏文件会被忽略）。超过 6 张时只会均匀显示 6 张。
+
+**照片会被上传或公开吗？**
+不会。Photo 由本机 Harness web server 的同源路由提供，插件不发外部请求，也不会把照片写进 Git 或 npm 包。
+
+**会挡住消息输入框的点击吗？**
+不会。外层容器是 `pointer-events: none`，只有照片本身恢复指针事件，用于悬停与点击灯箱。
+
+**可以改照片数量或尺寸吗？**
+可以，在 `client.js` 中调整 `MAX_PHOTOS`（数量）、`HERO_SVG_WIDTH`（Hero 版宽度）、`TILTS` / `DELAYS` / `DURATIONS`（倾斜与摆动节奏）。
+
+**支持深色主题吗？**
+目前使用固定的暖色纸张配色，不随 Harness 主题切换；欢迎提交 PR。
+
+**怎么升级到新版本？**
+npm 安装：在插件市场里检查更新，或让 Agent 重新用 `install_bundle` 安装；Git 安装：让 Agent 重新安装最新提交，或先 `remove_bundle` 再安装。每个版本的变更见 [CHANGELOG.md](CHANGELOG.md)。
+
+**可以用键盘操作吗？**
+可以。照片可以用 Tab 聚焦，Enter / 空格打开灯箱；灯箱打开后 Tab 被约束在关闭按钮上，Esc 关闭，关闭后焦点回到照片。
+
+**可以商用吗？**
+可以，MIT 协议。
+
+## 贡献
+
+- 发现 bug、想要新功能：欢迎开 issue，尽量附上 Harness 版本、安装方式与复现步骤；
+- 提交代码：先 `npm run check` 保证全部测试通过，再发起 PR；
+- 本项目同时镜像在 [Gitee](https://gitee.com/Lhuo/dsh-snap-line)，两边都可以提 issue。
+
+## 更新日志
+
+见 [CHANGELOG.md](CHANGELOG.md)。
+
+## License
+
+[MIT](LICENSE) © 2026 Lhuo

package/client.js

@@ -0,0 +1,627 @@
+window.__ModuleLoader__.load({
+  id: 'dsh-snap-line',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+
+    /* Rope: quadratic from (18,14) to (682,14) with control point (350,46). */
+    const ROPE_LEFT = 18;
+    const ROPE_RIGHT = 682;
+    const ROPE_TOP = 14;
+    const ROPE_SAG = 32;
+
+    function ropeY(x) {
+      const t = (x - ROPE_LEFT) / (ROPE_RIGHT - ROPE_LEFT);
+      return ROPE_TOP + 2 * ROPE_SAG * t * (1 - t);
+    }
+
+    const CSS = `
+      .sl-sway {
+        transform-box: fill-box;
+        transform-origin: 50% 7px;
+        animation: sl-sway 6.8s ease-in-out infinite;
+      }
+      @keyframes sl-sway {
+        0%, 100% { transform: rotate(-1.15deg); }
+        50% { transform: rotate(1.15deg); }
+      }
+      .sl-wobble {
+        transform-box: fill-box;
+        transform-origin: 50% 7px;
+      }
+      @keyframes sl-wobble {
+        0% { transform: rotate(0deg); }
+        14% { transform: rotate(2.8deg); }
+        34% { transform: rotate(-2.1deg); }
+        54% { transform: rotate(1.45deg); }
+        74% { transform: rotate(-0.8deg); }
+        90% { transform: rotate(0.35deg); }
+        100% { transform: rotate(0deg); }
+      }
+      /*
+       * The wrapper is pointer-events: none so the artwork never steals clicks
+       * from the composer. Each photo frame opts back in so it can be hovered
+       * and clicked; the rest of the SVG stays transparent to the pointer. The
+       * nudge itself is transform-only: no layout, no JS listeners and no React
+       * re-renders while it plays.
+       */
+      .sl-photo {
+        pointer-events: auto;
+        touch-action: manipulation;
+        cursor: pointer;
+      }
+      .sl-photo:focus {
+        outline: none;
+      }
+      .sl-photo:focus-visible {
+        outline: 2px solid #a98d63;
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+      @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+        .sl-photo:hover .sl-wobble {
+          animation: sl-wobble 1.25s ease-in-out;
+        }
+      }
+      .sl-lightbox {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483000;
+        display: grid;
+        pointer-events: auto;
+        place-items: center;
+        padding: 24px;
+        background: rgba(20, 17, 13, 0.62);
+        animation: sl-lightbox-fade 160ms ease-out;
+      }
+      .sl-lightbox-photo {
+        display: inline-block;
+        max-width: 92vw;
+        padding: 12px;
+        background: #fcf8ef;
+        border-radius: 4px;
+        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
+        animation: sl-lightbox-pop 200ms ease-out;
+      }
+      .sl-lightbox-photo img {
+        display: block;
+        width: auto;
+        height: auto;
+        max-width: min(88vw, 1200px);
+        max-height: 78vh;
+        border-radius: 1px;
+      }
+      .sl-lightbox-polaroid {
+        width: min(360px, 72vw);
+        animation: sl-lightbox-pop 200ms ease-out;
+      }
+      .sl-lightbox-polaroid svg {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+      .sl-lightbox-close {
+        position: absolute;
+        top: 18px;
+        right: 20px;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: #fcf8ef;
+        color: #3c352c;
+        font-family: inherit;
+        font-size: 22px;
+        line-height: 1;
+        cursor: pointer;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+      }
+      .sl-lightbox-close:hover {
+        background: #ffffff;
+      }
+      .sl-lightbox-close:focus {
+        outline: none;
+      }
+      .sl-lightbox-close:focus-visible {
+        outline: 2px solid #f0e2c4;
+        outline-offset: 2px;
+      }
+      @keyframes sl-lightbox-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes sl-lightbox-pop {
+        from { transform: scale(0.94); }
+        to { transform: scale(1); }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .sl-sway { animation: none; }
+        .sl-lightbox,
+        .sl-lightbox-photo,
+        .sl-lightbox-polaroid { animation: none; }
+      }
+    `;
+
+    const defs = h('defs', null,
+      h('linearGradient', { id: 'slSunset', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#ffd27a' }),
+        h('stop', { offset: '52%', stopColor: '#ff9d76' }),
+        h('stop', { offset: '100%', stopColor: '#ea6a7c' })),
+      h('linearGradient', { id: 'slSea', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#4a7e9e' }),
+        h('stop', { offset: '100%', stopColor: '#1e405c' })),
+      h('linearGradient', { id: 'slMountainSky', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#b9def7' }),
+        h('stop', { offset: '100%', stopColor: '#eef8ff' })),
+      h('linearGradient', { id: 'slNight', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#141c33' }),
+        h('stop', { offset: '100%', stopColor: '#35486f' })),
+      h('linearGradient', { id: 'slMeadowSky', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#cfeaff' }),
+        h('stop', { offset: '100%', stopColor: '#ffe9ef' })),
+      h('linearGradient', { id: 'slGrass', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#6aa84f' }),
+        h('stop', { offset: '100%', stopColor: '#3f7a35' })),
+      h('linearGradient', { id: 'slBalloonSky', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#d6ecff' }),
+        h('stop', { offset: '100%', stopColor: '#fff3da' })),
+      h('linearGradient', { id: 'slHills', x1: '0', y1: '0', x2: '0', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#8fc27a' }),
+        h('stop', { offset: '100%', stopColor: '#5f9c55' })),
+      h('linearGradient', { id: 'slGlare', x1: '0', y1: '0', x2: '0.85', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#ffffff', stopOpacity: '0.16' }),
+        h('stop', { offset: '55%', stopColor: '#ffffff', stopOpacity: '0' })),
+      h('clipPath', { id: 'slClip' },
+        h('rect', { x: -26, y: 11, width: 52, height: 52, rx: 1.6 })),
+    );
+
+    function peg() {
+      return h('g', null,
+        h('rect', { x: -3.4, y: -6, width: 6.8, height: 13, rx: 1.4, fill: '#cf9e60', stroke: '#8d6335', strokeWidth: 0.7 }),
+        h('rect', { x: -2.5, y: -4.4, width: 1.5, height: 8, rx: 0.7, fill: '#e8c18b', opacity: 0.9 }),
+        h('rect', { x: -4.6, y: -0.5, width: 9.2, height: 2.1, rx: 1, fill: '#aeb6bf' }),
+        h('rect', { x: -4.6, y: -0.5, width: 9.2, height: 0.8, rx: 0.4, fill: '#d6dde3', opacity: 0.85 }),
+      );
+    }
+
+    function frame(content) {
+      return h('g', null,
+        h('rect', { x: -29.4, y: 7.8, width: 62, height: 80, rx: 3.4, fill: '#000000', opacity: 0.09 }),
+        h('rect', { x: -31, y: 6, width: 62, height: 80, rx: 3.4, fill: '#fcf8ef', stroke: '#d8ccb6', strokeWidth: 0.8 }),
+        content,
+        h('rect', { x: -26, y: 11, width: 52, height: 52, rx: 1.6, fill: 'url(#slGlare)' }),
+        h('path', { d: 'M-13 79.5 q6.5 -2.6 13 0 q6.5 -2.6 13 0', fill: 'none', stroke: '#cfc3ad', strokeWidth: 1.1, strokeLinecap: 'round' }),
+      );
+    }
+
+    /* Five little illustrated photographs. */
+    function sceneSunset() {
+      return h('g', { clipPath: 'url(#slClip)' },
+        h('rect', { x: -26, y: 11, width: 52, height: 36, fill: 'url(#slSunset)' }),
+        h('circle', { cx: 5, cy: 40, r: 12, fill: '#ffe2a3', opacity: 0.22 }),
+        h('circle', { cx: 5, cy: 40, r: 8.5, fill: '#ffe2a3' }),
+        h('path', { d: 'M-26 46 H26 V63 H-26 Z', fill: 'url(#slSea)' }),
+        h('path', { d: 'M-26 46 Q-12 44.5 0 46 T26 46', fill: 'none', stroke: '#f6cd93', strokeWidth: 1.1, opacity: 0.65 }),
+        h('path', { d: 'M-20 53 q4 -1.6 8 0 t8 0', fill: 'none', stroke: '#ffffff', strokeWidth: 0.9, opacity: 0.35 }),
+        h('path', { d: 'M-10 58 q4 -1.6 8 0 t8 0', fill: 'none', stroke: '#ffffff', strokeWidth: 0.9, opacity: 0.28 }),
+        h('path', { d: 'M-15 27 q3 -3 6 0 M2 22 q2.5 -2.5 5 0', fill: 'none', stroke: '#8c5a4d', strokeWidth: 1, strokeLinecap: 'round', opacity: 0.75 }),
+      );
+    }
+
+    function sceneMountains() {
+      return h('g', { clipPath: 'url(#slClip)' },
+        h('rect', { x: -26, y: 11, width: 52, height: 52, fill: 'url(#slMountainSky)' }),
+        h('circle', { cx: -13, cy: 25, r: 5.5, fill: '#fff3c4' }),
+        h('path', { d: 'M-26 63 L-12 41 L-2 52 L9 30 L26 63 Z', fill: '#a9bfd0' }),
+        h('path', { d: 'M9 30 L5.4 38 L12.6 38 Z', fill: '#f4f9ff' }),
+        h('path', { d: 'M-26 63 L-6 47 L6 56 L17 46 L26 63 Z', fill: '#7d99ad' }),
+        h('path', { d: 'M17 46 L14 51 L20 51 Z', fill: '#eef6fc' }),
+        h('path', { d: 'M-26 63 L-22 58 L-18 63 Z', fill: '#56707f' }),
+      );
+    }
+
+    function sceneNight() {
+      const stars = [[-18, 20], [-8, 31], [-1, 18], [17, 18], [20, 33], [-20, 36], [1, 37]];
+      return h('g', { clipPath: 'url(#slClip)' },
+        h('rect', { x: -26, y: 11, width: 52, height: 52, fill: 'url(#slNight)' }),
+        h('circle', { cx: 8, cy: 25, r: 7.5, fill: '#f7e8b6' }),
+        h('circle', { cx: 5.6, cy: 22.5, r: 1.5, fill: '#e3cf95', opacity: 0.8 }),
+        h('circle', { cx: 10.5, cy: 27.5, r: 1.1, fill: '#e3cf95', opacity: 0.7 }),
+        stars.map(([x, y], i) => h('circle', { key: i, cx: x, cy: y, r: 0.7, fill: '#ffffff', opacity: 0.9 })),
+        h('path', { d: 'M-26 63 L-13 49 L-4 57 L6 47 L15 55 L22 50 L26 63 Z', fill: '#101a30' }),
+      );
+    }
+
+    function sceneMeadow() {
+      const blossoms = [[-14, 51, '#f6a6c1'], [1, 46, '#f7e08a'], [14, 52, '#c9b6f2']];
+      return h('g', { clipPath: 'url(#slClip)' },
+        h('rect', { x: -26, y: 11, width: 52, height: 30, fill: 'url(#slMeadowSky)' }),
+        h('circle', { cx: 16, cy: 22, r: 4.5, fill: '#fff4c9' }),
+        h('path', { d: 'M-26 41 Q-6 36 12 41 T26 40 V63 H-26 Z', fill: 'url(#slGrass)' }),
+        blossoms.map(([x, y, color], i) => h('g', { key: i },
+          h('path', { d: 'M' + x + ' ' + (y + 8) + ' Q' + (x + 1.6) + ' ' + (y + 4) + ' ' + x + ' ' + y, fill: 'none', stroke: '#4f7a3f', strokeWidth: 1 }),
+          h('circle', { cx: x - 2, cy: y - 1.6, r: 1.5, fill: color }),
+          h('circle', { cx: x + 2, cy: y - 1.6, r: 1.5, fill: color }),
+          h('circle', { cx: x, cy: y - 4, r: 1.5, fill: color }),
+          h('circle', { cx: x, cy: y - 0.6, r: 1.4, fill: '#f3c14a' }),
+        )),
+        h('path', { d: 'M-21 24 q2.4 -3 4.8 0 q2.4 -3 4.8 0', fill: 'none', stroke: '#7f8ec9', strokeWidth: 1, opacity: 0.8 }),
+      );
+    }
+
+    function sceneBalloon() {
+      return h('g', { clipPath: 'url(#slClip)' },
+        h('rect', { x: -26, y: 11, width: 52, height: 52, fill: 'url(#slBalloonSky)' }),
+        h('ellipse', { cx: -14, cy: 22, rx: 7, ry: 3, fill: '#ffffff', opacity: 0.85 }),
+        h('ellipse', { cx: 13, cy: 18, rx: 8, ry: 3.2, fill: '#ffffff', opacity: 0.75 }),
+        h('path', { d: 'M-26 63 L-8 47 L6 56 L18 45 L26 63 Z', fill: 'url(#slHills)' }),
+        h('g', { transform: 'translate(4 24)' },
+          h('path', { d: 'M0 -14 C 11 -14 13 -4 6 4 L0 9 L-6 4 C -13 -4 -11 -14 0 -14 Z', fill: '#e2695b' }),
+          h('path', { d: 'M0 -14 C 4 -14 5 -4 3 6 L0 9 L-3 6 C -5 -4 -4 -14 0 -14 Z', fill: '#f4d06f' }),
+          h('path', { d: 'M-5 8 L-3 16 M5 8 L3 16', fill: 'none', stroke: '#8a6c4a', strokeWidth: 0.8 }),
+          h('rect', { x: -3, y: 15.5, width: 6, height: 4.2, rx: 1, fill: '#a97b45', stroke: '#7c572d', strokeWidth: 0.6 }),
+        ),
+      );
+    }
+
+    const PHOTO_SCALE = 0.82;
+
+    /* Illustrations shown while the photos folder has no images. */
+    const ILLUSTRATIONS = [sceneSunset, sceneMountains, sceneNight, sceneMeadow, sceneBalloon];
+
+    const TILTS = [-2.2, 1.4, -1.1, 2.0, -1.6, 0.9];
+    const DELAYS = ['0s', '-1.8s', '-3.2s', '-0.7s', '-2.5s', '-4.1s'];
+    const DURATIONS = ['7.6s', '6.8s', '8.2s', '7.1s', '6.5s', '7.8s'];
+    const MAX_PHOTOS = 6;
+    const PHOTO_ENDPOINT = '/dsh-snap-line/photos.json';
+    const POLL_INTERVAL_MS = 5000;
+
+    /** Evenly spread photo centers along the rope, capped at the old five-photo spacing. */
+    function photoPositions(count) {
+      if (count <= 1) return [350];
+      const spacing = Math.min(116, 464 / (count - 1));
+      const first = 350 - (spacing * (count - 1)) / 2;
+      return Array.from({ length: count }, (_, index) => Math.round((first + spacing * index) * 100) / 100);
+    }
+
+    function samplePhotos(photos, limit) {
+      if (photos.length <= limit) return photos;
+      const picked = [];
+      for (let index = 0; index < limit; index += 1) {
+        picked.push(photos[Math.round((index * (photos.length - 1)) / (limit - 1))]);
+      }
+      return picked;
+    }
+
+    /** Poll the host's photo listing so dropped or removed images show up on their own. */
+    function usePhotoList() {
+      const [photos, setPhotos] = React.useState(null);
+      React.useEffect(() => {
+        let active = true;
+        let timer;
+        let lastKey = '';
+        const poll = async () => {
+          if (document.visibilityState === 'hidden') {
+            if (active) timer = setTimeout(poll, POLL_INTERVAL_MS);
+            return;
+          }
+          try {
+            const response = await fetch(PHOTO_ENDPOINT, { cache: 'no-store' });
+            if (!response.ok) throw new Error('HTTP ' + response.status);
+            const data = await response.json();
+            const next = Array.isArray(data.photos)
+              ? data.photos
+                  .filter((entry) => entry !== null && typeof entry === 'object' && typeof entry.url === 'string')
+                  .map((entry) => ({ url: entry.url, name: typeof entry.name === 'string' ? entry.name : '' }))
+              : [];
+            const key = next.map((entry) => entry.url).join('|');
+            if (active && key !== lastKey) {
+              lastKey = key;
+              setPhotos(next);
+            }
+          } catch {
+            if (active) setPhotos((previous) => (previous === null ? [] : previous));
+          } finally {
+            if (active) timer = setTimeout(poll, POLL_INTERVAL_MS);
+          }
+        };
+        poll();
+        return () => {
+          active = false;
+          clearTimeout(timer);
+        };
+      }, []);
+      return photos;
+    }
+
+    function userPhotoImage(url) {
+      return h('g', { clipPath: 'url(#slClip)' },
+        h('image', {
+          href: url,
+          x: -26,
+          y: 11,
+          width: 52,
+          height: 52,
+          preserveAspectRatio: 'xMidYMid slice',
+        }),
+      );
+    }
+
+    function Photo(props) {
+      const { x, tilt, delay, duration, content, onOpen, label } = props;
+      const onKeyDown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') return;
+        event.preventDefault();
+        onOpen();
+      };
+      return h('g', {
+        className: 'sl-photo',
+        transform: 'translate(' + x + ' ' + ropeY(x).toFixed(2) + ')',
+        role: 'button',
+        tabIndex: 0,
+        'aria-label': label,
+        onClick: onOpen,
+        onKeyDown,
+      },
+        h('g', { transform: 'rotate(' + tilt + ')' },
+          h('g', { transform: 'scale(' + PHOTO_SCALE + ')' },
+            h('g', {
+              className: 'sl-sway',
+              style: { animationDelay: delay, animationDuration: duration },
+            },
+              h('g', { className: 'sl-wobble' },
+                peg(),
+                frame(content),
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    /** Full-screen viewer opened by clicking a photo; closes on Esc, backdrop or the close button. */
+    function Lightbox(props) {
+      const { preview, onClose } = props;
+      const closeRef = React.useRef(null);
+      React.useEffect(() => {
+        if (preview === null) return;
+        const previous = document.activeElement;
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        if (closeRef.current !== null) closeRef.current.focus();
+        return () => {
+          document.body.style.overflow = previousOverflow;
+          if (previous !== null && typeof previous.focus === 'function') previous.focus();
+        };
+      }, [preview]);
+      if (preview === null) return null;
+      const label = preview.kind === 'photo'
+        ? preview.name || '照片 / Photo'
+        : '照片插画 / Photo illustration';
+      const card = preview.kind === 'photo'
+        ? h('div', { className: 'sl-lightbox-photo' },
+            h('img', {
+              src: preview.url,
+              alt: label,
+              draggable: 'false',
+            }))
+        : h('div', { className: 'sl-lightbox-polaroid' },
+            h('svg', {
+              viewBox: '-31 6 62 80',
+              role: 'img',
+              'aria-label': label,
+              focusable: 'false',
+            },
+              frame(preview.content)));
+      const overlay = h('div', {
+        className: 'sl-lightbox',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-label': '照片预览 / Photo preview',
+        onKeyDown: (event) => {
+          if (event.key !== 'Tab') return;
+          event.preventDefault();
+          if (closeRef.current !== null) closeRef.current.focus();
+        },
+        onClick: (event) => {
+          if (event.target === event.currentTarget) onClose();
+        },
+      },
+        card,
+        h('button', {
+          type: 'button',
+          className: 'sl-lightbox-close',
+          'aria-label': '关闭预览 / Close preview',
+          ref: closeRef,
+          onClick: onClose,
+        }, '×'),
+      );
+      return createPortal === null ? overlay : createPortal(overlay, document.body);
+    }
+
+    const DOCK_SVG_WIDTH = 700;
+    /*
+     * The dock entry sits in a fit-content flex row, so its `width: 100%` SVG
+     * resolves to its intrinsic 300px; `max-width` alone never changes that.
+     * The New Session hero therefore sets an explicit pixel width: twice that
+     * 300px, clamped to the composer card measured by the hero watcher.
+     */
+    const HERO_SVG_WIDTH = 600;
+
+    function Clothesline(props) {
+      const source = props !== null && props !== undefined && props.source === 'hero' ? 'hero' : 'dock';
+      const heroWidth = source === 'hero' && props !== null && props !== undefined
+        && typeof props.width === 'number' && props.width > 0
+        ? Math.round(props.width)
+        : 0;
+      const photos = usePhotoList();
+      const [preview, setPreview] = React.useState(null);
+      React.useEffect(() => {
+        if (preview === null) return;
+        const onKeyDown = (event) => {
+          if (event.key !== 'Escape' && event.key !== 'Esc') return;
+          event.stopPropagation();
+          setPreview(null);
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+      }, [preview]);
+      const usingOwnPhotos = Array.isArray(photos) && photos.length > 0;
+      const items = usingOwnPhotos
+        ? samplePhotos(photos, MAX_PHOTOS).map((photo) => ({ kind: 'photo', url: photo.url, name: photo.name }))
+        : ILLUSTRATIONS.map((scene) => ({ kind: 'illustration', scene }));
+      const xs = photoPositions(items.length);
+      return h('div', {
+        role: 'group',
+        'aria-label': '照片晾衣绳 / Photo clothesline',
+        'data-dsh-snap-line': source,
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          padding: '0 12px',
+          pointerEvents: 'none',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
+      },
+        h('style', { key: 'css' }, CSS),
+        h('svg', {
+          key: 'art',
+          viewBox: '0 0 700 108',
+          role: 'group',
+          'aria-label': '照片 / Photos',
+          focusable: 'false',
+          width: '100%',
+          style: {
+            display: 'block',
+            width: heroWidth > 0 ? heroWidth + 'px' : '100%',
+            maxWidth: heroWidth > 0 ? 'none' : DOCK_SVG_WIDTH,
+            height: 'auto',
+            margin: '2px auto 0',
+          },
+        },
+          defs,
+          h('path', { d: 'M18 14 Q350 46 682 14', fill: 'none', stroke: '#9b8b72', strokeWidth: 3.2, strokeLinecap: 'round' }),
+          h('path', { d: 'M18 14 Q350 46 682 14', fill: 'none', stroke: '#c9bca4', strokeWidth: 1, strokeLinecap: 'round', strokeDasharray: '1 4', opacity: 0.9 }),
+          h('circle', { cx: 18, cy: 14, r: 2.6, fill: '#8a7a63' }),
+          h('circle', { cx: 682, cy: 14, r: 2.6, fill: '#8a7a63' }),
+          items.map((item, index) => {
+            const content = item.kind === 'photo' ? userPhotoImage(item.url) : item.scene();
+            return h(Photo, {
+              key: item.kind === 'photo' ? 'photo-' + item.url : 'illustration-' + index,
+              x: xs[index],
+              tilt: TILTS[index % TILTS.length],
+              delay: DELAYS[index % DELAYS.length],
+              duration: DURATIONS[index % DURATIONS.length],
+              content,
+              label: item.kind === 'photo'
+                ? '照片 ' + (index + 1) + (item.name === '' ? '' : '：' + item.name) + ' / Photo ' + (index + 1)
+                : '内置插画 ' + (index + 1) + ' / Built-in illustration ' + (index + 1),
+              onOpen: () => setPreview(
+                item.kind === 'photo'
+                  ? { kind: 'photo', url: item.url, name: item.name }
+                  : { kind: 'illustration', content },
+              ),
+            });
+          }),
+        ),
+        h(Lightbox, { key: 'lightbox', preview, onClose: () => setPreview(null) }),
+      );
+    }
+
+    /*
+     * The host only renders `conversation.composer.dock` once a Session is
+     * active (the New Session hero shows an empty dock). While that hero is on
+     * screen, hang the same clothesline from the frame-wide overlay layer and
+     * portal it into the hero composer's always-rendered dock container, so the
+     * home page looks like every other conversation.
+     */
+    const HERO_DOCK_SELECTOR = '[data-content-phase="hero"] [data-composer-dock]';
+    const HERO_WATCH_INTERVAL_MS = 250;
+
+    let createPortal = null;
+    try {
+      const reactDom = require('react-dom');
+      if (reactDom !== null && reactDom !== undefined && typeof reactDom.createPortal === 'function') {
+        createPortal = reactDom.createPortal;
+      }
+    } catch {
+      createPortal = null;
+    }
+
+    /** The widest visible hero composer dock that has no in-flow clothesline yet, plus its card width. */
+    function findHeroDock() {
+      let target = null;
+      let targetWidth = 0;
+      for (const dock of document.querySelectorAll(HERO_DOCK_SELECTOR)) {
+        if (dock.querySelector('[data-dsh-snap-line="dock"]') !== null) continue;
+        const content = dock.closest('[data-content-phase="hero"]');
+        const width = content === null ? dock.clientWidth : content.getBoundingClientRect().width;
+        if (width <= 0) continue;
+        if (target === null || width > targetWidth) {
+          target = { dock, width: heroCardWidth(dock, width) };
+          targetWidth = width;
+        }
+      }
+      return target;
+    }
+
+    /** Width of the hero composer card, used to cap the enlarged hero artwork. */
+    function heroCardWidth(dock, fallback) {
+      const parent = dock.parentElement;
+      const card = parent === null ? null : parent.querySelector('[data-composer-card]');
+      if (card === null) return Math.max(0, fallback - 16);
+      return card.getBoundingClientRect().width;
+    }
+
+    function sameHeroDock(left, right) {
+      if (left === null || right === null) return left === right;
+      return left.dock === right.dock && Math.abs(left.width - right.width) < 1;
+    }
+
+    function useHeroDock() {
+      const [dock, setDock] = React.useState(null);
+      React.useEffect(() => {
+        const update = () => {
+          if (document.visibilityState === 'hidden') return;
+          const next = findHeroDock();
+          setDock((current) => (sameHeroDock(current, next) ? current : next));
+        };
+        update();
+        const timer = setInterval(update, HERO_WATCH_INTERVAL_MS);
+        return () => clearInterval(timer);
+      }, []);
+      return dock;
+    }
+
+    /** Stays mounted in the shell overlay and paints into the hero composer. */
+    function HeroClothesline() {
+      const target = useHeroDock();
+      if (createPortal === null || target === null) return null;
+      const width = Math.min(HERO_SVG_WIDTH, Math.max(0, Math.round(target.width) - 24));
+      return createPortal(h(Clothesline, { source: 'hero', width }), target.dock);
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        ctx.slots.inject('conversation.composer.dock', () => ctx.slots.register({
+          name: 'conversation.composer.dock',
+          id: 'dsh-snap-line',
+          order: 2,
+        }, Clothesline));
+        if (createPortal === null) return;
+        try {
+          ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+            name: 'shell.overlay',
+            id: 'dsh-snap-line-hero',
+            order: 0,
+          }, HeroClothesline));
+        } catch (error) {
+          console.warn('dsh-snap-line: hero clothesline unavailable', error);
+        }
+      },
+    };
+  },
+});

package/cordis.patch.yml

@@ -0,0 +1,8 @@
+# SnapLine bundle layer.
+# The Host half is the plugin row below; the Client half is declared by
+# `dsh.client` in package.json and loaded automatically by the web runtime.
+# `name` is the npm package name, so this file works for a linked local
+# checkout as well as for an installed (npm / git) package.
+- insert:
+    - id: dsh-snap-line
+      name: 'dsh-snap-line'

package/icon.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="pc-icon-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffd27a"/>
+      <stop offset="1" stop-color="#ee7286"/>
+    </linearGradient>
+  </defs>
+  <path d="M3 16 Q32 28 61 16" fill="none" stroke="#8d7c63" stroke-width="2.6" stroke-linecap="round"/>
+  <circle cx="3" cy="16" r="1.8" fill="#8d7c63"/>
+  <circle cx="61" cy="16" r="1.8" fill="#8d7c63"/>
+  <g transform="translate(22 21) rotate(-5)">
+    <rect x="-8.5" y="0" width="17" height="22" rx="1.6" fill="#fcf8ef" stroke="#cdbfa6" stroke-width="0.8"/>
+    <rect x="-6.6" y="2" width="13.2" height="12" rx="0.8" fill="url(#pc-icon-sky)"/>
+    <circle cx="-1.5" cy="9.5" r="2.2" fill="#ffe2a3"/>
+    <rect x="-1.8" y="-3.6" width="3.6" height="7" rx="1.1" fill="#cf9e60" stroke="#8d6335" stroke-width="0.5"/>
+  </g>
+  <g transform="translate(41 19) rotate(4)">
+    <rect x="-8.5" y="0" width="17" height="22" rx="1.6" fill="#fcf8ef" stroke="#cdbfa6" stroke-width="0.8"/>
+    <rect x="-6.6" y="2" width="13.2" height="12" rx="0.8" fill="#a9cfe6"/>
+    <path d="M-6.6 14 L-1 7.5 L3.2 11.5 L6.6 8.5 L6.6 14 Z" fill="#6d8ea3"/>
+    <rect x="-1.8" y="-3.6" width="3.6" height="7" rx="1.1" fill="#cf9e60" stroke="#8d6335" stroke-width="0.5"/>
+  </g>
+</svg>

package/index.js

@@ -0,0 +1,21 @@
+/**
+ * SnapLine — Host half.
+ *
+ * Serves the package's `photos/` folder to the Client half, which hangs the
+ * images on a clothesline under the message composer. Everything is served
+ * from this machine over the Harness web server; no external requests.
+ */
+import { fileURLToPath } from 'node:url'
+import { createPhotoResource, ROUTE } from './lib/photos.js'
+
+export const inject = ['webServer']
+
+const PHOTOS_DIR = fileURLToPath(new URL('./photos/', import.meta.url))
+
+export function apply(ctx) {
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'prefix',
+    path: ROUTE,
+    resource: createPhotoResource(PHOTOS_DIR),
+  }), 'dsh-snap-line: photo files')
+}

package/lib/photos.js

@@ -0,0 +1,117 @@
+/**
+ * Photo folder helpers for SnapLine.
+ *
+ * These functions are plain Node.js (no Cordis, no DOM) so they can be tested
+ * on their own: the Host half only has to wire them to a route.
+ */
+import { createHash } from 'node:crypto'
+import { readFile, readdir, stat } from 'node:fs/promises'
+import { extname, join } from 'node:path'
+
+/** Browser-facing base path for the photo manifest and the images. */
+export const ROUTE = '/dsh-snap-line'
+
+/** Image extensions served from the photo folder, mapped to their media type. */
+export const MEDIA_TYPES = new Map([
+  ['.jpg', 'image/jpeg'],
+  ['.jpeg', 'image/jpeg'],
+  ['.png', 'image/png'],
+  ['.webp', 'image/webp'],
+  ['.gif', 'image/gif'],
+  ['.avif', 'image/avif'],
+])
+
+function notFound() {
+  return new Response(null, { status: 404 })
+}
+
+/** One photo entry's browser URL, versioned by mtime so replacements are not cached. */
+export function photoUrl(name, mtimeMs) {
+  return `${ROUTE}/photos/${encodeURIComponent(name)}?v=${Math.round(mtimeMs)}`
+}
+
+/**
+ * Current photo folder contents as `{ photos: [{ name, url }], revision }`.
+ * Missing folder counts as empty; each photo's mtime feeds the revision.
+ */
+export async function listPhotos(dir) {
+  let entries
+  try {
+    entries = await readdir(dir, { withFileTypes: true })
+  } catch (error) {
+    if (error.code === 'ENOENT') return { photos: [], revision: 'empty' }
+    throw error
+  }
+  const photos = []
+  for (const entry of entries) {
+    if (!entry.isFile() && !entry.isSymbolicLink()) continue
+    /* Hidden names (macOS `._*`, `.DS_Store`, dotfiles) never reach the manifest. */
+    if (entry.name.startsWith('.')) continue
+    if (!MEDIA_TYPES.has(extname(entry.name).toLowerCase())) continue
+    const path = join(dir, entry.name)
+    try {
+      const info = await stat(path)
+      if (!info.isFile()) continue
+      photos.push({ name: entry.name, mtimeMs: info.mtimeMs })
+    } catch {
+      // Removed while listing.
+    }
+  }
+  photos.sort((left, right) => left.name.localeCompare(right.name, 'en', { numeric: true }))
+  const revision = createHash('sha1')
+    .update(photos.map((photo) => `${photo.name}\u0000${photo.mtimeMs}`).join('\n'))
+    .digest('hex')
+    .slice(0, 12)
+  return {
+    photos: photos.map(({ name, mtimeMs }) => ({ name, url: photoUrl(name, mtimeMs) })),
+    revision,
+  }
+}
+
+/**
+ * One image from the photo folder.
+ * Path traversal, hidden names, and unknown media types answer 404.
+ */
+export async function servePhoto(dir, encodedName) {
+  let name
+  try {
+    name = decodeURIComponent(encodedName)
+  } catch {
+    return new Response(null, { status: 400 })
+  }
+  if (name.includes('/') || name.includes('\\') || name.startsWith('.')) return notFound()
+  const mediaType = MEDIA_TYPES.get(extname(name).toLowerCase())
+  if (mediaType === undefined) return notFound()
+  try {
+    const body = await readFile(join(dir, name))
+    return new Response(body, {
+      headers: {
+        'content-type': mediaType,
+        'content-length': String(body.byteLength),
+        'cache-control': 'private, max-age=60',
+        'x-content-type-options': 'nosniff',
+      },
+    })
+  } catch {
+    return notFound()
+  }
+}
+
+/**
+ * Route resource for a `kind: 'prefix'` webServer registration:
+ * `GET <route>/photos.json` and `GET <route>/photos/<name>`.
+ */
+export function createPhotoResource(dir, route = ROUTE) {
+  const photosPrefix = `${route}/photos/`
+  return async (request) => {
+    const { pathname } = new URL(request.url)
+    if (pathname === `${route}/photos.json`) {
+      const listing = await listPhotos(dir)
+      return new Response(JSON.stringify(listing), {
+        headers: { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' },
+      })
+    }
+    if (pathname.startsWith(photosPrefix)) return servePhoto(dir, pathname.slice(photosPrefix.length))
+    return notFound()
+  }
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "SnapLine (dsh-snap-line)",
+    "description": "Hangs a clothesline of polaroid photos under the message composer; images dropped into its photos folder replace the illustrated placeholders."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "SnapLine 照片晾衣绳 (dsh-snap-line)",
+    "description": "在消息输入框下方挂起一串拍立得照片；把照片放进插件的 photos 文件夹，就会换成你自己的照片。"
+  }
+}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "dsh-snap-line",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.3.1",
+  "icon": "icon.svg",
+  "description": "Hangs a clothesline of polaroid photos under the message composer in DeepSeek Harness.",
+  "type": "module",
+  "license": "MIT",
+  "author": "LMhuo (https://github.com/LMhuo)",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "dsh-bundle",
+    "deepseek-harness",
+    "clothesline",
+    "polaroid",
+    "photo",
+    "decoration"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LMhuo/dsh-snap-line.git"
+  },
+  "homepage": "https://github.com/LMhuo/dsh-snap-line#readme",
+  "bugs": {
+    "url": "https://github.com/LMhuo/dsh-snap-line/issues"
+  },
+  "engines": {
+    "node": ">=20",
+    "dsh": "^0.2.0"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./locale/*.json": "./locale/*.json",
+    "./icon": "./icon.svg"
+  },
+  "files": [
+    "index.js",
+    "lib",
+    "client.js",
+    "cordis.patch.yml",
+    "locale/*.json",
+    "icon.svg",
+    "docs/images",
+    "docs/icon.png"
+  ],
+  "scripts": {
+    "check": "node --check index.js && node --check client.js && node --check lib/photos.js && node --test",
+    "test": "node --test",
+    "prepublishOnly": "npm run check"
+  },
+  "dsh": {
+    "manifestVersion": 1,
+    "bundle": { "patch": "./cordis.patch.yml" },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": ["@deepseek-ai/dsh-client-ui-conversation"]
+    }
+  }
+}