@deernova/style 0.1.0 → 0.3.0

package/skill/references/components/composer.md

@@ -0,0 +1,206 @@
+# Composer 输入区
+
+发消息、写笔记、向 AI 提问的输入区，放在对话栏底部。它承载的是用户正在写的内容，所以是纸面，不是玻璃。
+
+由上到下三部分：可选的**提示条**（贴在输入框正上方）、**输入框**（加号、输入、语音、发送排在同一行）、**信息行**（模型、思考强度、权限模式、上下文用量，靠右）。
+
+**需要提供**：绑定的文本、占位符、发送动作、是否可以发送（内容为空或正在生成时禁用）。可选：附件列表、提示条、模型和权限的选择、上下文用量。
+
+## 尺寸
+
+<!-- tokens:composer -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `composer-radius` | 14 | 24 | 16 | Composer 外框圆角。 |
+| `composer-min-height` | 44 | 44 | 48 | 单行时的高度：加号、输入、发送排在同一行，输入多行时向上长高。 |
+<!-- /tokens -->
+
+- 输入框：`surface-raised` 底、1px `line` 描边、`composer-radius`、`shadow-float`。单行时高 `composer-min-height`（桌面 44），加号、输入、发送垂直居中在同一行；输入多行时向上长高，最多 8 行，超出后内部滚动。获得焦点时描边加深为 `line-control`。
+- 文字用 `type-body`；占位符写清快捷键，例如「按 ⏎ 发送，按 ⌘⏎ 加入队列稍后发送」。
+- 加号和语音是[图标按钮](button.md)。发送按钮是 `button-height-md` 的圆形，`accent` 底、`on-accent` 箭头；不能发送时 `fill-selected` 底、`ink-tertiary` 箭头，不隐藏；正在生成时变成停止方块。
+- 附件：在输入框内、文字上方单独一行，`surface-sunken` 底、`radius-sm` 的文件条。
+- 提示条：宽度和输入框一致，`surface-raised` 底、`banner-radius`，单行高 `composer-min-height`，左边图标和一句话，右边关闭按钮；次要信息用 `ink-secondary`。和输入框之间 `space-2`。
+- 信息行：输入框下方 `space-2`，靠右排列，`callout` 字号；当前值用 `ink`，说明用 `ink-secondary`；每一项都是可以点开选择的文字按钮。
+- 指针端 Return 发送、Shift-Return 换行；触控端换行键就是换行，只能点按钮发送。
+
+## Web
+
+```css
+.dn-composer-stack { display: grid; gap: var(--space-2); width: 100%; max-width: var(--content-max); }
+.dn-composer-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--composer-min-height);
+  padding: 0 var(--space-1) 0 var(--space-3);
+  border-radius: var(--banner-radius);
+  background: var(--surface-raised);
+  color: var(--ink);
+  font: var(--type-callout);
+}
+.dn-composer-notice > .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--ink-secondary); }
+.dn-composer-notice .dn-muted { color: var(--ink-secondary); }
+.dn-composer-notice .dn-icon-button { margin-left: auto; }
+.dn-composer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--space-1);
+  min-height: var(--composer-min-height);
+  padding: calc((var(--composer-min-height) - var(--button-height-md)) / 2 - var(--stroke-line)) var(--space-2);
+  border: var(--stroke-line) solid var(--line);
+  border-radius: var(--composer-radius);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-float);
+  transition: border-color var(--duration-instant) var(--ease-standard);
+}
+.dn-composer:focus-within { border-color: var(--line-control); }
+.dn-composer textarea {
+  flex: 1;
+  min-width: 0;
+  min-height: var(--button-height-md);
+  max-height: calc(var(--type-body-line) * 8 + 4px);
+  padding: calc((var(--button-height-md) - var(--type-body-line)) / 2) var(--space-1);
+  border: 0;
+  outline: none;
+  resize: none;
+  field-sizing: content;
+  background: transparent;
+  color: var(--ink);
+  font: var(--type-body);
+}
+.dn-composer textarea::placeholder { color: var(--ink-tertiary); }
+.dn-composer-attachments { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--space-1); padding: 0 0 var(--space-1); }
+.dn-attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-inline);
+  height: var(--button-height-sm);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+  color: var(--ink-secondary);
+  font: var(--weight-regular) var(--type-callout-size)/1 var(--font-sans);
+}
+.dn-attachment .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
+.dn-send {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: var(--button-height-md);
+  height: var(--button-height-md);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  color: var(--on-accent);
+  cursor: pointer;
+}
+.dn-send .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: 2.2; }
+.dn-send:disabled { background: var(--fill-selected); color: var(--ink-tertiary); cursor: default; }
+.dn-send:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+.dn-send::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, var(--hit-min));
+  height: max(100%, var(--hit-min));
+  transform: translate(-50%, -50%);
+}
+.dn-composer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px; }
+.dn-meta-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-inline);
+  height: var(--button-height-sm);
+  padding: 0 var(--space-2);
+  border: 0;
+  border-radius: var(--button-radius-sm);
+  background: transparent;
+  color: var(--ink-secondary);
+  font: var(--weight-regular) var(--type-callout-size)/1 var(--font-sans);
+  cursor: pointer;
+}
+.dn-meta-button:hover { background: var(--fill-hover); }
+.dn-meta-button b { color: var(--ink); font-weight: var(--weight-regular); }
+.dn-context-ring {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  border-radius: var(--radius-full);
+  background: conic-gradient(var(--ink-secondary) calc(var(--used, 0.3) * 1turn), var(--fill-selected) 0);
+  -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%);
+  mask: radial-gradient(circle, transparent 55%, #000 57%);
+}
+```
+
+```html
+<div class="dn-composer-stack">
+  <div class="dn-composer-notice" role="status">
+    <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
+    <span>本周额度将提前用完 <span class="dn-muted">已使用 52% · 11 月 9 日重置</span></span>
+    <button class="dn-icon-button" type="button" aria-label="关闭提示"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
+  </div>
+  <div class="dn-composer">
+    <div class="dn-composer-attachments"><span class="dn-attachment"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></svg>周报草稿.md</span></div>
+    <button class="dn-icon-button" type="button" aria-label="添加附件"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+    <textarea rows="1" aria-label="消息" placeholder="按 ⏎ 发送，按 ⌘⏎ 加入队列稍后发送"></textarea>
+    <button class="dn-icon-button" type="button" aria-label="语音输入"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></button>
+    <button class="dn-send" type="button" aria-label="发送" disabled><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button>
+  </div>
+  <div class="dn-composer-meta">
+    <button class="dn-meta-button" type="button"><b>Opus 5.5</b>高</button>
+    <button class="dn-meta-button" type="button"><b>询问权限</b></button>
+    <span class="dn-context-ring" role="img" aria-label="上下文已用 30%"></span>
+  </div>
+</div>
+```
+
+## SwiftUI
+
+```swift
+VStack(alignment: .trailing, spacing: Deernova.space2) {
+    HStack(alignment: .bottom, spacing: Deernova.space1) {
+        Button("添加附件", systemImage: "plus") { attach() }
+            .labelStyle(.iconOnly).buttonStyle(.borderless)
+        TextField("按 ⏎ 发送，按 ⌘⏎ 加入队列稍后发送", text: $draft, axis: .vertical)
+            .lineLimit(1...8)
+            .textFieldStyle(.plain)
+            .font(.deernovaBody)
+            .onSubmit(send)                                   // Mac：Return 发送
+        Button("语音输入", systemImage: "mic") { dictate() }
+            .labelStyle(.iconOnly).buttonStyle(.borderless)
+        Button(action: send) {
+            Image(systemName: "arrow.up").fontWeight(.semibold)
+                .frame(width: Deernova.buttonHeightMd, height: Deernova.buttonHeightMd)
+        }
+        .buttonStyle(.borderedProminent)
+        .buttonBorderShape(.circle)
+        .disabled(draft.isEmpty)
+    }
+    .padding(.horizontal, Deernova.space2)
+    .frame(minHeight: Deernova.composerMinHeight)
+    .background(.surfaceRaised, in: .rect(cornerRadius: Deernova.composerRadius))
+    .overlay(RoundedRectangle(cornerRadius: Deernova.composerRadius).strokeBorder(.line, lineWidth: Deernova.strokeLine))
+    .shadow(color: .black.opacity(0.08), radius: 10, y: 6)
+
+    HStack(spacing: Deernova.space2) {            // 信息行：模型、权限
+        Menu("Opus 5.5 · 高") { … }
+        Menu("询问权限") { … }
+    }
+    .font(.deernovaCallout)
+    .menuStyle(.borderlessButton)
+    .foregroundStyle(.inkSecondary)
+}
+```
+
+放在页面底部时用 `.safeAreaInset(edge: .bottom)`，让内容可以滚到它的上方。
+
+## 不要
+
+- 把 Composer 做成玻璃（它承载的是内容）。
+- 把模型、权限这类设置塞进输入框里；把发送按钮放到框外。
+- 禁用时把按钮直接隐藏，让布局跳动。
+- 提示条和输入框宽度不一致，或者离得很远。

