@deernova/style 0.2.0 → 0.3.1

package/skill/references/components/segmented.md

@@ -0,0 +1,79 @@
+# 分段控件
+
+在同一份数据的 2–4 种视图或范围之间切换。
+
+**需要提供**：选项列表（每项 2–4 个字，或者一个图标）和绑定的选中值。
+
+## 尺寸
+
+<!-- tokens:segmented -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `segmented-height` | 24 | 28 | 28 | 选项块的高度；外层再加上下各 segmented-padding。 |
+| `segmented-padding` | 2 | 2 | 2 | 底槽内边距。 |
+| `segmented-padding-x` | 12 | 16 | 16 | 选项块左右内边距。 |
+| `segmented-font-size` | 13 | 14 | 14 | 选项字号。 |
+| `segmented-radius` | 6 | 胶囊 | 胶囊 | 底槽圆角；选项块圆角 = 它减去 segmented-padding。 |
+<!-- /tokens -->
+
+- 底槽 `fill-selected`；选中块 `surface-raised` 加 `shadow-control`；未选中文字 `ink-secondary`，选中文字 `ink`。
+- 选中块的圆角 = `segmented-radius` − `segmented-padding`，两层同心。指针端是小圆角矩形，触控端是胶囊。
+- 选项等宽或按文字宽度排列都可以，同一个控件里保持一致。
+
+## Web
+
+用一组 `button` 加 `aria-pressed`；如果它切换的是一组面板，改用 `role="tablist"` 和 `role="tab"`。
+
+```css
+.dn-segmented {
+  display: inline-flex;
+  gap: 2px;
+  padding: var(--segmented-padding);
+  border-radius: var(--segmented-radius);
+  background: var(--fill-selected);
+}
+.dn-segmented button {
+  position: relative;
+  height: var(--segmented-height);
+  padding: 0 var(--segmented-padding-x);
+  border: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  background: transparent;
+  color: var(--ink-secondary);
+  font: var(--weight-medium) var(--segmented-font-size)/1 var(--font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard);
+}
+.dn-segmented button:hover { color: var(--ink); }
+.dn-segmented button[aria-pressed="true"], .dn-segmented button[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-control); }
+.dn-segmented button:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+```
+
+```html
+<div class="dn-segmented" role="group" aria-label="视图">
+  <button type="button" aria-pressed="true">列表</button>
+  <button type="button" aria-pressed="false">卡片</button>
+  <button type="button" aria-pressed="false">日历</button>
+</div>
+```
+
+## SwiftUI
+
+直接用系统控件就能得到上面的效果，不需要自己画。
+
+```swift
+Picker("视图", selection: $mode) {
+    Text("列表").tag(Mode.list)
+    Text("卡片").tag(Mode.cards)
+    Text("日历").tag(Mode.calendar)
+}
+.pickerStyle(.segmented)
+.labelsHidden()
+```
+
+## 不要
+
+- 选项超过 4 个（改用菜单或下拉选择）。
+- 拿它当执行动作的按钮组。
+- 选项文字长短差别太大。

package/skill/references/components/sheet.md

