@deernova/style 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deernova/style",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "engines": {
     "node": ">=22"

package/skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: deernova-style
-description: Deernova 的界面设计语言：只用黑白灰，内容放在不透明纸面上，原生端的操作层用系统 Liquid Glass，Web 应用用不透明平面加 1px 线；界面和 AI 回答用无衬线，衬线只给大标题和长文；按场景（Web 应用、macOS、iOS、iPadOS、官网与文档）切换密度。在 Deernova 的应用或网站里新建、修改或审查界面时使用，包括颜色、字体、间距、圆角、线条、阴影、按钮、输入框、菜单与下拉选择、侧边栏、顶栏、列表、卡片、弹窗、空状态、AI 对话和任务清单，以及对应的 CSS、Tailwind 或 SwiftUI 实现。
+description: Deernova 的界面设计语言：只用黑白灰，内容放在不透明纸面上，原生端的操作层用系统 Liquid Glass，Web 应用用不透明平面加 1px 线；界面和 AI 回答用无衬线，衬线只给大标题和长文；按场景（Web 应用、macOS、iOS、iPadOS、官网与文档）切换密度。在 Deernova 的应用或网站里新建、修改或审查界面时使用，包括颜色、字体、间距、圆角、线条、阴影、按钮、输入框、菜单与下拉选择、侧边栏、顶栏、列表、卡片、弹窗、tooltip、空状态、AI 对话和任务清单，以及对应的 CSS、Tailwind 或 SwiftUI 实现。
 ---
 
 # Deernova 设计语言
@@ -53,10 +53,12 @@ description: Deernova 的界面设计语言：只用黑白灰，内容放在不
 2. **黑白灰，强调靠对比。** `accent` 就是墨色 `ink`：主按钮在浅色主题是黑底白字，在深色主题是白底黑字，文字用 `on-accent`，不要写死白色。唯一的彩色是状态色 `success`、`warning`、`danger`、`info`，只用来表达状态，而且必须同时带图标或文字。
 3. **线条代替阴影。** 区块之间用 `line` 色的 1px 线分隔（`stroke-line`）。卡片不加阴影；只有菜单、弹窗、浮动面板和 Composer 这类真正浮起来的东西才用 `shadow-float`。
 4. **无衬线做界面，衬线点题。** 界面文字、AI 回答、用户消息、标题栏都用系统无衬线（SF Pro）；代码和需要对齐的数字用等宽（SF Mono）。衬线（New York）只用在页面大标题和空状态标题（`display`、`title`）、官网与文档，以及文章类的长文阅读（`prose`）。中文统一落到苹方。
