dsh-pictor 0.1.0

package/lib/render.js

@@ -0,0 +1,28 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+function renderPrompt(input, runDir) {
+  const refs = (rel) => join(runDir, "references", "domain", rel);
+  const base = readFileSync(refs("base-prompt.md"), "utf8");
+  let layoutGuidelines = `\uFF08\u672A\u627E\u5230 ${input.suggestedLayout} \u7684 layout \u89C4\u8303\u6587\u4EF6\uFF0C\u4EC5\u6309\u540D\u79F0\u4F7F\u7528\uFF09`;
+  try {
+    layoutGuidelines = readFileSync(refs(`layouts/${input.suggestedLayout}.md`), "utf8");
+  } catch {
+  }
+  let styleGuidelines = `\uFF08\u672A\u627E\u5230 ${input.suggestedStyle} \u7684 style \u89C4\u8303\u6587\u4EF6\uFF0C\u4EC5\u6309\u540D\u79F0\u4F7F\u7528\uFF09`;
+  try {
+    styleGuidelines = readFileSync(refs(`styles/${input.suggestedStyle}.md`), "utf8");
+  } catch {
+  }
+  const aspect = input.aspectRatio || "16:9";
+  const lang = input.language || "English";
+  const textLabels = [
+    `Communicative intent: ${input.communicativeIntent}`,
+    `Suggested layout: ${input.suggestedLayout}`,
+    input.estimatedComplexity ? `Estimated complexity: ${input.estimatedComplexity}` : void 0
+  ].filter(Boolean).join("\n");
+  const prompt = base.replaceAll("{{LAYOUT}}", input.suggestedLayout).replaceAll("{{STYLE}}", input.suggestedStyle).replaceAll("{{ASPECT_RATIO}}", aspect).replaceAll("{{LANGUAGE}}", lang).replaceAll("{{LAYOUT_GUIDELINES}}", layoutGuidelines).replaceAll("{{STYLE_GUIDELINES}}", styleGuidelines).replaceAll("{{CONTENT}}", input.sourceText).replaceAll("{{TEXT_LABELS}}", textLabels);
+  return { prompt, textLabels };
+}
+export {
+  renderPrompt
+};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "dsh-pictor",
+  "version": "0.1.0",
+  "description": "Pictor：文档转信息图工作台。每项目一个连贯 dsh 会话，GUI 为 shell.overlay 工作台（左栏项目、右栏三步：提取/方案/渲染），行为全部交给 DSH 智能运行时。",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bandung-circuits/pictor.git"
+  },
+  "homepage": "https://github.com/bandung-circuits/pictor",
+  "bugs": {
+    "url": "https://github.com/bandung-circuits/pictor/issues"
+  },
+  "main": "./lib/index.js",
+  "exports": {
+    ".": {
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-theme",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ],
+      "platform": "web"
+    }
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "agents",
+    "references/domain",
+    "docs",
+    "README.md",
+    "LICENSE",
+    "assets"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "verify": "node scripts/build.mjs && node verify.mjs",
+    "verify:integration": "bash scripts/transport-smoke.sh",
+    "test:e2e": "playwright test --config e2e/playwright.config.ts --project chromium",
+    "verify:live": "playwright test --config e2e/playwright.config.ts --project live",
+    "prepare": "node scripts/build.mjs"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.1.0-rc.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.62.1",
+    "esbuild": "^0.28.2"
+  }
+}

package/references/domain/base-prompt.md