@@ -0,0 +1,84 @@
+# 弹窗与底部弹窗
+
+用于一个短小、独立的任务：确认购买、编辑一个字段、选择分享方式。触控端从底部弹出，指针端在窗口中央或附着在窗口上。
+
+**需要提供**：标题、一两句说明、内容（短表单或选项）、主操作和取消操作；底部弹窗还要提供支持的高度档位。
+
+## 尺寸
+
+<!-- tokens:sheet -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `sheet-radius` | 12 | 24 | 16 | 弹窗和底部弹窗的圆角。 |
+| `menu-radius` | 8 | 12 | 12 | 弹出菜单、popover 的圆角。 |
+<!-- /tokens -->
+
+- 弹窗：`surface-raised` 底、`line` 细线描边、`sheet-radius`、`shadow-float`，背后用 `scrim` 压暗。弹出菜单和 popover 用 `menu-radius`。
+- 标题用 `type-title`（衬线），说明用 `callout`、`ink-secondary`，下方留 `space-4`。
+- 触控端：顶部拖拽条 36×5、`line-control` 色；主操作是[大号通栏按钮](button.md)，下面是同尺寸的文字按钮「暂不需要」，两者间距 `space-1`。
+- 指针端：按钮靠右排成一行，主按钮在最右边，取消在它左边。Esc 关闭。
+- 内容超过一屏，或需要长时间阅读时，改成全高弹窗或推入新页面，背景用 `canvas`。
+- iOS 26 上系统会把中等高度的弹窗渲染成悬浮的玻璃面板；拉到全高后变成不透明。Mac 上对应的是附着在窗口上的 sheet 和系统 Alert。直接使用系统样式。
+
+## Web
+
+用 `<dialog>` 和 `showModal()`：自带焦点管理、Esc 关闭和背景遮罩。
+
+```css
+.dn-sheet {
+  box-sizing: border-box;
+  width: min(100% - 2 * var(--page-margin), 420px);
+  padding: var(--space-5);
+  border: var(--stroke-line) solid var(--line);
+  border-radius: var(--sheet-radius);
+  background: var(--surface-raised);
+  color: var(--ink);
+  box-shadow: var(--shadow-float);
+}
+.dn-sheet::backdrop { background: var(--scrim); }
+.dn-sheet-grabber { width: 36px; height: 5px; margin: calc(var(--space-3) * -1) auto var(--space-3); border-radius: var(--radius-full); background: var(--line-control); }
+.dn-sheet-title { margin: 0 0 var(--space-1); font: var(--type-title); }
+.dn-sheet-body { margin: 0 0 var(--space-4); color: var(--ink-secondary); font: var(--type-callout); }
+.dn-sheet-actions { display: flex; justify-content: flex-end; gap: var(--gap-stack); }
+@media (pointer: coarse) {
+  .dn-sheet[open] { margin: auto auto var(--space-2); }
+  .dn-sheet-actions { flex-direction: column; gap: var(--space-1); }
+  .dn-sheet-actions .dn-button { width: 100%; height: var(--button-height-lg); }
+}
+@media (pointer: fine) { .dn-sheet-grabber { display: none; } }
+```
+
+```html
+<div class="dn-sheet" role="dialog" aria-labelledby="sheet-title">
+  <div class="dn-sheet-grabber" aria-hidden="true"></div>
+  <h3 class="dn-sheet-title" id="sheet-title">开启 iCloud 同步</h3>
+  <p class="dn-sheet-body">笔记会自动同步到你登录同一 Apple 账户的所有设备。</p>
+  <div class="dn-sheet-actions">
+    <button class="dn-button is-plain" type="button">暂不需要</button>
+    <button class="dn-button is-primary" type="button">开启</button>
+  </div>
+</div>
+```
+
+真实页面里外层用 `<dialog class="dn-sheet">`，打开时调用 `dialog.showModal()`。
+
+## SwiftUI
+
+```swift
+.sheet(isPresented: $showPaywall) {
+    PaywallView()
+        .presentationDetents([.medium, .large])
+        .presentationDragIndicator(.visible)
+}
+
+// 确认删除这类二选一的决定，用系统对话框
+.confirmationDialog("删除这条笔记？", isPresented: $confirmDelete) {
+    Button("删除", role: .destructive) { delete() }
+}
+```
+
+## 不要
+
+- 在弹窗里再弹一个弹窗。
+- 把长篇文章放进玻璃弹窗。
+- 没有取消方式；把价格之类的关键信息藏在小字里。

package/skill/references/components/sidebar.md