-5. **层次靠字号和灰度，少用粗体。** 600 只给真正的标题（`display`、`title`、`headline`）。分组标题、会话名、说明、时间戳用常规字重，靠 `ink-secondary`、`ink-tertiary` 和小一号的字区分层级。
-6. **控件高度由 token 决定，点击区域单独补。** 按钮、输入框、列表行的可见高度直接用 `button-height-*`、`field-height`、`row-height`，上下内边距为 0，不让页面行高把它撑高。可见尺寸小于 `hit-min` 时，用透明的命中区补足，不加大可见的控件。
-7. **间距成组。** 间距走 4pt 网格。组内用 `gap-stack`，组与组之间用 `gap-group`（至少 2 倍）；内容区里段落、工具调用、卡片之间 `space-4`。用细线和少量留白分组，不靠大块空白和外框。
-8. **原生端用系统控件，Web 端用同一套自绘组件。** SwiftUI 端的导航结构、侧边栏、工具栏、菜单、表单、弹窗直接用系统控件和系统尺寸，只通过颜色和字体让它们融入；自己画的内容区（对话、卡片、输入区、任务清单）用 token。Web 应用没有系统控件可借，按组件说明里的规格画，骨架见 [Web 应用](references/scenes/web.md)。
+5. **状态只有两种底色。** 悬停 `fill-hover`，按下和选中 `fill-selected`，都是半透明的，叠在任何纸面上都成立；选中项悬停时不再加深。悬停只改颜色，不加阴影、不位移，只写在 `@media (hover: hover)` 里，见 [交互状态](references/foundations/states.md)。
+6. **层次靠字号和灰度，少用粗体。** 600 只给真正的标题（`display`、`title`、`headline`）。分组标题、会话名、说明、时间戳用常规字重，靠 `ink-secondary`、`ink-tertiary` 和小一号的字区分层级。
+7. **控件高度由 token 决定，点击区域单独补。** 按钮、输入框、列表行的可见高度直接用 `button-height-*`、`field-height`、`row-height`，上下内边距为 0，不让页面行高把它撑高。可见尺寸小于 `hit-min` 时，用透明的命中区补足，不加大可见的控件。
+8. **间距成组。** 间距走 4pt 网格。组内用 `gap-stack`，组与组之间用 `gap-group`（至少 2 倍）；内容区里段落、工具调用、卡片之间 `space-4`。用细线和少量留白分组，不靠大块空白和外框。
+9. **原生端用系统控件，Web 端用同一套自绘组件。** SwiftUI 端的导航结构、侧边栏、工具栏、菜单、表单、弹窗直接用系统控件和系统尺寸，只通过颜色和字体让它们融入；自己画的内容区（对话、卡片、输入区、任务清单）用 token。Web 应用没有系统控件可借，按组件说明里的规格画，骨架见 [Web 应用](references/scenes/web.md)。
+10. **对齐按内容选。** 单行的控件和行在固定高度里垂直居中；图标和文字按中线，不同字号的文字按基线；三行以上的内容，图标和头像对齐第一行；空状态放在略高于正中的位置。不用内边距或 `top` 微调去凑居中。内容栏限宽并在主内容区里居中，见 [布局与对齐](references/foundations/layout.md)。
 
 ## 读什么
 
@@ -72,11 +74,11 @@ description: Deernova 的界面设计语言：只用黑白灰，内容放在不
 
 ### 基础
 
-[颜色](references/foundations/color.md) · [字体](references/foundations/typography.md) · [间距与布局](references/foundations/spacing.md) · [圆角](references/foundations/radius.md) · [线条](references/foundations/stroke.md) · [层级与阴影](references/foundations/elevation.md) · [玻璃](references/foundations/glass.md) · [动效](references/foundations/motion.md) · [图标](references/foundations/iconography.md) · [文案](references/foundations/writing.md) · [无障碍](references/foundations/accessibility.md)
+[颜色](references/foundations/color.md) · [交互状态](references/foundations/states.md) · [字体](references/foundations/typography.md) · [间距](references/foundations/spacing.md) · [布局与对齐](references/foundations/layout.md) · [圆角](references/foundations/radius.md) · [线条](references/foundations/stroke.md) · [层级与阴影](references/foundations/elevation.md) · [玻璃](references/foundations/glass.md) · [动效](references/foundations/motion.md) · [图标](references/foundations/iconography.md) · [文案](references/foundations/writing.md) · [无障碍](references/foundations/accessibility.md)
 
 ### 组件
 
-[按钮](references/components/button.md) · [顶栏与侧面板](references/components/toolbar.md) · [玻璃操作层](references/components/glass-controls.md) · [分段控件](references/components/segmented.md) · [文本框](references/components/text-field.md) · [菜单与下拉](references/components/menu.md) · [Composer](references/components/composer.md) · [侧边栏](references/components/sidebar.md) · [分组列表](references/components/list.md) · [卡片](references/components/card.md) · [标签](references/components/tag.md) · [代码块](references/components/code-block.md) · [任务清单](references/components/task-list.md) · [空状态](references/components/empty-state.md) · [横幅与轻提示](references/components/banner.md) · [弹窗与 popover](references/components/sheet.md) · [消息](references/components/message.md) · [工具调用与执行步骤](references/components/step-row.md)
+[按钮](references/components/button.md) · [顶栏与侧面板](references/components/toolbar.md) · [玻璃操作层](references/components/glass-controls.md) · [分段控件](references/components/segmented.md) · [文本框](references/components/text-field.md) · [菜单与下拉](references/components/menu.md) · [Composer](references/components/composer.md) · [侧边栏](references/components/sidebar.md) · [分组列表](references/components/list.md) · [卡片](references/components/card.md) · [标签](references/components/tag.md) · [代码块](references/components/code-block.md) · [任务清单](references/components/task-list.md) · [空状态](references/components/empty-state.md) · [横幅与轻提示](references/components/banner.md) · [弹窗与 popover](references/components/sheet.md) · [Tooltip 与悬停浮层](references/components/tooltip.md) · [消息](references/components/message.md) · [工具调用与执行步骤](references/components/step-row.md)
 
 ### 场景
 
