✨ feat(vscode): 代码阅读的 React 组件卡片：原子图标，名称后面跟具名导出 / 默认导出 / 客户端组件 / 记忆化 / 转发 ref 小标签，属性表按属性一行（类型取字段、默认值、必填、说明，来自 XxxProps 可点，导入的类型经工作区索引查），"use client" 和组件上的 JSDoc 不再单独成块

vscode/src/codeReader/contract.ts

@@ -545,18 +545,30 @@ export type TokenRole
  */
 export interface Segment { text: string, role: TokenRole, offset?: number, reference?: RuleReference, color?: ThemeColor, refers?: SourceRange }
 
-/** 框的样式，决定框头的图标和框的颜色：'iteration' 是写在表达式里的遍历，图标、颜色同「循环」块。 */
-export type GroupStyle = 'iteration'
+/**
+ * 框的样式，决定框头的图标和框的颜色：
+ * - iteration：写在表达式里的遍历（渲染大纲里 `.map` 的「对 … 的每一项」也是），图标、颜色同「循环」块；
+ * - condition：按条件（渲染大纲里 `cond &&` 的「当 … 时」、三元的「如果 …」），图标、颜色同「条件」块；
+ * - branch：条件的一支（「是」「否」「否则」），颜色同「条件」块，不带图标；
+ * - skip：这个条件下不渲染（提前 `return null`），图标、颜色同「返回」块；
+ * - tag：小标签（名称后面的「具名导出」、属性名后面的「回调」），只有框头的字，颜色是 SegmentGroup.color；
+ * - classes：收起来的一串类名（「样式 N 个类」），中性色，点开、悬停看 SegmentGroup.detail。
+ */
+export type GroupStyle = 'iteration' | 'condition' | 'branch' | 'skip' | 'tag' | 'classes'
 
 /**
- * 框起来的一组词：译文里自成一体的一段（写在表达式里的遍历），预览把它画成嵌在前后文字里的一个小框，框头是图标和 label。
- * 框里的词照样带源码下标，还能再套框。
+ * 框起来的一组词：译文里自成一体的一段（写在表达式里的遍历、渲染大纲一行前面的条件），预览把它画成嵌在前后文字里的一个小框，
+ * 框头是图标和 label。框里的词照样带源码下标，还能再套框。
  */
 export interface SegmentGroup {
   style: GroupStyle
-  /** 框头的文字（遍历的结果：生成器 / 列表 …），翻译插件给。 */
+  /** 框头的文字（遍历的结果：生成器 / 列表 …，小标签的字），翻译插件、库规则给；只有图标、没有字时是空的。 */
   label: string
   segments: Inline[]
+  /** 这个框自己的颜色（暗色、亮色主题各一个），盖过样式的颜色：tag 按标签的意思上色。 */
+  color?: ThemeColor
+  /** 点开、悬停时看的全文，一行一条：classes 的全部类名（按条件切换的写成「条件 时：类」）。 */
+  detail?: string
 }
 
 /** 译文里的一段：着色的词，或框起来的一组词。 */
@@ -722,7 +734,7 @@ export interface ThemeColor { dark: string, light: string }
 /**
  * 种类图标：插件自己定义的一组 lucide 图标（https://lucide.dev/icons 上的 kebab-case 名字）。前 26 个给内置种类（几种共用一个：
  * 命令、管道、执行共用 square-terminal，解释器、解析指令共用 terminal，选项、设置共用 sliders-horizontal，字段、标签共用 tag），
- * 后面的给库规则的种类；库规则的种类（KindBadge.icon）只能从这组里挑，要新图标就加进这组（webview 的 kindIcons.tsx 同时给它配上图标），
+ * 后面的给库规则的种类（React 组件的原子、副作用的闪电、事件处理的点击手势也在里面）；库规则的种类（KindBadge.icon）只能从这组里挑，要新图标就加进这组（webview 的 kindIcons.tsx 同时给它配上图标），
  * 没有按任意名字找图标的路。
  */
 export const KIND_ICON_NAMES = [
@@ -758,6 +770,9 @@ export const KIND_ICON_NAMES = [
   'calendar-clock',
   'globe',
   'network',
+  'atom',
+  'zap',
+  'mouse-pointer-click',
 ] as const
 
 export type KindIconName = (typeof KIND_ICON_NAMES)[number]
@@ -767,9 +782,16 @@ export interface KindBadge { label: string, color: ThemeColor, icon: KindIconNam
 
 /**
  * 库规则认领一块后给出的替身，预览里它代替原来那块，下面挂着原块留下的子块：
- * 规则自己的卡片（RuleCard），或认成契约里现成的一种属性表块（RuleFacts）。
+ * 规则自己的卡片（RuleCard），或认成契约里现成的一种属性表块（RuleFacts）；
+ * 这块讲在了别的卡片里时是略去它（RuleOmit）。
  */
-export type RuleBlock = RuleCard | RuleFacts
+export type RuleBlock = RuleCard | RuleFacts | RuleOmit
+
+/**
+ * 这块讲在了别的卡片里，不再单独成块：React 文件开头的 "use client" 讲成了组件卡片上的「客户端组件」标签，
+ * 组件上面的 JSDoc 讲成了卡片的「说明」。预览不画它；它不能有子块（有子块时宿主当规则没认）。
+ */
+export interface RuleOmit { omit: true }
 
 /** 规则自己的卡片：一张属性表，种类的图标、颜色、名字和每一行都由规则给（用词归规则）。 */
 export interface RuleCard {
@@ -884,7 +906,8 @@ export interface LibraryRule {
   languageIds: string[]
   /**
    * 关心的库（模块名）：这份源码里有一条导入（ImportFacts.sources，去掉引号）等于它、或以「它.」「它/」开头（它的子模块）才启用。
-   * 宿主按语言插件给的导入判断，规则不用自己读导入语句。
+   * 宿主按语言插件给的导入判断，规则不用自己读导入语句。空数组是不看导入、languageIds 里这几种语言的源码都启用
+   * （React 组件：新的 JSX 写法不用导入 react，TSX / JSX 文件里就是 React 组件）。
    */
   libraries: string[]
   /**