@@ -0,0 +1,139 @@
+# 侧边栏
+
+应用的主导航。由上到下：带图标的全局入口（新建、搜索、定时任务……）、按项目分组的会话（组标题可以折叠，会话名不带图标）、底部的账号和设置。macOS、iPadOS 和桌面 Web 应用都用它；iPhone 和窄屏 Web 收起成导航栈或抽屉。
+
+**需要提供**：全局入口（图标、名称、可选的快捷键）；分组（名称、是否展开）和每组的条目；当前选中项；账号信息和设置入口。
+
+## 尺寸
+
+<!-- tokens:sidebar -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `row-height` | 32 | 44 | 40 | 侧边栏项、列表行的最小高度。 |
+| `row-padding-x` | 10 | 16 | 12 | 行的左右内边距；分隔线从这里开始。 |
+| `row-radius` | 8 | 10 | 8 | 悬停和选中底色的圆角。 |
+| `row-gap` | 2 | 0 | 2 | 侧边栏项之间的间隔。触控端的列表用分隔线，不留间隔。 |
+<!-- /tokens -->
+
+- **macOS / iPadOS**：用系统的 `NavigationSplitView` 侧边栏，它是悬浮的玻璃面板；行高、字号交给系统，不要加实色背景。
+- **Web**：宽 `sidebar-width`，`surface` 底（比内容区亮一层），右边一条 1px `line`；用户可以拖动调整宽度。
+- 每项高 `row-height`，项与项之间 `row-gap`，左右内边距 `row-padding-x`，选中块离侧边栏边缘 `space-2`，圆角 `row-radius`。
+- 全局入口：图标 `icon-size-md`、`ink-secondary`，文字 `type-body`、`ink`。
+- 分组标题：`footnote` 字号、**常规字重**、`ink-tertiary`，后面一个小箭头，点击折叠。组与组之间 `space-4`。
+- 会话名：`callout` 字号、`ink`，不带图标，末尾截断，悬停时显示完整名称。
+- 悬停 `fill-hover`；选中 `fill-selected`，字重不变。选中块不用黑色填满，保持安静。
+- 底部：头像、账号名（`callout`）、设置齿轮，上方一条 1px `line`。
+- 计数和快捷键放在右侧，`caption` 字号、`ink-tertiary`，用等宽数字。
+
+## Web
+
+```css
+.dn-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: var(--sidebar-width);
+  max-width: 100%;
+  padding: var(--space-2);
+  border-right: var(--stroke-line) solid var(--line);
+  background: var(--surface);
+}
+.dn-sidebar-section, .dn-sidebar-group { display: flex; flex-direction: column; gap: var(--row-gap); }
+.dn-sidebar-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: var(--row-height);
+  padding: 0 var(--row-padding-x);
+  border-radius: var(--row-radius);
+  color: var(--ink-tertiary);
+  font: var(--type-footnote);
+  list-style: none;
+  cursor: pointer;
+}
+.dn-sidebar-heading::-webkit-details-marker { display: none; }
+.dn-sidebar-heading .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); transition: transform var(--duration-base) var(--ease-standard); }
+.dn-sidebar-group:not([open]) > .dn-sidebar-heading .dn-icon { transform: rotate(-90deg); }
+.dn-sidebar-heading:hover { color: var(--ink-secondary); }
+.dn-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  min-height: var(--row-height);
+  padding: 0 var(--row-padding-x);
+  border-radius: var(--row-radius);
+  color: var(--ink);
+  font: var(--type-body);
+  text-decoration: none;
+  transition: background-color var(--duration-instant) var(--ease-standard);
+}
+.dn-sidebar-group .dn-sidebar-item { font: var(--type-callout); }
+.dn-sidebar-item .dn-icon { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--ink-secondary); }
+.dn-sidebar-item:hover { background: var(--fill-hover); }
+.dn-sidebar-item[aria-current="page"] { background: var(--fill-selected); }
+.dn-sidebar-item:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: calc(var(--focus-offset) * -1); }
+.dn-sidebar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dn-sidebar-count { color: var(--ink-tertiary); font: var(--weight-regular) var(--type-caption-size)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
+.dn-sidebar-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: auto;
+  padding: var(--space-2) var(--row-padding-x) 0;
+  border-top: var(--stroke-line) solid var(--line);
+  font: var(--type-callout);
+}
+.dn-avatar { display: grid; place-items: center; flex: none; width: var(--button-height-sm); height: var(--button-height-sm); border-radius: var(--radius-full); background: var(--fill-selected); color: var(--ink); font: var(--weight-medium) var(--type-caption-size)/1 var(--font-sans); }
+```
+
+```html
+<nav class="dn-sidebar" aria-label="侧边栏">
+  <div class="dn-sidebar-section">
+    <a class="dn-sidebar-item" href="#"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span class="dn-sidebar-label">新建</span><span class="dn-sidebar-count">⌘N</span></a>
+    <a class="dn-sidebar-item" href="#"><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><span class="dn-sidebar-label">搜索</span></a>
+    <a class="dn-sidebar-item" href="#"><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 class="dn-sidebar-label">定时任务</span></a>
+  </div>
+  <details class="dn-sidebar-group" open>
+    <summary class="dn-sidebar-heading">deernova-style<svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
+    <a class="dn-sidebar-item" href="#" aria-current="page"><span class="dn-sidebar-label">Deernova UI 风格指南优化</span></a>
+    <a class="dn-sidebar-item" href="#"><span class="dn-sidebar-label">首页麋鹿的散步动画</span></a>
+  </details>
+  <details class="dn-sidebar-group" open>
+    <summary class="dn-sidebar-heading">dumbo<svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
+    <a class="dn-sidebar-item" href="#"><span class="dn-sidebar-label">沙箱个人助理实现审查</span></a>
+  </details>
+  <div class="dn-sidebar-footer"><span class="dn-avatar" aria-hidden="true">林</span><span class="dn-sidebar-label">林一 · Pro</span><button class="dn-icon-button" type="button" aria-label="设置"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg></button></div>
+</nav>
+```
+
+## SwiftUI
+
+系统侧边栏自带玻璃和系统行高，直接用；分组用可折叠的 `Section`。
+
+```swift
+NavigationSplitView {
+    List(selection: $selection) {
+        Label("新建", systemImage: "plus").tag(Item.new)
+        Label("搜索", systemImage: "magnifyingglass").tag(Item.search)
+        ForEach(projects) { project in
+            Section(project.name, isExpanded: $expanded[project.id]) {
+                ForEach(project.chats) { chat in
+                    Text(chat.title).lineLimit(1).tag(Item.chat(chat.id))
+                }
+            }
+        }
+    }
+    .navigationSplitViewColumnWidth(min: 220, ideal: Deernova.sidebarWidth, max: 360)
+    .safeAreaInset(edge: .bottom) { AccountRow() }    // 头像、账号名、设置
+} detail: {
+    DetailView(selection: selection)
+}
+.tint(.brandAccent)
+```
+
+## 不要
+
+- 在 SwiftUI 端给侧边栏加实色背景盖掉系统玻璃；在 Web 上给侧边栏加模糊效果。
+- 分组标题用粗体或大写字母；会话名前加图标。
+- 一级导航超过两层；用彩色图标区分每一项（图标一律灰色）。