@@ -96,7 +98,7 @@ description: Deernova 的界面设计语言：只用黑白灰，内容放在不
 - 在 SwiftUI 端给系统工具栏、侧边栏加实色背景盖掉玻璃；在 Web 应用里用模糊效果模仿玻璃。
 - 给卡片加阴影；在玻璃上放正文或列表。
 - 给界面文字、AI 回答或按钮用衬线；到处用粗体。
-- 用上下内边距撑出按钮高度；为了凑 44 点击区域把可见的按钮做大。
+- 用上下内边距撑出按钮高度；为了凑 44 点击区域把可见的按钮做大；用 `padding-top`、`top: 1px` 或等高的 `line-height` 凑垂直居中。
 - 把官网的大按钮、大字号搬进应用界面；把桌面端的尺寸直接搬到触屏上。
 - 一屏出现两个主按钮；用「确定」「OK」当按钮文字。
 - 只靠颜色表达状态。

package/skill/assets/DeernovaTokens.swift

@@ -168,12 +168,20 @@ public enum Deernova {
     public static let opacitySolidHover: Double = 0.88
     /// 对话栏和长文阅读栏的最大宽度。
     public static let contentMax: CGFloat = 680
+    /// 表单页、设置页内容栏的最大宽度。
+    public static let formMax: CGFloat = 560
+    /// 表格、看板和官网内容的最大宽度。
+    public static let wideMax: CGFloat = 1120
     /// 菜单最大宽度；放不下的文字用省略号。
     public static let menuMaxWidth: CGFloat = 320
     /// 底部弹窗顶部拖拽条的宽度。
     public static let sheetGrabberWidth: CGFloat = 36
     /// 拖拽条的高度。
     public static let sheetGrabberHeight: CGFloat = 5
+    /// tooltip 和触发它的控件之间的距离。
+    public static let tooltipOffset: CGFloat = 8
+    /// tooltip 最大宽度，超过时折行，最多两行。
+    public static let tooltipMaxWidth: CGFloat = 240
 
     // 按密度取值的尺寸：macOS 是 desktop（只用于自己画的内容区），iOS 和 iPadOS 是 touch。
     #if os(macOS)
@@ -183,7 +191,11 @@ public enum Deernova {
     public static let pageMargin: CGFloat = 32
     public static let hitMin: CGFloat = 24
     public static let sidebarWidth: CGFloat = 288
+    public static let sidebarWidthMin: CGFloat = 200
+    public static let sidebarWidthMax: CGFloat = 400
+    public static let paneWidth: CGFloat = 320
     public static let toolbarHeight: CGFloat = 44
+    public static let gridGutter: CGFloat = 24
     public static let buttonHeightSm: CGFloat = 24
     public static let buttonHeightMd: CGFloat = 28
     public static let buttonHeightLg: CGFloat = 32
@@ -246,6 +258,10 @@ public enum Deernova {
     public static let sheetMargin: CGFloat = 32
     public static let sheetRadius: CGFloat = 12
     public static let popoverPadding: CGFloat = 12
+    public static let tooltipHeight: CGFloat = 24
+    public static let tooltipPaddingX: CGFloat = 8
+    public static let tooltipFontSize: CGFloat = 12
+    public static let tooltipRadius: CGFloat = 6
     public static let messageFontSize: CGFloat = 15
     public static let messageActionSize: CGFloat = 24
     public static let iconSizeSm: CGFloat = 14
@@ -258,7 +274,11 @@ public enum Deernova {
     public static let pageMargin: CGFloat = 16
     public static let hitMin: CGFloat = 44
     public static let sidebarWidth: CGFloat = 320
+    public static let sidebarWidthMin: CGFloat = 260
+    public static let sidebarWidthMax: CGFloat = 400
+    public static let paneWidth: CGFloat = 360
     public static let toolbarHeight: CGFloat = 44
+    public static let gridGutter: CGFloat = 16
     public static let buttonHeightSm: CGFloat = 30
     public static let buttonHeightMd: CGFloat = 36
     public static let buttonHeightLg: CGFloat = 46
@@ -321,6 +341,10 @@ public enum Deernova {
     public static let sheetMargin: CGFloat = 8
     public static let sheetRadius: CGFloat = 24
     public static let popoverPadding: CGFloat = 16
+    public static let tooltipHeight: CGFloat = 28
+    public static let tooltipPaddingX: CGFloat = 10
+    public static let tooltipFontSize: CGFloat = 13
+    public static let tooltipRadius: CGFloat = 8
     public static let messageFontSize: CGFloat = 15
     public static let messageActionSize: CGFloat = 32
     public static let iconSizeSm: CGFloat = 17

package/skill/assets/tokens.css

@@ -148,6 +148,7 @@
   --z-dropdown: 100;
   --z-overlay: 1000;
   --z-toast: 1100;
+  --z-tooltip: 1200;
   --duration-instant: 120ms;
   --duration-base: 200ms;
   --duration-slow: 320ms;
@@ -157,9 +158,17 @@
   --glass-blur: 16px;
   --glass-saturate: 1.4;
   --content-max: 680px;
+  --form-max: 560px;
+  --wide-max: 1120px;
+  --scrollbar-size: 10px;
+  --scrollbar-thumb-size: 6px;
   --menu-max-width: 320px;
   --sheet-grabber-width: 36px;
   --sheet-grabber-height: 5px;
+  --tooltip-offset: 8px;
+  --tooltip-max-width: 240px;
+  --tooltip-delay: 500ms;
+  --tooltip-skip-window: 300ms;
   --icon-stroke: 1.75px;
 }
 
@@ -198,7 +207,11 @@
   --page-margin: 32px;
   --hit-min: 24px;
   --sidebar-width: 288px;
+  --sidebar-width-min: 200px;
+  --sidebar-width-max: 400px;
+  --pane-width: 320px;
   --toolbar-height: 44px;
+  --grid-gutter: 24px;
   --button-height-sm: 24px;
   --button-height-md: 28px;
   --button-height-lg: 32px;
@@ -261,6 +274,10 @@
   --sheet-margin: 32px;
   --sheet-radius: 12px;
   --popover-padding: 12px;
+  --tooltip-height: 24px;
+  --tooltip-padding-x: 8px;
+  --tooltip-font-size: 12px;
+  --tooltip-radius: 6px;
   --message-font-size: 15px;
   --message-action-size: 24px;
   --icon-size-sm: 14px;
@@ -303,7 +320,11 @@
     --page-margin: 16px;
     --hit-min: 44px;
     --sidebar-width: 320px;
+    --sidebar-width-min: 260px;
+    --sidebar-width-max: 400px;
+    --pane-width: 360px;
     --toolbar-height: 44px;
+    --grid-gutter: 16px;
     --button-height-sm: 30px;
     --button-height-md: 36px;
     --button-height-lg: 46px;
@@ -366,6 +387,10 @@
     --sheet-margin: 8px;
     --sheet-radius: 24px;
     --popover-padding: 16px;
+    --tooltip-height: 28px;
+    --tooltip-padding-x: 10px;
+    --tooltip-font-size: 13px;
+    --tooltip-radius: 8px;
     --message-font-size: 15px;
     --message-action-size: 32px;
     --icon-size-sm: 17px;
@@ -408,7 +433,11 @@
   --page-margin: 16px;
   --hit-min: 44px;
   --sidebar-width: 320px;
+  --sidebar-width-min: 260px;
+  --sidebar-width-max: 400px;
+  --pane-width: 360px;
   --toolbar-height: 44px;
+  --grid-gutter: 16px;
   --button-height-sm: 30px;
   --button-height-md: 36px;
   --button-height-lg: 46px;
@@ -471,6 +500,10 @@
   --sheet-margin: 8px;
   --sheet-radius: 24px;
   --popover-padding: 16px;
+  --tooltip-height: 28px;
+  --tooltip-padding-x: 10px;
+  --tooltip-font-size: 13px;
+  --tooltip-radius: 8px;
   --message-font-size: 15px;
   --message-action-size: 32px;
   --icon-size-sm: 17px;
@@ -512,7 +545,11 @@
   --page-margin: 32px;
   --hit-min: 24px;
   --sidebar-width: 260px;
+  --sidebar-width-min: 200px;
+  --sidebar-width-max: 320px;
+  --pane-width: 320px;
   --toolbar-height: 52px;
+  --grid-gutter: 32px;
   --button-height-sm: 32px;
   --button-height-md: 36px;
   --button-height-lg: 44px;
@@ -575,6 +612,10 @@
   --sheet-margin: 32px;
   --sheet-radius: 16px;
   --popover-padding: 16px;
+  --tooltip-height: 28px;
+  --tooltip-padding-x: 10px;
+  --tooltip-font-size: 13px;
+  --tooltip-radius: 8px;
   --message-font-size: 15px;
   --message-action-size: 28px;
   --icon-size-sm: 16px;

package/skill/assets/tokens.json

@@ -938,6 +938,12 @@
         "value": 1100,
         "swift": false,
         "usage": "轻提示，压在弹窗之上。"
+      },
+      {
+        "name": "z-tooltip",
+        "value": 1200,
+        "swift": false,
+        "usage": "tooltip 和悬停卡片，压在所有层之上。"
       }
     ]
   },
@@ -1011,6 +1017,16 @@
         "value": "680px",
         "usage": "对话栏和长文阅读栏的最大宽度。"
       },
