@icen.ai/ui 0.3.0 → 0.5.0

package/dist/components/notification.css

@@ -0,0 +1,387 @@
+/*
+ * @icen.ai/ui — Component: notification（通知栈 v2，与 behaviors/notification 配套）
+ *
+ * 与 toast / alert 的差异（三件正交）：
+ *   - toast     = 瞬时轻提示（2.6s 自动消失），右下角
+ *   - alert     = 内嵌警示条（页面流内，非浮层）
+ *   - notification = 持久通知栈（右上角），工程级：
+ *       进度条 / 倒计时 / 头像 / 多按钮 / 已读未读 / 优先级 / hover 暂停 / 详情链接 / 折叠堆叠
+ *
+ * 完整契约（由 behavior 渲染）：
+ *   <div class="notification-container" role="region" aria-label="通知" data-position="top-right">
+ *     <div class="notification [notif--success|warning|error|info]
+ *          [.is-priority] [.is-unread] [.is-progress] [.is-clickable] [.is-paused]
+ *          [.has-avatar]" role="alert|button">
+ *       <span class="notification-icon">…svg 或 img.notification-avatar…</span>
+ *       <div class="notification-content">
+ *         <p class="notification-title">标题</p>
+ *         <p class="notification-message">正文（支持换行）</p>
+ *         <div class="notification-actions">
+ *           <button class="notification-action [--primary|--danger]">按钮</button>
+ *         </div>
+ *         <div class="notification-link-wrap">
+ *           <a class="notification-link" href="…">查看详情</a>
+ *         </div>
+ *         <div class="notification-progress">
+ *           <div class="notification-progress-bar" style="width:64%"></div>
+ *           <span class="notification-progress-label">64%</span>
+ *         </div>
+ *       </div>
+ *       <button class="notification-close" aria-label="关闭">×</button>
+ *       <div class="notification-countdown">
+ *         <div class="notification-countdown-fill" style="animation-duration:5000ms"></div>
+ *       </div>
+ *     </div>
+ *   </div>
+ */
+
+.notification-container {
+  position: fixed;
+  top: var(--density-space-md);
+  right: var(--density-space-md);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  width: 360px;
+  max-width: calc(100vw - var(--density-space-lg));
+  pointer-events: none;
+}
+.notification-container[data-position='top-left'] {
+  right: auto;
+  left: var(--density-space-md);
+}
+.notification-container[data-position='bottom-left'] {
+  top: auto;
+  bottom: var(--density-space-md);
+  right: auto;
+  left: var(--density-space-md);
+}
+.notification-container[data-position='bottom-right'] {
+  top: auto;
+  bottom: var(--density-space-md);
+}
+
+.notification {
+  pointer-events: auto;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--density-space-sm);
+  background: var(--token-card-strong);
+  color: var(--token-text);
+  border: 1px solid var(--token-outline-soft);
+  border-left: 3px solid var(--token-info);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-overlay);
+  padding: var(--density-space-md) var(--density-space-md) var(--density-space-md) var(--density-space-sm);
+  overflow: hidden; /* 倒计时进度条贴底 */
+  animation: icen-notif-in var(--icen-tx-normal);
+}
+.notification.notif--success { border-left-color: var(--token-success); }
+.notification.notif--warning { border-left-color: var(--token-warning); }
+.notification.notif--error   { border-left-color: var(--token-error); }
+.notification.notif--info    { border-left-color: var(--token-info); }
+
+/* ── 优先级：高优先级强调（左侧加粗 + 更强阴影）── */
+.notification.is-priority {
+  border-left-width: 4px;
+  box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-accent) 24%, transparent);
+}
+.notification.is-priority.notif--success { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-success) 28%, transparent); }
+.notification.is-priority.notif--warning { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-warning) 28%, transparent); }
+.notification.is-priority.notif--error   { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-error) 28%, transparent); }
+
+/* ── 未读：标题左侧 4px 强调点 + 加粗 ── */
+.notification.is-unread .notification-title::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  margin-bottom: 1px;
+  vertical-align: middle;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+  flex-shrink: 0;
+}
+.notification.is-unread.notif--success .notification-title::before { background: var(--token-success); }
+.notification.is-unread.notif--warning .notification-title::before { background: var(--token-warning); }
+.notification.is-unread.notif--error   .notification-title::before { background: var(--token-error); }
+
+/* ── 可点击：整条 hover 抬升 ── */
+.notification.is-clickable {
+  cursor: pointer;
+  transition:
+    transform var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.notification.is-clickable:hover {
+  transform: translateY(-1px);
+  border-color: var(--token-accent);
+}
+
+/* ── 图标 ── */
+.notification-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  border-radius: var(--radius-full);
+  color: var(--token-text-faint);
+}
+.notification-icon svg { width: 16px; height: 16px; }
+.notif--success .notification-icon { color: var(--token-success); }
+.notif--warning .notification-icon { color: var(--token-warning); }
+.notif--error   .notification-icon { color: var(--token-error); }
+.notif--info    .notification-icon { color: var(--token-info); }
+
+/* 头像（圆形图） */
+.notification-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  object-fit: cover;
+  display: block;
+}
+.notification.has-avatar .notification-icon {
+  width: 28px;
+  height: 28px;
+  margin-top: 0;
+}
+
+/* 进度通知的图标默认走品牌色 */
+.notification.is-progress:not(.notif--success):not(.notif--warning):not(.notif--error) .notification-icon {
+  color: var(--token-accent);
+}
+
+/* ── 内容区 ── */
+.notification-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.notification-title {
+  margin: 0;
+  font-size: var(--density-font-size-md);
+  font-weight: 600;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.notification.is-unread .notification-title {
+  font-weight: 700;
+}
+.notification-message {
+  margin: 0;
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* ── 多动作按钮 ── */
+.notification-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--density-space-xs);
+  margin-top: var(--density-space-sm);
+}
+.notification-action {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 var(--density-space-sm);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm);
+  background: var(--token-fill-1);
+  color: var(--token-text-muted);
+  font: inherit;
+  font-size: var(--density-font-size-xs);
+  font-weight: 500;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.notification-action:hover {
+  background: var(--token-fill-2);
+  color: var(--token-text);
+  border-color: var(--token-accent);
+}
+.notification-action:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+/* primary：实底 accent */
+.notification-action--primary {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+  border-color: var(--token-accent);
+}
+.notification-action--primary:hover {
+  background: var(--token-accent-deep, var(--token-accent));
+  color: var(--token-on-accent, #fff);
+  border-color: var(--token-accent-deep, var(--token-accent));
+}
+/* danger：实底 error */
+.notification-action--danger {
+  background: var(--token-error);
+  color: var(--token-on-accent, #fff);
+  border-color: var(--token-error);
+}
+.notification-action--danger:hover {
+  filter: brightness(0.92);
+  color: var(--token-on-accent, #fff);
+  border-color: var(--token-error);
+}
+
+/* ── 详情链接 ── */
+.notification-link-wrap {
+  margin-top: var(--density-space-xs);
+}
+.notification-link {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-accent);
+  text-decoration: none;
+  border-bottom: 1px dashed color-mix(in srgb, var(--token-accent) 40%, transparent);
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.notification-link:hover {
+  color: var(--token-accent-deep, var(--token-accent));
+  border-bottom-style: solid;
+}
+.notification-link:focus-visible {
+  outline: none;
+  border-radius: var(--radius-xs);
+  box-shadow: var(--icen-ring);
+}
+
+/* ── 进度条 ── */
+.notification-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  margin-top: var(--density-space-sm);
+}
+.notification-progress-track {
+  flex: 1 1 auto;
+  height: 4px;
+  background: var(--token-fill-2);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+.notification-progress-bar {
+  height: 100%;
+  background: var(--token-accent);
+  border-radius: var(--radius-full);
+  transition: width var(--icen-tx-normal) var(--ease-out);
+}
+.notification.notif--success .notification-progress-bar { background: var(--token-success); }
+.notification.notif--warning .notification-progress-bar { background: var(--token-warning); }
+.notification.notif--error   .notification-progress-bar { background: var(--token-error); }
+.notification-progress-label {
+  flex: 0 0 auto;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 关闭按钮 ── */
+.notification-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.notification-close:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+.notification-close:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.notification-close svg { width: 12px; height: 12px; }
+
+/* ── 倒计时进度条（底部贴边） ── */
+.notification-countdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: transparent;
+  overflow: hidden;
+}
+.notification-countdown-fill {
+  height: 100%;
+  width: 100%;
+  transform-origin: left;
+  background: var(--token-text-faint);
+  opacity: 0.35;
+  animation-name: icen-notif-countdown;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  animation-play-state: running;
+}
+.notification.notif--success .notification-countdown-fill { background: var(--token-success); opacity: 0.6; }
+.notification.notif--warning .notification-countdown-fill { background: var(--token-warning); opacity: 0.6; }
+.notification.notif--error   .notification-countdown-fill { background: var(--token-error); opacity: 0.6; }
+.notification.is-paused .notification-countdown-fill {
+  animation-play-state: paused;
+}
+@keyframes icen-notif-countdown {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+/* ── 暂停态（hover 时） ── */
+.notification.is-paused {
+  box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-accent) 14%, transparent);
+}
+
+/* ── 退场动画 ── */
+.notification.leaving {
+  opacity: 0;
+  transform: translateX(20px);
+  transition:
+    opacity var(--icen-tx-normal),
+    transform var(--icen-tx-normal);
+}
+
+@keyframes icen-notif-in {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@media (max-width: 480px) {
+  .notification-container {
+    width: auto;
+    left: var(--density-space-sm);
+    right: var(--density-space-sm);
+  }
+  .notification { padding: var(--density-space-sm) var(--density-space-sm) var(--density-space-sm) 10px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notification { animation: none; }
+  .notification.leaving { transform: none; }
+  .notification-countdown-fill { animation: none; transform-origin: left; }
+  .notification-progress-bar { transition: none; }
+}

package/dist/components/notification.mjs

@@ -0,0 +1,3 @@
+// @icen.ai/ui — kit: notification（CSS + behavior 一行入口；构建产物，勿手改）
+import './notification.css';
+export * from '../behaviors/notification.mjs';

package/dist/components/panel.css

@@ -2,16 +2,29 @@
  * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏 + 可选 footer）
  *
  * 完整契约：
- *   <div class="panel-block [panel-block--flush]">
+ *   <div class="panel-block [panel-block--flush] [panel-block--accent]
+ *        [panel-block--collapsible] [.is-collapsed]">
  *     <div class="panel-title">
- *       <span>标题</span>
- *       <div class="panel-title-actions"><button class="btn btn-sm">…</button></div>
+ *       <div class="panel-title-text">
+ *         <span>标题</span>
+ *         <span class="panel-subtitle">副标题描述</span>     ← 可选
+ *       </div>
+ *       <div class="panel-title-actions">
+ *         <button class="btn btn-sm">…</button>
+ *         <button class="panel-toggle" aria-expanded="true">  ← collapsible 模式
+ *           <svg class="panel-toggle-icon">…chevron…</svg>
+ *         </button>
+ *       </div>
  *     </div>
  *     <div class="panel-body">…</div>
  *     <div class="panel-foot">…可选底栏</div>
  *   </div>
  *
  * --flush：body 不留 padding，使用方自行处理内层布局。
+ * --collapsible：标题栏出现展开/折叠钮（behavior 可选，也可靠纯 CSS details/summary）。
+ * --accent：强调色标题边。
+ * .panel-subtitle：标题下方的副标题/描述文字。
+ * .panel-block.is-collapsed：折叠态——隐藏 body + foot。
  */
 
 .panel-block {
@@ -22,6 +35,8 @@
   margin-bottom: var(--density-space-lg);
   overflow: hidden;
 }
+
+/* ── 标题栏 ── */
 .panel-title {
   display: flex;
   align-items: center;
@@ -35,9 +50,24 @@
   text-transform: uppercase;
   font-weight: 600;
 }
-.panel-title > span:first-child {
+.panel-title-text {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.panel-title-text > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.panel-subtitle {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -49,6 +79,55 @@
   flex-shrink: 0;
 }
 
+/* ── 可折叠钮 ── */
+.panel-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.panel-toggle:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+.panel-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.panel-toggle-icon {
+  width: 14px;
+  height: 14px;
+  transition: transform var(--icen-tx-fast);
+}
+.panel-block.is-collapsed .panel-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+/* ── 折叠态：隐藏 body + foot，去掉标题栏底边 ── */
+.panel-block.is-collapsed .panel-body,
+.panel-block.is-collapsed .panel-foot {
+  display: none;
+}
+.panel-block.is-collapsed .panel-title {
+  border-bottom-color: transparent;
+}
+.panel-block--collapsible .panel-body {
+  animation: panel-expand var(--icen-tx-normal) var(--ease-out);
+}
+@keyframes panel-expand {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── body / foot ── */
 .panel-body {
   padding: var(--density-space-md);
   font-size: var(--density-font-size-md);
@@ -66,9 +145,25 @@
   background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
 }
 
-/* 强调变体：accent 色标题边（用于警告/告警面板） */
+/* ── 强调变体 ── */
 .panel-block--accent { border-color: color-mix(in srgb, var(--token-accent) 30%, transparent); }
 .panel-block--accent .panel-title {
   color: var(--token-accent);
   background: var(--token-accent-subtle);
 }
+
+/* ── 平面变体（无阴影，嵌套时用） ── */
+.panel-block--flat {
+  box-shadow: none;
+  background: var(--token-bg-soft);
+}
+
+/* ── 可折叠模式：标题栏可点（纯 CSS 方案用 details/summary） ── */
+.panel-block--collapsible .panel-title {
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel-toggle-icon { transition: none; }
+  .panel-block--collapsible .panel-body { animation: none; }
+}

package/dist/components/pill.css

@@ -86,3 +86,73 @@
 .pill--solid.warn { background: var(--token-warning); border-color: var(--token-warning); color: var(--token-on-accent, #fff); }
 .pill--solid.bad  { background: var(--token-error);   border-color: var(--token-error);   color: var(--token-on-accent, #fff); }
 .pill--solid.info { background: var(--token-info);    border-color: var(--token-info);    color: var(--token-on-accent, #fff); }
+
+/* ── 增强 ── */
+
+/* 可关闭 pill */
+.pill-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-left: 2px;
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.pill-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
+.pill-close svg { width: 9px; height: 9px; }
+
+/* 图标 pill */
+.pill-icon {
+  display: inline-flex;
+  align-items: center;
+}
+.pill-icon svg { width: 10px; height: 10px; }
+
+/* 实时脉冲（用于"直播"/"实时"状态） */
+.pill--live::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  margin-right: 2px;
+  animation: pill-pulse 1.5s ease-in-out infinite;
+}
+@keyframes pill-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.7); }
+}
+
+/* 纯数字计数（不带文字） */
+.pill--count {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* 渐变变体 */
+.pill--gradient {
+  background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
+  color: var(--token-on-accent, #fff);
+  border-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pill--live::before { animation: none; }
+  .pill-close { transition: none; }
+}