@@ -0,0 +1,44 @@
+Create a professional infographic following these specifications:
+
+## Image Specifications
+
+- **Type**: Infographic
+- **Layout**: {{LAYOUT}}
+- **Style**: {{STYLE}}
+- **Aspect Ratio**: {{ASPECT_RATIO}}
+- **Language**: {{LANGUAGE}}
+
+## Core Principles
+
+- Follow the layout structure precisely for information architecture
+- Apply style aesthetics consistently throughout
+- If content involves sensitive or copyrighted figures, create stylistically similar alternatives
+- Keep information concise, highlight keywords and core concepts
+- Use ample whitespace for visual clarity
+- Maintain clear visual hierarchy
+- Do NOT add source citations, methodology notes, institutional branding, logos, or watermarks inside the graphic — focus purely on presenting the information content itself
+
+## Text Requirements
+
+- All text must match the specified style treatment
+- Main titles should be prominent and readable
+- Key concepts should be visually emphasized
+- Labels should be clear and appropriately sized
+- Use the specified language for all text content
+
+## Layout Guidelines
+
+{{LAYOUT_GUIDELINES}}
+
+## Style Guidelines
+
+{{STYLE_GUIDELINES}}
+
+---
+
+Generate the infographic based on the content below:
+
+{{CONTENT}}
+
+Text labels (in {{LANGUAGE}}):
+{{TEXT_LABELS}}

package/references/domain/diagram-types/_catalog.yaml

@@ -0,0 +1,78 @@
+# Pictor 学术可视化类型注册表
+#
+# 每种类型对应一个 layout（参见 references/domain/layouts/）。
+# 标 fallback 的表示当前尚无专用 layout，使用近似 layout 渲染，存在语义损失。
+#
+# 已有专用 layout 的基础类型（不在此列）：
+#   hierarchy          → hierarchical-layers
+#   concept-decomposition → tree-branching
+#   timeline           → linear-progression
+#   cycle              → circular-flow
+
+types:
+  # --- 关系与结构 ---
+
+  - id: network-graph
+    name: Network Graph
+    layout: network-graph
+    file: network-graph.md
+
+  - id: stakeholder-matrix
+    name: Stakeholder Matrix
+    layout: quadrant-matrix
+    file: stakeholder-matrix.md
+
+  # --- 论证与论辩 ---
+
+  - id: toulmin-diagram
+    name: Toulmin Diagram
+    layout: toulmin-argument
+    file: toulmin-diagram.md
+
+  - id: debate-map
+    name: Debate Map
+    layout: binary-comparison  # fallback
+    file: debate-map.md
+
+  - id: greimas-square
+    name: Greimas Square
+    layout: binary-comparison  # fallback
+    file: greimas-square.md
+
+  # --- 流程与周期 ---
+
+  - id: sankey-flow
+    name: Sankey Flow Diagram
+    layout: sankey-flow
+    file: sankey-flow.md
+
+  # --- 时间与演变 ---
+
+  - id: parallel-timeline
+    name: Parallel Timeline
+    layout: parallel-tracks
+    file: parallel-timeline.md
+
+  # --- 评估与定位 ---
+
+  - id: evidence-radar
+    name: Evidence Radar
+    layout: dashboard  # fallback
+    file: evidence-radar.md
+
+  - id: quadrant
+    name: Quadrant Chart
+    layout: quadrant-matrix
+    file: quadrant.md
+
+  # --- 空间与全景 ---
+
+  - id: landscape
+    name: Landscape Map
+    layout: bento-grid  # fallback
+    file: landscape.md
+
+  - id: geographic-map
+    name: Geographic Map
+    layout: geo-map
+    file: geographic-map.md

package/references/domain/diagram-types/debate-map.md

@@ -0,0 +1,33 @@
+# 论辩地图 / Debate Map
+
+## 适用场景
+
+展示**正反观点的对立结构**，包括支持论据、反驳论据、以及各方立场之间的回应关系。适合呈现学术争论、政策辩论、多方立场对比。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用论辩地图：
+
+- 存在明确的正反两方或多方观点
+- "支持者认为...反对者则认为..."
+- 论点之间有直接的反驳或回应关系
+- 某个主张同时有多条支持和反对证据
+- 多个学者/团体对同一议题的不同立场
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 中心议题 | 辩论的核心问题 | 顶部或中心的突出框 |
+| 支持论点 | 赞同立场的论据 | 绿色/蓝色节点 |
+| 反对论点 | 反对立场的论据 | 红色/橙色节点 |
+| 回应连线 | 论点间的反驳/支持关系 | 带箭头连线，颜色区分 |
+| 证据节点 | 支撑论点的具体证据 | 较小的附属节点 |
+
+## 布局原则
+
+- **对称布局**：正方和反方分列左右或上下
+- **中心议题突出**：核心问题居于视觉焦点
+- **颜色对比**：用鲜明的颜色对比区分正反方
+- **层级深度**：从核心立场到具体证据逐层展开
+- **回应关系清晰**：反驳连线用虚线或不同颜色标识