+      {
+        "name": "form-max",
+        "value": "560px",
+        "usage": "表单页、设置页内容栏的最大宽度。"
+      },
+      {
+        "name": "wide-max",
+        "value": "1120px",
+        "usage": "表格、看板和官网内容的最大宽度。"
+      },
       {
         "name": "breakpoint-sm",
         "value": "760px",
@@ -1047,6 +1063,33 @@
         },
         "usage": "侧边栏默认宽度。iPhone 没有侧边栏；macOS 用系统侧边栏，宽度只作参考。"
       },
+      {
+        "name": "sidebar-width-min",
+        "values": {
+          "desktop": 200,
+          "touch": 260,
+          "comfortable": 200
+        },
+        "usage": "侧边栏拖动时的最小宽度。"
+      },
+      {
+        "name": "sidebar-width-max",
+        "values": {
+          "desktop": 400,
+          "touch": 400,
+          "comfortable": 320
+        },
+        "usage": "侧边栏拖动时的最大宽度。"
+      },
+      {
+        "name": "pane-width",
+        "values": {
+          "desktop": 320,
+          "touch": 360,
+          "comfortable": 320
+        },
+        "usage": "列表加详情里列表栏的默认宽度，也是右侧 inspector 的默认宽度。"
+      },
       {
         "name": "toolbar-height",
         "values": {
@@ -1055,6 +1098,31 @@
           "comfortable": 52
         },
         "usage": "Web 应用顶栏、侧面板标签头的高度。macOS 用系统工具栏。"
+      },
+      {
+        "name": "grid-gutter",
+        "values": {
+          "desktop": 24,
+          "touch": 16,
+          "comfortable": 32
+        },
+        "usage": "官网和文档 12 栏网格的栏间距。应用里的卡片网格用 card-gap。"
+      },
+      {
+        "name": "scrollbar-size",
+        "value": "10px",
+        "platforms": [
+          "web"
+        ],
+        "usage": "网页滚动条占的宽度（横向滚动条是高度）。"
+      },
+      {
+        "name": "scrollbar-thumb-size",
+        "value": "6px",
+        "platforms": [
+          "web"
+        ],
+        "usage": "滚动条里胶囊滑块的粗细，两边各留 (scrollbar-size − 它) ÷ 2。"
       }
     ]
   },