package/skill/references/components/empty-state.md

@@ -0,0 +1,63 @@
+# 空状态
+
+列表、搜索结果或整个页面没有内容时显示：说明现在是什么状态，再给出下一步。
+
+**需要提供**：图标、标题（描述状态）、一句正文（告诉用户怎么开始），以及最多一个主操作和一个次操作。
+
+## 尺寸
+
+<!-- tokens:empty-state -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `empty-title-size` | 24 | 20 | 32 | 空状态标题（衬线）字号。 |
+| `empty-icon-size` | 32 | 36 | 40 | 空状态图标的边长。 |
+<!-- /tokens -->
+
+- 在可用区域里居中。图标 `empty-icon-size`、细线、`ink-tertiary`；标题用衬线 `empty-title-size`、半粗；正文 `type-body`、`ink-secondary`，最大宽度 320。
+- 按钮用[大号](button.md)。
+- 搜索没有结果时不放按钮，标题写成「没有找到“关键词”」，正文给出修改建议。
+
+## Web
+
+```css
+.dn-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-5); text-align: center; }
+.dn-empty > .dn-icon { width: var(--empty-icon-size); height: var(--empty-icon-size); color: var(--ink-tertiary); stroke-width: 1.4; }
+.dn-empty-title { margin: var(--space-2) 0 0; color: var(--ink); font: var(--weight-semibold) var(--empty-title-size)/1.25 var(--font-serif); letter-spacing: var(--type-display-tracking); }
+.dn-empty-body { max-width: 320px; margin: 0 0 var(--space-3); color: var(--ink-secondary); font: var(--type-body); }
+.dn-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-stack); }
+```
+
+```html
+<div class="dn-empty">
+  <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></svg>
+  <h3 class="dn-empty-title">还没有笔记</h3>
+  <p class="dn-empty-body">写下第一条想法，它会同步到你所有的设备。</p>
+  <div class="dn-empty-actions">
+    <button class="dn-button is-primary is-lg" type="button">新建笔记</button>
+    <button class="dn-button is-lg" type="button">从文件导入</button>
+  </div>
+</div>
+```
+
+## SwiftUI
+
+```swift
+ContentUnavailableView {
+    Label("还没有笔记", systemImage: "doc.text")
+        .font(.system(size: Deernova.emptyTitleSize, weight: .semibold, design: .serif))
+} description: {
+    Text("写下第一条想法，它会同步到你所有的设备。")
+} actions: {
+    Button("新建笔记") { create() }.buttonStyle(.borderedProminent).controlSize(.large)
+    Button("从文件导入") { importFile() }.controlSize(.large)
+}
+
+// 搜索没有结果
+ContentUnavailableView.search(text: query)
+```
+
+## 不要
+
+- 用插画或吉祥物填满空白。
+- 标题写「空空如也」这种玩笑话。
+- 出现三个以上的按钮。