package/references/domain/diagram-types/evidence-radar.md

@@ -0,0 +1,33 @@
+# 证据雷达图 / Evidence Radar
+
+## 适用场景
+
+在**多个维度轴上展示评估结果**，形成雷达/蛛网形状，直观比较各维度的强弱。适合多维度评估、证据质量对比、能力评估、方案综合评分。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用证据雷达图：
+
+- 对同一对象在多个维度上的评估
+- "在 X 方面表现优秀，但在 Y 方面不足"
+- 多个指标的综合评分
+- 多个方案/候选人的对比评估
+- 证据链在不同方面的强度差异
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 维度轴 | 各评估维度 | 从中心向外辐射的轴线 |
+| 数据多边形 | 各维度得分连线 | 连接各轴上得分点的封闭区域 |
+| 刻度环 | 得分参照 | 同心圆或同心多边形 |
+| 维度标签 | 标识每个维度 | 轴线末端的文字 |
+| 多对象叠加 | 对比多个对象 | 不同颜色/线型的叠加多边形 |
+
+## 布局原则
+
+- **维度数适中**：5-10 个维度最佳
+- **均匀分布**：各维度轴等角度分布
+- **刻度统一**：所有维度使用相同的评分范围
+- **颜色区分**：叠加多个对象时用不同颜色和透明度
+- **标签可读**：维度标签不相互重叠

package/references/domain/diagram-types/geographic-map.md

@@ -0,0 +1,33 @@
+# 地理分布图 / Geographic Map
+
+## 适用场景
+
+在**地理空间**上展示数据、事件或现象的分布，呈现空间模式、区域差异、扩散路径等。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用地理分布图：
+
+- 涉及多个国家、地区或地理位置的数据
+- "在 X 地区...而在 Y 地区..."
+- 现象的地理扩散或传播路径
+- 区域间的对比或差异
+- 地缘政治分析
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 地图底图 | 地理参照 | 简化的区域/国家轮廓 |
+| 热度着色 | 数值的地理分布 | 色阶填充（浅=低，深=高） |
+| 标记点 | 具体位置的事件/数据 | 圆点，大小反映数值 |
+| 路径/箭头 | 流向或扩散方向 | 连接两地的曲线箭头 |
+| 图例 | 颜色/大小的含义 | 边栏的说明 |
+
+## 布局原则
+
+- **地理准确**：位置应大致对应真实地理方位
+- **简化底图**：去除不必要的地理细节，突出数据
+- **色阶直觉**：用直觉性的色阶（如红=高、蓝=低）
+- **标签不遮挡**：文字标签不遮挡关键区域
+- **比例尺**：如果距离有意义，提供比例尺参考

package/references/domain/diagram-types/greimas-square.md

@@ -0,0 +1,33 @@
+# 格雷马斯方阵 / Greimas Square
+
+## 适用场景
+
+展示**语义对立关系的四元结构**，将一对二元对立拆解为四个位置（S1、S2、非S1、非S2），并展示它们之间的对立（contrary）、矛盾（contradictory）和蕴含（implication）关系。来源于结构主义语义学，广泛用于叙事分析和意识形态批评。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用格雷马斯方阵：
+
+- 明确的二元对立（如自由 vs. 秩序、自然 vs. 文化）
+- 存在"既不是 A 也不是 B"的中间或否定态
+- 对意识形态结构的分析
+- 叙事中人物或价值观的对立关系
+- 概念的辩证关系（正题→反题→合题的变体）
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 四个位置 | S1、S2、非S1、非S2 | 正方形四角的节点 |
+| 对立轴 | S1 ↔ S2 的对立关系 | 水平连线，标注"对立" |
+| 矛盾轴 | S1 ↔ 非S1、S2 ↔ 非S2 | 对角虚线，标注"矛盾" |
+| 蕴含轴 | S1 → 非S2、S2 → 非S1 | 垂直连线，标注"蕴含" |
+| 综合位置 | 复合语义（如 S1+S2） | 中央或边线位置 |
+
+## 布局原则
+
+- **正方形布局**：四个位置严格排列在正方形的四角
+- **关系线类型**：对立=实线、矛盾=对角虚线、蕴含=单向箭头
+- **标注清晰**：每个位置和每条关系线都有明确的语义标签
+- **颜色区分**：上方两个（正面概念）和下方两个（否定概念）用不同色调
+- **保持简洁**：不添加额外装饰，保持结构主义的严谨感

