@deernova/style 0.0.0-stage → 0.1.0

package/template/project/components/StepRow/README.md

@@ -0,0 +1,35 @@
+# StepRow
+
+一行显示一个执行步骤：做了什么、结果如何、用了多久。点开可以看到细节。用于 AI 的工具调用、导入导出、批量处理这类任务。
+
+**需要提供**：状态（进行中 / 成功 / 失败）、动作名（2–4 个字的动词）、对象摘要（文件名、参数、结果）、耗时或说明；可选的详细内容，点击后展开。
+
+**规格**
+
+- 高 `control-mac`，`radius-sm`，悬停时底色 `fill-hover`。整行默认 `ink-secondary`，让位于正文内容。
+- 状态图标 14pt：进行中是 `ink` 色的转圈，成功是 `success` 色，失败是 `danger` 色。失败时摘要要写清楚原因。
+- 动作名 12pt 半粗 `ink`；摘要用 11pt 等宽，单行，在末尾截断；右侧耗时 11pt `ink-tertiary`。
+- 展开后的详情缩进到和文字对齐，`surface-sunken` 底，`radius-sm`，12pt 等宽。
+- 连续 3 步以上全部成功时，合并成一行「完成 5 个步骤」，点击后展开。
+
+```swift
+DisclosureGroup(isExpanded: $expanded) {
+    Text(step.detail)
+        .font(.system(.callout, design: .monospaced))
+        .foregroundStyle(.inkSecondary)
+        .padding(.vertical, 6).padding(.horizontal, 8)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(.surfaceSunken, in: .rect(cornerRadius: 6))
+} label: {
+    HStack(spacing: 7) {
+        StatusGlyph(step.status)          // ProgressView / checkmark.circle / xmark.circle
+        Text(step.action).fontWeight(.semibold).foregroundStyle(.ink)
+        Text(step.summary).font(.callout.monospaced()).lineLimit(1)
+        Spacer()
+        Text(step.duration).font(.caption).monospacedDigit().foregroundStyle(.inkTertiary)
+    }
+    .foregroundStyle(.inkSecondary)
+}
+```
+
+**不要**：把每一步都做成卡片；成功的步骤也用醒目的颜色；把原始日志直接铺在对话里（放进折叠详情）。

package/template/project/components/StepRow/preview.html

@@ -0,0 +1,17 @@
+<!-- @dsCard group="Content" height=190 subtitle="AI 或后台任务的执行步骤" -->
+<!doctype html>
+<html lang="zh-CN">
+<head><link rel="stylesheet" href="../../tokens.css"><link rel="stylesheet" href="../bundle.css"><script>(function(){function a(){var t=location.hash.slice(1),r=document.documentElement;if(t==="light"||t==="dark")r.setAttribute("data-theme",t);else r.removeAttribute("data-theme");}a();addEventListener("hashchange",a);})();</script><meta charset="utf-8"><title>StepRow</title></head>
+<body>
+<div class="dn-stage" style="justify-content:center">
+  <div class="dn-steps">
+    <div class="dn-step dn-step-ok"><svg class="dn-icon dn-glyph" viewBox="0 0 24 24"><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-text">周报草稿.md、10 月数据.csv</span><span class="dn-step-meta">0.4 秒</span><svg class="dn-icon dn-chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></div>
+    <div class="dn-step dn-step-ok"><svg class="dn-icon dn-glyph" viewBox="0 0 24 24"><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-text">订阅转化率 3.1% → 4.4%</span><span class="dn-step-meta">1.2 秒</span><svg class="dn-icon dn-chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div>
+    <div class="dn-step-detail">conversions / trials = 88 / 2000 = 4.4%
+上月 = 62 / 2000 = 3.1%</div>
+    <div class="dn-step dn-step-fail"><svg class="dn-icon dn-glyph" viewBox="0 0 24 24"><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-text">销售日报.xlsx：文件已被移动或删除</span><span class="dn-step-meta">已跳过</span></div>
+    <div class="dn-step"><span class="dn-spinner" role="img" aria-label="进行中"></span><span class="dn-step-name">整理</span><span class="dn-step-text">生成三条要点</span><span class="dn-step-meta">3.0 秒</span></div>
+  </div>
+</div>
+</body>
+</html>

