@deernova/style 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deernova/style",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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 设计语言
@@ -56,6 +56,7 @@ description: Deernova 的界面设计语言：只用黑白灰，内容放在不
 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`。用细线和少量留白分组，不靠大块空白和外框。
+9. **对齐按内容选。** 单行的控件和行在固定高度里垂直居中；图标和文字按中线，不同字号的文字按基线；三行以上的内容，图标和头像对齐第一行；空状态放在略高于正中的位置。不用内边距或 `top` 微调去凑居中。内容栏限宽并在主内容区里居中，见 [布局与对齐](references/foundations/layout.md)。
 8. **原生端用系统控件，Web 端用同一套自绘组件。** SwiftUI 端的导航结构、侧边栏、工具栏、菜单、表单、弹窗直接用系统控件和系统尺寸，只通过颜色和字体让它们融入；自己画的内容区（对话、卡片、输入区、任务清单）用 token。Web 应用没有系统控件可借，按组件说明里的规格画，骨架见 [Web 应用](references/scenes/web.md)。
 
 ## 读什么
@@ -72,11 +73,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/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) · [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) · [弹窗](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 +97,7 @@ description: Deernova 的界面设计语言：只用黑白灰，内容放在不
 - 在 SwiftUI 端给系统工具栏、侧边栏加实色背景盖掉玻璃；在 Web 应用里用模糊效果模仿玻璃。
 - 给卡片加阴影；在玻璃上放正文或列表。
 - 给界面文字、AI 回答或按钮用衬线；到处用粗体。
-- 用上下内边距撑出按钮高度；为了凑 44 点击区域把可见的按钮做大。
+- 用上下内边距撑出按钮高度；为了凑 44 点击区域把可见的按钮做大；用 `padding-top`、`top: 1px` 或等高的 `line-height` 凑垂直居中。
 - 把官网的大按钮、大字号搬进应用界面；把桌面端的尺寸直接搬到触屏上。
 - 一屏出现两个主按钮；用「确定」「OK」当按钮文字。
 - 只靠颜色表达状态。

package/skill/assets/DeernovaTokens.swift

@@ -168,6 +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)
@@ -177,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
@@ -226,8 +244,24 @@ public enum Deernova {
     public static let emptyIconSize: CGFloat = 32
     public static let toastHeight: CGFloat = 36
     public static let bannerRadius: CGFloat = 10
-    public static let sheetRadius: CGFloat = 12
+    public static let menuItemHeight: CGFloat = 28
+    public static let menuItemPaddingX: CGFloat = 8
+    public static let menuFontSize: CGFloat = 14
+    public static let menuPadding: CGFloat = 4
     public static let menuRadius: CGFloat = 8
+    public static let menuOffset: CGFloat = 4
+    public static let menuMinWidth: CGFloat = 160
+    public static let sheetWidthSm: CGFloat = 360
+    public static let sheetWidthMd: CGFloat = 480
+    public static let sheetWidthLg: CGFloat = 720
+    public static let sheetPadding: CGFloat = 20
+    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
@@ -240,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
@@ -289,8 +327,24 @@ public enum Deernova {
     public static let emptyIconSize: CGFloat = 36
     public static let toastHeight: CGFloat = 40
     public static let bannerRadius: CGFloat = 12
-    public static let sheetRadius: CGFloat = 24
+    public static let menuItemHeight: CGFloat = 44
+    public static let menuItemPaddingX: CGFloat = 10
+    public static let menuFontSize: CGFloat = 17
+    public static let menuPadding: CGFloat = 6
     public static let menuRadius: CGFloat = 12
+    public static let menuOffset: CGFloat = 8
+    public static let menuMinWidth: CGFloat = 220
+    public static let sheetWidthSm: CGFloat = 360
+    public static let sheetWidthMd: CGFloat = 540
+    public static let sheetWidthLg: CGFloat = 720
+    public static let sheetPadding: CGFloat = 20
+    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,6 +158,15 @@
   --glass-blur: 16px;
   --glass-saturate: 1.4;
   --content-max: 680px;
+  --form-max: 560px;
+  --wide-max: 1120px;
+  --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;
 }
 
@@ -195,7 +205,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;
@@ -244,8 +258,24 @@
   --empty-icon-size: 32px;
   --toast-height: 36px;
   --banner-radius: 10px;
-  --sheet-radius: 12px;
+  --menu-item-height: 28px;
+  --menu-item-padding-x: 8px;
+  --menu-font-size: 14px;
+  --menu-padding: 4px;
   --menu-radius: 8px;
+  --menu-offset: 4px;
+  --menu-min-width: 160px;
+  --sheet-width-sm: 360px;
+  --sheet-width-md: 480px;
+  --sheet-width-lg: 720px;
+  --sheet-padding: 20px;
+  --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;
@@ -288,7 +318,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;
@@ -337,8 +371,24 @@
     --empty-icon-size: 36px;
     --toast-height: 40px;
     --banner-radius: 12px;
-    --sheet-radius: 24px;
+    --menu-item-height: 44px;
+    --menu-item-padding-x: 10px;
+    --menu-font-size: 17px;
+    --menu-padding: 6px;
     --menu-radius: 12px;
+    --menu-offset: 8px;
+    --menu-min-width: 220px;
+    --sheet-width-sm: 360px;
+    --sheet-width-md: 540px;
+    --sheet-width-lg: 720px;
+    --sheet-padding: 20px;
+    --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;
@@ -381,7 +431,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;
@@ -430,8 +484,24 @@
   --empty-icon-size: 36px;
   --toast-height: 40px;
   --banner-radius: 12px;
-  --sheet-radius: 24px;
+  --menu-item-height: 44px;
+  --menu-item-padding-x: 10px;
+  --menu-font-size: 17px;
+  --menu-padding: 6px;
   --menu-radius: 12px;
+  --menu-offset: 8px;
+  --menu-min-width: 220px;
+  --sheet-width-sm: 360px;
+  --sheet-width-md: 540px;
+  --sheet-width-lg: 720px;
+  --sheet-padding: 20px;
+  --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;
@@ -473,7 +543,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;
@@ -522,8 +596,24 @@
   --empty-icon-size: 40px;
   --toast-height: 40px;
   --banner-radius: 12px;
-  --sheet-radius: 16px;
+  --menu-item-height: 36px;
+  --menu-item-padding-x: 10px;
+  --menu-font-size: 15px;
+  --menu-padding: 6px;
   --menu-radius: 12px;
+  --menu-offset: 8px;
+  --menu-min-width: 200px;
+  --sheet-width-sm: 400px;
+  --sheet-width-md: 560px;
+  --sheet-width-lg: 800px;
+  --sheet-padding: 24px;
+  --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,15 @@
           "comfortable": 52
         },
         "usage": "Web 应用顶栏、侧面板标签头的高度。macOS 用系统工具栏。"
+      },
+      {
+        "name": "grid-gutter",
+        "values": {
+          "desktop": 24,
+          "touch": 16,
+          "comfortable": 32
+        },
+        "usage": "官网和文档 12 栏网格的栏间距。应用里的卡片网格用 card-gap。"
       }
     ]
   },
@@ -1590,11 +1642,131 @@
         }
       ]
     },
+    {
+      "id": "menu",
+      "title": "菜单与下拉",
+      "reference": "references/components/menu.md",
+      "tokens": [
+        {
+          "name": "menu-item-height",
+          "values": {
+            "desktop": 28,
+            "touch": 44,
+            "comfortable": 36
+          },
+          "usage": "菜单项和下拉选项的高度。"
+        },
+        {
+          "name": "menu-item-padding-x",
+          "values": {
+            "desktop": 8,
+            "touch": 10,
+            "comfortable": 10
+          },
+          "usage": "菜单项左右内边距。"
+        },
+        {
+          "name": "menu-font-size",
+          "values": {
+            "desktop": 14,
+            "touch": 17,
+            "comfortable": 15
+          },
+          "usage": "菜单项字号。"
+        },
+        {
+          "name": "menu-padding",
+          "values": {
+            "desktop": 4,
+            "touch": 6,
+            "comfortable": 6
+          },
+          "usage": "菜单面板的内边距，也是分隔线上下的间距。"
+        },
+        {
+          "name": "menu-radius",
+          "values": {
+            "desktop": 8,
+            "touch": 12,
+            "comfortable": 12
+          },
+          "usage": "菜单和 popover 的圆角；菜单项的圆角 = 它减去 menu-padding。"
+        },
+        {
+          "name": "menu-offset",
+          "values": {
+            "desktop": 4,
+            "touch": 8,
+            "comfortable": 8
+          },
+          "usage": "菜单和触发它的控件之间的距离。"
+        },
+        {
+          "name": "menu-min-width",
+          "values": {
+            "desktop": 160,
+            "touch": 220,
+            "comfortable": 200
+          },
+          "usage": "菜单最小宽度；同时不窄于触发器。"
+        },
+        {
+          "name": "menu-max-width",
+          "value": "320px",
+          "usage": "菜单最大宽度；放不下的文字用省略号。"
+        }
+      ]
+    },
     {
       "id": "sheet",
-      "title": "弹窗与底部弹窗",
+      "title": "弹窗、底部弹窗与 popover",
       "reference": "references/components/sheet.md",
       "tokens": [
+        {
+          "name": "sheet-width-sm",
+          "values": {
+            "desktop": 360,
+            "touch": 360,
+            "comfortable": 400
+          },
+          "usage": "确认弹窗、只有一两句话的提示。"
+        },
+        {
+          "name": "sheet-width-md",
+          "values": {
+            "desktop": 480,
+            "touch": 540,
+            "comfortable": 560
+          },
+          "usage": "默认宽度：短表单、选择分享方式这类短任务。"
+        },
+        {
+          "name": "sheet-width-lg",
+          "values": {
+            "desktop": 720,
+            "touch": 720,
+            "comfortable": 800
+          },
+          "usage": "预览、较长的设置，或分两栏的内容。"
+        },
+        {
+          "name": "sheet-padding",
+          "values": {
+            "desktop": 20,
+            "touch": 20,
+            "comfortable": 24
+          },
+          "usage": "弹窗内边距；标题、内容和按钮区都和它对齐。"
+        },
+        {
+          "name": "sheet-margin",
+          "values": {
+            "desktop": 32,
+            "touch": 8,
+            "comfortable": 32
+          },
+          "usage": "弹窗离窗口边缘的最小距离；触控端底部弹窗悬浮时离屏幕边缘的距离。"
+        },
         {
           "name": "sheet-radius",
           "values": {
@@ -1605,13 +1777,92 @@
           "usage": "弹窗和底部弹窗的圆角。"
         },
         {
-          "name": "menu-radius",
+          "name": "sheet-grabber-width",
+          "value": "36px",
+          "usage": "底部弹窗顶部拖拽条的宽度。"
+        },
+        {
+          "name": "sheet-grabber-height",
+          "value": "5px",
+          "usage": "拖拽条的高度。"
+        },
+        {
+          "name": "popover-padding",
+          "values": {
+            "desktop": 12,
+            "touch": 16,
+            "comfortable": 16
+          },
+          "usage": "popover 的内边距；圆角用 menu-radius，宽度不超过 sheet-width-sm。"
+        }
+      ]
+    },
+    {
+      "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": 12,
-            "comfortable": 12
+            "touch": 10,
+            "comfortable": 10
+          },
+          "usage": "tooltip 左右内边距。"
+        },
+        {
+          "name": "tooltip-font-size",
+          "values": {
+            "desktop": 12,
+            "touch": 13,
+            "comfortable": 13
           },
-          "usage": "弹出菜单、popover 的圆角。"
+          "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 刚关闭的这段时间里，移到相邻控件立即显示，不再等待。"
         }
       ]
     },

package/skill/manifest.json

@@ -1,4 +1,4 @@
 {
-  "version": "0.3.1",
-  "sourceHash": "a584ab2e77ab9517da74f2f0d5b16dc45951f4fbc2b2263a27a8981e70278705"
+  "version": "0.3.3",
+  "sourceHash": "2de047daa5254886378ff8fbc726f160de3f3817e9347e52d8a0b0aee55e68dc"
 }

package/skill/references/components/button.md

@@ -9,8 +9,8 @@
 - **主按钮** `is-primary`：`accent` 底、`on-accent` 字。保存、发送、购买这类关键动作，一屏最多一个。
 - **次按钮**（默认）：`fill-selected` 灰底、无描边、无阴影、`ink` 字。半透明的灰底放在任何纸面上都成立。
 - **文字按钮** `is-plain`：无底，`ink-secondary` 字，悬停时出现 `fill-hover`。工具栏和卡片里的次要操作。
-- **危险按钮** `is-danger`：`danger-soft` 底、`danger` 字。只有在最终确认弹窗里，才用实色的危险样式（SwiftUI 的 `role: .destructive`）。
-- **图标按钮** `dn-icon-button`：只有图标，无底，`ink-secondary`，必须有无障碍标签。
+- **危险按钮** `is-danger`：`danger-soft` 底、`danger` 字。只有在最终的[危险确认弹窗](sheet.md)里，才用实色的危险样式 `is-primary is-danger`：`danger` 底、`on-accent` 字（SwiftUI 的 `role: .destructive`）。
+- **图标按钮** `dn-icon-button`：只有图标，无底，`ink-secondary`，必须有无障碍标签；指针端用 [tooltip](tooltip.md) 显示它的名称。
 
 ## 尺寸
 
@@ -82,6 +82,7 @@
 .dn-button.is-plain { background: transparent; color: var(--ink-secondary); }
 .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); }
 
 .dn-button.is-sm { height: var(--button-height-sm); padding: 0 var(--button-padding-x-sm); border-radius: var(--button-radius-sm); font-size: var(--button-font-size-sm); }
 .dn-button.is-lg { height: var(--button-height-lg); padding: 0 var(--button-padding-x-lg); font-size: var(--button-font-size-lg); }

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)。
 - 搜索没有结果时不放按钮，标题写成「没有找到“关键词”」，正文给出修改建议。