@@ -1745,6 +1813,75 @@
         }
       ]
     },
+    {
+      "id": "tooltip",
+      "title": "Tooltip 与悬停浮层",
+      "reference": "references/components/tooltip.md",
+      "tokens": [
+        {
+          "name": "tooltip-height",
+          "values": {
+            "desktop": 24,
+            "touch": 28,
+            "comfortable": 28
+          },
+          "usage": "单行 tooltip 的高度；折成两行时随内容长高。"
+        },
+        {
+          "name": "tooltip-padding-x",
+          "values": {
+            "desktop": 8,
+            "touch": 10,
+            "comfortable": 10
+          },
+          "usage": "tooltip 左右内边距。"
+        },
+        {
+          "name": "tooltip-font-size",
+          "values": {
+            "desktop": 12,
+            "touch": 13,
+            "comfortable": 13
+          },
+          "usage": "tooltip 字号。"
+        },
+        {
+          "name": "tooltip-radius",
+          "values": {
+            "desktop": 6,
+            "touch": 8,
+            "comfortable": 8
+          },
+          "usage": "tooltip 圆角。"
+        },
+        {
+          "name": "tooltip-offset",
+          "value": "8px",
+          "usage": "tooltip 和触发它的控件之间的距离。"
+        },
+        {
+          "name": "tooltip-max-width",
+          "value": "240px",
+          "usage": "tooltip 最大宽度，超过时折行，最多两行。"
+        },
+        {
+          "name": "tooltip-delay",
+          "value": "500ms",
+          "platforms": [
+            "web"
+          ],
+          "usage": "指针停留多久后显示 tooltip 和悬停卡片。SwiftUI 的 .help() 用系统的时间。"
+        },
+        {
+          "name": "tooltip-skip-window",
+          "value": "300ms",
+          "platforms": [
+            "web"
+          ],
+          "usage": "一个 tooltip 刚关闭的这段时间里，移到相邻控件立即显示，不再等待。"
+        }
+      ]
+    },
     {
       "id": "message",
       "title": "消息",

package/skill/manifest.json

@@ -1,4 +1,4 @@
 {
-  "version": "0.3.2",
-  "sourceHash": "6ed23a30b39d95119a4c31208fe65781b75f549fb34e1104931b81b650349282"
+  "version": "0.3.4",
+  "sourceHash": "c02287466d37f62aeb1ea4007db56bddf8895d4fc4781a24bbc08a94f385c38a"
 }

package/skill/references/components/button.md

@@ -10,7 +10,7 @@
 - **次按钮**（默认）：`fill-selected` 灰底、无描边、无阴影、`ink` 字。半透明的灰底放在任何纸面上都成立。
 - **文字按钮** `is-plain`：无底，`ink-secondary` 字，悬停时出现 `fill-hover`。工具栏和卡片里的次要操作。
 - **危险按钮** `is-danger`：`danger-soft` 底、`danger` 字。只有在最终的[危险确认弹窗](sheet.md)里，才用实色的危险样式 `is-primary is-danger`：`danger` 底、`on-accent` 字（SwiftUI 的 `role: .destructive`）。
-- **图标按钮** `dn-icon-button`：只有图标，无底，`ink-secondary`，必须有无障碍标签。
+- **图标按钮** `dn-icon-button`：只有图标，无底，`ink-secondary`，必须有无障碍标签；指针端用 [tooltip](tooltip.md) 显示它的名称。
 
 ## 尺寸
 
@@ -72,15 +72,16 @@
   cursor: pointer;
   transition: background-color var(--duration-instant) var(--ease-standard), opacity var(--duration-instant) var(--ease-standard);
 }
