@icen.ai/ui 0.5.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/AGENTS.md +262 -0
  2. package/README.md +52 -13
  3. package/dist/base.css +33 -5
  4. package/dist/behaviors/accordion.d.mts +7 -0
  5. package/dist/behaviors/accordion.mjs +37 -11
  6. package/dist/behaviors/ai-chat.d.mts +59 -0
  7. package/dist/behaviors/ai-chat.mjs +580 -0
  8. package/dist/behaviors/ai-composer.d.mts +137 -0
  9. package/dist/behaviors/ai-composer.mjs +2114 -0
  10. package/dist/behaviors/ai-core.d.mts +156 -0
  11. package/dist/behaviors/ai-core.mjs +504 -0
  12. package/dist/behaviors/ai-diff.d.mts +53 -0
  13. package/dist/behaviors/ai-diff.mjs +413 -0
  14. package/dist/behaviors/ai-panel.d.mts +101 -0
  15. package/dist/behaviors/ai-panel.mjs +1087 -0
  16. package/dist/behaviors/ai-provider.d.mts +198 -0
  17. package/dist/behaviors/ai-provider.mjs +1061 -0
  18. package/dist/behaviors/ai-tool.d.mts +26 -0
  19. package/dist/behaviors/ai-tool.mjs +2173 -0
  20. package/dist/behaviors/ai-tools.d.mts +84 -0
  21. package/dist/behaviors/ai-tools.mjs +1762 -0
  22. package/dist/behaviors/back-top.d.mts +20 -0
  23. package/dist/behaviors/back-top.mjs +64 -32
  24. package/dist/behaviors/carousel.d.mts +7 -0
  25. package/dist/behaviors/carousel.mjs +72 -27
  26. package/dist/behaviors/charts.d.mts +296 -0
  27. package/dist/behaviors/charts.mjs +1364 -440
  28. package/dist/behaviors/command-palette.d.mts +42 -0
  29. package/dist/behaviors/command-palette.mjs +167 -27
  30. package/dist/behaviors/context-menu.d.mts +53 -0
  31. package/dist/behaviors/context-menu.mjs +127 -39
  32. package/dist/behaviors/controls.d.mts +59 -0
  33. package/dist/behaviors/controls.mjs +601 -0
  34. package/dist/behaviors/copy.d.mts +7 -0
  35. package/dist/behaviors/copy.mjs +41 -15
  36. package/dist/behaviors/datatable.d.mts +90 -0
  37. package/dist/behaviors/datatable.mjs +279 -53
  38. package/dist/behaviors/date-picker.d.mts +4 -0
  39. package/dist/behaviors/date-picker.mjs +276 -69
  40. package/dist/behaviors/dropdown.d.mts +8 -0
  41. package/dist/behaviors/dropdown.mjs +171 -28
  42. package/dist/behaviors/events.d.mts +330 -0
  43. package/dist/behaviors/events.mjs +208 -0
  44. package/dist/behaviors/input.d.mts +4 -0
  45. package/dist/behaviors/input.mjs +52 -32
  46. package/dist/behaviors/modal.d.mts +30 -0
  47. package/dist/behaviors/modal.mjs +87 -16
  48. package/dist/behaviors/nav.d.mts +7 -0
  49. package/dist/behaviors/nav.mjs +57 -15
  50. package/dist/behaviors/notification.d.mts +188 -0
  51. package/dist/behaviors/notification.mjs +274 -140
  52. package/dist/behaviors/popover.d.mts +82 -0
  53. package/dist/behaviors/popover.mjs +92 -5
  54. package/dist/behaviors/select.d.mts +6 -0
  55. package/dist/behaviors/select.mjs +287 -45
  56. package/dist/behaviors/sidebar.d.mts +7 -0
  57. package/dist/behaviors/sidebar.mjs +44 -13
  58. package/dist/behaviors/slider.d.mts +7 -0
  59. package/dist/behaviors/slider.mjs +55 -43
  60. package/dist/behaviors/split-pane.d.mts +8 -0
  61. package/dist/behaviors/split-pane.mjs +70 -29
  62. package/dist/behaviors/tabs.d.mts +9 -0
  63. package/dist/behaviors/tabs.mjs +102 -26
  64. package/dist/behaviors/tag-input.d.mts +7 -0
  65. package/dist/behaviors/tag-input.mjs +66 -17
  66. package/dist/behaviors/theme.d.mts +36 -0
  67. package/dist/behaviors/theme.mjs +51 -5
  68. package/dist/behaviors/toast.d.mts +48 -0
  69. package/dist/behaviors/toast.mjs +98 -25
  70. package/dist/behaviors/tree.d.mts +7 -0
  71. package/dist/behaviors/tree.mjs +39 -15
  72. package/dist/behaviors/upload.d.mts +4 -0
  73. package/dist/behaviors/upload.mjs +79 -44
  74. package/dist/cli.mjs +1 -1
  75. package/dist/components/ai-chat.css +1037 -0
  76. package/dist/components/ai-chat.mjs +3 -0
  77. package/dist/components/ai-composer.mjs +3 -0
  78. package/dist/components/ai-context.mjs +2 -0
  79. package/dist/components/ai-diff.css +311 -0
  80. package/dist/components/ai-diff.mjs +3 -0
  81. package/dist/components/ai-files.mjs +3 -0
  82. package/dist/components/ai-message.mjs +3 -0
  83. package/dist/components/ai-panel.css +682 -0
  84. package/dist/components/ai-reasoning.mjs +3 -0
  85. package/dist/components/ai-subagent.mjs +2 -0
  86. package/dist/components/ai-todo.mjs +2 -0
  87. package/dist/components/ai-tool-call.mjs +2 -0
  88. package/dist/components/ai-tool.css +532 -0
  89. package/dist/components/ai-usage.mjs +3 -0
  90. package/dist/components/badge.css +5 -9
  91. package/dist/components/breadcrumb.css +0 -36
  92. package/dist/components/btn.css +4 -7
  93. package/dist/components/card.css +3 -6
  94. package/dist/components/chart-bar.css +10 -0
  95. package/dist/components/chart-calendar.mjs +4 -0
  96. package/dist/components/chart-gauge.css +1 -1
  97. package/dist/components/chart-heatmap.css +40 -0
  98. package/dist/components/chart-pie.css +0 -6
  99. package/dist/components/chart-scatter.css +24 -0
  100. package/dist/components/chart-scatter.mjs +4 -0
  101. package/dist/components/charts.css +87 -2
  102. package/dist/components/charts.mjs +1 -0
  103. package/dist/components/command-palette.css +2 -2
  104. package/dist/components/content.css +11 -25
  105. package/dist/components/copy.css +8 -8
  106. package/dist/components/datatable.css +5 -9
  107. package/dist/components/date-picker.css +4 -8
  108. package/dist/components/empty.css +0 -4
  109. package/dist/components/feedback.css +10 -17
  110. package/dist/components/form.css +13 -14
  111. package/dist/components/input.css +2 -2
  112. package/dist/components/layout.css +36 -36
  113. package/dist/components/media.css +12 -8
  114. package/dist/components/menu.css +2 -2
  115. package/dist/components/modal.css +1 -1
  116. package/dist/components/nav.css +11 -6
  117. package/dist/components/notification.css +27 -28
  118. package/dist/components/pagination.css +4 -2
  119. package/dist/components/pagination.mjs +1 -0
  120. package/dist/components/panel.css +16 -16
  121. package/dist/components/pill.css +15 -15
  122. package/dist/components/rating.mjs +1 -0
  123. package/dist/components/segmented.css +14 -6
  124. package/dist/components/segmented.mjs +1 -0
  125. package/dist/components/select.css +79 -24
  126. package/dist/components/sidebar.css +1 -1
  127. package/dist/components/split-pane.css +0 -1
  128. package/dist/components/stat.css +14 -18
  129. package/dist/components/steps.css +15 -5
  130. package/dist/components/steps.mjs +1 -0
  131. package/dist/components/switch.css +11 -13
  132. package/dist/components/switch.mjs +1 -0
  133. package/dist/components/table.css +46 -47
  134. package/dist/components/table.mjs +1 -0
  135. package/dist/components/tabs.css +57 -45
  136. package/dist/components/tag-input.css +5 -10
  137. package/dist/components/toast.css +16 -13
  138. package/dist/components/tooltip.css +2 -2
  139. package/dist/components/upload.css +0 -15
  140. package/dist/index.d.mts +39 -0
  141. package/dist/index.mjs +11243 -3312
  142. package/dist/registry.json +147 -9
  143. package/dist/retro-effects.css +23 -32
  144. package/dist/tokens/colors.css +4 -1
  145. package/dist/tokens/retro-effects.css +23 -32
  146. package/dist/tokens/style-profiles.css +24 -2
  147. package/dist/tokens/typography.css +2 -0
  148. package/dist/tokens.css +30 -3
  149. package/dist/ui.css +3420 -645
  150. package/docs/spec/ai-native.md +662 -0
  151. package/package.json +15 -5
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * 完整契约:
5
5
  * <div class="table-wrap [table-wrap--bordered]">