package/skill/references/components/step-row.md

@@ -0,0 +1,135 @@
+# 工具调用与执行步骤
+
+AI 在对话里做了什么。分两层：平时只显示一行灰色的**摘要**（「已运行 2 个命令，已读取 3 个文件」），点开才是逐条的**执行步骤**（做了什么、结果如何、用了多久）；正在做的事显示为**运行中**状态。也用于导入导出、批量处理这类任务。
+
+**需要提供**：摘要文字（动词 + 数量）；每一步的状态（进行中 / 成功 / 失败）、动作名（2–4 个字的动词）、对象摘要（文件名、参数、结果）、耗时；可选的详细内容和缩略图；运行中的动作名和已用时间。
+
+## 尺寸
+
+没有自己的 token：行高用 `button-height-md`，图标用 `icon-size-md`。
+
+- **摘要行**：`type-body` 字号、`ink-secondary`，末尾一个小箭头，点开后箭头转向下；悬停时文字变 `ink`。没有底色、没有边框，和正文段落之间 `space-4`。
+- **执行步骤**：在摘要下方缩进，左边一条 1px `line`。每步高 `button-height-md`，`radius-sm`，悬停 `fill-hover`。状态图标：进行中是 `ink` 色的转圈，成功 `success`，失败 `danger`（失败时摘要写清楚原因）。动作名 `callout` 半粗 `ink`；对象摘要 `caption` 等宽、单行截断；耗时 `caption`、`ink-tertiary`、等宽数字。
+- **步骤详情**：再点开一步，缩进到和文字对齐，`surface-sunken` 底，`radius-sm`，等宽。
+- **运行中**：三个依次闪烁的圆点（`ink-secondary`）+ 动作名 + 已用时间（`ink-tertiary`），`type-body` 字号。减弱动态效果时圆点不闪。
+
+## Web
+
+用 `<details>` 和 `<summary>` 实现展开，键盘和读屏都能用。
+
+```css
+.dn-activity { min-width: 0; }
+.dn-activity > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: var(--button-height-md);
+  color: var(--ink-secondary);
+  font: var(--type-body);
+  list-style: none;
+  cursor: pointer;
+}
+.dn-activity > summary::-webkit-details-marker { display: none; }
+.dn-activity > summary:hover { color: var(--ink); }
+.dn-activity > summary .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); transition: transform var(--duration-base) var(--ease-standard); }
+.dn-activity[open] > summary .dn-icon { transform: rotate(90deg); }
+.dn-activity > .dn-steps { margin: var(--space-1) 0 0 6px; padding-left: var(--space-3); border-left: var(--stroke-line) solid var(--line); }
+
+.dn-steps { display: flex; flex-direction: column; min-width: 0; }
+.dn-step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  height: var(--button-height-md);
+  padding: 0 6px;
+  border-radius: var(--radius-sm);
+  color: var(--ink-secondary);
+  font: var(--weight-regular) var(--type-callout-size)/1 var(--font-sans);
+  list-style: none;
+}
+.dn-step::-webkit-details-marker { display: none; }
+details > .dn-step { cursor: pointer; }
+.dn-step:hover { background: var(--fill-hover); }
+.dn-step .dn-icon { width: var(--icon-size-md); height: var(--icon-size-md); }
+.dn-step-name { color: var(--ink); font-weight: var(--weight-semibold); white-space: nowrap; }
+.dn-step-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--weight-regular) var(--type-caption-size)/1 var(--font-mono); }
+.dn-step-meta { margin-left: auto; padding-left: var(--space-2); color: var(--ink-tertiary); font: var(--weight-regular) var(--type-caption-size)/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.dn-step.is-success .dn-step-glyph { color: var(--success); }
+.dn-step.is-failed .dn-step-glyph { color: var(--danger); }
+.dn-step-detail {
+  margin: 2px 0 6px calc(6px + var(--icon-size-md) + var(--space-2));
+  padding: 6px var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+  color: var(--ink-secondary);
+  font: var(--weight-regular) var(--type-caption-size)/1.45 var(--font-mono);
+  white-space: pre-wrap;
+}
+.dn-spinner { flex: none; width: var(--icon-size-sm); height: var(--icon-size-sm); border: 2px solid var(--line); border-top-color: var(--ink); border-radius: var(--radius-full); animation: dn-spin 0.9s linear infinite; }
+@keyframes dn-spin { to { transform: rotate(360deg); } }
+
+.dn-running { display: flex; align-items: center; gap: var(--space-2); min-height: var(--button-height-md); color: var(--ink-secondary); font: var(--type-body); }
+.dn-running-dots { display: inline-flex; gap: 3px; }
+.dn-running-dots span { width: 4px; height: 4px; border-radius: var(--radius-full); background: currentColor; animation: dn-blink 1.2s var(--ease-standard) infinite; }
+.dn-running-dots span:nth-child(2) { animation-delay: 0.2s; }
+.dn-running-dots span:nth-child(3) { animation-delay: 0.4s; }
+.dn-running-time { color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
+@keyframes dn-blink { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .dn-spinner { animation-duration: 2.4s; }
+  .dn-running-dots span { animation: none; opacity: 0.6; }
+}
+```
+
+```html
+<div class="dn-stack">
+  <details class="dn-activity" open>
+    <summary>已运行 2 个命令，已读取 1 个文件<svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></summary>
+    <div class="dn-steps">
+      <div class="dn-step is-success"><svg class="dn-icon dn-step-glyph" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg><span class="dn-step-name">读取</span><span class="dn-step-summary">周报草稿.md</span><span class="dn-step-meta">0.4 秒</span></div>
+      <details open>
+        <summary class="dn-step is-success"><svg class="dn-icon dn-step-glyph" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg><span class="dn-step-name">运行</span><span class="dn-step-summary">npm test</span><span class="dn-step-meta">12.3 秒</span></summary>
+        <div class="dn-step-detail">tests 63 · pass 63 · fail 0</div>
+      </details>
+      <div class="dn-step is-failed"><svg class="dn-icon dn-step-glyph" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg><span class="dn-step-name">运行</span><span class="dn-step-summary">npm run lint：找不到 eslint 配置</span><span class="dn-step-meta">已跳过</span></div>
+    </div>
+  </details>
+  <div class="dn-running" role="status"><span class="dn-running-dots" aria-hidden="true"><span></span><span></span><span></span></span>正在运行 命令<span class="dn-running-time">42 秒</span></div>
+</div>
+```
+
+## SwiftUI
+
+```swift
+// 摘要行：点开后是逐条的执行步骤
+DisclosureGroup(isExpanded: $expanded) {
+    ForEach(steps) { step in StepRow(step: step) }
+        .padding(.leading, Deernova.space3)
+} label: {
+    Text("已运行 \(commands) 个命令，已读取 \(files) 个文件")
+        .font(.deernovaBody).foregroundStyle(.inkSecondary)
+}
+
+struct StepRow: View {
+    var step: Step
+    var body: some View {
+        HStack(spacing: Deernova.space2) {
+            StatusGlyph(step.status)          // ProgressView / checkmark.circle / xmark.circle
+            Text(step.action).fontWeight(.semibold).foregroundStyle(.ink)
+            Text(step.summary).font(.caption.monospaced()).lineLimit(1)
+            Spacer()
+            Text(step.duration).font(.caption).monospacedDigit().foregroundStyle(.inkTertiary)
+        }
+        .font(.deernovaCallout)
+        .foregroundStyle(.inkSecondary)
+        .frame(minHeight: Deernova.buttonHeightMd)
+    }
+}
+```
+
+## 不要
+
+- 把每一步都做成卡片，或者默认把所有步骤展开铺在对话里。
+- 成功的步骤也用醒目的颜色。
+- 把原始日志直接铺在对话里（放进折叠详情）。

