@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/mentions.css

@@ -0,0 +1,189 @@
+@layer icen.components {
+/*
+ * @icen.ai/ui — Component: mentions
+ * 声明式宿主不变：<div class="icen-mentions"><textarea class="icen-input"></textarea></div>；
+ * createMentions 把 textarea 替换为富文本编辑区
+ *   <div class="icen-input icen-mentions-editor" contenteditable="true" role="textbox"
+ *        aria-multiline="true" tabindex="0" data-icen-placeholder="…" [.is-empty]>
+ * id/class/aria-label/rows 转移到编辑区；有 name 的 textarea 生成同名 hidden input 承载纯文本；
+ * destroy 时恢复 textarea 并回填纯文本。提及是对象单元：
+ *   <span class="icen-mention-token is-directory|is-custom" contenteditable="false"
+ *         data-icen-mention-id="…"><bdi>@名称</bdi>[<span class="icen-mention-badge">自定义</span>]</span>
+ * token 光标不可进入（原子），Backspace/Delete 整体删除；自定义提及 = 虚线边 + 徽标。
+ * 弹层 .icen-mentions-panel portal 到 body：.icen-mentions-list 是 named listbox（只含
+ * .icen-mentions-option，custom 模式的「创建 …」项带 .icen-mentions-option-badge），
+ * loading/empty/error-retry 状态是 listbox 的并列兄弟。多行 textbox 语义不带 aria-expanded。
+ */
+
+/* 宿主壳：输入框视觉自治（不套 .icen-input-wrap——那是单行固定高控件壳，多行会被压爆） */
+.icen-mentions {
+  display: block;
+  width: 100%;
+  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-inset);
+  cursor: text;
+  transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
+}
+.icen-mentions:hover { border-color: var(--icen-hover-border); }
+.icen-mentions:focus-within {
+  border-color: var(--icen-control-focus-border);
+  box-shadow: var(--icen-control-focus-shadow);
+}
+.icen-mentions > .icen-input { display: block; width: 100%; }
+
+/* 富文本编辑区：多行输入壳视觉沿用宿主，排版 pre-wrap 随内容纵向生长 */
+.icen-mentions > .icen-mentions-editor {
+  display: block;
+  inline-size: 100%;
+  min-block-size: calc(var(--icen-mentions-rows, 3) * 1lh);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  outline: none;
+  cursor: text;
+}
+/* 占位文本走数据属性 + ::before，不进值（.is-empty 由行为层按纯文本是否为空切换） */
+.icen-mentions > .icen-mentions-editor.is-empty::before {
+  content: attr(data-icen-placeholder);
+  color: var(--icen-token-text-faint);
+  pointer-events: none;
+}
+.icen-mentions > .icen-mentions-editor[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  user-select: none;
+}
+
+/* 提及 token：文本流中的 inline pill（原子单元，光标不可进入，整体删除） */
+.icen-mention-token {
+  display: inline-block;
+  padding-inline: var(--icen-density-space-xs);
+  border: 1px solid color-mix(in srgb, var(--icen-token-accent) 40%, transparent);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent-text);
+  font-size: var(--icen-density-font-size-sm);
+  line-height: var(--icen-line-height-body);
+  white-space: nowrap;
+  cursor: default;
+  transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.icen-mention-token:hover {
+  background: var(--icen-token-accent-glow);
+  border-color: var(--icen-token-accent);
+}
+/* 自定义提及：虚线边 + 中性浅底 + 「自定义」徽标（i18n 注入），与目录提及一眼区分 */
+.icen-mention-token.is-custom {
+  border-style: dashed;
+  border-color: var(--icen-token-outline-strong);
+  background: var(--icen-token-fill-1);
+  color: var(--icen-token-text);
+}
+.icen-mention-token.is-custom:hover {
+  background: var(--icen-token-fill-2);
+  border-color: var(--icen-token-text-muted);
+}
+.icen-mention-badge {
+  margin-inline-start: var(--icen-density-space-xs);
+  padding-inline: var(--icen-density-space-xs);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
+  font-size: var(--icen-density-font-size-sm);
+}
+
+.icen-mentions-panel {
+  position: fixed;
+  z-index: var(--icen-z-popover);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
+  background: var(--icen-token-card-strong);
+  border: 1px solid var(--icen-token-outline);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-overlay);
+  transform-origin: top center;
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.icen-mentions-panel[data-icen-side='top'] { transform-origin: bottom center; }
+
+/* 异步加载态（role=status，screen reader 播报） */
+.icen-mentions-status {
+  padding: var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
+}
+
+.icen-mentions-option {
+  display: flex;
+  align-items: center;
+  gap: var(--icen-density-space-xs);
+  padding: 6px var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text);
+  border-radius: var(--icen-radius-sm);
+  cursor: pointer;
+  min-block-size: var(--icen-density-input-height-sm);
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.icen-mentions-empty { padding: var(--icen-density-space-sm); font-size: var(--icen-density-font-size-sm); color: var(--icen-token-text-muted); text-align: center; }
+@media (pointer: coarse) { .icen-mentions-option { min-block-size: 44px; } }
+@media (prefers-reduced-motion: reduce) {
+  .icen-mentions-panel { animation: none; }
+  .icen-mentions-option,
+  .icen-mention-token { transition: none; }
+}
+.icen-mentions-option:hover:not(.is-disabled) { background: var(--icen-token-fill-1); }
+.icen-mentions-option.is-active { background: var(--icen-token-fill-2); }
+.icen-mentions-option.is-disabled {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* custom 模式的「创建 …」项：accent 文案 + 自定义徽标 */
+.icen-mentions-option--create .icen-mentions-option-label { color: var(--icen-token-accent-text); }
+.icen-mentions-option-badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--icen-density-space-xs);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
+  font-size: var(--icen-density-font-size-sm);
+  line-height: var(--icen-line-height-body);
+}
+
+.icen-mentions-option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 强制对比度模式：token 失去彩色底，但边界与文字必须仍可辨认 */
+@media (forced-colors: active) {
+  .icen-mention-token {
+    border-color: Highlight;
+    background: transparent;
+    color: Highlight;
+  }
+  .icen-mention-token.is-custom {
+    border-color: CanvasText;
+    color: CanvasText;
+  }
+  .icen-mention-badge,
+  .icen-mentions-option-badge {
+    border: 1px solid CanvasText;
+    background: transparent;
+    color: CanvasText;
+  }
+}
+
+}