package/skill/references/components/glass-controls.md

@@ -0,0 +1,127 @@
+# 玻璃操作层
+
+浮在内容之上的玻璃操作层：SwiftUI 端的工具栏按钮组、标签栏、浮动操作按钮，以及官网与文档的页眉。规则见 [玻璃](../foundations/glass.md)。
+
+**Web 应用不用玻璃**：顶栏和工具按钮见 [顶栏与侧面板](toolbar.md)。
+
+**什么时候用**：用户在浏览内容时随时要用到的操作，比如新建、搜索、切换页面、分享。内容本身永远不放在玻璃上。
+
+**需要提供**：每个按钮的图标和无障碍标签、点击动作；如果是标签栏，还要提供当前选中项。
+
+## 尺寸
+
+<!-- tokens:glass-controls -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `glass-button-size` | 34 | 44 | 36 | 玻璃按钮的边长：macOS 26 工具栏按钮约 34（系统绘制，这里只作参考和自绘时对齐），官网页眉的图标按钮也用它；按钮组里的按钮比它小 8。Web 应用的工具栏不用玻璃，用 button-height-md。 |
+<!-- /tokens -->
+
+- 单个玻璃按钮：圆形，边长 `glass-button-size`，图标 `icon-size-lg`。macOS 26 的工具栏按钮由系统绘制，约 34，和红绿灯在同一条线上，见 [macOS](../scenes/macos.md)。
+- 按钮组：胶囊形，内边距 3，组内按钮比单个按钮小 8，间距 2。相邻的玻璃元素放进同一组，组与组之间 `space-3`。
+- 选中项：图标从 `ink-secondary` 变成 `ink`，底色 `fill-selected`。
+- 实色玻璃（`accent` 底、`on-accent` 图标）一屏只用一次，留给主操作，比如「新建」。
+
+## Web
+
+只用于官网与文档：网页没有系统玻璃，页眉用半透明填充加背景模糊近似。Web 应用里不要用。
+
+```css
+.dn-glass {
+  border: var(--stroke-line) solid var(--glass-stroke);
+  border-radius: var(--radius-full);
+  background: var(--glass-fill);
+  box-shadow: var(--shadow-glass);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+}
+@media (prefers-reduced-transparency: reduce) {
+  .dn-glass { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
+}
+
+.dn-glass-button {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--glass-button-size);
+  height: var(--glass-button-size);
+  padding: 0;
+  border-radius: var(--radius-full);
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+.dn-glass-button .dn-icon { width: var(--icon-size-lg); height: var(--icon-size-lg); }
+.dn-glass-button.is-prominent { border-color: transparent; background: var(--accent); color: var(--on-accent); }
+.dn-glass-button:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+.dn-glass-button::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, var(--hit-min));
+  height: max(100%, var(--hit-min));
+  transform: translate(-50%, -50%);
+}
+
+.dn-glass-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; }
+.dn-glass-group .dn-glass-button {
+  width: calc(var(--glass-button-size) - 8px);
+  height: calc(var(--glass-button-size) - 8px);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ink-secondary);
+}
+.dn-glass-group .dn-glass-button[aria-current="page"], .dn-glass-group .dn-glass-button[aria-pressed="true"] { background: var(--fill-selected); color: var(--ink); }
+.dn-glass-group .dn-glass-button .dn-icon { width: var(--icon-size-md); height: var(--icon-size-md); }
+```
+
+```html
+<div class="dn-glass-demo">
+  <div class="dn-row">
+    <nav class="dn-glass dn-glass-group" aria-label="页面">
+      <button class="dn-glass-button" type="button" aria-label="笔记" aria-current="page"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></svg></button>
+      <button class="dn-glass-button" type="button" aria-label="收藏"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4l2.4 5 5.6.6-4.2 3.8 1.2 5.5L12 16l-5 2.9 1.2-5.5L4 9.6l5.6-.6z"/></svg></button>
+      <button class="dn-glass-button" type="button" aria-label="设置"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg></button>
+    </nav>
+    <button class="dn-glass dn-glass-button" type="button" aria-label="搜索"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></button>
+    <button class="dn-glass dn-glass-button is-prominent" type="button" aria-label="新建"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+  </div>
+</div>
+```
+
+## SwiftUI
+
+```swift
+// 标准标签栏与工具栏，系统自动渲染为玻璃
+TabView {
+    Tab("笔记", systemImage: "doc.text") { NotesView() }
+    Tab("收藏", systemImage: "star") { FavoritesView() }
+    Tab(role: .search) { SearchView() }      // 搜索单独成为右侧的圆形玻璃按钮
+}
+.tabBarMinimizeBehavior(.onScrollDown)
+.tint(.brandAccent)
+
+// 自定义浮动按钮：放进同一个容器，互相融合
+GlassEffectContainer(spacing: 12) {
+    HStack(spacing: 12) {
+        Button("搜索", systemImage: "magnifyingglass") { search() }
+            .buttonStyle(.glass)
+        Button("新建", systemImage: "plus") { create() }
+            .buttonStyle(.glassProminent)
+    }
+    .labelStyle(.iconOnly)
+}
+
+// 完全自定义形状时
+Image(systemName: "mic")
+    .frame(width: Deernova.glassButtonSize, height: Deernova.glassButtonSize)
+    .glassEffect(.regular.interactive(), in: .circle)
+```
+
+## 不要
+
+- 在玻璃上放段落文字或列表；玻璃叠玻璃。
+- 给工具栏加实色背景挡住滚动边缘效果。
+- 同一屏出现两个实色玻璃。