package/skill/references/components/tag.md

@@ -0,0 +1,86 @@
+# 标签
+
+一到四个字的标签，标出状态或分类，放在标题旁边或元信息里。
+
+**需要提供**：文字、语气（中性 / 强调 / success / warning / danger / info）；表示状态时加一个圆点。
+
+## 尺寸
+
+<!-- tokens:tag -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `tag-height` | 20 | 22 | 24 | 标签高度。 |
+| `tag-padding-x` | 6 | 8 | 10 | 标签左右内边距。 |
+| `tag-font-size` | 12 | 12 | 12 | 标签字号。 |
+| `tag-radius` | 4 | 胶囊 | 胶囊 | 标签圆角。 |
+<!-- /tokens -->
+
+- 中性标签：`fill-selected` 底、`ink-secondary` 字。
+- 强调标签：`accent` 底、`on-accent` 字，只用于「新」「Pro」这类需要跳出来的少数标记。
+- 有语气的标签：对应的 `-soft` 作底色，语气色作文字和圆点，例如 `success-soft` 底配 `success` 字。
+- 表示状态时一定加 5px 圆点，文字本身就要说清楚状态是什么，不能只靠颜色。
+
+## Web
+
+```css
+.dn-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: var(--tag-height);
+  padding: 0 var(--tag-padding-x);
+  border-radius: var(--tag-radius);
+  background: var(--fill-selected);
+  color: var(--ink-secondary);
+  font: var(--weight-medium) var(--tag-font-size)/1 var(--font-sans);
+  white-space: nowrap;
+}
+.dn-tag.is-accent { background: var(--accent); color: var(--on-accent); }
+.dn-tag.is-success { background: var(--success-soft); color: var(--success); }
+.dn-tag.is-warning { background: var(--warning-soft); color: var(--warning); }
+.dn-tag.is-danger { background: var(--danger-soft); color: var(--danger); }
+.dn-tag.is-info { background: var(--info-soft); color: var(--info); }
+.dn-dot { flex: none; width: 5px; height: 5px; border-radius: var(--radius-full); background: currentColor; }
+```
+
+```html
+<div class="dn-row">
+  <span class="dn-tag">草稿</span>
+  <span class="dn-tag is-accent">新</span>
+  <span class="dn-tag is-success"><span class="dn-dot"></span>已同步</span>
+  <span class="dn-tag is-warning"><span class="dn-dot"></span>即将到期</span>
+  <span class="dn-tag is-danger"><span class="dn-dot"></span>同步失败</span>
+  <span class="dn-tag is-info">测试版</span>
+</div>
+```
+
+## SwiftUI
+
+```swift
+struct Tag: View {
+    var text: LocalizedStringKey
+    var tone: Color = .inkSecondary
+    var background: Color = .fillSelected
+    var showsDot = false
+
+    var body: some View {
+        HStack(spacing: Deernova.space1) {
+            if showsDot { Circle().frame(width: 5, height: 5) }
+            Text(text)
+        }
+        .font(.system(size: Deernova.tagFontSize, weight: .medium))
+        .foregroundStyle(tone)
+        .padding(.horizontal, Deernova.tagPaddingX)
+        .frame(height: Deernova.tagHeight)
+        .background(background, in: .rect(cornerRadius: min(Deernova.tagRadius, Deernova.tagHeight / 2)))
+    }
+}
+
+Tag(text: "已同步", tone: .success, background: .successSoft, showsDot: true)
+```
+
+## 不要
+
+- 用标签当按钮。
+- 一行里放超过三个标签。
+- 大量使用强调标签（它和主按钮长得像，多了就分不清）。