package/dist/components/mentions.mjs

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

package/dist/components/menu.css

@@ -1,212 +1,220 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: menu（菜单面板，与 behaviors/dropdown、context-menu 配套）
  *
- * 面板由 JS portal 到 document.body 并按 fixed 定位；data-side 决定进场位移方向。
+ * 面板由 JS portal 到 document.body 并按 fixed 定位；data-icen-side 决定进场位移方向。
  * 规格源自 opengal overlay/dropdown + overlay/context-menu。
  *
  * 完整契约（dropdown）：
- *   <button class="menu-trigger pressable" data-menu-target="id" aria-haspopup="menu" aria-expanded="false">…</button>
- *   <div class="menu" id="id" role="menu" data-side="bottom" hidden>
- *     <div class="menu-label">组标题（可选）</div>
- *     <button class="menu-item [.is-highlighted] [.is-disabled] [.menu-item--danger]" role="menuitem">
- *       <span class="menu-item-icon">…svg…</span>
- *       <span class="menu-item-label">文本</span>
- *       <span class="menu-item-sub">副标题</span>
- *       <span class="menu-item-shortcut">⌘S</span>
+ *   <button class="menu-trigger icen-pressable" data-icen-dropdown-trigger aria-haspopup="menu" aria-expanded="false">…</button>
+ *   <div class="icen-menu" id="id" role="menu" data-icen-side="bottom" hidden>
+ *     <div class="icen-menu-label">组标题（可选）</div>
+ *     <button class="icen-menu-item [.is-highlighted] [.is-disabled] [.icen-menu-item--danger]" role="menuitem">
+ *       <span class="icen-menu-item-icon">…svg…</span>
+ *       <span class="icen-menu-item-label">文本</span>
+ *       <span class="icen-menu-item-sub">副标题</span>
+ *       <span class="icen-menu-item-shortcut">⌘S</span>
  *     </button>
- *     <div class="menu-separator"></div>
- *     <button class="menu-item menu-item--checked">
- *       <span class="menu-item-check">✓</span>
- *       <span class="menu-item-label">已选项</span>
+ *     <div class="icen-menu-separator"></div>
+ *     <button class="icen-menu-item icen-menu-item--checked">
+ *       <span class="icen-menu-item-label">已选项</span>
  *     </button>
  *   </div>
  *
- * context-menu：附加 .menu--context（更窄宽度、更高 z-index）。
+ * context-menu：附加 .icen-menu--context（更窄宽度、更高 z-index）。
  * behavior 维护：键盘箭头导航 + .is-highlighted 跟随、Enter 触发、ESC 关闭、外部点击关闭。
  */
 