package/references/domain/diagram-types/landscape.md

@@ -0,0 +1,33 @@
+# 全景图 / Landscape Map
+
+## 适用场景
+
+**鸟瞰式展示某个领域的整体格局**，包括主要参与者、思想流派、技术生态或市场格局的全貌。适合在一张图中呈现一个领域"谁在做什么、各占什么位置"。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用全景图：
+
+- 一个领域内多个参与者/流派/技术的概览
+- "该领域主要分为...几大方向"
+- 竞争格局、生态系统的描述
+- 学术领域中不同研究方向的分布
+- 需要一张图让读者对整个领域有全局认识
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 区域/地带 | 不同方向或子领域 | 色块区域或地图式分区 |
+| 实体标记 | 具体参与者/技术/流派 | 区域内的图标或标签 |
+| 边界 | 子领域间的界限 | 渐变色过渡或虚线 |
+| 关系连线 | 跨领域的关联 | 虚线或淡色连线 |
+| 全局标题 | 整个版图的主题 | 顶部或中心的标题 |
+
+## 布局原则
+
+- **空间隐喻**：相似的事物在空间上靠近
+- **区域清晰**：不同子领域用颜色/边界明确区分
+- **密度均匀**：避免某个区域过于密集而其他空旷
+- **层次感**：重要参与者/流派用更大的标记
+- **可浏览性**：读者应能快速扫视获得全局印象

package/references/domain/diagram-types/network-graph.md

@@ -0,0 +1,35 @@
+# 网络关系图 / Network Graph
+
+## 适用场景
+
+展示**实体之间的多对多关系网络**。适合将非线性的、相互交织的关系结构可视化，包括因果网络、利益相关方关系、知识图谱、引用网络、权力关系等。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用网络关系图：
+
+- 多个实体之间的相互影响或依赖
+- "A 影响 B"、"X 与 Y 相关"、"互相作用"
+- 因果链或因果网络（非单一线性因果）
+- 利益相关方之间的权力、资源或信息交换
+- 概念之间的类比、对比、包含关系
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 节点 | 表示一个实体/概念 | 圆形或圆角矩形，大小反映重要性 |
+| 边/连线 | 表示关系 | 带箭头（有向）或无箭头（无向） |
+| 边标签 | 描述关系类型 | 连线上的简短文字 |
+| 节点颜色 | 区分实体类别 | 不同颜色代表不同类型 |
+| 边粗细 | 关系强度 | 越粗表示关系越强 |
+| 聚类分组 | 将相关节点归类 | 背景色区域或虚线框 |
+
+## 布局原则
+
+- **中心性**：最重要的节点居中，次要节点向外辐射
+- **减少交叉**：尽量减少连线的交叉
+- **颜色编码**：用颜色区分节点类别（如不同利益方、不同层级）
+- **权重可视化**：节点大小 → 重要程度；连线粗细 → 关系强度
+- **标签可读**：每个节点和关键连线都应有标签
+- **复杂度控制**：单张图不超过 20-30 个节点

package/references/domain/diagram-types/parallel-timeline.md