package/skill/references/components/list.md

@@ -0,0 +1,130 @@
+# 分组列表与设置页
+
+分组列表，用于设置页、详情页和各种表单：一组组白色的列表浮在 `canvas` 上。
+
+**需要提供**：分组，每个分组可以有页头和页脚说明；每一行提供标题，以及可选的图标、右侧的值、开关或箭头，点击后跳转或执行动作。
+
+## 尺寸
+
+<!-- tokens:list -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `row-icon-size` | 20 | 28 | 24 | 列表行左侧图标底的边长。 |
+| `switch-width` | 36 | 51 | 44 | 开关宽度。 |
+| `switch-height` | 20 | 31 | 24 | 开关高度；圆钮直径 = 高度 − 4。 |
+<!-- /tokens -->
+
+行高、行内边距沿用[侧边栏](sidebar.md)的 `row-height`、`row-padding-x`；分组圆角沿用[卡片](card.md)的 `card-radius`。
+
+- 页面底色 `canvas`，分组底色 `surface-raised`，分组之间 `gap-group`。
+- 每行最小高度 `row-height`，文字 `type-body`、`ink`；右侧的值用 `ink-secondary`，箭头用 `ink-tertiary`。
+- 图标放在边长 `row-icon-size` 的方块里，`accent-soft` 底、`ink` 图标、`radius-sm`。整个列表统一用灰色，不要每行一个颜色。
+- 分隔线 `stroke-line`、`line` 色，从文字起点开始。
+- 页头 `footnote` 字号、`ink-secondary`；页脚 `footnote` 字号、`ink-tertiary`，写清楚这个设置会带来什么后果。
+- 开关打开时用 `success`。不要用黑白色调的开关：深色主题下白色轨道会把白色圆钮吞掉。
+
+## Web
+
+开关用原生的 `<input type="checkbox" role="switch">`，保留键盘和读屏支持。
+
+```css
+.dn-list-section { display: grid; gap: 6px; }
+.dn-list-header, .dn-list-footer { margin: 0; padding: 0 var(--row-padding-x); font: var(--weight-regular) var(--type-footnote-size)/var(--type-footnote-line) var(--font-sans); }
+.dn-list-header { color: var(--ink-secondary); }
+.dn-list-footer { color: var(--ink-tertiary); }
+.dn-list { margin: 0; padding: 0; overflow: hidden; list-style: none; border-radius: var(--card-radius); background: var(--surface-raised); }
+.dn-list-row {
+  --separator-inset: var(--row-padding-x);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: var(--row-height);
+  padding: 0 var(--row-padding-x);
+  color: var(--ink);
+  font: var(--type-body);
+}
+.dn-list-row.has-icon { --separator-inset: calc(var(--row-padding-x) + var(--row-icon-size) + var(--space-3)); }
+.dn-list-row + .dn-list-row::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: var(--separator-inset);
+  border-top: var(--stroke-line) var(--line-style-divider) var(--line);
+}
+.dn-list-icon { display: grid; place-items: center; flex: none; width: var(--row-icon-size); height: var(--row-icon-size); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); }
+.dn-list-icon .dn-icon { width: calc(var(--row-icon-size) * 0.6); height: calc(var(--row-icon-size) * 0.6); }
+.dn-list-value { margin-left: auto; color: var(--ink-secondary); white-space: nowrap; }
+.dn-list-row .dn-chevron { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--ink-tertiary); }
+
+.dn-switch {
+  position: relative;
+  flex: none;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  margin: 0 0 0 auto;
+  border-radius: var(--radius-full);
+  background: var(--fill-selected);
+  appearance: none;
+  cursor: pointer;
+  transition: background-color var(--duration-base) var(--ease-standard);
+}
+.dn-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(var(--switch-height) - 4px);
+  height: calc(var(--switch-height) - 4px);
+  border-radius: var(--radius-full);
+  background: var(--knob);
+  box-shadow: var(--shadow-control);
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.dn-switch:checked { background: var(--success); }
+.dn-switch:checked::after { transform: translateX(calc(var(--switch-width) - var(--switch-height))); }
+.dn-switch:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+```
+
+```html
+<section class="dn-list-section">
+  <h3 class="dn-list-header">同步</h3>
+  <ul class="dn-list">
+    <li class="dn-list-row has-icon"><span class="dn-list-icon"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg></span>个人资料<span class="dn-list-value">林一</span><svg class="dn-icon dn-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></li>
+    <li class="dn-list-row has-icon"><span class="dn-list-icon"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 0 0 .5-8 6 6 0 0 0-11.5 1.5A3.5 3.5 0 0 0 7 18z"/></svg></span><label for="sync">iCloud 同步</label><input class="dn-switch" id="sync" type="checkbox" role="switch" checked></li>
+  </ul>
+  <p class="dn-list-footer">关闭 iCloud 同步后，新笔记只保存在这台设备上。</p>
+</section>
+```
+
+## SwiftUI
+
+```swift
+Form {
+    Section("账号") {
+        NavigationLink { ProfileView() } label: {
+            LabeledContent { Text("林一") } label: { Label("个人资料", systemImage: "person") }
+        }
+    }
+    Section {
+        Toggle(isOn: $iCloudSync) { Label("iCloud 同步", systemImage: "icloud") }
+            .tint(.success)
+    } header: {
+        Text("同步")
+    } footer: {
+        Text("关闭 iCloud 同步后，新笔记只保存在这台设备上。")
+    }
+}
+.scrollContentBackground(.hidden)
+.background(.canvas)
+.tint(.brandAccent)
+```
+
+Mac 上的设置窗口同样用 `Form` 加 `.formStyle(.grouped)`，系统会给出对应的 Mac 样式。
+
+## 不要
+
+- 每行用不同颜色的图标。
+- 页脚写成一大段。
+- 在列表行里放主按钮（主按钮放在页面底部）。