-.dn-button:hover:not(:disabled) { background-image: linear-gradient(var(--fill-hover), var(--fill-hover)); }
+@media (hover: hover) { .dn-button:hover:not(:disabled) { background-image: linear-gradient(var(--fill-hover), var(--fill-hover)); } }
 .dn-button:active:not(:disabled) { background-image: linear-gradient(var(--fill-selected), var(--fill-selected)); }
 .dn-button:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
 .dn-button:disabled { opacity: var(--opacity-disabled); cursor: default; }
 
 .dn-button.is-primary { background: var(--accent); color: var(--on-accent); }
-.dn-button.is-primary:hover:not(:disabled), .dn-button.is-primary:active { background-image: none; opacity: var(--opacity-solid-hover); }
+@media (hover: hover) { .dn-button.is-primary:hover:not(:disabled) { background-image: none; opacity: var(--opacity-solid-hover); } }
+.dn-button.is-primary:active:not(:disabled) { background-image: none; opacity: var(--opacity-solid-hover); }
 .dn-button.is-plain { background: transparent; color: var(--ink-secondary); }
-.dn-button.is-plain:hover:not(:disabled) { background: var(--fill-hover); color: var(--ink); }
+@media (hover: hover) { .dn-button.is-plain:hover:not(:disabled) { background: var(--fill-hover); color: var(--ink); } }
 .dn-button.is-danger { background: var(--danger-soft); color: var(--danger); }
 .dn-button.is-primary.is-danger { background: var(--danger); color: var(--on-accent); }
 