@@ -0,0 +1,33 @@
+# 平行时间线 / Parallel Timeline
+
+## 适用场景
+
+**多条并行的时间线对照展示**不同领域、地区或主题的同步演变。适合展示跨领域的历史对比、多国并行发展、多线程叙事。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用平行时间线：
+
+- 同一时期内多个领域/国家/主题的并行发展
+- "与此同时，在另一个领域..."
+- 不同线索之间存在时间上的呼应或因果关系
+- 需要对比不同维度的演变节奏
+- 多线程的历史叙事
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 多条时间轴 | 各自代表一个领域/线索 | 平行的水平线 |
+| 时间刻度 | 统一的时间参照 | 顶部或底部的共享刻度 |
+| 事件标记 | 各线索上的具体事件 | 各轴上的节点和标签 |
+| 跨线关联 | 不同线索间的因果/影响 | 连接两条轴的虚线或箭头 |
+| 线索标签 | 标识每条时间线 | 左侧或右侧的分类标签 |
+
+## 布局原则
+
+- **垂直排列**：多条时间线从上到下平行排列
+- **时间对齐**：所有线索共享同一时间刻度
+- **颜色区分**：每条线索用不同颜色
+- **关联清晰**：跨线索的关联用连线明确标出
+- **间距充足**：各线索之间留够空间放置跨线关联标记

package/references/domain/diagram-types/quadrant.md

@@ -0,0 +1,33 @@
+# 象限图 / Quadrant Chart
+
+## 适用场景
+
+在 **2×2 矩阵**中定位事物，展示两个维度的交叉分类。适合策略定位、优先级矩阵、风险评估、分类决策。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用象限图：
+
+- 两个维度的交叉分类（如"重要性 × 紧急性"）
+- "高 X 低 Y"、"既 A 又 B"等二维定位描述
+- 策略分析中的四类划分
+- 需要为不同位置推荐不同策略
+- BCG 矩阵、艾森豪威尔矩阵等经典模型
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 两条轴 | 定义分析维度 | 十字交叉的坐标轴 |
+| 四个象限 | 四种分类区域 | 用不同背景色标识 |
+| 象限标签 | 每个象限的含义/策略 | 象限内的标题文字 |
+| 定位标记 | 具体事物在矩阵中的位置 | 圆点或图标 |
+| 轴端标签 | 维度的两极 | 轴两端的文字（如"高"/"低"） |
+
+## 布局原则
+
+- **正方形比例**：四个象限面积相等
+- **颜色直觉**：用冷暖色调暗示优先级（如红=高优先，绿=低优先）
+- **标记清晰**：每个定位点都有标签
+- **象限命名**：每个象限有简短有力的策略名称
+- **简洁为主**：不超过 15-20 个定位标记

package/references/domain/diagram-types/sankey-flow.md

@@ -0,0 +1,33 @@
+# 桑基流量图 / Sankey Flow Diagram
+
+## 适用场景
+
+用**宽度与流量成比例的带状连线**展示资源、价值、资本或信息从来源到目的地的流动与分配。适合将价值链、资源分配、资本流向等量化流动关系可视化。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用桑基流量图：
+
+- 从一组来源流向一组目标的数据（如资金从投资者流向不同行业）
+- 价值链分析（原料→加工→分销→消费）
+- "其中 X% 流向了..."、"A 贡献了 Y 给 B"
+- 资源的分配和再分配
+- 多级分流或汇聚
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 节点列 | 来源、中间站、目标 | 垂直排列的矩形 |
+| 流量带 | 连接节点的比例宽度连线 | 弯曲的带状色块，宽度=流量 |
+| 节点标签 | 标识每个来源/目标 | 节点旁边的文字 |
+| 数值标注 | 标注具体流量数值 | 流量带上或旁边的数字 |
+| 颜色编码 | 区分不同来源或类别 | 每个来源用不同颜色 |
+
+## 布局原则
+
+- **从左到右**：来源在左，目标在右，可有多个中间层
+- **比例准确**：带的宽度严格与流量成正比
+- **总量守恒**：左侧总宽度 = 右侧总宽度（除非有损耗）
+- **颜色连贯**：同一来源的流量在整个路径中保持同色
+- **避免交叉**：通过合理排序减少带的交叉

package/references/domain/diagram-types/stakeholder-matrix.md