package/template/project/components/Tag/README.md

@@ -0,0 +1,36 @@
+# Tag
+
+一到四个字的标签，标出状态或分类，放在标题旁边或元信息里。
+
+**需要提供**：文字、语气（中性 / 强调 / success / warning / danger / info）；表示状态时加一个圆点。
+
+**规格**
+
+- Mac：高 18pt，`radius-xs`，11pt 中粗，左右内边距 6pt。iOS：高 22pt，胶囊形，12pt。
+- 中性标签：`fill-selected` 底、`ink-secondary` 字。强调标签：`accent` 黑底、`on-accent` 白字，只用于「新」「Pro」这类需要跳出来的少数标记。有语气的标签：用对应的 `-soft` 作底色，用语气色作文字和圆点，例如 `success-soft` 底配 `success` 字。
+- 表示状态时一定加 5pt 圆点（`radius-full`），文字本身就要说清楚状态是什么，不能只靠颜色。
+
+```swift
+struct Tag: View {
+    var text: LocalizedStringKey
+    var tone: Color = .inkSecondary
+    var background: Color = .fillSelected
+    var showsDot = false
+
+    var body: some View {
+        HStack(spacing: 4) {
+            if showsDot { Circle().frame(width: 5, height: 5) }
+            Text(text)
+        }
+        .font(.caption.weight(.medium))
+        .foregroundStyle(tone)
+        .padding(.horizontal, 6)
+        .frame(height: 18)
+        .background(background, in: .rect(cornerRadius: 4))
+    }
+}
+
+Tag(text: "已同步", tone: .success, background: .successSoft, showsDot: true)
+```
+
+**不要**：用标签当按钮；一行里放超过三个标签；大量使用黑底强调标签（它和主按钮长得像，多了就分不清）。

package/template/project/components/Tag/preview.html

@@ -0,0 +1,22 @@
+<!-- @dsCard group="Feedback" height=120 subtitle="状态与分类" -->
+<!doctype html>
+<html lang="zh-CN">
+<head><link rel="stylesheet" href="../../tokens.css"><link rel="stylesheet" href="../bundle.css"><script>(function(){function a(){var t=location.hash.slice(1),r=document.documentElement;if(t==="light"||t==="dark")r.setAttribute("data-theme",t);else r.removeAttribute("data-theme");}a();addEventListener("hashchange",a);})();</script><meta charset="utf-8"><title>Tag</title></head>
+<body>
+<div class="dn-stage dn-stack" style="align-items:flex-start">
+  <div class="dn-row">
+    <span class="dn-tag">草稿</span>
+    <span class="dn-tag dn-tag-accent">新功能</span>
+    <span class="dn-tag dn-tag-success"><span class="dn-dot"></span>已同步</span>
+    <span class="dn-tag dn-tag-warning"><span class="dn-dot"></span>额度剩余 10%</span>
+    <span class="dn-tag dn-tag-danger"><span class="dn-dot"></span>同步失败</span>
+    <span class="dn-tag dn-tag-info">Beta</span>
+  </div>
+  <div class="dn-row">
+    <span class="dn-tag dn-tag-ios">工作</span>
+    <span class="dn-tag dn-tag-ios dn-tag-success"><span class="dn-dot"></span>已完成</span>
+    <span class="dn-tag dn-tag-ios dn-tag-accent">全家桶</span>
+  </div>
+</div>
+</body>
+</html>

package/template/project/components/TextField/README.md