package/skill/references/components/message.md

@@ -0,0 +1,94 @@
+# 消息
+
+对话里的一条消息。用户说的话放在比内容区亮一层的气泡里，靠右；AI 的回答直接排在内容区上，用和界面一样的无衬线正文，靠左。执行过程见 [工具调用与执行步骤](step-row.md)，任务进度见 [任务清单](task-list.md)。
+
+**需要提供**：发送者（用户或 AI）、内容（Markdown，可以包含代码块、列表、链接）、AI 消息的操作（复制、重新生成），以及生成中的状态。
+
+## 尺寸
+
+<!-- tokens:message -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `message-font-size` | 15 | 15 | 15 | 用户消息气泡的字号。AI 回答用 type-body，和界面正文一致。 |
+| `message-action-size` | 24 | 32 | 28 | AI 消息下方操作按钮的可见尺寸。 |
+<!-- /tokens -->
+
+- 用户消息：靠右，最大宽度 80%，`surface-raised` 底，`radius-lg`，内边距上下 `space-3`、左右 `space-4`，字号 `message-font-size`、行高同 `type-body`。
+- AI 消息：靠左，不加气泡，正文用 `type-body`（桌面 15/24），栏宽不超过 `content-max`。段落之间 `space-3`；加粗用 600；列表缩进一级、项与项之间 4。代码见[代码块](code-block.md)，行内代码用等宽字加 `fill-selected` 底。
+- 消息、工具调用行、卡片之间统一 `space-4`。
+- 操作按钮放在 AI 消息下方，`message-action-size` 的图标按钮，`ink-tertiary` 色；指针端只在悬停时显示，触控端一直显示。
+- 链接用 `ink` 色，加 1px 的 `line-control` 色下划线，下偏移 3px。
+- 生成中：回答末尾显示「正在运行」状态（见 [工具调用与执行步骤](step-row.md)），Composer 的发送按钮变成「停止」。
+
+## Web
+
+```css
+.dn-thread { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--content-max); }
+.dn-message-user {
+  align-self: flex-end;
+  max-width: 80%;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  color: var(--ink);
+  font: var(--weight-regular) var(--message-font-size)/var(--type-body-line) var(--font-sans);
+}
+.dn-message-assistant { color: var(--ink); font: var(--type-body); }
+.dn-message-assistant p { margin: 0 0 var(--space-3); }
+.dn-message-assistant p:last-of-type { margin-bottom: 0; }
+.dn-message-assistant ul, .dn-message-assistant ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
+.dn-message-assistant li + li { margin-top: var(--space-1); }
+.dn-message-assistant strong { font-weight: var(--weight-semibold); }
+.dn-message-assistant code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--fill-selected); font: 0.9em/1 var(--font-mono); }
+.dn-message-assistant a { color: var(--ink); text-decoration: underline 1px var(--line-control); text-underline-offset: 3px; }
+.dn-message-actions { display: flex; gap: 2px; margin: var(--space-2) 0 0 calc(var(--space-1) * -1); }
+.dn-message-actions .dn-icon-button { width: var(--message-action-size); height: var(--message-action-size); color: var(--ink-tertiary); }
+.dn-message-actions .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
+@media (hover: hover) and (pointer: fine) {
+  .dn-message-actions { opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
+  .dn-message-assistant:hover .dn-message-actions, .dn-message-actions:focus-within { opacity: 1; }
+}
+```
+
+```html
+<div class="dn-thread">
+  <div class="dn-message-user">帮我把这份周报整理成三条要点</div>
+  <div class="dn-message-assistant">
+    <p>这周的进展可以归成三件事：</p>
+    <ul>
+      <li><strong>首页改版定稿。</strong>信息层级按「最近、收藏、全部」排列，下周三前交给开发。</li>
+      <li><strong>同步问题修复。</strong>离线编辑后重复保存的问题已经解决。</li>
+      <li><strong>订阅转化提升。</strong>年付转化率从 3.1% 升到 4.4%。</li>
+    </ul>
+    <p>需要的话，我可以按 <a href="#">周报模板</a> 再排一次，或者导出成 <code>weekly.md</code>。</p>
+    <div class="dn-message-actions">
+      <button class="dn-icon-button" type="button" aria-label="复制"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg></button>
+      <button class="dn-icon-button" type="button" aria-label="重新生成"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 2.3-5.6"/><path d="M4 4v4h4"/></svg></button>
+    </div>
+  </div>
+</div>
+```
+
+## SwiftUI
+
+```swift
+// 用户消息
+Text(message.text)
+    .font(.system(size: Deernova.messageFontSize))
+    .padding(.vertical, Deernova.space3).padding(.horizontal, Deernova.space4)
+    .background(.surfaceRaised, in: .rect(cornerRadius: Deernova.radiusLg))
+    .frame(maxWidth: .infinity, alignment: .trailing)
+
+// AI 消息：用 AttributedString(markdown:) 渲染，或接入 Markdown 渲染库
+Text(try AttributedString(markdown: message.text))
+    .font(.deernovaBody)
+    .lineSpacing(6)
+    .textSelection(.enabled)
+    .frame(maxWidth: Deernova.contentMax, alignment: .leading)
+```
+
+## 不要
+
+- 给 AI 回答加气泡，或者用衬线排 AI 回答。
+- 用头像区分谁在说话（靠位置就够了）。
+- 在正文里用彩色强调文字（强调用加粗）。