-.menu {
+.icen-menu {
   position: fixed;
-  z-index: var(--z-popover);
-  min-width: 180px;
-  max-width: 320px;
-  max-height: min(70vh, 420px);
+  z-index: var(--icen-z-popover);
+  min-inline-size: 180px;
+  max-inline-size: 320px;
+  max-block-size: min(70vh, 420px);
   overflow-y: auto;
   overscroll-behavior: contain;
   margin: 0;
-  padding: var(--density-space-xs);
-  background: color-mix(in srgb, var(--token-card-strong) 92%, transparent);
+  padding: var(--icen-density-space-xs);
+  background: color-mix(in srgb, var(--icen-token-card-strong) 92%, transparent);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  border: 1px solid var(--token-outline);
-  box-shadow: var(--token-shadow-overlay);
-  border-radius: var(--radius-lg);
-  animation: icen-menu-in var(--menu-in-duration, var(--icen-tx-fast));
-}
-.menu[data-side='top'] { animation-name: icen-menu-in-top; }
-.menu[data-side='left'] { animation-name: icen-menu-in-left; }
-.menu[data-side='right'] { animation-name: icen-menu-in-right; }
+  border: 1px solid var(--icen-token-outline);
+  box-shadow: var(--icen-token-shadow-overlay);
+  border-radius: var(--icen-radius-lg);
+  transform-origin: top center;
+  animation: icen-menu-in var(--menu-in-duration, var(--icen-duration-fast)) var(--icen-ease-out);
+}
+.icen-menu[data-icen-state='closing'] { pointer-events: none; }
+.icen-menu[data-icen-side='top'] { transform-origin: bottom center; }
+.icen-menu[data-icen-side='top'] { animation-name: icen-menu-in-top; }
+.icen-menu[data-icen-side='left'] { animation-name: icen-menu-in-left; }
+.icen-menu[data-icen-side='right'] { animation-name: icen-menu-in-right; }
 
 /* 右键菜单：opengal context-menu 规格沿用 */
