dsh-pictor 0.1.0 → 0.2.0

package/README.md

@@ -1,81 +1,78 @@
-# Pictor — 文档转信息图工作台
+# Pictor — Document-to-Infographic Workbench
 
-<p align="right"><i>English below.</i></p>
+[ EN | [中文](./README.zh-cn.md) ]
 
-[源码仓库](https://github.com/bandung-circuits/pictor) · [问题与讨论](https://github.com/bandung-circuits/pictor/issues)
+Pictor turns a document into a set of infographics. It is a [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (DSH) plugin published to npm as [`dsh-pictor`](https://www.npmjs.com/package/dsh-pictor), with source at [github.com/bandung-circuits/pictor](https://github.com/bandung-circuits/pictor). Each project is one coherent agent session that carries the whole extract → advise → render flow; the GUI is a thin layer that only shows file-fact state and shapes your input. Design decisions live in [docs/DESIGN.zh.md](docs/DESIGN.zh.md) (Chinese).
 
-Pictor 把一份文档变成一组信息图。它是 DeepSeek Harness（DSH）的插件：每新建一个项目，宿主创建一个连贯的会话作为项目会话，整个「提取 → 方案 → 渲染」流程都在这个会话里推进，GUI 只做两件事：查看信息、规整输入。设计文档见 [docs/DESIGN.zh.md](docs/DESIGN.zh.md)。
+![Pictor empty workbench](docs/screenshot-empty.png)
 
-## 形态
+## Installation
 
-- 安装后首次使用自动生成 `~/.pictor` 工作区（注册为 dsh 工作区，侧栏归组见「Pictor」）。
-- 唯一入口是 dsh 左下角 footer 按钮「Pictor」，打开 shell.overlay 工作台：左栏列项目，右栏显示当前项目。
-- 项目步骤固定三步：提取结构 → 方案设计 → 渲染出图。每步由你做决定后，会话在同一会话里接着执行（agent-loop 的 resume 语义），不重跑已有阶段。
-- 项目名取文档首行，信息条内随时可改名，只动 index.json。
-- 状态只由文件事实驱动；运行中判定以 dsh agent 注册表为权威；把你对 orchestration 的关心都留给会话。
+Pictor is published to npm as `dsh-pictor`:
 
-## 两个模型
+```bash
+dsh plugin --profile <profile> add dsh-pictor
+```
 
-- 推理模型：extract 与 advise 用 dsh 当前默认模型，无需在 Pictor 配置。
-- 画图模型：在工作台「设置」里配置（seedream / gemini / openai-compatible / mock）。密钥经 dsh 凭据子系统保存，配置只留引用。
+Replace `<profile>` with the target profile name (e.g. `desktop`, `web`) and start that profile. A **Pictor** button appears at the bottom-left of the dsh footer. On first use a `~/.pictor` home is provisioned and registered as a DSH workspace; project sessions group under "Pictor" in the sidebar. For development installs (local link, live-reload while editing source) see [docs/DESIGN.zh.md](docs/DESIGN.zh.md).
 
-## 安装
+**For non-technical users**: install [DSH Desktop](https://dshdesktop.com/en/) (a community project, not an official DeepSeek product; it bundles the DeepSeek Harness runtime as a ready-to-run desktop app) and let the agent install the plugin for you — just send this one message in dsh:
 
-Pictor 以 npm 包 `dsh-pictor` 发布：
+> Install the Pictor plugin from the npm package `dsh-pictor` into the current profile, restart if needed, and confirm when a Pictor button appears at the bottom left.
 
-```bash
-dsh plugin --profile <profile> add dsh-pictor
-```
+## Usage
 
-重启 profile 后，footer 左下角出现「Pictor」按钮。开发安装（改动源码实时联调）见 [docs/DESIGN.zh.md](docs/DESIGN.zh.md)。
+1. Open the workbench via the **Pictor** footer button and click **New project**: upload a file (`md` / `txt` / `docx` / `pdf` / image) or paste content (from Word or the web; formatting is kept, stored as sanitised HTML).
+2. The session reads and normalises the source (`docx` / `pdf` / image / HTML → `document.md` via DSH tooling) and proposes candidate structures.
+3. Tick the structures and confirm; the session moves to proposal design. Tick a proposal, pick an aspect ratio, and click **Render selected**.
+4. Preview and download from the result grid; open the discussion panel to talk to the session at any point, or use the step bar to go back and redo existing artifacts.
 
-## 使用
+![Pictor workbench with a project in progress](docs/screenshot-workbench.png)
 
-1. 打开工作台，点「新建项目」：上传文件（md/txt/docx/pdf/图片）或粘贴内容（从 Word/网页粘贴，格式保留，落盘为消毒 HTML）。
-2. 会话读取并规整来源（docx/pdf/图片/HTML → document.md 由会话用 dsh 工具完成），提取候选结构。
-3. 勾选结构，确认，会话进入方案设计；勾选方案，设画面比例，点「渲染所选方案」。
-4. 结果网格里预览、下载；随时可展开讨论面板对会话说话，或点步骤条回到已有产物的步骤重做。
+## Form
 
-## 开发与验证
+- A `~/.pictor` home is created on first use (registered as a DSH workspace; sidebar shows "Pictor").
+- The only entry point is the bottom-left **Pictor** footer button, which toggles a `shell.overlay` workbench: projects on the left, the selected project on the right.
+- Every project has three fixed steps: extract structures → design proposals → render images. After each human decision the **same session resumes** (agent-loop resume semantics); existing artifacts are never re-derived.
+- The project name is taken from the document's first line and can be renamed any time in the info bar (touches only `index.json`).
+- State is driven purely by file facts; running status is authoritative via the DSH agent registry; orchestration concerns are left to the session.
+
+## Two models
+
+- **Reasoner**: extract and advise run on DSH's current default model — no Pictor configuration needed.
+- **Image model**: configured in the workbench Settings (`seedream` / `gemini` / `openai-compatible` / `mock`). API keys go through DSH's credential subsystem; the configuration stores only a reference.
+
+## Development & verification
 
 ```bash
-npm run build         # esbuild 构建 host + 拼接 client
-npm run verify        # L1 单元 + L2 host 集成（mock ctx，15 项）
-npm run verify:integration   # L3 transport 冒烟（真实 dsh web）
-npm run test:e2e      # L4a 浏览器 e2e（fixture 数据，确定性）
+npm run build                # esbuild build of host + bundled client
+npm run verify               # L1 unit + L2 host integration (mock ctx, 15 items)
+npm run verify:integration   # L3 transport smoke against a real dsh web
+npm run test:e2e             # L4a browser e2e (fixture data, deterministic)
 ```
 
-测试分层的定义与理由见 [docs/DESIGN.zh.md](docs/DESIGN.zh.md) 第 7 节。
+Test-layer definitions and rationale: [docs/DESIGN.zh.md](docs/DESIGN.zh.md) §7.
 
-## 目录
+### Layout
 
 ```
 pictor/
-├── agents/                # 声明式蓝图（orchestrator/extractor/advisor/renderer）
+├── agents/                # declarative blueprints (orchestrator/extractor/advisor/renderer)
 ├── references/domain/     # base-prompt + layouts/ + styles/ + diagram-types/ + visual-principles
-├── src/host/              # 插件宿主：~/.pictor、项目会话、/pictor RPC、生图
-├── src/client/            # 工作台 UI（React.createElement + 主题变量）
+├── src/host/              # plugin host: ~/.pictor, project sessions, /pictor RPC, image generation
+├── src/client/            # workbench UI (React.createElement + theme variables)
 ├── e2e/                   # L4a Playwright
-├── verify.mjs             # L1+L2 离线冒烟
+├── verify.mjs             # L1+L2 offline smoke
 └── scripts/               # build + transport-smoke
 ```
 
-数据目录 `~/.pictor/`：`index.json`（项目索引）、`pictor-config.json`（画图模型配置）、`<项目 id>/`（自包含：agents/references 快照 + 10.input + 11.extraction + 12.advice + output）。
-
-## 许可证
-
-MIT，见 [LICENSE](LICENSE)。
-
----
+Data home `~/.pictor/`: `index.json` (project index), `pictor-config.json` (image-model configuration), `<project-id>/` (self-contained: agents/references snapshot + `10.input` + `11.extraction` + `12.advice` + `output`).
 
-## English
+## Documents
 
-Pictor turns a document into a set of infographics. It is a DeepSeek Harness (DSH) plugin published on npm as [`dsh-pictor`](https://www.npmjs.com/package/dsh-pictor); the source lives at [github.com/bandung-circuits/pictor](https://github.com/bandung-circuits/pictor). Each project is one coherent agent session that carries the whole extract → advise → render flow, and the GUI is a thin layer that only shows file-fact state and shapes your input. Design decisions live in [docs/DESIGN.zh.md](docs/DESIGN.zh.md).
+- Design decisions: [docs/DESIGN.zh.md](docs/DESIGN.zh.md) (Chinese)
+- Verification checklist: [docs/verification-checklist.zh.md](docs/verification-checklist.zh.md) (Chinese)
 
-- A `~/.pictor` home is provisioned on first use and registered as a DSH workspace; all project sessions group under "Pictor" in the sidebar.
-- The only entry point is the bottom-left "Pictor" footer button, which toggles a `shell.overlay` workbench: projects on the left, the selected project on the right.
-- Every project has three fixed steps: extract structures → design proposals → render images. After each human decision the **same session resumes** to keep working; existing artifacts are never re-derived (file facts are the source of truth).
-- Reasoner: DSH's default model (no Pictor config). Image model: configured in the workbench Settings (seedream / gemini / openai-compatible / mock); the API key goes through DSH's credentials subsystem.
-- Tests: L1 unit + L2 host integration (`npm run verify`), L3 real-dsh transport smoke (`npm run verify:integration`), L4a browser e2e against a seeded fixture (`npm run test:e2e`).
+## License
 
-MIT licensed.
+MIT — see [LICENSE](LICENSE). Third-party content notices: [NOTICE.md](NOTICE.md).

package/README.zh-cn.md

@@ -0,0 +1,78 @@
+# Pictor — 文档转信息图工作台
+
+[ [English](./README.md) | 中文 ]
+
+Pictor 把一份文档变成一组信息图。它是 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)（dsh）的插件，已发布到 npm 包 [`dsh-pictor`](https://www.npmjs.com/package/dsh-pictor)，源码仓库在 [github.com/bandung-circuits/pictor](https://github.com/bandung-circuits/pictor)。每新建一个项目，宿主创建一个连贯的会话作为项目会话，整个「提取 → 方案 → 渲染」流程都在这个会话里推进，GUI 只做两件事：查看信息、规整输入。设计文档见 [docs/DESIGN.zh.md](docs/DESIGN.zh.md)。
+
+![Pictor 初始工作台](docs/screenshot-empty.png)
+
+## 安装
+
+已发布到 npm，安装即一行命令：
+
+```bash
+dsh plugin --profile <profile> add dsh-pictor
+```
+
+把 `<profile>` 换成目标 profile 名（如 `desktop`、`web`），然后启动该 profile，dsh 左下角会出现「Pictor」按钮。首次使用自动生成 `~/.pictor` 工作区（注册为 dsh 工作区，侧栏归组见「Pictor」）。开发安装（改动源码实时联调）见 [docs/DESIGN.zh.md](docs/DESIGN.zh.md)。
+
+非技术用户可安装 [DSH Desktop](https://dshdesktop.com/en/)（社区维护项目，非 DeepSeek 官方产品，把 DeepSeek Harness 运行封装成可直接打开的桌面应用），然后让 dsh 里的 AI 帮装，发这一句即可：
+
+> 帮我把 Pictor 插件装上，从 npm 包 dsh-pictor 装到当前 profile，需要的话重启，装好告诉我左下角有没有 Pictor 入口。
+
+## 使用
+
+1. 打开工作台，点「新建项目」：上传文件（md/txt/docx/pdf/图片）或粘贴内容（从 Word/网页粘贴，格式保留，落盘为消毒 HTML）。
+2. 会话读取并规整来源（docx/pdf/图片/HTML → document.md 由会话用 dsh 工具完成），提取候选结构。
+3. 勾选结构，确认，会话进入方案设计；勾选方案，设画面比例，点「渲染所选方案」。
+4. 结果网格里预览、下载；随时可展开讨论面板对会话说话，或点步骤条回到已有产物的步骤重做。
+
+![Pictor 项目工作中](docs/screenshot-workbench.png)
+
+## 形态
+
+- 安装后首次使用自动生成 `~/.pictor` 工作区（注册为 dsh 工作区，侧栏归组见「Pictor」）。
+- 唯一入口是 dsh 左下角 footer 按钮「Pictor」，打开 shell.overlay 工作台：左栏列项目，右栏显示当前项目。
+- 项目步骤固定三步：提取结构 → 方案设计 → 渲染出图。每步由你做决定后，会话在同一会话里接着执行（agent-loop 的 resume 语义），不重跑已有阶段。
+- 项目名取文档首行，信息条内随时可改名，只动 index.json。
+- 状态只由文件事实驱动；运行中判定以 dsh agent 注册表为权威；把你对 orchestration 的关心都留给会话。
+
+## 两个模型
+
+- 推理模型：extract 与 advise 用 dsh 当前默认模型，无需在 Pictor 配置。
+- 画图模型：在工作台「设置」里配置（seedream / gemini / openai-compatible / mock）。密钥经 dsh 凭据子系统保存，配置只留引用。
+
+## 开发与验证
+
+```bash
+npm run build         # esbuild 构建 host + 拼接 client
+npm run verify        # L1 单元 + L2 host 集成（mock ctx，15 项）
+npm run verify:integration   # L3 transport 冒烟（真实 dsh web）
+npm run test:e2e      # L4a 浏览器 e2e（fixture 数据，确定性）
+```
+
+测试分层的定义与理由见 [docs/DESIGN.zh.md](docs/DESIGN.zh.md) 第 7 节。
+
+## 目录
+
+```
+pictor/
+├── agents/                # 声明式蓝图（orchestrator/extractor/advisor/renderer）
+├── references/domain/     # base-prompt + layouts/ + styles/ + diagram-types/ + visual-principles
+├── src/host/              # 插件宿主：~/.pictor、项目会话、/pictor RPC、生图
+├── src/client/            # 工作台 UI（React.createElement + 主题变量）
+├── e2e/                   # L4a Playwright
+├── verify.mjs             # L1+L2 离线冒烟
+└── scripts/               # build + transport-smoke
+```
+
+数据目录 `~/.pictor/`：`index.json`（项目索引）、`pictor-config.json`（画图模型配置）、`<项目 id>/`（自包含：agents/references 快照 + 10.input + 11.extraction + 12.advice + output）。
+
+## 文档
+
+- 设计与决策：[docs/DESIGN.zh.md](docs/DESIGN.zh.md)
+- 验证清单：[docs/verification-checklist.zh.md](docs/verification-checklist.zh.md)
+
+## 许可证
+
+MIT，见 [LICENSE](LICENSE)。第三方内容声明见 [NOTICE.md](NOTICE.md)。

package/lib/client.js

@@ -303,6 +303,7 @@ const I18N = {
     layoutLabel: '布局', styleLabel: '风格', metaConfirmedHint: '确认后作为项目名与提取依据，可编辑。',
     chooseLayout: '选择布局', chooseStyle: '选择风格', resetToAi: '回到 AI 推荐',
     layoutChanged: '·已改', aiSuggestion: 'AI 推荐',
+    batchStyleLabel: '批量设置风格', batchStyleHint: '为所选方案套用同一风格（未选则全部）',
     close: '关闭',
     discussion: '讨论', discussHint: '对项目会话自由说话：补充参考、要求搜索、调整方向。你的决定会在同一会话里接着执行。',
     discussPlaceholder: '例如：先不要继续，帮我查一下这篇文章提到的背景…',
@@ -360,6 +361,7 @@ const I18N = {
     layoutLabel: 'Layout', styleLabel: 'Style', metaConfirmedHint: 'Confirmed as the project name and extraction basis; editable.',
     chooseLayout: 'Choose layout', chooseStyle: 'Choose style', resetToAi: 'Reset to AI',
     layoutChanged: '· edited', aiSuggestion: 'AI',
+    batchStyleLabel: 'Batch style', batchStyleHint: 'Apply one style to all selected proposals (all if none selected)',
     close: 'Close',
     discussion: 'Discussion', discussHint: 'Talk to the project session: add context, ask for research, adjust direction. Your decisions continue it in the same session.',
     discussPlaceholder: 'e.g. Hold on — research the background this article mentions…',
@@ -793,9 +795,17 @@ function ProposalsPanel({ stage, proposals, suggestedStyle, steps, selected, onT
   const ratioFor = (id) => ratios[id] || '16:9'
   const activePrompt = promptId ? proposals.find((x) => x.id === promptId) || null : null
 
+  function batchTargetIds() {
+    return selected.length ? selected : proposals.map((p) => p.id)
+  }
   function pickOption(name) {
     const cur = pick
     if (!cur) return
+    if (cur.batch) {
+      batchTargetIds().forEach((id) => setSty(id, name))
+      setPick(null)
+      return
+    }
     if (cur.kind === 'layout') setLay(cur.id, name)
     else setSty(cur.id, name)
     setPick(null)
@@ -803,6 +813,11 @@ function ProposalsPanel({ stage, proposals, suggestedStyle, steps, selected, onT
   function resetCurrent() {
     const cur = pick
     if (!cur) return
+    if (cur.batch) {
+      batchTargetIds().forEach((id) => setSty(id, undefined))
+      setPick(null)
+      return
+    }
     if (cur.kind === 'layout') setLay(cur.id, undefined)
     else setSty(cur.id, undefined)
     setPick(null)
@@ -859,34 +874,60 @@ function ProposalsPanel({ stage, proposals, suggestedStyle, steps, selected, onT
     : null
 
   const chooserModal = pick ? (function chooser() {
-    const p = proposals.find((x) => x.id === pick.id)
-    if (!p) return null
     const kind = pick.kind
+    const batch = Boolean(pick.batch)
+    const p = batch ? null : proposals.find((x) => x.id === pick.id)
+    if (!batch && !p) return null
     const list = kind === 'layout'
-      ? (layouts && layouts.length ? layouts : [p.suggested_layout])
-      : (styles && styles.length ? styles : [p.suggested_style || suggestedStyle])
-    const base = kind === 'layout' ? p.suggested_layout : (p.suggested_style || suggestedStyle)
-    const current = kind === 'layout' ? (lay[pick.id] || p.suggested_layout) : (sty[pick.id] || p.suggested_style || suggestedStyle)
-    const changed = kind === 'layout'
-      ? Boolean(lay[pick.id] && lay[pick.id] !== base)
-      : Boolean(sty[pick.id] && sty[pick.id] !== base)
+      ? (layouts && layouts.length ? layouts : (p ? [p.suggested_layout] : []))
+      : (styles && styles.length ? styles : (p ? [p.suggested_style || suggestedStyle] : (suggestedStyle ? [suggestedStyle] : [])))
+    const base = batch ? '' : (kind === 'layout' ? p.suggested_layout : (p.suggested_style || suggestedStyle))
+    // batch：高亮所有目标方案共享的同一风格（若有），否则不高亮
+    let current
+    if (batch) {
+      const ids = batchTargetIds()
+      const eff = ids.map((id) => {
+        const pp = proposals.find((x) => x.id === id)
+        return (pp ? (sty[id] || pp.suggested_style || suggestedStyle || '') : (sty[id] || ''))
+      })
+      current = eff.length && eff.every((s) => s === eff[0]) ? eff[0] : ''
+    } else {
+      current = kind === 'layout' ? (lay[pick.id] || p.suggested_layout) : (sty[pick.id] || p.suggested_style || suggestedStyle)
+    }
+    const changed = batch
+      ? ids_haveAnyOverrideStyle()
+      : (kind === 'layout' ? Boolean(lay[pick.id] && lay[pick.id] !== base) : Boolean(sty[pick.id] && sty[pick.id] !== base))
+    function ids_haveAnyOverrideStyle() {
+      return batchTargetIds().some((id) => Boolean(sty[id]))
+    }
     const items = list.map((n) => h('div', { key: n, className: 'pt-preview-item' + (n === current ? ' sel' : ''), onClick: () => pickOption(n) },
-      n === base ? h('span', { className: 'ai-chip' }, t('aiSuggestion')) : null,
+      (!batch && n === base) ? h('span', { className: 'ai-chip' }, t('aiSuggestion')) : null,
       h('img', { src: '/pictor/preview/' + (kind === 'layout' ? 'layouts' : 'styles') + '/' + encodeURIComponent(n) + '.webp', alt: kind === 'layout' ? layoutLabel(n) : n }),
       h('div', { className: 'nm' }, kind === 'layout' ? layoutLabel(n) : n)))
+    const title = batch ? t('batchStyleLabel') : (kind === 'layout' ? t('chooseLayout') : t('chooseStyle'))
+    const batchSub = batch ? h('p', { className: 'pt-meta', style: { margin: '0 0 10px' }, key: 'sub' },
+      t('batchStyleHint') + ' · ' + t('selectCount', { s: selected.length, t: proposals.length })) : null
     return h('div', { className: 'pt-modal-backdrop', onClick: () => setPick(null) },
       h('div', { className: 'pt-modal pt-modal-wide', onClick: (e) => e.stopPropagation() },
         h('div', { className: 'pt-modal-head' },
-          h('h3', { className: 'pt-option-title', style: { margin: 0 } }, kind === 'layout' ? t('chooseLayout') : t('chooseStyle')),
+          h('h3', { className: 'pt-option-title', style: { margin: 0 } }, title),
           h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
             changed ? h('button', { className: 'pt-btn', style: { padding: '6px 12px', fontSize: 13 }, onClick: resetCurrent }, t('resetToAi')) : null,
             h('button', { className: 'pt-modal-close', onClick: () => setPick(null), title: t('close'), 'aria-label': t('close') }, '×'))),
-        h('div', { className: 'pt-modal-body' }, h('div', { className: 'pt-preview-grid' }, items))))
+        h('div', { className: 'pt-modal-body' }, batchSub, h('div', { className: 'pt-preview-grid' }, items))))
   })() : null
 
+  const styleList = (styles && styles.length ? styles : (suggestedStyle ? [suggestedStyle] : []))
+  const batchStyleBtn = styleList.length ? h('button', {
+    className: 'pt-btn', style: { padding: '4px 10px', fontSize: 13 }, disabled: proposals.length === 0,
+    onClick: () => setPick({ id: null, kind: 'style', batch: true }),
+    title: t('batchStyleHint'),
+  }, t('batchStyleLabel')) : null
+
   const actionRow = h('div', { className: 'pt-card-row', style: { marginTop: 18 } },
-    h('div', { style: { display: 'flex', gap: 10, alignItems: 'center' } },
+    h('div', { style: { display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' } },
       h('button', { className: 'pt-btn', onClick: onToggleAll }, allSelected ? t('deselectAll') : t('selectAll')),
+      batchStyleBtn,
       h('span', { className: 'pt-meta' }, t('selectCount', { s: selected.length, t: proposals.length }))),
     hasImageKey === false
       ? h('p', { className: 'pt-warn', style: { margin: 0 } }, t('imgKeyHint'))

package/lib/image-providers.js

@@ -124,7 +124,7 @@ class DashScopeProvider {
     const base = this.cfg.baseUrl || "https://dashscope.aliyuncs.com/api/v1";
     const size = DASHSCOPE_SIZE_MAP[aspectRatio] || "1024*1024";
     const url = base.replace(/\/$/, "") + "/services/aigc/multimodal-generation/generation";
-    const parameters = { size, prompt_extend: true, watermark: false };
+    const parameters = { size, watermark: false };
     const body = {
       model,
       input: { messages: [{ role: "user", content: [{ type: "text", text: prompt }] }] },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-pictor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Pictor：文档转信息图工作台。每项目一个连贯 dsh 会话，GUI 为 shell.overlay 工作台（左栏项目、右栏三步：提取/方案/渲染），行为全部交给 DSH 智能运行时。",
   "type": "module",
   "repository": {

package/references/domain/base-prompt.md

@@ -1,4 +1,4 @@
-Create a professional infographic following these specifications:
+Create a professional infographic. This prompt separates what to render from how to render it: the Content section is the subject matter, data, and labels to put in the infographic; the Layout and Style sections are visual specifications (structure and aesthetic — they describe the look, not the subject). Put the content in first, then apply the layout and style to present it.
 
 ## Image Specifications
 
@@ -8,6 +8,13 @@ Create a professional infographic following these specifications:
 - **Aspect Ratio**: {{ASPECT_RATIO}}
 - **Language**: {{LANGUAGE}}
 
+## Content — the subject matter, data, and labels to render
+
+{{CONTENT}}
+
+Text labels (in {{LANGUAGE}}):
+{{TEXT_LABELS}}
+
 ## Core Principles
 
 - Follow the layout structure precisely for information architecture
@@ -26,19 +33,10 @@ Create a professional infographic following these specifications:
 - Labels should be clear and appropriately sized
 - Use the specified language for all text content
 
-## Layout Guidelines
+## Layout Guidelines — visual structure (how to arrange; not content)
 
 {{LAYOUT_GUIDELINES}}
 
-## Style Guidelines
-
-{{STYLE_GUIDELINES}}
+## Style Guidelines — visual aesthetic (how it looks; not subject matter)
 
----
-
-Generate the infographic based on the content below:
-
-{{CONTENT}}
-
-Text labels (in {{LANGUAGE}}):
-{{TEXT_LABELS}}
+{{STYLE_GUIDELINES}}

package/references/domain/styles/bandung-circuit.md

@@ -1,6 +1,6 @@
 # bandung-circuit
 
-Editorial illustration style of the Bandung Circuit column — a muted, paper-printed aesthetic in the lineage of left publishing-house interior pages (Tricontinental, Verso, *New Left Review*). Cream stock, duotone restraint, thin-line hand-drawn icons, and typography-led hierarchy. Reads as the inside of a thoughtful journal, not a marketing poster.
+Editorial illustration style — a muted, paper-printed aesthetic. Cream stock, duotone restraint, thin-line hand-drawn icons, and typography-led hierarchy. Reads as an interior print spread, not a marketing poster.
 
 ## Color Palette
 
@@ -25,10 +25,10 @@ Editorial illustration style of the Bandung Circuit column — a muted, paper-pr
 
 ## Typography
 
-- **Font family: Poppins** — used as the single typeface across the entire composition (headlines, body, labels, captions, numerals). Poppins is a geometric sans with humanist warmth, which suits Bandung Circuit's editorial-but-warm register; do not pair it with a second family.
+- **Font family: Poppins** — used as the single typeface across the entire composition (headlines, body, labels, captions, numerals). Poppins is a geometric sans with humanist warmth, which suits an editorial-but-warm register; do not pair it with a second family.
 - Headlines: Poppins SemiBold or Bold — uppercase or title case acceptable, tracking slightly opened
 - Body text and labels: Poppins Regular or Medium — comfortable reading weight
-- All-caps short labels for block headers (ONE CORE, FOUR PILLARS, etc.) — Poppins Medium/SemiBold, set in cream on solid duotone bar
+- All-caps short labels for block headers — Poppins Medium/SemiBold, set in cream on solid duotone bar
 - Sub-captions and explanatory phrases beneath block titles: Poppins Italic or Light
 - Numerals match the body face (Poppins lining figures) — no oversized statement numerals (this style trusts the layout, not hero stats)
 
@@ -49,13 +49,9 @@ Editorial illustration style of the Bandung Circuit column — a muted, paper-pr
 - Use filled / solid icons (Material-style) — icons are line-art only
 - Introduce a fourth or fifth color — composition must feel like a duotone with a single accent
 - Use glossy or "tech product" iconography — keep icons modest and editorial
-- Use heavy textures, parchment overlays, ink splatter, or cross-hatching (that is `aged-academia`, not Bandung)
+- Use heavy textures, parchment overlays, ink splatter, or cross-hatching (that is `aged-academia`, not this style)
 - Use bold red blocks or full-bleed red panels (that is `tricon-infographic`, the poster sibling — not this)
-- Crowd the canvas — Bandung Circuit pages always breathe
-
-## Best For
-
-Editorial illustrations for left-publishing journal articles, conceptual frameworks, multi-pillar architectures, theoretical model diagrams, methodology overviews, Global South research publications, long-form essay infographics, in-text figures (not standalone posters)
+- Crowd the canvas — these pages always breathe
 
 ## Recommended Pairings
 
@@ -67,16 +63,13 @@ Editorial illustrations for left-publishing journal articles, conceptual framewo
 
 ## Distinction from Sibling Styles
 
-- **vs `tricon-infographic`**: That style is the *cover/poster* voice of the same publisher — bold red on white, authoritative, full-bleed. Bandung Circuit is the *interior/essay* voice — cream stock, duotone, quiet.
-- **vs `aged-academia`**: That style is sepia parchment with cross-hatched scientific illustration. Bandung Circuit is contemporary editorial print, not historical specimen plate.
-- **vs `mckinsey-report`**: That style is white-background institutional consulting with serif/sans dual typography. Bandung Circuit is warm-paper publishing-house aesthetic with single sans family and political-intellectual register.
+- **vs `tricon-infographic`**: That style is a poster voice — bold red on white, authoritative, full-bleed. `bandung-circuit` is an interior/essay voice — cream stock, duotone, quiet.
+- **vs `aged-academia`**: That style is sepia parchment with cross-hatched scientific illustration. `bandung-circuit` is contemporary editorial print, not historical specimen plate.
+- **vs `mckinsey-report`**: That style is white-background institutional consulting with serif/sans dual typography. `bandung-circuit` is a warm-paper aesthetic with a single sans family.
 
 ## Register
 
 - formal-casual: formal but warm
 - abstract-representational: slightly abstract
 - bright-dark: bright (warm-bright, not white-bright)
-- digital-handcrafted: leans handcrafted (digital execution with hand-drawn iconography)
-- cultural-anchor: left publishing-house interior page design (Tricontinental, Verso, *New Left Review*, *Monthly Review*) — editorial register of the international left intellectual tradition
-- best-for: in-text editorial illustrations for journal articles, conceptual diagrams in long-form essays, Global South research publications
-- avoid-for: marketing posters, product UI, children's content, entertainment, corporate consulting decks, social-media graphics requiring stopping power
+- digital-handcrafted: leans handcrafted (digital execution with hand-drawn iconography)