@@ -0,0 +1,29 @@
+# TextField
+
+单行文字输入，配一个标签和一句说明。
+
+**需要提供**：标签（名词）、绑定的文本、可选的占位符（给示例，不要重复标签）、说明文字，校验失败时提供错误信息。
+
+**规格**
+
+- 底色 `surface-raised`，边框 `stroke-control` 宽、`line-control` 色。Mac 用 `radius-sm`，高 `control-mac`；iOS 用 `radius-md`，高 `control-ios`。
+- 聚焦时边框变 `focus-ring`，外圈加 3pt 的 `accent-soft` 灰色光晕。
+- 出错时边框变 `danger`，说明文字换成错误信息，同样用 `danger` 色。错误信息要说清楚怎么改。
+- 标签 12pt 中粗 `ink-secondary`，放在输入框上方；说明 11pt `ink-tertiary`，放在下方。
+
+```swift
+VStack(alignment: .leading, spacing: 6) {
+    Text("邮箱").font(.caption.weight(.medium)).foregroundStyle(.inkSecondary)
+    TextField("name@example.com", text: $email)
+        .textFieldStyle(.roundedBorder)          // Mac；iOS 用自定义样式实现上面的规格
+        .textContentType(.emailAddress)
+        .keyboardType(.emailAddress)             // iOS
+    Text(error ?? "用于接收登录验证码。")
+        .font(.caption)
+        .foregroundStyle(error == nil ? .inkTertiary : .danger)
+}
+```
+
+iOS 设置页这类表单，直接在 `Form` 里用 `TextField`，交给系统的分组样式（见 ListGroup）。
+
+**不要**：只用占位符代替标签；出错时只把边框变红、不给说明；把多行输入塞进单行框（多行用 `TextField(axis: .vertical)` 或 Composer）。

package/template/project/components/TextField/preview.html

@@ -0,0 +1,28 @@
+<!-- @dsCard group="Input" height=180 subtitle="单行输入" -->
+<!doctype html>
+<html lang="zh-CN">
+<head><link rel="stylesheet" href="../../tokens.css"><link rel="stylesheet" href="../bundle.css"><script>(function(){function a(){var t=location.hash.slice(1),r=document.documentElement;if(t==="light"||t==="dark")r.setAttribute("data-theme",t);else r.removeAttribute("data-theme");}a();addEventListener("hashchange",a);})();</script><meta charset="utf-8"><title>TextField</title></head>
+<body>
+<div class="dn-stage" style="align-items:flex-start;gap:var(--space-5)">
+  <div class="dn-field">
+    <label for="f1">名称</label>
+    <input id="f1" class="dn-input" placeholder="例如：读书摘录">
+    <span class="dn-help">会显示在侧边栏里。</span>
+  </div>
+  <div class="dn-field">
+    <label for="f2">邮箱</label>
+    <input id="f2" class="dn-input is-focus" value="hello@paperlight.app">
+    <span class="dn-help">用于接收登录验证码。</span>
+  </div>
+  <div class="dn-field">
+    <label for="f3">验证码</label>
+    <input id="f3" class="dn-input is-error" value="12 34">
+    <span class="dn-help is-error">验证码是 6 位数字，请检查后重新输入。</span>
+  </div>
+  <div class="dn-field" style="width:300px">
+    <label for="f4">iOS · 44pt</label>
+    <input id="f4" class="dn-input dn-input-ios" placeholder="搜索笔记">
+  </div>
+</div>
+</body>
+</html>

package/template/project/components/bundle.css