-.menu--context {
-  min-width: 218px;
-  max-width: 286px;
-  z-index: var(--z-tooltip); /* 上下文菜单高于普通 popover，与 tooltip 平齐 */
+.icen-menu--context {
+  min-inline-size: 218px;
+  max-inline-size: 286px;
+  z-index: var(--icen-z-tooltip); /* 上下文菜单高于普通 popover，与 tooltip 平齐 */
   --menu-in-duration: 100ms;
 }
 
 /* ── 分组标签 / 头（context-menu 的 header 项） ── */
-.menu-label {
-  padding: var(--density-space-xs) var(--density-space-sm);
-  font-size: var(--density-font-size-xs);
+.icen-menu-label {
+  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.menu-header {
-  padding: var(--density-space-sm) calc(var(--density-space-sm) + 2px) var(--density-space-xs);
+.icen-menu-header {
+  padding: var(--icen-density-space-sm) calc(var(--icen-density-space-sm) + 2px) var(--icen-density-space-xs);
 }
-.menu-header-label {
+.icen-menu-header-label {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--density-font-size-sm);
+  font-size: var(--icen-density-font-size-sm);
   font-weight: 500;
   line-height: 1.4;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.menu-header-desc {
+.icen-menu-header-desc {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.4;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
 
 /* ── 菜单项 ── */
-.menu-item {
+.icen-menu-item {
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
+  min-block-size: var(--icen-density-input-height-sm);
   width: 100%;
-  padding: 6px var(--density-space-sm);
+  padding: 6px var(--icen-density-space-sm);
   background: none;
   border: 0;
   font: inherit;
-  font-size: var(--density-font-size-sm);
-  text-align: left;
-  color: var(--token-text);
-  border-radius: var(--radius-sm);
+  font-size: var(--icen-density-font-size-sm);
+  text-align: start;
+  color: var(--icen-token-text);
+  border-radius: var(--icen-radius-sm);
   cursor: pointer;
   user-select: none;
   transition:
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.menu-item:hover:not(.is-disabled) {
-  background: var(--token-fill-1);
+.icen-menu-item:hover:not(.is-disabled) {
+  background: var(--icen-token-fill-1);
 }
-.menu-item.is-highlighted,
-.menu-item:focus-visible {
-  background: var(--token-surface-hover);
-  color: var(--token-accent);
+.icen-menu-item.is-highlighted,
+.icen-menu-item:focus-visible {
+  background: var(--icen-token-surface-hover);
+  color: var(--icen-token-accent);
   outline: none;
 }
-.menu-item--danger { color: var(--token-error); }
-.menu-item--danger.is-highlighted,
-.menu-item--danger:focus-visible {
-  background: var(--token-error-muted);
-  color: var(--token-error);
-}
-.menu-item.is-disabled,
-.menu-item:disabled,
-.menu-item[aria-disabled='true'] {
+.icen-menu-item:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: -2px; box-shadow: none; }
+.icen-menu-item--danger { color: var(--icen-token-error); }
+.icen-menu-item--danger.is-highlighted,
+.icen-menu-item--danger:focus-visible {
+  background: var(--icen-token-error-muted);
+  color: var(--icen-token-error);
+}
+.icen-menu-item--danger:hover:not(.is-disabled):not(:disabled) { background: var(--icen-token-error-muted); }
+.icen-menu-item.is-disabled,
+.icen-menu-item:disabled,
+.icen-menu-item[aria-disabled='true'] {
   opacity: var(--icen-disabled-opacity);
   pointer-events: none;
 }
 
-.menu-item-icon {
+.icen-menu-item-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  height: 14px;
+  inline-size: 20px;
+  block-size: 20px;
   flex-shrink: 0;
 }
-.menu-item-icon:empty { width: 14px; height: auto; } /* 无图标时占位 */
-.menu-item-label {
+.icen-menu-item-icon > svg { inline-size: 16px; block-size: 16px; }
+.icen-menu:has(.icen-menu-item-icon) .icen-menu-item:not(:has(> .icen-menu-item-icon))::before {
+  content: '';
+  inline-size: 20px;
+  flex: none;
+}
+.icen-menu-item-label {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.menu-item-sub {
+.icen-menu-item-sub {
   display: block;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.3;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   margin-top: 2px;
 }
-.menu-item-shortcut {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
-  font-family: var(--font-mono);
-  margin-left: var(--density-space-sm);
+.icen-menu-item-shortcut {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
+  font-family: var(--icen-font-mono);
+  margin-inline-start: var(--icen-density-space-sm);
+  white-space: nowrap;
+  flex: none;
 }
-.menu-item-chevron {
+.icen-menu-item-chevron {
   width: 12px;
   height: 12px;
   flex-shrink: 0;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
 
-/* 勾选项：左勾 ✓ + 缩进 */
-.menu-item-check {
-  position: absolute;
-  left: var(--density-space-sm);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--token-accent);
-  font-size: var(--density-font-size-md);
-  line-height: 1;
-}
-.menu-item--checked { padding-left: 28px; }
+/* Check slots are removed visually; checked items use the shared selected surface. */
+.icen-menu-item-check { display: none; }
 
-.menu-separator {
-  margin: var(--density-space-xs) calc(var(--density-space-sm) + 2px);
+.icen-menu-separator {
+  margin: var(--icen-density-space-xs) calc(var(--icen-density-space-sm) + 2px);
   height: 1px;
-  background: var(--token-line-soft);
+  background: var(--icen-token-line-soft);
 }
 
-/* ── 进场：fade + scale(.95→1)，按侧别反向位移 8px ── */
+/* ── 进场：fade + scale(.985→1)，按侧别反向位移 3px（浮层统一收敛配方） ── */
 @keyframes icen-menu-in {
-  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  from { opacity: 0; transform: scale(0.985) translateY(-3px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
 @keyframes icen-menu-in-top {
-  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  from { opacity: 0; transform: scale(0.985) translateY(3px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
 @keyframes icen-menu-in-left {
-  from { opacity: 0; transform: scale(0.95) translateX(8px); }
+  from { opacity: 0; transform: scale(0.985) translateX(3px); }
   to { opacity: 1; transform: scale(1) translateX(0); }
 }
 @keyframes icen-menu-in-right {
-  from { opacity: 0; transform: scale(0.95) translateX(-8px); }
+  from { opacity: 0; transform: scale(0.985) translateX(-3px); }
   to { opacity: 1; transform: scale(1) translateX(0); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .menu, .menu--context { animation: none; }
+  .icen-menu, .icen-menu--context { animation: none; }
 }
 
 /* 触屏：hover 永久开启（替代 hover 设备的悬停反馈） */
 @media (hover: none) {
-  .menu-item:hover:not(.is-disabled) { background: transparent; }
+  .icen-menu-item:hover:not(.is-disabled) { background: transparent; }
+}
+@media (pointer: coarse) {
+  .icen-menu-item { min-block-size: 44px; }
+}
+[dir='rtl'] .icen-menu-item-chevron { transform: scaleX(-1); }
+
 }