package/skill/references/components/task-list.md

@@ -0,0 +1,83 @@
+# 任务清单
+
+AI 或批量任务的计划和进度：一张描边卡片，每行一个任务，左边一个状态圈。放在对话里，随着进度原地更新，不重复发新的清单。
+
+**需要提供**：任务列表（每项一句话，动词开头），每项的状态（待办 / 进行中 / 完成 / 失败）。
+
+## 尺寸
+
+<!-- tokens:task-list -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `task-row-height` | 28 | 44 | 32 | 任务清单每一行的高度。 |
+| `task-glyph-size` | 16 | 20 | 18 | 左侧状态圈的直径。 |
+<!-- /tokens -->
+
+- 卡片：无底色（直接在内容区上），1px `line` 描边，`card-radius`，内边距上下 `space-3`、左右 `card-padding-x`。
+- 每行高 `task-row-height`，文字 `type-body`、`ink`，状态圈和文字之间 `space-2`。
+- 状态圈直径 `task-glyph-size`：
+  - 待办：`ink-tertiary` 虚线圆圈。
+  - 进行中：转圈，`ink` 色。同一时间只有一项在进行。
+  - 完成：`ink-secondary` 的对勾圆圈，文字变 `ink-secondary`，不加删除线。
+  - 失败：`danger` 的叉号圆圈，后面跟一句原因。
+- 任务超过 8 项时，默认只显示进行中前后的几项，其余折叠成「还有 5 项」。
+
+## Web
+
+用 `role="list"`，进行中的一项加 `aria-current="step"`，读屏能知道进度。
+
+```css
+.dn-task-list {
+  display: grid;
+  margin: 0;
+  padding: var(--space-3) var(--card-padding-x);
+  border: var(--stroke-line) solid var(--line);
+  border-radius: var(--card-radius);
+  list-style: none;
+}
+.dn-task { display: flex; align-items: center; gap: var(--space-2); min-height: var(--task-row-height); color: var(--ink); font: var(--type-body); }
+.dn-task-glyph { flex: none; box-sizing: border-box; width: var(--task-glyph-size); height: var(--task-glyph-size); border: 1.5px var(--line-style-dropzone) var(--ink-tertiary); border-radius: var(--radius-full); }
+.dn-task[aria-current="step"] .dn-task-glyph { border: 2px solid var(--line); border-top-color: var(--ink); animation: dn-task-spin 0.9s linear infinite; }
+.dn-task.is-done { color: var(--ink-secondary); }
+.dn-task.is-done .dn-task-glyph, .dn-task.is-failed .dn-task-glyph { border: 0; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: var(--line-cap); stroke-linejoin: var(--line-join); }
+.dn-task.is-failed .dn-task-glyph { color: var(--danger); }
+.dn-task-note { color: var(--ink-tertiary); font: var(--type-callout); }
+@keyframes dn-task-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .dn-task[aria-current="step"] .dn-task-glyph { animation-duration: 2.4s; } }
+```
+
+```html
+<ul class="dn-task-list" aria-label="任务">
+  <li class="dn-task is-done"><svg class="dn-task-glyph" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg>读取现有规范和设计变量</li>
+  <li class="dn-task" aria-current="step"><span class="dn-task-glyph" aria-hidden="true"></span>按场景改写设计变量</li>
+  <li class="dn-task"><span class="dn-task-glyph" aria-hidden="true"></span>更新组件说明和参考写法</li>
+  <li class="dn-task is-failed"><svg class="dn-task-glyph" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg>编译 Tailwind 主题<span class="dn-task-note">无法访问 npm</span></li>
+</ul>
+```
+
+## SwiftUI
+
+```swift
+VStack(alignment: .leading, spacing: 0) {
+    ForEach(tasks) { task in
+        HStack(spacing: Deernova.space2) {
+            TaskGlyph(task.status)            // 虚线圈 / ProgressView / checkmark.circle / xmark.circle
+                .frame(width: Deernova.taskGlyphSize, height: Deernova.taskGlyphSize)
+            Text(task.title)
+                .foregroundStyle(task.status == .done ? .inkSecondary : .ink)
+        }
+        .font(.deernovaBody)
+        .frame(minHeight: Deernova.taskRowHeight, alignment: .leading)
+    }
+}
+.padding(.vertical, Deernova.space3)
+.padding(.horizontal, Deernova.cardPaddingX)
+.frame(maxWidth: .infinity, alignment: .leading)
+.overlay(RoundedRectangle(cornerRadius: Deernova.cardRadius).strokeBorder(.line, lineWidth: Deernova.strokeLine))
+```
+
+## 不要
+
+- 每次进度变化都发一张新清单（原地更新）。
+- 用彩色区分待办和完成；给完成的任务加删除线。
+- 同时显示多个“进行中”。