@icen.ai/ui 0.5.0 → 0.8.0

package/dist/components/tabs.css

@@ -2,20 +2,19 @@
  * @icen.ai/ui — Component: tabs（分区导航 / 子导航）
  *
  * 完整契约：
- *   <div class="page-tabs" role="tablist">                       ← 页面内分区
- *     <button class="page-tab [.active]" role="tab" [aria-selected="true"]>…</button>
+ *   <div class="tabs" role="tablist">                            ← 页面内分区
+ *     <button class="page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
  *   </div>
  *
- *   <nav class="admin-tabs" role="navigation">                   ← 顶部子导航（a 链接）
- *     <a class="[.active]" [aria-current="page"] href="…">…</a>
+ *   <nav class="tabs" role="navigation">                         ← 顶部子导航（a 链接）
+ *     <a class="[.is-active]" [aria-current="page"] href="…">…</a>
  *   </nav>
  *
  * 与 behaviors/tabs 配套：[data-tabs] > [data-tab] + [data-tab-panel]，行为层维护 aria。
- * 窄屏换行不滚动（CLAUDE.md 纪律：tab 条永不出现滚动条）。
+ * 窄屏换行不滚动（纪律：tab 条永不出现滚动条，一律 flex-wrap: wrap）。
  */
 
-.page-tabs,
-.admin-tabs {
+.tabs {
   display: flex;
   gap: 2px;
   flex-wrap: wrap;
@@ -47,14 +46,14 @@
   border-radius: var(--radius-sm);
   box-shadow: var(--icen-ring);
 }
-.page-tab.active,
+.page-tab.is-active,
 .page-tab[aria-selected='true'] {
   color: var(--token-accent);
   border-bottom-color: var(--token-accent);
   font-weight: 700;
 }
 
-.admin-tabs a {
+.tabs a {
   padding: var(--density-space-sm) var(--density-space-md);
   font-size: var(--density-font-size-md);
   color: var(--token-text-muted);
@@ -66,44 +65,44 @@
     color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
-.admin-tabs a:hover {
+.tabs a:hover {
   color: var(--token-accent);
   text-decoration: none;
 }
-.admin-tabs a:focus-visible {
+.tabs a:focus-visible {
   outline: none;
   border-radius: var(--radius-sm);
   box-shadow: var(--icen-ring);
 }
-.admin-tabs a.active,
-.admin-tabs a[aria-current='page'] {
+.tabs a.is-active,
+.tabs a[aria-current='page'] {
   color: var(--token-accent);
   border-bottom-color: var(--token-accent);
 }
 
-/* 卡片变体（可选 .page-tabs--cards）：tab 变成 pill，没有底边线 */
-.page-tabs--cards {
+/* 卡片变体（可选 .tabs--cards）：tab 变成 pill，没有底边线 */
+.tabs--cards {
   border-bottom: 0;
   gap: var(--density-space-xs);
   margin-bottom: var(--density-space-md);
 }
-.page-tabs--cards .page-tab {
+.tabs--cards .page-tab {
   padding: var(--density-space-xs) var(--density-space-md);
   border: 1px solid var(--token-outline-soft);
   border-radius: var(--radius-full);
   margin-bottom: 0;
 }
-.page-tabs--cards .page-tab.active,
-.page-tabs--cards .page-tab[aria-selected='true'] {
+.tabs--cards .page-tab.is-active,
+.tabs--cards .page-tab[aria-selected='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
   font-weight: 500;
 }
 
 /* 等宽变体：tab 平均占满容器 */
-.page-tabs--equal .page-tab,
-.admin-tabs--equal a {
+.tabs--equal .page-tab,
+.tabs--equal a {
   flex: 1;
   text-align: center;
 }
@@ -111,11 +110,11 @@
 /* ── 增强 ── */
 
 /* 尺寸变体 */
-.page-tabs--sm .page-tab {
+.tabs--sm .page-tab {
   padding: var(--density-space-xs) var(--density-space-sm);
   font-size: var(--density-font-size-sm);
 }
-.page-tabs--lg .page-tab {
+.tabs--lg .page-tab {
   padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
   font-size: var(--density-font-size-lg);
 }
@@ -137,7 +136,7 @@
   height: 18px;
   padding: 0 5px;
   margin-left: var(--density-space-xs);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
   color: var(--token-text-faint);
   background: var(--token-fill-2);
@@ -145,10 +144,10 @@
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
-.page-tab.active .page-tab-badge,
+.page-tab.is-active .page-tab-badge,
 .page-tab[aria-selected='true'] .page-tab-badge {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 
 /* 可关闭 tab */
@@ -175,7 +174,7 @@
 .page-tab-close svg { width: 10px; height: 10px; }
 
 /* 分段式 tab（替代底边线，用 segmented 视觉） */
-.page-tabs--segment {
+.tabs--segment {
   display: inline-flex;
   border-bottom: none;
   gap: 2px;
@@ -185,50 +184,40 @@
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-inset);
 }
-.page-tabs--segment .page-tab {
+.tabs--segment .page-tab {
   border-bottom: none;
   margin-bottom: 0;
   padding: var(--density-space-xs) var(--density-space-md);
   border-radius: var(--radius-sm);
 }
-.page-tabs--segment .page-tab.active,
-.page-tabs--segment .page-tab[aria-selected='true'] {
+.tabs--segment .page-tab.is-active,
+.tabs--segment .page-tab[aria-selected='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-bottom-color: transparent;
   font-weight: 500;
 }
 
 /* 垂直 tab（侧栏式） */
-.page-tabs--vertical {
+.tabs--vertical {
   flex-direction: column;
   border-bottom: none;
   border-right: 1px solid var(--token-line-soft);
   margin-bottom: 0;
   min-width: 160px;
 }
-.page-tabs--vertical .page-tab {
+.tabs--vertical .page-tab {
   border-bottom: none;
   border-right: 2px solid transparent;
   margin-bottom: 0;
   margin-right: -1px;
 }
-.page-tabs--vertical .page-tab.active,
-.page-tabs--vertical .page-tab[aria-selected='true'] {
+.tabs--vertical .page-tab.is-active,
+.tabs--vertical .page-tab[aria-selected='true'] {
   border-right-color: var(--token-accent);
   border-bottom-color: transparent;
 }
 
-/* tab 溢出渐变提示（窄屏溢出时右侧渐变遮罩——纯视觉提示，不违反"不滚动"纪律，仍 flex-wrap） */
-.page-tabs--scroll {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.page-tabs--scroll::-webkit-scrollbar { display: none; }
-
 @media (prefers-reduced-motion: reduce) {
-  .page-tab, .admin-tabs a, .page-tab-close { transition: none; }
+  .page-tab, .tabs a, .page-tab-close { transition: none; }
 }

package/dist/components/tag-input.css

@@ -40,7 +40,7 @@
 .tag-input.is-max,
 .tag-input.is-max:focus-within {
   border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--token-warning) 14%, transparent);
+  box-shadow: var(--icen-ring-warning);
 }
 .tag-input.is-disabled,
 .tag-input[aria-disabled='true'],
@@ -98,7 +98,7 @@
   cursor: pointer;
   border-radius: var(--radius-full);
   color: inherit;
-  font-size: 11px;
+  font-size: var(--density-font-size-xs);
   line-height: 1;
   opacity: 0.7;
   transition:
@@ -109,7 +109,7 @@
 .tag-chip-x:hover {
   opacity: 1;
   background: color-mix(in srgb, currentColor 18%, transparent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .tag-chip-x:focus-visible {
   outline: none;
@@ -135,7 +135,7 @@
 
 /* 重复值抖动反馈（behavior 短暂挂 is-shake） */
 .tag-input.is-shake {
-  animation: tag-shake 0.32s var(--ease-out);
+  animation: tag-shake var(--tag-shake-duration, 0.32s) var(--ease-out);
 }
 @keyframes tag-shake {
   0%, 100% { transform: translateX(0); }

package/dist/components/toast.css

@@ -5,7 +5,7 @@
  *
  * 完整契约：
  *   <div class="toast-container" role="status" aria-live="polite">
- *     <div class="toast [ok|err|warn]" role="status|alert">
+ *     <div class="toast [toast--success|toast--error|toast--warning|toast--info]" role="status|alert">
  *       <span class="toast-msg">文本</span>
  *       <button class="toast-action">撤销</button>       ← 可选 action
  *     </div>
@@ -28,6 +28,8 @@
 
 .toast {
   pointer-events: auto;
+  position: relative;
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
   gap: var(--density-space-sm);
@@ -45,9 +47,10 @@
 }
 
 /* 语义色：左缘 3px 强调 */
-.toast.ok   { border-left-color: var(--token-success); }
-.toast.err  { border-left-color: var(--token-error); }
-.toast.warn { border-left-color: var(--token-warning); }
+.toast--success { border-left-color: var(--token-success); }
+.toast--error   { border-left-color: var(--token-error); }
+.toast--warning { border-left-color: var(--token-warning); }
+.toast--info    { border-left-color: var(--token-info); }
 
 .toast-msg {
   flex: 1;
@@ -88,9 +91,10 @@
   color: var(--token-text-faint);
 }
 .toast-icon svg { width: 16px; height: 16px; }
-.toast.ok .toast-icon { color: var(--token-success); }
-.toast.err .toast-icon { color: var(--token-error); }
-.toast.warn .toast-icon { color: var(--token-warning); }
+.toast--success .toast-icon { color: var(--token-success); }
+.toast--error   .toast-icon { color: var(--token-error); }
+.toast--warning .toast-icon { color: var(--token-warning); }
+.toast--info    .toast-icon { color: var(--token-info); }
 
 /* 关闭按钮 */
 .toast-close {
@@ -149,16 +153,15 @@
   transform-origin: left;
   animation: toast-countdown linear forwards;
 }
-.toast.ok .toast-progress-fill { background: var(--token-success); }
-.toast.err .toast-progress-fill { background: var(--token-error); }
-.toast.warn .toast-progress-fill { background: var(--token-warning); }
+.toast--success .toast-progress-fill { background: var(--token-success); }
+.toast--error   .toast-progress-fill { background: var(--token-error); }
+.toast--warning .toast-progress-fill { background: var(--token-warning); }
+.toast--info    .toast-progress-fill { background: var(--token-info); }
 @keyframes toast-countdown {
   from { transform: scaleX(1); }
   to   { transform: scaleX(0); }
 }
 
-.toast { position: relative; overflow: hidden; }
-
 /* 容器定位变体 */
 .toast-container[data-position='top-left'] {
   right: auto;
@@ -191,7 +194,7 @@
   align-items: center;
 }
 
-.toast.leaving {
+.toast.is-leaving {
   opacity: 0;
   transform: translateY(8px);
   transition:

package/dist/components/tooltip.css

@@ -7,7 +7,7 @@
  *   无障碍：键盘 :focus-visible 立即出现（无延迟），鼠标 hover 延迟 400ms。
  */
 
-[data-tooltip] { position: relative; }
+[data-tooltip] { position: relative; --tooltip-delay: 400ms; }
 
 [data-tooltip]::after {
   content: attr(data-tooltip);
@@ -32,7 +32,7 @@
   transition:
     opacity var(--icen-tx-fast),
     transform var(--icen-tx-fast);
-  transition-delay: 400ms;
+  transition-delay: var(--tooltip-delay);
 
   /* 默认：上方、水平居中 */
   bottom: calc(100% + 6px);

package/dist/index.d.mts

@@ -0,0 +1,37 @@
+export { PRESETS, STORAGE_KEY, STYLES, ThemeState, applyTheme, getDefaultTheme, getTheme, initTheme, setTheme, toggleDark } from './behaviors/theme.js';
+export { ToastConfig, ToastKind, ToastOptions, toast } from './behaviors/toast.js';
+export { initTabs } from './behaviors/tabs.js';
+export { initCopy } from './behaviors/copy.js';
+export { initInput } from './behaviors/input.js';
+export { initSelect } from './behaviors/select.js';
+export { initSlider } from './behaviors/slider.js';
+export { initTagInput } from './behaviors/tag-input.js';
+export { initUpload } from './behaviors/upload.js';
+export { closeModal, initModal, openModal } from './behaviors/modal.js';
+export { initDropdown } from './behaviors/dropdown.js';
+export { ContextMenuEntry, ContextMenuHeader, ContextMenuItem, ContextMenuOptions, ContextMenuSeparator, closeMenu, initContextMenu, openContextMenu, registerContextMenu } from './behaviors/context-menu.js';
+export { OpenPopoverOptions, PopoverAlign, PopoverLayout, PopoverLayoutOptions, PopoverRect, PopoverSide, PopoverViewport, closePopover, computePopoverLayout, openPopover } from './behaviors/popover.js';
+export { initAccordion } from './behaviors/accordion.js';
+export { initTree } from './behaviors/tree.js';
+export { initCarousel } from './behaviors/carousel.js';
+export { ChartCalendarOptions, ChartChromeOptions, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartLegendState, ChartLineOptions, ChartMarkData, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, HeatmapDatum, RadarSeries, chartFormatValue, inferChartType, normalizeChartSpec, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderHBar, renderHeatmap, renderLine, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.js';
+export { initNav } from './behaviors/nav.js';
+export { initSidebar } from './behaviors/sidebar.js';
+export { NotificationAction, NotificationCenterHandle, NotificationConfig, NotificationConfirmOptions, NotificationHandle, NotificationKind, NotificationOptions, NotificationPushInput, NotificationUpdatePatch, createNotificationCenter, initNotification, notify } from './behaviors/notification.js';
+export { initBackTop } from './behaviors/back-top.js';
+export { closeCommandPalette, initCommandPalette, openCommandPalette } from './behaviors/command-palette.js';
+export { initDatePicker } from './behaviors/date-picker.js';
+export { initSplitPane } from './behaviors/split-pane.js';
+export { TableColumn, TableHandle, TableOptions, createTable } from './behaviors/datatable.js';
+export { AiAudioPart, AiContent, AiContentPart, AiFilePart, AiImagePart, AiKindDef, AiKindTint, AiMediaPart, AiResourceLinkPart, AiStatus, AiTextPart, AiToolCallModel, AiUsage, AiVideoPart, aiContentUrl, aiStatusLabel, contentToText, contextEstimate, estimateTokens, formatDuration, formatTokens, getAiKind, inferKind, isAiContentPart, isAiContentPartArray, normalizeContentParts, normalizeMcpContent, normalizeToolCall, normalizeUsage, registerAiKind, svgIcon } from './behaviors/ai-core.js';
+export { AiMessageHandle, AiMessageModel, AiStreamHandle, createAiStream, initAiChat, renderAiContentPart, renderAiMessage } from './behaviors/ai-chat.js';
+export { AiComposerBindOpts, AiComposerBinding, AiComposerCommand, AiComposerCurrentModel, AiComposerRefKind, AiComposerRefSource, AiProviderModelOption, AiProviderOption, bindComposer, initAiComposer, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage } from './behaviors/ai-composer.js';
+export { AiSubagentHandle, AiToolCallHandle, initAiSubagent, initAiTool, renderAiSubagent, renderAiToolCall } from './behaviors/ai-tool.js';
+export { AiDiffFile, AiDiffFileStatus, AiDiffHunk, AiDiffLine, AiDiffModel, initAiDiff, parseUnifiedDiff, renderAiDiff } from './behaviors/ai-diff.js';
+export { AiAuditRenderOpts, AiContextFile, AiContextMcpServer, AiContextModel, AiContextSkill, AiTodoItem, AiUsageRenderOpts, AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing } from './behaviors/ai-panel.js';
+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';
+export { AiToolArea, AiToolAreaOptions, AiToolDef, AiToolRecord, aiToolsManifest, aiToolsToMcp, aiToolsToOpenAI, createAiToolArea, getAiTool, listAiTools, parseAiToolArgs, registerAiTool, unregisterAiTool } from './behaviors/ai-tools.js';
+
+declare const VERSION: string;
+
+export { VERSION };