@@ -104,7 +105,8 @@
   cursor: pointer;
   transition: background-color var(--duration-instant) var(--ease-standard);
 }
-.dn-icon-button:hover { background: var(--fill-hover); color: var(--ink); }
+@media (hover: hover) { .dn-icon-button:hover { background: var(--fill-hover); color: var(--ink); } }
+.dn-icon-button:active { background: var(--fill-selected); color: var(--ink); }
 .dn-icon-button:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
 
 /* 点击区域：可见尺寸不变，用透明的伪元素把可点范围撑到 hit-min。

package/skill/references/components/card.md

@@ -39,7 +39,7 @@
   text-decoration: none;
   transition: border-color var(--duration-instant) var(--ease-standard);
 }
-a.dn-card:hover, button.dn-card:hover { border-color: var(--line-control); }
+@media (hover: hover) { a.dn-card:hover, button.dn-card:hover { border-color: var(--line-control); } }
 .dn-card:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
 .dn-card[aria-current="true"], .dn-card.is-selected { border-color: var(--ink); }
 .dn-card-title { margin: 0; font: var(--type-headline); }

package/skill/references/components/composer.md

@@ -124,7 +124,8 @@
   font: var(--weight-regular) var(--type-callout-size)/1 var(--font-sans);
   cursor: pointer;
 }
-.dn-meta-button:hover { background: var(--fill-hover); }
+@media (hover: hover) { .dn-meta-button:hover { background: var(--fill-hover); } }
+.dn-meta-button:active { background: var(--fill-selected); }
 .dn-meta-button b { color: var(--ink); font-weight: var(--weight-regular); }
 .dn-context-ring {
   width: var(--icon-size-sm);

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

@@ -13,7 +13,7 @@
 | `empty-icon-size` | 32 | 36 | 40 | 空状态图标的边长。 |
 <!-- /tokens -->
 
-- 在可用区域里居中。图标 `empty-icon-size`、细线、`ink-tertiary`；标题用衬线 `empty-title-size`、半粗；正文 `type-body`、`ink-secondary`，最大宽度 320。
+- 在可用区域里视觉居中：水平居中，垂直方向略高于正中（上下留白约 2 : 3），见 [布局与对齐](../foundations/layout.md)。图标 `empty-icon-size`、细线、`ink-tertiary`；标题用衬线 `empty-title-size`、半粗；正文 `type-body`、`ink-secondary`，最大宽度 320。
 - 按钮用[大号](button.md)。
 - 搜索没有结果时不放按钮，标题写成「没有找到“关键词”」，正文给出修改建议。
 

package/skill/references/components/menu.md

@@ -119,6 +119,7 @@
 .dn-menu-item:is([aria-checked="true"], [aria-selected="true"]) > .dn-menu-check { visibility: visible; }
 .dn-menu-item > .dn-menu-more { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--ink-tertiary); }
 @media (hover: hover) { .dn-menu-item:hover { background: var(--fill-hover); } }
+.dn-menu-item:active { background: var(--fill-selected); }
 .dn-menu-item:focus { outline: none; }
 .dn-menu-item:focus-visible, .dn-menu-item[aria-expanded="true"] { background: var(--fill-hover); }
 .dn-menu-item:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: calc(var(--stroke-focus) * -1); }

package/skill/references/components/message.md

@@ -18,6 +18,7 @@
 - 消息、工具调用行、卡片之间统一 `space-4`。
 - 操作按钮放在 AI 消息下方，`message-action-size` 的图标按钮，`ink-tertiary` 色；指针端只在悬停时显示，触控端一直显示。
 - 链接用 `ink` 色，加 1px 的 `line-control` 色下划线，下偏移 3px。
+- 操作按钮悬停才出现时，键盘聚焦和触屏上仍然可见，规则见 [悬停才出现的操作](tooltip.md#悬停才出现的操作)。
 - 生成中：回答末尾显示「正在运行」状态（见 [工具调用与执行步骤](step-row.md)），Composer 的发送按钮变成「停止」。
 
 ## Web

package/skill/references/components/segmented.md

@@ -45,7 +45,7 @@
   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); }
+@media (hover: hover) { .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); }
 ```

package/skill/references/components/sidebar.md

@@ -54,7 +54,7 @@
 .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); }
+@media (hover: hover) { .dn-sidebar-heading:hover { color: var(--ink-secondary); } }
 .dn-sidebar-item {
   display: flex;
   align-items: center;
@@ -70,7 +70,8 @@
 }
 .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); }
+@media (hover: hover) { .dn-sidebar-item:hover { background: var(--fill-hover); } }
+.dn-sidebar-item:active { background: var(--fill-selected); }
 .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; }

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

@@ -30,7 +30,7 @@ AI 在对话里做了什么。分两层：平时只显示一行灰色的**摘要
   cursor: pointer;
 }
 .dn-activity > summary::-webkit-details-marker { display: none; }
-.dn-activity > summary:hover { color: var(--ink); }
+@media (hover: hover) { .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); }
@@ -50,7 +50,8 @@ AI 在对话里做了什么。分两层：平时只显示一行灰色的**摘要
 }
 .dn-step::-webkit-details-marker { display: none; }
 details > .dn-step { cursor: pointer; }
-.dn-step:hover { background: var(--fill-hover); }
+@media (hover: hover) { .dn-step:hover { background: var(--fill-hover); } }
+.dn-step:active { background: var(--fill-selected); }
 .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); }

package/skill/references/components/toolbar.md

@@ -23,7 +23,7 @@ Web 应用的页面骨架：左边是[侧边栏](sidebar.md)，中间是内容
 ```css
 .dn-app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; height: 100dvh; background: var(--canvas); color: var(--ink); }
 .dn-app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
-.dn-app-content { flex: 1; min-height: 0; overflow: auto; padding: var(--space-6) calc(var(--page-margin) + var(--space-3)); }
+.dn-app-content { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: var(--space-6) calc(var(--page-margin) + var(--space-3)); }
 
 .dn-toolbar {
   position: sticky;
@@ -53,7 +53,8 @@ Web 应用的页面骨架：左边是[侧边栏](sidebar.md)，中间是内容
 }
 .dn-toolbar-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dn-toolbar-title .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--ink-secondary); }
-.dn-toolbar-title:hover { background: var(--fill-hover); }
+@media (hover: hover) { .dn-toolbar-title:hover { background: var(--fill-hover); } }
+.dn-toolbar-title:active { background: var(--fill-selected); }
 .dn-toolbar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
 .dn-toolbar .dn-icon-button[aria-pressed="true"], .dn-panel-tabs .dn-icon-button[aria-pressed="true"] { background: var(--fill-selected); color: var(--ink); }
 
@@ -77,7 +78,7 @@ Web 应用的页面骨架：左边是[侧边栏](sidebar.md)，中间是内容
   white-space: nowrap;
   cursor: pointer;
 }
-.dn-panel-tabs [role="tab"]:hover { color: var(--ink); }
+@media (hover: hover) { .dn-panel-tabs [role="tab"]:hover { color: var(--ink); } }
 .dn-panel-tabs [role="tab"][aria-selected="true"] { background: var(--fill-selected); color: var(--ink); }
 .dn-panel-tabs .dn-panel-actions { display: flex; gap: 2px; margin-left: auto; }
 .dn-panel-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-3) var(--space-4); font: var(--type-code); color: var(--ink-secondary); }