6
- * <table class="admin-table [--zebra|--compact|--dense] [--sticky-col]">
6
+ * <table class="table [--zebra|--compact|--dense] [--sticky-col]">
7
7
  * <caption class="table-caption">标题说明</caption> ← 可选
8
8
  * <thead>
9
9
  * <tr><th [colspan=rowspan] [data-sort]>列名</th>…</tr>
@@ -23,9 +23,9 @@
23
23
  * </div>
24
24
  *
25
25
  * .table-wrap:窄屏横向滚动(滚动条样式见 base.css);--bordered 加外边框。
26
- * .admin-table--zebra:斑马纹(奇数行底色)。
27
- * .admin-table--compact:紧凑(cell padding 缩小);--dense:极紧凑(行高更紧)。
28
- * .admin-table--sticky-col:首列水平粘滞(配合 td/th .col-fixed,长表横向滚动时保持可见)。
26
+ * .table--zebra:斑马纹(奇数行底色)。
27
+ * .table--compact:紧凑(cell padding 缩小);--dense:极紧凑(行高更紧)。
28
+ * .table--sticky-col:首列水平粘滞(配合 td/th .col-fixed,长表横向滚动时保持可见)。
29
29
  * .row-expand[hidden]:配合 .row-link.is-expanded 控制展开行显隐。
30
30
  */
31
31
 
@@ -38,18 +38,18 @@
38
38
  border: 1px solid var(--token-line-soft);
