@icen.ai/ui 0.4.0 → 0.8.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;
@@ -77,7 +80,121 @@
   box-shadow: var(--icen-ring);
 }
 
-.toast.leaving {
+/* ── 增强 ── */
+
+/* 语义图标 */
+.toast-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--token-text-faint);
+}
+.toast-icon svg { width: 16px; height: 16px; }
+.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 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.toast-close:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+.toast-close svg { width: 12px; height: 12px; }
+
+/* 富内容（标题 + 正文） */
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+.toast-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  color: var(--token-text);
+  line-height: 1.4;
+}
+.toast-body {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  margin-top: 2px;
+  line-height: 1.5;
+}
+
+/* 超时进度条 */
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  overflow: hidden;
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+.toast-progress-fill {
+  height: 100%;
+  background: var(--token-accent);
+  transform-origin: left;
+  animation: toast-countdown linear forwards;
+}
+.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-container[data-position='top-left'] {
+  right: auto;
+  bottom: auto;
+  top: var(--density-space-md);
+  left: var(--density-space-md);
+  align-items: flex-start;
+}
+.toast-container[data-position='top-right'] {
+  bottom: auto;
+  top: var(--density-space-md);
+}
+.toast-container[data-position='top-center'] {
+  right: auto;
+  bottom: auto;
+  top: var(--density-space-md);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-container[data-position='bottom-left'] {
+  right: auto;
+  left: var(--density-space-md);
+  align-items: flex-start;
+}
+.toast-container[data-position='bottom-center'] {
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.toast.is-leaving {
   opacity: 0;
   transform: translateY(8px);
   transition:

package/dist/components/toolbar.css

@@ -0,0 +1,101 @@
+/*
+ * @icen.ai/ui — Component: toolbar（工具条）
+ *
+ * 横向承载按钮 / 控件的容器，常用于编辑器顶栏、列表上方操作行、表格批量操作条。
+ * 与 segmented 的区别：
+ *   - segmented = 紧贴的互斥分段选择
+ *   - toolbar   = 宽松的按钮/控件容器，可分组、可分隔、可换行
+ *
+ * 完整契约：
+ *   <div class="toolbar [--sm|--lg] [--wrap] [--borderless]">
+ *     <button class="btn btn-sm">…</button>
+ *     <div class="toolbar-group">
+ *       <button class="btn btn-sm">…</button>
+ *       <button class="btn btn-sm">…</button>
+ *     </div>
+ *     <span class="toolbar-separator"></span>
+ *     <div class="toolbar-spacer"></div>      ← 弹性占位，把右侧元素推到末尾
+ *     <span class="toolbar-label">3 项</span>
+ *   </div>
+ *
+ *   编辑器顶栏（与 fixed 子项配套）：
+ *   <div class="toolbar toolbar--elevated">
+ *     …
+ *   </div>
+ */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  flex-wrap: nowrap;
+  padding: var(--density-space-sm);
+  background: var(--token-bg-soft);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+}
+.toolbar--wrap { flex-wrap: wrap; }
+.toolbar--borderless {
+  background: transparent;
+  border-color: transparent;
+  padding: 0;
+}
+.toolbar--elevated {
+  background: var(--token-card-strong);
+  border-color: var(--token-outline-soft);
+  box-shadow: var(--token-shadow-elevated);
+}
+
+/* ── 尺寸 ── */
+.toolbar--sm { padding: 4px var(--density-space-xs); gap: var(--density-space-xs); }
+.toolbar--lg { padding: var(--density-space-md); gap: var(--density-space-md); }
+
+/* ── 分组（紧贴一组按钮） ── */
+.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--token-fill-1);
+  border-radius: var(--radius-sm);
+}
+.toolbar-group > .btn { border-color: transparent; background: transparent; }
+.toolbar-group > .btn:hover { background: var(--token-fill-2); }
+
+/* ── 分隔符 ── */
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--token-line-soft);
+  flex-shrink: 0;
+}
+.toolbar--sm .toolbar-separator { height: 16px; }
+.toolbar--lg .toolbar-separator { height: 24px; }
+
+/* 水平工具条里的垂直分隔（用于纵向 toolbar） */
+.toolbar--vertical { flex-direction: column; align-items: stretch; }
+.toolbar--vertical .toolbar-separator {
+  width: auto;
+  height: 1px;
+  margin: var(--density-space-xs) 0;
+}
+
+/* ── 弹性占位 ── */
+.toolbar-spacer { flex: 1 1 auto; min-width: var(--density-space-xs); }
+
+/* ── 内嵌文字（计数 / 状态） ── */
+.toolbar-label {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.toolbar-label.accent { color: var(--token-accent); }
+
+@media (max-width: 480px) {
+  .toolbar { flex-wrap: wrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbar * { transition: none !important; }
+}

package/dist/components/toolbar.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: toolbar（CSS + behavior 一行入口；构建产物，勿手改）
+import './toolbar.css';

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/components/upload.css

@@ -130,12 +130,43 @@
   border-radius: var(--radius-sm);
   font-size: var(--density-font-size-sm);
   animation: upload-item-in var(--icen-tx-fast);
+  transition: border-color var(--icen-tx-fast);
 }
-.upload-list-item-name {
+.upload-list-item:hover {
+  border-color: var(--token-outline);
+}
+.upload-list-item-thumb {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+  background: var(--token-bg-soft);
+}
+.upload-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: var(--radius-xs);
+  background: var(--token-fill-1);
+  color: var(--token-text-faint);
+}
+.upload-list-item-icon svg { width: 16px; height: 16px; }
+.upload-list-item-info {
   flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.upload-list-item-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--token-text);
 }
 .upload-list-item-size {
   color: var(--token-text-faint);
@@ -147,20 +178,46 @@
   background: transparent;
   cursor: pointer;
   color: var(--token-text-faint);
-  padding: 2px;
+  padding: 4px;
   border-radius: var(--radius-full);
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
 .upload-list-item-x:hover {
-  color: var(--token-text);
-  background: var(--token-fill-2);
+  color: var(--token-error);
+  background: var(--token-error-muted);
 }
 .upload-list-item-x:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
+/* 进度条（behavior 可选注入 .upload-list-item-progress） */
+.upload-list-item-progress {
+  height: 2px;
+  width: 100%;
+  background: var(--token-fill-2);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  margin-top: 2px;
+}
+.upload-list-item-progress-bar {
+  height: 100%;
+  background: var(--token-accent);
+  border-radius: var(--radius-full);
+  transition: width var(--icen-tx-normal) var(--ease-out);
+}
+.upload-list-item.is-error {
+  border-color: var(--token-error);
+}
+.upload-list-item.is-error .upload-list-item-icon {
+  background: var(--token-error-muted);
+  color: var(--token-error);
+}
+
 @keyframes upload-item-in {
   from { opacity: 0; transform: translateY(-4px); }
   to { opacity: 1; transform: translateY(0); }

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 };