dsh-claude-design-system 0.0.0-stage → 2.4.1

package/LICENSE

@@ -0,0 +1,26 @@
+This MIT License covers only the original work of Jim Liu 宝玉 in this repository
+and in the baoyu-design npm packages. It does not cover the material from
+Anthropic or the third-party open-source code listed in NOTICE.md, which keep
+their own terms.
+
+MIT License
+
+Copyright (c) 2026 Jim Liu 宝玉
+
+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/NOTICE.md

@@ -0,0 +1,58 @@
+# Notices
+
+baoyu-design holds material under three different sets of terms. The MIT License in [LICENSE](LICENSE) covers only the first. The same applies to the DeepSeek Harness plugins on npm, which ship this file next to their `LICENSE`.
+
+[中文说明](#中文说明)
+
+## 1. The maintainer's own work: MIT
+
+Copyright (c) 2026 Jim Liu 宝玉, under the MIT License in [LICENSE](LICENSE):
+
+- The local tooling: each skill's `scripts/artifact.mjs` and, where there is one, `scripts/server.mjs` (the command line and the local editor server), the local comments, and what lets the editors run on a local machine instead of claude.ai.
+- The DeepSeek Harness plugins' own code and files: `dsh-plugins/*/lib/`, `cordis.patch.yml`, `locale/`, `docs/` and `icon.svg`.
+- The parts of the skills' text written for local agents: how to open and run the editors, local paths and files, comments.
+- The READMEs, the changelogs, the images in `assets/` and the files in `.github/`.
+- The maintainer's tools in `archive/baoyu-design/agents/`, apart from the open-source code vendored there (section 3).
+
+## 2. Material from Anthropic: not MIT
+
+baoyu-design brings claude.ai's Artifact types and Claude Design to local agents, so much of what it ships comes from Anthropic, PBC. That material stays Anthropic's. Anthropic has published no license for it, apart from the one file in section 2.1, and this project grants none: the MIT License does not apply to it. It is included so the skills work as they do on claude.ai. This project is independent and is not affiliated with or endorsed by Anthropic.
+
+- **Skill instructions.** Each `skills/claude-*/SKILL.md` adapts the SKILL.md of a claude.ai Artifact type. The maintainer's local-agent changes are described in section 1.
+- **Reference docs.** `skills/*/artifact-type/reference/`, and the copies under `scripts/editor/artifact-type/`: the craft, format and layout guides, font lists and other references of the Artifact types.
+- **The `dataviz` skill.** `skills/dataviz/` is Anthropic's dataviz skill. Its palette validators include code from Color.js (MIT, Lea Verou and Chris Lilley), credited in the files.
+- **The editors.** `skills/claude-*/scripts/editor/` holds editors reconstructed from the claude.ai Artifact-type runtimes: their interface, wording and behaviour are Anthropic's. The built files mix that reconstruction with the maintainer's local additions (section 1) and with open-source packages (section 3).
+- **Icon fonts.** The Anthropicons icon fonts: the `anthropicons-*.woff2` files in the editors' `assets/` and `artifact-type/` folders, and the Anthropicons font faces embedded as data URIs in the editors' CSS.
+- **The archived `baoyu-design` skill.** In `archive/baoyu-design/`: `system-prompt.md`, `references/upstream-system-prompt.md` and `references/upstream-sync/` (the Claude Design system prompt, a snapshot of it and its sync records), `built-in-skills/` (Claude Design's built-in skills) and `starter-components/` (Claude Design's starter components; the local patches are recorded in the `*-patch.md` files there).
+
+### 2.1 frontend-design: Apache License 2.0
+
+`archive/baoyu-design/built-in-skills/frontend-design.md` is Claude Design's copy of Anthropic's frontend-design skill, which Anthropic publishes under the Apache License 2.0. The full license text is in [`archive/baoyu-design/built-in-skills/LICENSE-frontend-design.txt`](archive/baoyu-design/built-in-skills/LICENSE-frontend-design.txt). The file was changed from the original: its frontmatter was rewritten for the built-in-skill format (its `license` line records the change), and its text follows the version Claude Design ships.
+
+## 3. Third-party open-source code
+
+The editors bundle open-source packages, such as React, Base UI, d3 and pptxgenjs. Each keeps its own license, which this project's license does not replace. The licenses are in each editor's `scripts/editor/third-party-licenses.txt`, and for the slides compiler in `scripts/editor/node/third-party-licenses.txt`.
+
+The archived `baoyu-design` skill vendors React, ReactDOM, Babel and fflate (MIT) in `archive/baoyu-design/agents/vendor/`, and pptxgenjs (MIT) in `archive/baoyu-design/agents/gen-pptx/vendor/pptxgenjs/`, with its `LICENSE`.
+
+## Questions and removal
+
+If you hold rights in anything here and want it credited differently, changed or removed, open an issue at <https://github.com/JimLiu/baoyu-design/issues>.
+
+## 中文说明
+
+本仓库（以及 npm 上的 DeepSeek Harness 插件）里的内容分三类，许可各不相同。[LICENSE](LICENSE) 里的 MIT 许可只管第一类。
+
+1. **维护者自己写的部分，MIT。** 本地命令行和编辑器服务器（各技能的 `scripts/artifact.mjs`，以及有的技能带的 `scripts/server.mjs`）、本地评论、让编辑器离开 claude.ai 在本机运行的那部分代码；DeepSeek Harness 插件自己的代码和文件（`dsh-plugins/*/lib/`、`cordis.patch.yml`、`locale/`、`docs/`、`icon.svg`）；技能说明里为本地 Agent 写的部分；README、更新日志、`assets/` 里的图片、`.github/`；`archive/baoyu-design/agents/` 里维护者写的工具。
+2. **取自 Anthropic 的部分，不适用 MIT。** 权利归 Anthropic。除 frontend-design 外，Anthropic 没有为这些内容公开许可，本项目也不授予任何许可。包括：
+   - 各 `skills/claude-*/SKILL.md` 所改编的 Artifact 类型技能说明；
+   - `artifact-type/reference/` 里的参考文档；
+   - `skills/dataviz/`（Anthropic 的 dataviz 技能）；
+   - `scripts/editor/` 里从 claude.ai 运行时还原的编辑器（界面、文案和行为）；
+   - Anthropicons 图标字体（`anthropicons-*.woff2` 文件，以及编辑器 CSS 里内嵌的字体）；
+   - `archive/baoyu-design/` 里的 Claude Design 系统提示词、内置技能和起步组件。
+   
+   `archive/baoyu-design/built-in-skills/frontend-design.md` 取自 Anthropic 以 Apache License 2.0 发布的 frontend-design 技能，许可全文见同目录的 `LICENSE-frontend-design.txt`。
+3. **第三方开源代码，各按原许可。** 编辑器打进去的开源包（React、Base UI、d3、pptxgenjs 等）的许可见各编辑器的 `scripts/editor/third-party-licenses.txt`；归档技能里内置的 React、Babel、fflate、pptxgenjs 见 `archive/baoyu-design/agents/vendor/` 和 `agents/gen-pptx/vendor/pptxgenjs/LICENSE`。
+
+本项目是独立的社区项目，与 Anthropic 无隶属或背书关系。权利人希望调整署名、修改或移除某部分内容，请在 <https://github.com/JimLiu/baoyu-design/issues> 提 issue。

package/README.md

@@ -1,3 +1,42 @@
-# Temporary Holding Version
+# dsh-claude-design-system
 
-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.
+A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that adds the **claude-design-system**
+skill from [baoyu-design](https://github.com/JimLiu/baoyu-design): the agent writes design systems (tokens, type,
+components, assets and a brand book) as files in your workspace, built from a code repository, a design tool or
+scratch, and opens them in a local design-system page, where you can browse and edit them.
+
+## Install
+
+In the DeepSeek Harness desktop app: **Plugins** → **Add plugin** → enter `dsh-claude-design-system` in **Package name
+or address** → **Install**, and turn the plugin on. From the command line, for a CLI profile such as `web`:
+
+```sh
+dsh plugin --profile web add dsh-claude-design-system
+```
+
+Then quit and reopen the app, start a new session, and ask for a design system, or type `/claude-design-system`. A
+workspace that has its own `claude-design-system` skill (in `.agents/skills/` or `.dsh/skills/`) uses that copy instead
+of this plugin's.
+
+To update, uninstall the plugin, install it again, and quit and reopen the app. For a day after a release the app's
+package manager (pnpm) still picks the previous version; to get the new one sooner, enter the name with the version,
+such as `dsh-claude-design-system@2.4.0`.
+
+## What is inside
+
+- `skills/claude-design-system/`: the skill as baoyu-design publishes it (`SKILL.md`, `artifact-type/reference/`, and
+  the prebuilt `scripts/`: the page, `artifact.mjs`, and its server).
+- `lib/index.js`: the plugin. It registers the skill with the Harness skill registry and, when the skill loads, tells
+  the agent which Node executable runs `scripts/artifact.mjs`: the Host's own Node, the Node runtime the desktop app
+  ships, or `node` on PATH. Set `node` in the `claude-design-system` row's config to choose another. Whenever the agent
+  opens the page, the plugin also waits for comments, so a comment's **Send to agent** box is there: send one and the
+  agent wakes up, changes the system, and replies in the comment.
+- `lib/client.js`: the part that runs in the app's window. It shows a comment sent to the agent as a card in the chat;
+  **View thread** on the card opens it in the page.
+- `cordis.patch.yml`: the bundle layer that mounts the plugin row.
+
+The page's server listens on 127.0.0.1 only and reads and writes only the design system's folder.
+
+## License
+
+Not all MIT. The plugin's own code and files (`lib/`, `cordis.patch.yml`, `locale/`, `docs/`, `icon.svg`) and the skill's local tooling are MIT, in `LICENSE`. The bundled `claude-design-system` skill is adapted from Anthropic's claude.ai Design System type: its instructions, references, page and icon fonts stay Anthropic's and are not under the MIT License. `NOTICE.md` sets out which is which. The page's open-source licenses are in `skills/claude-design-system/scripts/editor/third-party-licenses.txt`.

package/cordis.patch.yml

@@ -0,0 +1,7 @@
+# dsh-claude-design-system bundle patch: installing the package (the Plugins page, or
+# `dsh plugin --profile <name> add <spec>`) adds it to the profile's bundles,
+# and this layer mounts its one plugin row, which registers the claude-design-system
+# skill with the profile's skill registry.
+- insert:
+    - id: claude-design-system
+      name: dsh-claude-design-system

package/docs/DETAIL.md

@@ -0,0 +1,27 @@
+# Claude Design System
+
+Adds the **claude-design-system** skill to DeepSeek Harness. Ask for a design system ("a design system from this
+repo's styles", "a brand kit for a tea shop") and the agent writes it as files in your workspace: a folder with
+`project/design-system.json`, `tokens.json`, a README brand book, component previews, fonts and assets. It then starts
+a local design-system page and gives you its link. claude-slides and claude-design can use the systems it makes.
+
+## Using it
+
+- Ask for a design system in plain words, or type `/claude-design-system` to call the skill by name.
+- Open the link the agent gives you. In the desktop app it opens in the right sidebar's Browser, beside the
+  conversation (Settings → General → Open chat links in: **In-App Sidebar**, the default).
+- On the page you browse and edit the tokens, colors, type, components and assets. Your edits are saved back into the
+  same files, and the agent's changes show up in the page as it writes them.
+- Comment on a token, color, type style, component, asset or section (Comment, or C). Tick **Send to agent** and the
+  agent picks it up at once, even when the conversation is idle: it changes the system and replies in the comment. The
+  comment also shows in the chat as a card; **View thread** on the card opens it in the page. The box is there while
+  comments can reach the agent, which starts each time it gives you the link. After restarting the app, ask the agent
+  to open the system again to bring it back.
+- To change a system later, ask the agent to revise the folder that holds its `project/design-system.json`.
+- A workspace that has its own `claude-design-system` skill (in `.agents/skills/` or `.dsh/skills/`) uses that copy
+  instead of this plugin's.
+
+## What runs where
+
+The page is served by a small server on 127.0.0.1 that the skill's script starts in the background, one per system.
+It reads and writes only that system's folder. The desktop app's own Node runtime runs it; nothing else is installed.

package/docs/DETAIL.zh.md

@@ -0,0 +1,16 @@
+# Claude 设计系统
+
+给 DeepSeek Harness 加上 **claude-design-system** 技能。让 Agent 做一套设计系统（"从这个仓库的样式整理一套设计系统"、"给一家茶饮店做一套品牌规范"），它会在工作区里把设计系统写成文件：一个文件夹，里面有 `project/design-system.json`、`tokens.json`、README 品牌手册、组件预览、字体和素材。写完它会启动本地设计系统页面，把链接给你。claude-slides 和 claude-design 都可以套用它做出来的设计系统。
+
+## 怎么用
+
+- 直接用自然语言要设计系统，或者输入 `/claude-design-system` 点名调用这个技能。
+- 打开 Agent 给的链接。桌面版里它会在右侧栏的浏览器里打开，和对话并排（设置 → 通用 → 聊天链接打开方式：**应用内侧栏**，默认就是这个）。
+- 页面上可以浏览和修改设计令牌、颜色、字体样式、组件和素材。你的修改会存回同一批文件；Agent 写的改动也会实时出现在页面上。
+- 可以给某个令牌、颜色、字体样式、组件、素材或章节加评论（点评论按钮或按 C）。勾上 **Send to agent** 发出去，Agent 会马上接手，对话空闲时也一样：它改好设计系统，再在评论里回复你。评论也会以卡片的形式出现在对话里，点卡片上的 **View thread**（中文界面是「查看评论」）会在页面里打开这条评论。这个勾选框只在评论能发给 Agent 时出现；Agent 每次给你页面链接时都会开始等评论。重启应用后，让 Agent 再打开一次这套设计系统就能恢复。
+- 以后要改，让 Agent 修改那个装着 `project/design-system.json` 的文件夹即可。
+- 如果工作区自己带了 `claude-design-system` 技能（在 `.agents/skills/` 或 `.dsh/skills/` 里），这个工作区会用它自己那份，而不是插件里的。
+
+## 运行方式
+
+页面由技能脚本在后台启动的一个本地服务（127.0.0.1）提供，一套设计系统一个，只读写这套设计系统自己的文件夹。用的是桌面版自带的 Node，不需要另外安装任何东西。

package/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#D97757"/>
+  <rect x="12" y="12" width="40" height="40" rx="4" fill="#FFF7F2"/>
+  <circle cx="22" cy="22" r="5" fill="#D97757"/>
+  <circle cx="32" cy="22" r="5" fill="#E9B8A3"/>
+  <circle cx="42" cy="22" r="5" fill="#8A4B33"/>
+  <rect x="17" y="32" width="14" height="3.5" rx="1.75" fill="#D97757"/>
+  <rect x="17" y="39" width="22" height="2.5" rx="1.25" fill="#E9B8A3"/>
+  <rect x="35" y="31" width="12" height="6" rx="3" fill="#D97757"/>
+  <rect x="17" y="44" width="16" height="2.5" rx="1.25" fill="#E9B8A3"/>
+</svg>

package/lib/client.js

@@ -0,0 +1,241 @@
+// dsh-claude-design-system 2.4.1: built from baoyu-design.
+window.__ModuleLoader__.load({
+	id: "dsh-claude-design-system",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		"use strict";
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __export = (target, all) => {
+		  for (var name in all)
+		    __defProp(target, name, { get: all[name], enumerable: true });
+		};
+		var __copyProps = (to, from, except, desc) => {
+		  if (from && typeof from === "object" || typeof from === "function") {
+		    for (let key of __getOwnPropNames(from))
+		      if (!__hasOwnProp.call(to, key) && key !== except)
+		        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+		  }
+		  return to;
+		};
+		var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+		var client_exports = {};
+		__export(client_exports, {
+		  apply: () => apply,
+		  inject: () => inject
+		});
+		module.exports = __toCommonJS(client_exports);
+
+		var define_CLIENT_default = { plugin: "dsh-claude-design-system", key: "dsh-claude-design-system", simple: false };
+
+		var import_react = require("react");
+		var import_jsx_runtime = require("react/jsx-runtime");
+		var CLIENT = define_CLIENT_default;
+		var COMMENT_SOURCE = "baoyu-design-comment";
+		var KIND = `${CLIENT.key}:comment`;
+		var NS = CLIENT.key;
+		var zh = {
+		  "card.title": "已将对“{title}”的评论发给 Agent",
+		  "card.request": "已将“{title}”上的 {label} 发给 Agent",
+		  "card.view": "查看评论",
+		  "card.more": "显示位置",
+		  "card.less": "收起位置"
+		};
+		var en = {
+		  "card.title": "Comment on “{title}” sent to agent",
+		  "card.request": "{label} on “{title}” sent to agent",
+		  "card.view": "View thread",
+		  "card.more": "Show where",
+		  "card.less": "Hide where"
+		};
+		var str = (value) => typeof value === "string" ? value : "";
+		function ours(event) {
+		  if (event.type !== "user/message" || event.surfaceOp !== "append") return false;
+		  const source = event.data?.source;
+		  return source?.kind === COMMENT_SOURCE && source.plugin === CLIENT.plugin;
+		}
+		function cardData(event) {
+		  const source = event.data?.source ?? {};
+		  const threads = Array.isArray(source.threads) ? source.threads : [];
+		  const requests = Array.isArray(source.requests) ? source.requests : [];
+		  return {
+		    title: str(source.title),
+		    url: str(source.url),
+		    threads: threads.map((t) => ({ id: str(t.id), where: str(t.where), text: str(t.text) })).filter((t) => t.id),
+		    requests: requests.map((r) => ({ id: str(r.id), label: str(r.label), text: str(r.text) })).filter((r) => r.id && r.text),
+		    seq: event.seq
+		  };
+		}
+		var definition = {
+		  kind: KIND,
+		  target: "chat",
+		  match: (event) => (
+		    // Claimed: the built-in input-message Definition would draw it as a context row.
+		    ours(event) ? { id: String(event.data?.id), role: "start", exclusive: true } : null
+		  ),
+		  start: (_context, match) => cardData(match.event),
+		  update: (context) => context.state,
+		  buildViewNode: (context) => {
+		    if (context.state === void 0) return null;
+		    return {
+		      key: context.key,
+		      kind: KIND,
+		      id: context.id,
+		      target: "chat",
+		      anchorSeq: context.state.seq,
+		      location: context.start?.location ?? context.matches[0]?.location ?? { kind: "unresolved" },
+		      visibility: "visible",
+		      // A person's input, as a user message: it opens the agent's reply below it.
+		      groupTree: "input",
+		      data: context.state
+		    };
+		  }
+		};
+		var CSS = `
+		.bdc-row{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:100%}
+		.bdc-card{box-sizing:border-box;max-width:min(calc(var(--dsh-chat-content-width, 748px) * 0.702), 82%);min-width:min(320px, 82%);
+		  border:0.5px solid var(--dsw-alias-border-l1);border-radius:var(--dsw-radius-xl, 12px);background:var(--dsw-alias-markdown-code-block);
+		  color:var(--dsw-alias-label-primary);padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px}
+		.bdc-head{display:flex;align-items:center;gap:6px;color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12, 12px/18px sans-serif)}
+		.bdc-head svg{flex:none}
+		.bdc-head-text{flex:1;min-width:0;display:flex;white-space:nowrap;overflow:hidden}
+		.bdc-head-text>span{flex:none}
+		.bdc-head-text>.bdc-head-title{flex:0 1 auto;min-width:1.5em;overflow:hidden;text-overflow:ellipsis}
+		.bdc-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:-2px -4px -2px 0;
+		  border:0;border-radius:var(--dsw-radius-sm, 6px);background:none;color:inherit;cursor:pointer;padding:0}
+		.bdc-toggle:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
+		.bdc-toggle svg{transition:transform .15s}
+		.bdc-toggle[aria-expanded=false] svg{transform:rotate(-90deg)}
+		.bdc-body{font-size:var(--dsh-content-font-size, 14px);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
+		.bdc-meta{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:0.5px solid var(--dsw-alias-border-l1)}
+		.bdc-where{color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12, 12px/18px sans-serif);overflow-wrap:anywhere}
+		.bdc-view{align-self:flex-start;display:inline-flex;align-items:center;gap:2px;height:24px;margin-left:-6px;padding:0 6px;border:0;
+		  border-radius:var(--dsw-radius-sm, 6px);background:none;color:var(--dsw-alias-label-secondary);font:var(--dsw-font-xxs-12, 12px/18px sans-serif);cursor:pointer}
+		.bdc-view:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+		.bdc-view:focus-visible,.bdc-toggle:focus-visible{outline:var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));outline-offset:1px}
+		@media (prefers-reduced-motion:reduce){.bdc-toggle svg{transition:none}}
+		`;
+		var iconStyle = { display: "block" };
+		var TITLE_MARK = "
";
+		function CommentIcon() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		    "path",
+		    {
+		      d: "M3 3.5h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H8.2L5.4 13.8a.3.3 0 0 1-.5-.23V11.5H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z",
+		      stroke: "currentColor",
+		      strokeWidth: "1.2",
+		      strokeLinejoin: "round"
+		    }
+		  ) });
+		}
+		function RequestIcon() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: iconStyle, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "4", width: "12", height: "7", rx: "2", stroke: "currentColor", strokeWidth: "1.2" }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.5 8.5 11 14l.9-2.1L14 11l-5.5-2.5Z", fill: "currentColor", stroke: "var(--dsw-alias-markdown-code-block, #fff)", strokeWidth: "0.8", strokeLinejoin: "round" })
+		  ] });
+		}
+		function ChevronDown() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 4.5 6 7.5l3-3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+		}
+		function ChevronRight() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.5 3 7.5 6l-3 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+		}
+		function Card({ title, thread, url, t, openThread }) {
+		  const [open, setOpen] = (0, import_react.useState)(true);
+		  const heading = t("card.title", { title });
+		  const meta = !CLIENT.simple && (thread.where || url);
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-card", "data-comment-id": thread.id, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-head", children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentIcon, {}),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { text: heading, title, parts: t("card.title", { title: TITLE_MARK }).split(TITLE_MARK) }),
+		      meta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "bdc-toggle", "aria-expanded": open, "aria-label": t(open ? "card.less" : "card.more"), onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {}) })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bdc-body", children: thread.text }),
+		    meta && open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-meta", children: [
+		      thread.where && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bdc-where", children: thread.where }),
+		      url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: "bdc-view", onClick: () => openThread(url, thread.id), children: [
+		        t("card.view"),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {})
+		      ] })
+		    ] })
+		  ] });
+		}
+		function Heading({ text, title, parts }) {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bdc-head-text", title: text, children: parts.length === 2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: parts[0] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bdc-head-title", children: title }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: parts[1] })
+		  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bdc-head-title", children: text }) });
+		}
+		function RequestCardView({ title, request, t }) {
+		  const label = request.label || "Request";
+		  const heading = t("card.request", { title, label });
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-card", "data-request-id": request.id, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-head", children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestIcon, {}),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { text: heading, title, parts: t("card.request", { title: TITLE_MARK, label }).split(TITLE_MARK) })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bdc-body", children: request.text })
+		  ] });
+		}
+		function CommentCards({ node, t, openThread }) {
+		  const { title, url, threads, requests } = node.data;
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-row", children: [
+		    threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { title, thread, url, t, openThread }, thread.id)),
+		    (requests ?? []).map((request) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestCardView, { title, request, t }, request.id))
+		  ] });
+		}
+		var inject = ["slots", "locale", "uiConversation"];
+		function threadUrl(url, id) {
+		  try {
+		    const at = new URL(url);
+		    at.searchParams.set("comment", id);
+		    return at.href;
+		  } catch {
+		    return url;
+		  }
+		}
+		function apply(ctx) {
+		  ctx.effect(() => {
+		    if (typeof document === "undefined") return () => {
+		    };
+		    const id = `${CLIENT.plugin}/comment-card.css`;
+		    if (document.querySelector(`style[data-plugin-css=${JSON.stringify(id)}]`)) return () => {
+		    };
+		    const tag = document.createElement("style");
+		    tag.dataset.plugin = CLIENT.plugin;
+		    tag.dataset.pluginCss = id;
+		    tag.textContent = CSS;
+		    document.head.appendChild(tag);
+		    return () => tag.remove();
+		  }, `${CLIENT.plugin}: comment card styles`);
+		  ctx.effect(() => ctx.locale.register(NS, { zh, en }), `${CLIENT.plugin}: dictionaries`);
+		  ctx.uiConversation.events.register(definition);
+		  ctx.slots.inject(
+		    "conversation.chat.node",
+		    () => ctx.slots.register(
+		      {
+		        name: "conversation.chat.node",
+		        key: KIND,
+		        locale: NS,
+		        inject: (sessionId) => ({
+		          openThread: (url, threadId) => {
+		            const target = threadUrl(url, threadId);
+		            const sidebar = ctx.get("sidebarRight");
+		            const tabs = ctx.get("sidebarRightTabs");
+		            if (sidebar && tabs?.get("browser") !== void 0) sidebar.openTabIn(sessionId, "browser", { params: { url: target } });
+		            else window.open(target, "_blank", "noopener,noreferrer");
+		          }
+		        })
+		      },
+		      CommentCards
+		    )
+		  );
+		}
+		return module.exports;
+	}
+});