39
39
  }
40
40
 
41
- .admin-table {
41
+ .table {
42
42
  width: 100%;
43
43
  border-collapse: collapse;
44
44
  font-size: var(--density-font-size-md);
45
45
  font-variant-numeric: tabular-nums;
46
46
  }
47
- .admin-table th,
48
- .admin-table td {
47
+ .table th,
48
+ .table td {
49
49
  padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
50
50
  text-align: left;
51
51
  }
52
- .admin-table th {
52
+ .table th {
53
53
  font-weight: 600;
54
54
  font-size: var(--density-font-size-xs);
55
55
  letter-spacing: 0.05em;
@@ -60,27 +60,27 @@
60
60
  background: var(--token-bg-soft);
61
61
  position: sticky;
62
62
  top: 0;
63
- z-index: 1;
63
+ z-index: var(--z-raised);
64
64
  }
65
- .admin-table td {
65
+ .table td {
66
66
  border-bottom: 1px solid var(--token-line-soft);
67
67
  vertical-align: middle;
68
68
  color: var(--token-text);
69
69
  }
70
- .admin-table tbody tr:last-child td { border-bottom: 0; }
71
- .admin-table tbody tr {
70
+ .table tbody tr:last-child td { border-bottom: 0; }
71
+ .table tbody tr {
72
72
  transition: background-color var(--icen-tx-fast);
73
73
  }
74
- .admin-table tbody tr:hover {
74
+ .table tbody tr:hover {
75
75
  background: var(--token-surface-strong);
76
76
  }
77
- .admin-table tbody tr.row-link {
77
+ .table tbody tr.row-link {
78
78
  cursor: pointer;
79
79
  }
80
- .admin-table tbody tr.is-selected {
80
+ .table tbody tr.is-selected {
81
81
  background: var(--token-accent-subtle);
82
82
  }
83
- .admin-table tfoot td {
83
+ .table tfoot td {
84
84
  border-top: 1px solid var(--token-line);
85
85
  border-bottom: 0;
86
86
  font-weight: 500;
@@ -88,51 +88,50 @@
88
88
  }
89
89
 
90
90
  /* 紧凑变体 */
91
- .admin-table--compact th,
92
- .admin-table--compact td {
91
+ .table--compact th,
92
+ .table--compact td {
93
93
  padding: var(--density-space-xs) var(--density-space-sm);
94
94
  }
95
- .admin-table--dense th,
96
- .admin-table--dense td {
95
+ .table--dense th,
96
+ .table--dense td {
97
97
  padding: 4px var(--density-space-xs);
98
98
  font-size: var(--density-font-size-sm);
99
99
  }
100
100
 
101
101
  /* 右对齐数字列 */
102
- .admin-table td.num {
102
+ .table td.num {
103
103
  text-align: right;
104
104
  font-variant-numeric: tabular-nums lining-nums;
105
105
  }
106
106
 
107
- /* 操作列 */
108
- .admin-table .ops {
107
+ /* 操作列(.btn-sm 必伴 .btn,无需单独列) */
108
+ .table .ops {
109
109
  white-space: nowrap;
110
110
  text-align: right;
111
111
  }
112
- .admin-table .ops .btn,
113
- .admin-table .ops .btn-sm {
112
+ .table .ops .btn {
114
113
  margin-left: var(--density-space-xs);
115
114
  }
116
115
 
117
116
  /* 可排序表头(使用方 data-sort 指示) */
118
- .admin-table th[data-sort] {
117
+ .table th[data-sort] {
119
118
  cursor: pointer;
120
119
  user-select: none;
121
120
  }
122
- .admin-table th[data-sort]::after {
121
+ .table th[data-sort]::after {
123
122
  content: '↕';
124
123
  margin-left: var(--density-space-xs);
125
124
  color: var(--token-text-faint);
126
125
  opacity: 0.6;
127
126
  }
128
- .admin-table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
129
- .admin-table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
127
+ .table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
128
+ .table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
130
129
 
131
130
  /* ── 斑马纹 ── */
132
- .admin-table--zebra tbody tr:nth-child(odd) {
131
+ .table--zebra tbody tr:nth-child(odd) {
133
132
  background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
134
133
  }
135
- .admin-table--zebra tbody tr:hover {
134
+ .table--zebra tbody tr:hover {
136
135
  background: var(--token-surface-strong);
137
136
  }
138
137
 
@@ -147,30 +146,30 @@
147
146
  }
148
147
 
149
148
  /* ── 首列粘滞(长表横向滚动时保持可见) ── */
150
- .admin-table--sticky-col th:first-child,
151
- .admin-table--sticky-col .col-fixed {
149
+ .table--sticky-col th:first-child,
150
+ .table--sticky-col .col-fixed {
152
151
  position: sticky;
153
152
  left: 0;
154
- z-index: 2;
153
+ z-index: calc(var(--z-raised) + 1);
155
154
  background: var(--token-bg-soft);
156
- box-shadow: 2px 0 4px color-mix(in srgb, var(--token-shadow-card-base, rgba(0,0,0,0.06)) 40%, transparent);
155
+ box-shadow: 2px 0 4px color-mix(in srgb, var(--token-text) 5%, transparent);
157
156
  }
158
- .admin-table--sticky-col tbody td.col-fixed {
157
+ .table--sticky-col tbody td.col-fixed {
159
158
  background: var(--token-surface);
160
159
  }
161
- .admin-table--sticky-col tbody tr:hover td.col-fixed {
160
+ .table--sticky-col tbody tr:hover td.col-fixed {
162
161
  background: var(--token-surface-strong);
163
162
  }
164
163
 
165
164
  /* ── 展开行 ── */
166
- .admin-table .row-expand > td {
165
+ .table .row-expand > td {
167
166
  padding: 0 var(--density-space-md);
168
167
  background: var(--token-bg-soft);
169
168
  border-bottom: 1px solid var(--token-line-soft);
170
169
  font-size: var(--density-font-size-sm);
171
170
  color: var(--token-text-muted);
172
171
  }
173
- .admin-table .row-expand[hidden] { display: none; }
172
+ .table .row-expand[hidden] { display: none; }
174
173
  /* 展开行的内容容器(使用方可加 padding/动画) */
175
174
  .row-expand-content {
176
175
  padding: var(--density-space-sm) 0;
@@ -182,22 +181,22 @@
182
181
  }
183
182
 
184
183
  /* ── 列宽工具类 ── */
185
- .admin-table .col-narrow { width: 80px; }
186
- .admin-table .col-wide { width: 240px; }
187
- .admin-table .col-action { width: 1%; white-space: nowrap; }
184
+ .table .col-narrow { width: 80px; }
185
+ .table .col-wide { width: 240px; }
186
+ .table .col-action { width: 1%; white-space: nowrap; }
188
187
 
189
188
  /* ── 行状态色 ── */
190
- .admin-table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
191
- .admin-table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
192
- .admin-table tbody tr.row-error { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
189
+ .table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
190
+ .table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
191
+ .table tbody tr.row-error { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
193
192
 
194
193
  /* ── 粘滞表头阴影提示 ── */
195
- .admin-table thead th {
194
+ .table thead th {
196
195
  box-shadow: 0 1px 0 var(--token-line);
197
196
  }
198
197
 
199
198
  /* ── 表头分组(rowspan/colspan 样式) ── */
200
- .admin-table th[rowspan] { vertical-align: bottom; }
199
+ .table th[rowspan] { vertical-align: bottom; }
201
200
 
202
201
  @media (prefers-reduced-motion: reduce) {
203
202
  .row-expand-content { animation: none; }
@@ -1,2 +1,3 @@
1
1
  // @icen.ai/ui — kit: table(CSS + behavior 一行入口;构建产物,勿手改)
2
2
  import './table.css';
3
+ export { initTableSort } from '../behaviors/controls.mjs';
@@ -2,20 +2,19 @@
2
2
  * @icen.ai/ui — Component: tabs(分区导航 / 子导航)
3
3
  *
4
4
  * 完整契约:
5
- * <div class="page-tabs" role="tablist"> ← 页面内分区
6
- * <button class="page-tab [.active]" role="tab" [aria-selected="true"]>…</button>
5
+ * <div class="tabs" role="tablist"> ← 页面内分区
6
+ * <button class="page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
7
7
  * </div>
8
8
  *
9
- * <nav class="admin-tabs" role="navigation"> ← 顶部子导航(a 链接)
10
- * <a class="[.active]" [aria-current="page"] href="…">…</a>
9
+ * <nav class="tabs" role="navigation"> ← 顶部子导航(a 链接)
10
+ * <a class="[.is-active]" [aria-current="page"] href="…">…</a>
11
11
  * </nav>
12
12
  *
13
13
  * 与 behaviors/tabs 配套:[data-tabs] > [data-tab] + [data-tab-panel],行为层维护 aria。
14
- * 窄屏换行不滚动(CLAUDE.md 纪律:tab 条永不出现滚动条)。
14
+ * 窄屏换行不滚动(纪律:tab 条永不出现滚动条,一律 flex-wrap: wrap)。
15
15
  */
16
16
 
17
- .page-tabs,
18
- .admin-tabs {
17
+ .tabs {
19
18
  display: flex;
20
19
  gap: 2px;
21
20
  flex-wrap: wrap;
@@ -47,14 +46,14 @@
47
46
  border-radius: var(--radius-sm);
48
47
  box-shadow: var(--icen-ring);
49
48
  }
50
- .page-tab.active,
49
+ .page-tab.is-active,
51
50
  .page-tab[aria-selected='true'] {
52
51
  color: var(--token-accent);
53
52
  border-bottom-color: var(--token-accent);
54
53
  font-weight: 700;
55
54
  }
56
55
 
57
- .admin-tabs a {
56
+ .tabs a {
58
57
  padding: var(--density-space-sm) var(--density-space-md);
59
58
  font-size: var(--density-font-size-md);
60
59
  color: var(--token-text-muted);
@@ -66,44 +65,44 @@
66
65
  color var(--icen-tx-fast),
67
66
  border-color var(--icen-tx-fast);
68
67
  }
69
- .admin-tabs a:hover {
68
+ .tabs a:hover {
70
69
  color: var(--token-accent);
71
70
  text-decoration: none;
72
71
  }
73
- .admin-tabs a:focus-visible {
72
+ .tabs a:focus-visible {
74
73
  outline: none;
75
74
  border-radius: var(--radius-sm);
76
75
  box-shadow: var(--icen-ring);
77
76
  }
78
- .admin-tabs a.active,
79
- .admin-tabs a[aria-current='page'] {
77
+ .tabs a.is-active,
78
+ .tabs a[aria-current='page'] {
80
79
  color: var(--token-accent);
81
80
  border-bottom-color: var(--token-accent);
82
81
  }
83
82
 
84
- /* 卡片变体(可选 .page-tabs--cards):tab 变成 pill,没有底边线 */
85
- .page-tabs--cards {
83
+ /* 卡片变体(可选 .tabs--cards):tab 变成 pill,没有底边线 */
84
+ .tabs--cards {
86
85
  border-bottom: 0;
87
86
  gap: var(--density-space-xs);
88
87
  margin-bottom: var(--density-space-md);
89
88
  }
90
- .page-tabs--cards .page-tab {
89
+ .tabs--cards .page-tab {
91
90
  padding: var(--density-space-xs) var(--density-space-md);
92
91
  border: 1px solid var(--token-outline-soft);
93
92
  border-radius: var(--radius-full);
94
93
  margin-bottom: 0;
95
94
  }
96
- .page-tabs--cards .page-tab.active,
97
- .page-tabs--cards .page-tab[aria-selected='true'] {
95
+ .tabs--cards .page-tab.is-active,
96
+ .tabs--cards .page-tab[aria-selected='true'] {
98
97
  background: var(--token-accent);
99
- color: var(--token-on-accent, #fff);
98
+ color: var(--token-on-accent);
100
99
  border-color: var(--token-accent);
101
100
  font-weight: 500;
102
101
  }
103
102
 
104
103
  /* 等宽变体:tab 平均占满容器 */
105
- .page-tabs--equal .page-tab,
106
- .admin-tabs--equal a {
104
+ .tabs--equal .page-tab,
105
+ .tabs--equal a {
107
106
  flex: 1;
108
107
  text-align: center;
109
108
  }
@@ -111,11 +110,11 @@
111
110
  /* ── 增强 ── */
112
111
 
113
112
  /* 尺寸变体 */
114
- .page-tabs--sm .page-tab {
113
+ .tabs--sm .page-tab {
115
114
  padding: var(--density-space-xs) var(--density-space-sm);
116
115
  font-size: var(--density-font-size-sm);
117
116
  }
118
- .page-tabs--lg .page-tab {
117
+ .tabs--lg .page-tab {
119
118
  padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
120
119
  font-size: var(--density-font-size-lg);
121
120
  }
@@ -137,7 +136,7 @@
137
136
  height: 18px;
138
137
  padding: 0 5px;
139
138
  margin-left: var(--density-space-xs);
140
- font-size: 10px;
139
+ font-size: var(--density-font-size-2xs);
141
140
  font-weight: 600;
142
141
  color: var(--token-text-faint);
143
142
  background: var(--token-fill-2);
@@ -145,10 +144,10 @@
145
144
  font-variant-numeric: tabular-nums;
146
145
  line-height: 1;
147
146
  }
148
- .page-tab.active .page-tab-badge,
147
+ .page-tab.is-active .page-tab-badge,
149
148
  .page-tab[aria-selected='true'] .page-tab-badge {
150
149
  background: var(--token-accent);
151
- color: var(--token-on-accent, #fff);
150
+ color: var(--token-on-accent);
152
151
  }
153
152
 
154
153
  /* 可关闭 tab */
@@ -175,7 +174,7 @@
175
174
  .page-tab-close svg { width: 10px; height: 10px; }
176
175
 
177
176
  /* 分段式 tab(替代底边线,用 segmented 视觉) */
178
- .page-tabs--segment {
177
+ .tabs--segment {
179
178
  display: inline-flex;
180
179
  border-bottom: none;
181
180
  gap: 2px;
@@ -185,50 +184,63 @@
185
184
  border-radius: var(--radius-md);
186
185
  box-shadow: var(--token-shadow-inset);
187
186
  }
188
- .page-tabs--segment .page-tab {
187
+ .tabs--segment .page-tab {
189
188
  border-bottom: none;
190
189
  margin-bottom: 0;
191
190
  padding: var(--density-space-xs) var(--density-space-md);
192
191
  border-radius: var(--radius-sm);
193
192
  }
194
- .page-tabs--segment .page-tab.active,
195
- .page-tabs--segment .page-tab[aria-selected='true'] {
193
+ .tabs--segment .page-tab.is-active,
194
+ .tabs--segment .page-tab[aria-selected='true'] {
196
195
  background: var(--token-accent);
197
- color: var(--token-on-accent, #fff);
196
+ color: var(--token-on-accent);
198
197
  border-bottom-color: transparent;
199
198
  font-weight: 500;
200
199
  }
201
200
 
202
201
  /* 垂直 tab(侧栏式) */
203
- .page-tabs--vertical {
202
+ .tabs--vertical {
204
203
  flex-direction: column;
205
204
  border-bottom: none;
206
205
  border-right: 1px solid var(--token-line-soft);
207
206
  margin-bottom: 0;
208
207
  min-width: 160px;
209
208
  }
210
- .page-tabs--vertical .page-tab {
209
+ .tabs--vertical .page-tab {
211
210
  border-bottom: none;
212
211
  border-right: 2px solid transparent;
213
212
  margin-bottom: 0;
214
213
  margin-right: -1px;
215
214
  }
216
- .page-tabs--vertical .page-tab.active,
217
- .page-tabs--vertical .page-tab[aria-selected='true'] {
215
+ .tabs--vertical .page-tab.is-active,
216
+ .tabs--vertical .page-tab[aria-selected='true'] {
218
217
  border-right-color: var(--token-accent);
219
218
  border-bottom-color: transparent;
220
219
  }
221
220
 
222
- /* tab 溢出渐变提示(窄屏溢出时右侧渐变遮罩——纯视觉提示,不违反"不滚动"纪律,仍 flex-wrap) */
223
- .page-tabs--scroll {
224
- flex-wrap: nowrap;
225
- overflow-x: auto;
226
- overflow-y: hidden;
227
- scrollbar-width: none;
228
- -ms-overflow-style: none;
229
- }
230
- .page-tabs--scroll::-webkit-scrollbar { display: none; }
221
+ @media (prefers-reduced-motion: reduce) {
222
+ .page-tab, .tabs a, .page-tab-close { transition: none; }
223
+ }
231
224
 
225
+ /* ── 指示条([data-tabs-ink],与 behaviors/tabs 配套;本节为追加)── */
226
+ /* tablist(.tabs)挂 data-tabs-ink 时,行为层创建并移动 .tabs-ink:
227
+ 宽 / translateX 由 JS 内联写入(布局定位,同 popover 模式);
228
+ 此处只负责视觉(高度 / 圆角 / 背景)与位移过渡(--duration / --ease token)。 */
229
+ .tabs[data-tabs-ink] {
230
+ position: relative;
231
+ }
232
+ .tabs-ink {
233
+ position: absolute;
234
+ bottom: -1px; /* 盖在容器 1px 底边线上,与活动 tab 的 2px 下划线同高 */
235
+ left: 0;
236
+ height: 2px;
237
+ border-radius: var(--radius-full);
238
+ background: var(--token-accent);
239
+ pointer-events: none;
240
+ transition:
241
+ width var(--duration-normal) var(--ease-out),
242
+ transform var(--duration-normal) var(--ease-out);
243
+ }
232
244
  @media (prefers-reduced-motion: reduce) {
233
- .page-tab, .admin-tabs a, .page-tab-close { transition: none; }
245
+ .tabs-ink { transition: none; }
234
246
  }
@@ -40,7 +40,7 @@
40
40
  .tag-input.is-max,
41
41
  .tag-input.is-max:focus-within {
42
42
  border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
43
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--token-warning) 14%, transparent);
43
+ box-shadow: var(--icen-ring-warning);
44
44
  }
45
45
  .tag-input.is-disabled,
46
46
  .tag-input[aria-disabled='true'],
@@ -70,12 +70,7 @@
70
70
  max-width: 100%;
71
71
  animation: tag-pop var(--icen-tx-fast);
72
72
  }
73
- .tag-chip-label {
74
- white-space: nowrap;
75
- overflow: hidden;
76
- text-overflow: ellipsis;
77
- max-width: 200px;
78
- }
73
+ /* readonly 变体(消费方手写标记,behavior 不产出) */
79
74
  .tag-chip--readonly { background: var(--token-fill-2); color: var(--token-text-muted); }
80
75
 
81
76
  @keyframes tag-pop {
@@ -98,7 +93,7 @@
98
93
  cursor: pointer;
99
94
  border-radius: var(--radius-full);
100
95
  color: inherit;
101
- font-size: 11px;
96
+ font-size: var(--density-font-size-xs);
102
97
  line-height: 1;
103
98
  opacity: 0.7;
104
99
  transition:
@@ -109,7 +104,7 @@
109
104
  .tag-chip-x:hover {
110
105
  opacity: 1;
111
106
  background: color-mix(in srgb, currentColor 18%, transparent);
112
- color: var(--token-on-accent, #fff);
107
+ color: var(--token-on-accent);
113
108
  }
114
109
  .tag-chip-x:focus-visible {
115
110
  outline: none;
@@ -135,7 +130,7 @@
135
130
 
136
131
  /* 重复值抖动反馈(behavior 短暂挂 is-shake) */
137
132
  .tag-input.is-shake {
138
- animation: tag-shake 0.32s var(--ease-out);
133
+ animation: tag-shake var(--tag-shake-duration, 0.32s) var(--ease-out);
139
134
  }
140
135
  @keyframes tag-shake {
141
136
  0%, 100% { transform: translateX(0); }
@@ -5,7 +5,7 @@
5
5
  *
6
6
  * 完整契约:
7
7
  * <div class="toast-container" role="status" aria-live="polite">
8
- * <div class="toast [ok|err|warn]" role="status|alert">
8
+ * <div class="toast [toast--success|toast--error|toast--warning|toast--info]" role="status|alert">
9
9
  * <span class="toast-msg">文本</span>
10
10
  * <button class="toast-action">撤销</button> ← 可选 action
11
11
  * </div>
@@ -28,6 +28,8 @@
28
28
 
29
29
  .toast {
30
30
  pointer-events: auto;
31
+ position: relative;
32
+ overflow: hidden;
31
33
  display: inline-flex;
32
34
  align-items: center;
33
35
  gap: var(--density-space-sm);
@@ -45,9 +47,10 @@
45
47
  }
46
48
 
47
49
  /* 语义色:左缘 3px 强调 */
48
- .toast.ok { border-left-color: var(--token-success); }
49
- .toast.err { border-left-color: var(--token-error); }
50
- .toast.warn { border-left-color: var(--token-warning); }
50
+ .toast--success { border-left-color: var(--token-success); }
51
+ .toast--error { border-left-color: var(--token-error); }
52
+ .toast--warning { border-left-color: var(--token-warning); }
53
+ .toast--info { border-left-color: var(--token-info); }
51
54
 
52
55
  .toast-msg {
53
56
  flex: 1;
@@ -88,9 +91,10 @@
88
91
  color: var(--token-text-faint);
89
92
  }
90
93
  .toast-icon svg { width: 16px; height: 16px; }
91
- .toast.ok .toast-icon { color: var(--token-success); }
92
- .toast.err .toast-icon { color: var(--token-error); }
93
- .toast.warn .toast-icon { color: var(--token-warning); }
94
+ .toast--success .toast-icon { color: var(--token-success); }
95
+ .toast--error .toast-icon { color: var(--token-error); }
96
+ .toast--warning .toast-icon { color: var(--token-warning); }
97
+ .toast--info .toast-icon { color: var(--token-info); }
94
98
 
95
99
  /* 关闭按钮 */
96
100
  .toast-close {
@@ -149,16 +153,15 @@
149
153
  transform-origin: left;
150
154
  animation: toast-countdown linear forwards;
151
155
  }
152
- .toast.ok .toast-progress-fill { background: var(--token-success); }
153
- .toast.err .toast-progress-fill { background: var(--token-error); }
154
- .toast.warn .toast-progress-fill { background: var(--token-warning); }
156
+ .toast--success .toast-progress-fill { background: var(--token-success); }
157
+ .toast--error .toast-progress-fill { background: var(--token-error); }
158
+ .toast--warning .toast-progress-fill { background: var(--token-warning); }
159
+ .toast--info .toast-progress-fill { background: var(--token-info); }
155
160
  @keyframes toast-countdown {
156
161
  from { transform: scaleX(1); }
157
162
  to { transform: scaleX(0); }
158
163
  }
159
164
 
160
- .toast { position: relative; overflow: hidden; }
161
-
162
165
  /* 容器定位变体 */
163
166
  .toast-container[data-position='top-left'] {
164
167
  right: auto;
@@ -191,7 +194,7 @@
191
194
  align-items: center;
192
195
  }
193
196
 
194
- .toast.leaving {
197
+ .toast.is-leaving {
195
198
  opacity: 0;
196
199
  transform: translateY(8px);
197
200
  transition:
@@ -7,7 +7,7 @@
7
7
  * 无障碍:键盘 :focus-visible 立即出现(无延迟),鼠标 hover 延迟 400ms。
8
8
  */
9
9
 
10
- [data-tooltip] { position: relative; }
10
+ [data-tooltip] { position: relative; --tooltip-delay: 400ms; }
11
11
 
12
12
  [data-tooltip]::after {
13
13
  content: attr(data-tooltip);
@@ -32,7 +32,7 @@
32
32
  transition:
33
33
  opacity var(--icen-tx-fast),
34
34
  transform var(--icen-tx-fast);
35
- transition-delay: 400ms;
35
+ transition-delay: var(--tooltip-delay);
36
36
 
37
37
  /* 默认:上方、水平居中 */
38
38
  bottom: calc(100% + 6px);
@@ -195,21 +195,6 @@
195
195
  box-shadow: var(--icen-ring);
196
196
  }
197
197
 
198
- /* 进度条(behavior 可选注入 .upload-list-item-progress) */
199
- .upload-list-item-progress {
200
- height: 2px;
201
- width: 100%;
202
- background: var(--token-fill-2);
203
- border-radius: var(--radius-full);
204
- overflow: hidden;
205
- margin-top: 2px;
206
- }
207
- .upload-list-item-progress-bar {
208
- height: 100%;
209
- background: var(--token-accent);
210
- border-radius: var(--radius-full);
211
- transition: width var(--icen-tx-normal) var(--ease-out);
212
- }
213
198
  .upload-list-item.is-error {
214
199
  border-color: var(--token-error);
215
200
  }
@@ -0,0 +1,39 @@
1
+ export { PRESETS, STORAGE_KEY, STYLES, ThemeState, applyTheme, getDefaultTheme, getTheme, initTheme, listThemePresets, registerThemePreset, setStyle, setTheme, toggleDark } from './behaviors/theme.js';
2
+ export { IcenEventMap, IcenGestureDetail, IcenGestureEvent, IcenListenOptions, IcenPolicy, destroyGestures, emitIcen, getEventPolicy, initGestures, onIcen, resetEventPolicies, setEventPolicy } from './behaviors/events.js';
3
+ export { ToastConfig, ToastHandle, ToastKind, ToastOptions, toast } from './behaviors/toast.js';
4
+ export { initTabs } from './behaviors/tabs.js';
5
+ export { initCopy } from './behaviors/copy.js';
6
+ export { initInput } from './behaviors/input.js';
7
+ export { initPagination, initRating, initSegmented, initStepper, initSteps, initSwitch, initTableSort } from './behaviors/controls.js';
8
+ export { initSelect } from './behaviors/select.js';
9
+ export { initSlider } from './behaviors/slider.js';
10
+ export { initTagInput } from './behaviors/tag-input.js';
11
+ export { initUpload } from './behaviors/upload.js';
12
+ export { FOCUSABLE, ModalOpenOptions, closeModal, initModal, openModal } from './behaviors/modal.js';
13
+ export { initDropdown } from './behaviors/dropdown.js';
14
+ export { ContextMenuEntry, ContextMenuHeader, ContextMenuItem, ContextMenuOptions, ContextMenuSeparator, closeContextMenu, closeMenu, emitMenuSelect, initContextMenu, openContextMenu, registerContextMenu } from './behaviors/context-menu.js';
15
+ export { OpenPopoverOptions, PanelSizing, PopoverAlign, PopoverLayout, PopoverLayoutOptions, PopoverRect, PopoverSide, PopoverViewport, applyPanelSizing, closePopover, computePopoverLayout, openPopover, readPanelSizing, resolvePanelSizing, sizingToLayout } from './behaviors/popover.js';
16
+ export { initAccordion } from './behaviors/accordion.js';
17
+ export { initTree } from './behaviors/tree.js';
18
+ export { initCarousel } from './behaviors/carousel.js';
19
+ export { ChartCalendarOptions, ChartChromeOptions, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartI18nLabels, ChartLineOptions, ChartMarkData, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, HeatmapDatum, RadarSeries, bindChartEvents, chartFormatValue, inferChartType, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderHBar, renderHeatmap, renderLine, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.js';
20
+ export { initNav } from './behaviors/nav.js';
21
+ export { initSidebar } from './behaviors/sidebar.js';
22
+ export { NotificationAction, NotificationCenterHandle, NotificationConfig, NotificationConfirmOptions, NotificationHandle, NotificationKind, NotificationOptions, NotificationPushInput, NotificationRecord, NotificationUpdatePatch, createNotificationCenter, initNotification, notify } from './behaviors/notification.js';
23
+ export { initBackTop } from './behaviors/back-top.js';
24
+ export { CommandPaletteCommand, CommandPaletteOpenOptions, closeCommandPalette, initCommandPalette, openCommandPalette } from './behaviors/command-palette.js';
25
+ export { initDatePicker } from './behaviors/date-picker.js';
26
+ export { initSplitPane } from './behaviors/split-pane.js';
27
+ export { TableColumn, TableHandle, TableOptions, createTable } from './behaviors/datatable.js';
28
+ export { AI_STATUSES, AiAudioPart, AiContent, AiContentPart, AiFilePart, AiImagePart, AiKindDef, AiKindTint, AiMediaPart, AiResourceLinkPart, AiStatus, AiTextPart, AiToolCallModel, AiUsage, AiVideoPart, addUsage, aiContentUrl, aiStatusLabel, contentToText, contextEstimate, estimateTokens, formatDuration, formatTokens, getAiKind, h, inferKind, isAiContentPart, normalizeContentParts, normalizeMcpContent, normalizeToolCall, normalizeUsage, registerAiKind, svgIcon } from './behaviors/ai-core.js';
29
+ export { AiMessageHandle, AiMessageModel, AiStreamHandle, createAiStream, initAiChat, renderAiContentPart, renderAiMessage } from './behaviors/ai-chat.js';
30
+ export { AiComposerBindOpts, AiComposerBinding, AiComposerCommand, AiComposerCurrentModel, AiComposerRefDef, AiComposerRefKind, AiComposerRefSource, AiProviderModelOption, AiProviderOption, bindComposer, initAiComposer, registerRefKind, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage } from './behaviors/ai-composer.js';
31
+ export { AiSubagentHandle, AiToolCallHandle, initAiSubagent, initAiTool, renderAiSubagent, renderAiToolCall } from './behaviors/ai-tool.js';
32
+ export { AiDiffFile, AiDiffFileStatus, AiDiffHunk, AiDiffLine, AiDiffModel, initAiDiff, parseUnifiedDiff, renderAiDiff } from './behaviors/ai-diff.js';
33
+ export { AiAuditRenderOpts, AiContextFile, AiContextMcpServer, AiContextModel, AiContextSkill, AiTodoItem, AiUsageRenderOpts, AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing } from './behaviors/ai-panel.js';
34
+ export { AiAuditEntry, AiAuditTotals, AiAuditor, AiAuditorOptions, AiChatMessage, AiChatRequest, AiChatResult, AiChatRole, AiClient, AiClientConfig, AiClientOptions, AiDoneEventDetail, AiPricing, AiProviderDef, AiProviderError, AiProviderModel, AiStreamChunk, AiStreamSession, createAiAuditor, createAiClient, estimateCost, getAiProvider, listAiProviders, registerAiProvider } from './behaviors/ai-provider.js';
35
+ export { AiToolArea, AiToolAreaOptions, AiToolDef, AiToolRecord, aiToolsManifest, aiToolsToMcp, aiToolsToOpenAI, createAiToolArea, getAiTool, listAiTools, parseAiToolArgs, registerAiTool, unregisterAiTool } from './behaviors/ai-tools.js';
36
+
37
+ declare const VERSION: string;
38
+
39
+ export { VERSION };