@@ -0,0 +1,189 @@
+/* Deernova: web approximations of the SwiftUI components, used by the previews */
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body { font-family: var(--font-sans); font-size: 13px; line-height: 18px; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
+
+.dn-stage { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.dn-stack { display: flex; flex-direction: column; gap: var(--space-2); }
+.dn-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.dn-note { font-size: 11px; line-height: 13px; color: var(--ink-tertiary); }
+.dn-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+
+/* Button */
+.dn-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: var(--control-mac); padding: 0 var(--space-3); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; border-radius: var(--radius-sm); border: var(--stroke-hairline) solid var(--line); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-control); cursor: pointer; }
+.dn-btn:hover { background: var(--surface); }
+.dn-btn:focus-visible, .dn-btn.is-focus { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: 2px; }
+.dn-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.dn-btn-primary:hover { background: var(--accent); opacity: 0.88; }
+.dn-btn-plain { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-secondary); }
+.dn-btn-plain:hover { background: var(--fill-hover); color: var(--ink); }
+.dn-btn-danger { background: var(--danger-soft); border-color: transparent; box-shadow: none; color: var(--danger); }
+.dn-btn-danger:hover { background: var(--danger-soft); filter: brightness(0.97); }
+.dn-btn-sm { height: var(--control-mac-sm); padding: 0 var(--space-2); font-size: 11px; border-radius: var(--radius-xs); }
+.dn-btn-lg { height: var(--control-mac-lg); padding: 0 var(--space-4); }
+.dn-btn-ios { height: var(--button-ios); padding: 0 var(--space-4); font-size: 15px; font-weight: 600; border-radius: var(--radius-full); }
+.dn-btn-ios-sm { height: var(--button-ios-sm); padding: 0 var(--space-3); font-size: 13px; font-weight: 600; border-radius: var(--radius-full); }
+.dn-btn-ios-lg { height: var(--control-ios-lg); width: 100%; padding: 0 var(--space-5); font-size: 16px; font-weight: 600; border-radius: var(--radius-full); }
+.dn-btn[disabled] { opacity: 0.35; cursor: default; filter: none; }
+.dn-btn .dn-icon { width: 13px; height: 13px; }
+
+.dn-iconbtn { appearance: none; width: var(--control-mac); height: var(--control-mac); padding: 0; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink-secondary); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
+.dn-iconbtn:hover { background: var(--fill-hover); color: var(--ink); }
+.dn-iconbtn:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: 1px; }
+
+/* Glass: web approximation of .glassEffect() */
+.dn-backdrop { position: relative; overflow: hidden; background: var(--surface); }
+.dn-glass { background: var(--glass-fill); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: var(--stroke-hairline) solid var(--glass-stroke); box-shadow: var(--shadow-glass); border-radius: var(--radius-full); }
+.dn-glass-btn { appearance: none; width: var(--control-ios); height: var(--control-ios); padding: 0; display: inline-grid; place-items: center; color: var(--ink); cursor: pointer; font: inherit; flex: none; }
+.dn-glass-btn .dn-icon { width: 19px; height: 19px; }
+.dn-glass-prominent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.dn-glass-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; }
+.dn-glass-group .dn-glass-btn { background: transparent; border: 0; box-shadow: none; width: 36px; height: 36px; border-radius: var(--radius-full); color: var(--ink-secondary); }
+.dn-glass-group .dn-glass-btn.is-selected { background: var(--fill-selected); color: var(--ink); }
+.dn-glass-pill { height: 40px; padding: 0 var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; color: var(--ink); }
+
+/* Segmented */
+.dn-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--fill-selected); border-radius: var(--radius-sm); }
+.dn-seg button { appearance: none; border: 0; font: inherit; font-size: 12px; font-weight: 500; height: var(--control-mac-sm); padding: 0 var(--space-3); border-radius: var(--radius-xs); background: transparent; color: var(--ink-secondary); cursor: pointer; }
+.dn-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-control); }
+.dn-seg-ios { padding: 2px; border-radius: var(--radius-full); }
+.dn-seg-ios button { height: 30px; padding: 0 var(--space-4); font-size: 14px; border-radius: var(--radius-full); }
+
+/* Text field */
+.dn-field { display: flex; flex-direction: column; gap: 4px; width: 240px; max-width: 100%; }
+.dn-field label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-secondary); }
+.dn-input { height: var(--control-mac); padding: 0 var(--space-2); font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-raised); border: var(--stroke-control) solid var(--line-control); border-radius: var(--radius-sm); outline: none; width: 100%; }
+.dn-input::placeholder { color: var(--ink-tertiary); }
+.dn-input:focus, .dn-input.is-focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
+.dn-input.is-error { border-color: var(--danger); }
+.dn-input-ios { height: var(--control-ios); padding: 0 var(--space-3); font-size: 17px; border-radius: var(--radius-md); }
+.dn-help { font-size: 11px; line-height: 13px; color: var(--ink-tertiary); }
+.dn-help.is-error { color: var(--danger); }
+
+/* Composer */
+.dn-composer { width: 100%; max-width: 560px; background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
+.dn-composer textarea { border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 13px; line-height: 18px; color: var(--ink); min-height: 36px; padding: 2px 0; width: 100%; }
+.dn-composer textarea::placeholder { color: var(--ink-tertiary); }
+.dn-composer:focus-within { border-color: var(--line-control); }
+.dn-composer-bar { display: flex; align-items: center; gap: var(--space-1); margin-left: -4px; }
+.dn-spacer { flex: 1; }
+.dn-chip { display: inline-flex; align-items: center; gap: 3px; height: var(--control-mac-sm); padding: 0 var(--space-2); border-radius: var(--radius-full); font: inherit; font-size: 11px; color: var(--ink-secondary); background: transparent; border: var(--stroke-hairline) solid var(--line); cursor: pointer; white-space: nowrap; }
+.dn-chip .dn-icon { width: 11px; height: 11px; }
+.dn-send { appearance: none; width: var(--control-mac); height: var(--control-mac); padding: 0; border-radius: var(--radius-full); border: 0; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); cursor: pointer; flex: none; }
+.dn-send .dn-icon { width: 13px; height: 13px; stroke-width: 2.2; }
+.dn-send[disabled] { background: var(--fill-selected); color: var(--ink-tertiary); cursor: default; }
+.dn-attach { display: inline-flex; align-items: center; gap: 5px; height: var(--control-mac); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: 12px; color: var(--ink-secondary); align-self: flex-start; }
+
+/* Sidebar (macOS) */
+.dn-sidebar { width: var(--sidebar-mac); background: var(--surface-sunken); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg); padding: 6px; display: flex; flex-direction: column; gap: 1px; }
+.dn-side-head { font-size: 11px; line-height: 13px; font-weight: 600; color: var(--ink-tertiary); padding: var(--space-3) var(--space-2) var(--space-1); }
+.dn-side-item { display: flex; align-items: center; gap: 7px; height: var(--row-mac); padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); cursor: default; min-width: 0; }
+.dn-side-item .dn-icon { width: 14px; height: 14px; color: var(--ink-secondary); }
+.dn-side-item:hover { background: var(--fill-hover); }
+.dn-side-item.is-selected { background: var(--fill-selected); font-weight: 500; }
+.dn-side-item.is-selected .dn-icon { color: var(--ink); }
+.dn-side-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.dn-count { margin-left: auto; font-size: 11px; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
+
+/* List group (iOS inset grouped) */
+.dn-listwrap { background: var(--canvas); padding: var(--space-4); width: 375px; max-width: 100%; display: flex; flex-direction: column; }
+.dn-list-head { font-size: 13px; line-height: 17px; color: var(--ink-secondary); padding: 0 var(--space-4) 6px; }
+.dn-list { background: var(--surface-raised); border-radius: var(--radius-lg); overflow: hidden; }
+.dn-list-row { --sep-inset: var(--space-4); display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-ios); padding: 0 var(--space-4); font-size: 17px; line-height: 22px; color: var(--ink); position: relative; }
+.dn-list-row.has-icon { --sep-inset: 56px; }
+.dn-list-row + .dn-list-row::before { content: ""; position: absolute; top: 0; left: var(--sep-inset); right: 0; border-top: var(--stroke-hairline) solid var(--line); }
+.dn-list-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--ink); flex: none; }
+.dn-list-icon .dn-icon { width: 16px; height: 16px; }
+.dn-list-value { margin-left: auto; color: var(--ink-secondary); white-space: nowrap; }
+.dn-chevron { color: var(--ink-tertiary); width: 13px; height: 13px; }
+.dn-list-foot { font-size: 13px; line-height: 17px; color: var(--ink-tertiary); padding: 6px var(--space-4) 0; }
+.dn-switch { margin-left: auto; width: 51px; height: 31px; border-radius: var(--radius-full); background: var(--success); position: relative; flex: none; }
+.dn-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: var(--radius-full); background: var(--knob); box-shadow: var(--shadow-control); }
+.dn-switch.is-off { background: var(--fill-selected); }
+.dn-switch.is-off::after { right: auto; left: 2px; }
+
+/* Card */
+.dn-card { background: var(--surface); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); width: 240px; max-width: 100%; }
+.dn-card-title { font-family: var(--font-serif); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); margin: 0; }
+.dn-card-body { font-size: 12px; line-height: 17px; color: var(--ink-secondary); margin: 0; }
+.dn-card-meta { font-size: 11px; line-height: 13px; color: var(--ink-tertiary); display: flex; gap: 6px; align-items: center; margin-top: 2px; font-variant-numeric: tabular-nums; }
+.dn-card.is-interactive { cursor: pointer; }
+.dn-card.is-interactive:hover { border-color: var(--line-control); }
+.dn-card.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 0.5px var(--accent); }
+
+/* Tag */
+.dn-tag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--fill-selected); color: var(--ink-secondary); }
+.dn-tag-accent { background: var(--accent); color: var(--on-accent); }
+.dn-tag-success { background: var(--success-soft); color: var(--success); }
+.dn-tag-warning { background: var(--warning-soft); color: var(--warning); }
+.dn-tag-danger { background: var(--danger-soft); color: var(--danger); }
+.dn-tag-info { background: var(--info-soft); color: var(--info); }
+.dn-dot { width: 5px; height: 5px; border-radius: var(--radius-full); background: currentColor; flex: none; }
+.dn-tag-ios { height: 22px; padding: 0 var(--space-2); font-size: 12px; border-radius: var(--radius-full); }
+
+/* Banner and toast */
+.dn-banner { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); width: 100%; max-width: 520px; }
+.dn-banner > .dn-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--ink-secondary); }
+.dn-banner-text { flex: 1; min-width: 0; }
+.dn-banner-title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); margin: 0; }
+.dn-banner-body { font-size: 12px; line-height: 17px; color: var(--ink-secondary); margin: 0; }
+.dn-banner-success { background: var(--success-soft); border-color: transparent; }
+.dn-banner-success > .dn-icon { color: var(--success); }
+.dn-banner-warning { background: var(--warning-soft); border-color: transparent; }
+.dn-banner-warning > .dn-icon { color: var(--warning); }
+.dn-banner-danger { background: var(--danger-soft); border-color: transparent; }
+.dn-banner-danger > .dn-icon { color: var(--danger); }
+.dn-toast { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4) 0 var(--space-3); font-size: 14px; font-weight: 500; color: var(--ink); }
+.dn-toast .dn-icon { width: 16px; height: 16px; color: var(--success); }
+
+/* Message */
+.dn-thread { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 600px; }
+.dn-msg-user { align-self: flex-end; max-width: 80%; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: 6px var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink); }
+.dn-msg-assistant { font-family: var(--font-serif); font-size: 14px; line-height: 22px; color: var(--ink); }
+.dn-msg-assistant p { margin: 0 0 var(--space-2); }
+.dn-msg-assistant p:last-of-type { margin-bottom: 0; }
+.dn-msg-assistant strong { font-weight: 600; }
+.dn-msg-assistant a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-control); }
+.dn-msg-actions { display: flex; gap: 2px; margin-top: var(--space-1); margin-left: -5px; }
+.dn-msg-actions .dn-iconbtn { width: 22px; height: 22px; color: var(--ink-tertiary); }
+.dn-msg-actions .dn-icon { width: 13px; height: 13px; }
+
+/* Code block */
+.dn-code { background: var(--surface-sunken); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden; width: 100%; max-width: 560px; }
+.dn-code-head { display: flex; align-items: center; height: 28px; padding: 0 var(--space-1) 0 var(--space-3); border-bottom: var(--stroke-hairline) solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.dn-code-head .dn-btn { margin-left: auto; }
+.dn-code pre { margin: 0; padding: var(--space-2) var(--space-3); overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 17px; color: var(--ink); }
+.tk-kw { color: var(--ink); font-weight: 600; }
+.tk-str { color: var(--ink-secondary); }
+.tk-num { color: var(--ink); }
+.tk-com { color: var(--ink-tertiary); font-style: italic; }
+.tk-type { color: var(--ink); }
+
+/* Step row */
+.dn-steps { display: flex; flex-direction: column; width: 100%; max-width: 560px; }
+.dn-step { display: flex; align-items: center; gap: 7px; height: var(--control-mac); padding: 0 6px; border-radius: var(--radius-sm); font-size: 12px; color: var(--ink-secondary); cursor: default; min-width: 0; }
+.dn-step:hover { background: var(--fill-hover); }
+.dn-step .dn-icon { width: 14px; height: 14px; }
+.dn-step-name { font-weight: 600; color: var(--ink); white-space: nowrap; }
+.dn-step-text { font-family: var(--font-mono); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dn-step-meta { margin-left: auto; padding-left: var(--space-2); font-size: 11px; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.dn-step-ok .dn-glyph { color: var(--success); }
+.dn-step-fail .dn-glyph { color: var(--danger); }
+.dn-step .dn-chevron { color: var(--ink-tertiary); width: 11px; height: 11px; }
+.dn-step-detail { margin: 2px 0 6px 27px; padding: 6px var(--space-2); background: var(--surface-sunken); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-secondary); white-space: pre-wrap; }
+.dn-spinner { width: 13px; height: 13px; border-radius: var(--radius-full); border: 2px solid var(--line); border-top-color: var(--ink); animation: dn-spin 0.9s linear infinite; flex: none; }
+@keyframes dn-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .dn-spinner { animation-duration: 2.4s; } }
+
+/* Empty state */
+.dn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); padding: var(--space-6) var(--space-5); }
+.dn-empty > .dn-icon { width: 28px; height: 28px; color: var(--ink-tertiary); stroke-width: 1.4; }
+.dn-empty h2 { font-family: var(--font-serif); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; margin: var(--space-2) 0 0; color: var(--ink); }
+.dn-empty p { margin: 0 0 var(--space-3); max-width: 320px; color: var(--ink-secondary); font-size: 13px; line-height: 18px; }
+
+/* Sheet (iOS) */
+.dn-sheet { width: 359px; max-width: 100%; border-radius: var(--radius-xl); padding: var(--space-2) var(--space-5) var(--space-5); }
+.dn-grabber { width: 36px; height: 5px; border-radius: var(--radius-full); background: var(--line-control); margin: 0 auto var(--space-3); }
+.dn-sheet h3 { font-family: var(--font-serif); font-size: 20px; line-height: 25px; font-weight: 600; margin: 0 0 var(--space-1); color: var(--ink); }
+.dn-sheet p { font-size: 15px; line-height: 20px; color: var(--ink-secondary); margin: 0 0 var(--space-4); }
+.dn-sheet .dn-stack { gap: var(--space-1); }

package/template/project/design-system.json

@@ -0,0 +1,25 @@
+{
+  "v": 3,
+  "assetGroups": {},
+  "blobs": {},
+  "createdOnFiles": {
+    "at": "2026-10-31T17:19:19Z",
+    "v": 1
+  },
+  "docs": {
+    "readme": "project/README.md",
+    "sections": []
+  },
+  "groups": [],
+  "lastChange": {
+    "by": "Claude",
+    "via": "Claude Code",
+    "at": "2026-11-01T13:33:31Z",
+    "note": "修正 Composer、TextField、MacWindow、Button 预览被裁掉底部的问题。"
+  },
+  "layout": "files",
+  "libraries": [],
+  "namespace": "Deernova",
+  "sections": {},
+  "title": "Deernova"
+}