@@ -0,0 +1,31 @@
+# 利益相关方矩阵 / Stakeholder Matrix
+
+## 适用场景
+
+在**二维坐标轴上定位各利益相关方**，展示其影响力、利益、立场等维度的相对位置。适合分析多方博弈、权力格局、政策利益关系。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用利益相关方矩阵：
+
+- 涉及多个参与方/利益相关方
+- 描述了各方的影响力大小或利益程度
+- "A 是关键决策者"、"B 的利益受到直接影响"
+- 权力-利益、影响-意愿等二维分析
+- 需要区分"应该重点关注谁"
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| 二维坐标轴 | 定义分析维度 | X 轴（如利益程度）、Y 轴（如影响力） |
+| 象限标签 | 标识四个区域的策略含义 | 如"重点管理"、"保持满意"等 |
+| 利益相关方标记 | 定位各参与方 | 圆形标记，大小可反映第三个维度 |
+| 标签 | 标识每个参与方 | 标记旁边的文字 |
+
+## 布局原则
+
+- **坐标轴语义明确**：两个维度的含义必须清晰标注
+- **象限含义**：四个象限各有明确的管理策略含义
+- **避免重叠**：当标记密集时适当偏移，保持可读性
+- **颜色区分**：可用颜色区分不同类型的利益相关方（如政府、企业、社会组织）

package/references/domain/diagram-types/toulmin-diagram.md

@@ -0,0 +1,35 @@
+# 图尔敏论证图 / Toulmin Diagram
+
+## 适用场景
+
+按**图尔敏论证模型**拆解一个论证的完整结构，展示主张（Claim）、数据（Data）、保证（Warrant）、支持（Backing）、限定（Qualifier）和反驳（Rebuttal）之间的逻辑关系。
+
+## 信息结构特征
+
+当源文本包含以下特征时，适合使用图尔敏论证图：
+
+- 明确的论点/主张及其支撑证据
+- "因为 A，所以 B"（数据→主张）
+- 隐含的推理规则（"之所以 A 能推出 B，是因为..."）
+- 对论点的限定条件（"除非..."、"在...条件下"）
+- 反驳或例外情况
+
+## 核心视觉元素
+
+| 元素 | 用途 | 常见表现 |
+|------|------|----------|
+| Claim（主张） | 论证的核心结论 | 右侧突出显示的矩形 |
+| Data（数据） | 支持主张的事实/证据 | 左侧矩形 |
+| Warrant（保证） | 连接数据与主张的推理规则 | 数据→主张连线下方 |
+| Backing（支持） | 支撑保证的进一步依据 | 保证下方 |
+| Qualifier（限定） | 限定主张成立的程度 | 主张上方或旁边的修饰 |
+| Rebuttal（反驳） | 主张不成立的条件 | 主张下方，用不同颜色标识 |
+| 连线 | 逻辑推导关系 | 带箭头的线 |
+
+## 布局原则
+
+- **从左到右**：Data → Warrant → Claim 的逻辑流向
+- **保证在下方**：Warrant 和 Backing 位于主推理线的下方
+- **反驳突出**：Rebuttal 用不同颜色（如红色）标识
+- **标签清晰**：每个元素的角色标签（D/W/C/B/Q/R）明确标注
+- **单一论证**：一张图只展示一个完整论证，复杂论证拆分为多张

package/references/domain/layouts/bento-grid.md

@@ -0,0 +1,41 @@
+# bento-grid
+
+Modular grid layout with varied cell sizes, like a bento box.
+
+## Structure
+
+- Grid of rectangular cells
+- Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
+- No strict symmetry required
+- Hero cell for main point
+- Supporting cells around it
+
+## Best For
+
+- Multiple topic overview
+- Feature highlights
+- Dashboard summaries
+- Portfolio displays
+- Mixed content types
+
+## Visual Elements
+
+- Clear cell boundaries
+- Varied cell backgrounds
+- Icons or illustrations per cell
+- Consistent padding/margins
+- Visual hierarchy through size
+
+## Text Placement
+
+- Main title at top
+- Cell titles within each cell
+- Brief content per cell
+- Minimal text, maximum visual
+- CTA or summary in prominent cell
+
+## Recommended Pairings
+
+- `craft-handmade`: Friendly overviews (default)
+- `corporate-memphis`: Business summaries
+- `pixel-art`: Retro feature grids