@icen.ai/ui 0.1.1 → 0.2.0

package/dist/behaviors/sidebar.mjs

@@ -0,0 +1,27 @@
+// src/behaviors/sidebar.ts
+function setup(sidebar) {
+  const el = sidebar;
+  if (el.__icenSidebarInit) return;
+  el.__icenSidebarInit = true;
+  el.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const title = target.closest(".sidebar-group-title");
+    if (!(title instanceof HTMLElement)) return;
+    if (title.closest(".sidebar") !== el) return;
+    const group = title.closest(".sidebar-group");
+    if (!group) return;
+    const open = group.classList.toggle("is-open");
+    title.setAttribute("aria-expanded", String(open));
+  });
+}
+function initSidebar(root = document) {
+  if (typeof document === "undefined") return;
+  const sidebars = [];
+  if (root instanceof Element && root.matches(".sidebar")) sidebars.push(root);
+  sidebars.push(...Array.from(root.querySelectorAll(".sidebar")));
+  for (const s of sidebars) setup(s);
+}
+export {
+  initSidebar
+};

package/dist/behaviors/slider.mjs

@@ -0,0 +1,72 @@
+// src/behaviors/slider.ts
+function pct(input) {
+  const min = Number(input.min || "0");
+  const max = Number(input.max || "100");
+  const range = max - min;
+  if (range <= 0) return 0;
+  return (Number(input.value) - min) / range * 100;
+}
+function setupSingle(slider, native) {
+  const fill = slider.querySelector(".slider-fill");
+  const thumb = slider.querySelector(".slider-thumb");
+  const sync = () => {
+    const p = pct(native);
+    if (fill) fill.style.width = `${p}%`;
+    if (thumb) thumb.style.left = `calc(${p}% - 8px)`;
+  };
+  native.addEventListener("input", sync);
+  sync();
+}
+function setupDual(slider, natives) {
+  const lo = natives.find((n) => n.getAttribute("data-thumb") === "lo") ?? natives[0];
+  const hi = natives.find((n) => n.getAttribute("data-thumb") === "hi") ?? natives[1];
+  if (!lo || !hi || lo === hi) return;
+  const range = slider.querySelector(".slider-range");
+  const thumbLo = slider.querySelector(".slider-thumb--lo");
+  const thumbHi = slider.querySelector(".slider-thumb--hi");
+  const sync = (changed) => {
+    const step = Number(lo.step || "1") || 1;
+    let vLo = Number(lo.value);
+    let vHi = Number(hi.value);
+    if (changed === lo && vLo > vHi - step) {
+      vLo = vHi - step;
+      lo.value = String(vLo);
+    }
+    if (changed === hi && vHi < vLo + step) {
+      vHi = vLo + step;
+      hi.value = String(vHi);
+    }
+    const pLo = pct(lo);
+    const pHi = pct(hi);
+    if (range) {
+      range.style.left = `${pLo}%`;
+      range.style.right = `${100 - pHi}%`;
+    }
+    if (thumbLo) thumbLo.style.left = `calc(${pLo}% - 8px)`;
+    if (thumbHi) thumbHi.style.left = `calc(${pHi}% - 8px)`;
+    lo.style.clipPath = `inset(0 ${100 - pLo}% 0 0)`;
+    hi.style.clipPath = `inset(0 0 0 ${pHi}%)`;
+  };
+  lo.addEventListener("input", () => sync(lo));
+  hi.addEventListener("input", () => sync(hi));
+  sync(null);
+}
+function setup(slider) {
+  const el = slider;
+  if (el.__icenSliderInit) return;
+  el.__icenSliderInit = true;
+  const natives = Array.from(slider.querySelectorAll(".slider-native"));
+  if (natives.length === 0) return;
+  if (slider.classList.contains("slider--dual")) setupDual(slider, natives);
+  else setupSingle(slider, natives[0]);
+}
+function initSlider(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches(".slider")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".slider")));
+  for (const c of containers) setup(c);
+}
+export {
+  initSlider
+};

package/dist/behaviors/tag-input.mjs

@@ -0,0 +1,74 @@
+// src/behaviors/tag-input.ts
+function setup(wrap) {
+  const el = wrap;
+  if (el.__icenTagInit) return;
+  el.__icenTagInit = true;
+  const fieldEl = wrap.querySelector(".tag-input-field");
+  if (!fieldEl) return;
+  const field = fieldEl;
+  const maxAttr = wrap.getAttribute("data-max");
+  const max = maxAttr ? Number(maxAttr) || Infinity : Infinity;
+  const placeholder = field.placeholder;
+  let tags = (wrap.getAttribute("data-tags") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
+  function sync() {
+    wrap.setAttribute("data-tags", tags.join(","));
+    wrap.classList.toggle("is-max", tags.length >= max);
+    field.placeholder = tags.length === 0 ? placeholder : "";
+  }
+  function remove(index) {
+    tags.splice(index, 1);
+    render();
+  }
+  function chip(tag, index) {
+    const el2 = document.createElement("span");
+    el2.className = "tag-chip";
+    const label = document.createElement("span");
+    label.textContent = tag;
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "tag-chip-x focus-ring";
+    x.textContent = "\xD7";
+    x.setAttribute("aria-label", `\u79FB\u9664 ${tag}`);
+    x.addEventListener("mousedown", (ev) => ev.preventDefault());
+    x.addEventListener("click", () => remove(index));
+    el2.append(label, x);
+    return el2;
+  }
+  function render() {
+    wrap.querySelectorAll(".tag-chip").forEach((c) => c.remove());
+    tags.forEach((t, i) => wrap.insertBefore(chip(t, i), field));
+    sync();
+  }
+  function commit() {
+    const v = field.value.trim();
+    if (!v) return;
+    if (tags.length >= max) return;
+    if (tags.includes(v)) {
+      field.value = "";
+      return;
+    }
+    tags.push(v);
+    field.value = "";
+    render();
+  }
+  field.addEventListener("keydown", (ev) => {
+    if (ev.key === "Enter" || ev.key === ",") {
+      ev.preventDefault();
+      commit();
+    } else if (ev.key === "Backspace" && !field.value && tags.length > 0) {
+      remove(tags.length - 1);
+    }
+  });
+  field.addEventListener("blur", commit);
+  render();
+}
+function initTagInput(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof HTMLElement && root.matches(".tag-input[data-tags]")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".tag-input[data-tags]")));
+  for (const c of containers) setup(c);
+}
+export {
+  initTagInput
+};

package/dist/behaviors/tree.mjs

@@ -0,0 +1,44 @@
+// src/behaviors/tree.ts
+function setup(tree) {
+  const el = tree;
+  if (el.__icenTreeInit) return;
+  el.__icenTreeInit = true;
+  tree.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const node = target.closest(".tree-node");
+    if (!node || node.closest(".tree") !== tree) return;
+    if (node.classList.contains("is-disabled")) return;
+    const li = node.closest("li");
+    if (!li) return;
+    const childUl = li.querySelector(":scope > ul");
+    if (target.closest(".tree-toggle")) {
+      if (!childUl) return;
+      const toggle = node.querySelector(".tree-toggle");
+      const collapsed = childUl.hasAttribute("hidden");
+      if (collapsed) {
+        childUl.removeAttribute("hidden");
+        toggle?.classList.remove("is-collapsed");
+        toggle?.setAttribute("aria-expanded", "true");
+      } else {
+        childUl.setAttribute("hidden", "");
+        toggle?.classList.add("is-collapsed");
+        toggle?.setAttribute("aria-expanded", "false");
+      }
+      return;
+    }
+    if (childUl) return;
+    tree.querySelectorAll(".tree-node.is-selected").forEach((n) => n.classList.remove("is-selected"));
+    node.classList.add("is-selected");
+  });
+}
+function initTree(root = document) {
+  if (typeof document === "undefined") return;
+  const trees = [];
+  if (root instanceof Element && root.matches(".tree")) trees.push(root);
+  trees.push(...Array.from(root.querySelectorAll(".tree")));
+  for (const t of trees) setup(t);
+}
+export {
+  initTree
+};

package/dist/behaviors/upload.mjs

@@ -0,0 +1,55 @@
+// src/behaviors/upload.ts
+function setup(zone) {
+  const el = zone;
+  if (el.__icenUploadInit) return;
+  el.__icenUploadInit = true;
+  const input = zone.querySelector('input[type="file"]');
+  if (!input) return;
+  const openPicker = () => input.click();
+  zone.addEventListener("click", (ev) => {
+    if (ev.target === input) return;
+    openPicker();
+  });
+  zone.addEventListener("keydown", (ev) => {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      openPicker();
+    }
+  });
+  zone.addEventListener("dragover", (ev) => {
+    ev.preventDefault();
+    zone.classList.add("is-drag");
+  });
+  zone.addEventListener("dragleave", () => zone.classList.remove("is-drag"));
+  zone.addEventListener("drop", (ev) => {
+    ev.preventDefault();
+    zone.classList.remove("is-drag");
+    const files = ev.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+    let assigned = false;
+    try {
+      const dt = new DataTransfer();
+      for (const f of Array.from(files)) dt.items.add(f);
+      input.files = dt.files;
+      assigned = true;
+    } catch {
+      assigned = false;
+    }
+    if (assigned) {
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    } else {
+      const list = Array.from(files);
+      zone.dispatchEvent(new CustomEvent("icn:upload", { bubbles: true, detail: { files: list } }));
+    }
+  });
+}
+function initUpload(root = document) {
+  if (typeof document === "undefined") return;
+  const zones = [];
+  if (root instanceof HTMLElement && root.matches(".upload")) zones.push(root);
+  zones.push(...Array.from(root.querySelectorAll(".upload")));
+  for (const z of zones) setup(z);
+}
+export {
+  initUpload
+};

package/dist/components/breadcrumb.css

@@ -0,0 +1,31 @@
+/*
+ * @icen.ai/ui — Component: breadcrumb（面包屑）
+ * 用法：<nav class="breadcrumb" aria-label="面包屑"><ol>
+ *         <li><a class="breadcrumb-link" href="…">首页</a><span class="breadcrumb-sep" aria-hidden="true"></span></li>
+ *         <li><span class="breadcrumb-current" aria-current="page">当前页</span></li>
+ *       </ol></nav>
+ * 分隔符是 .breadcrumb-sep 的 ::after（›）；超长折叠用 .breadcrumb-ellipsis。
+ */
+
+.breadcrumb { display: flex; align-items: center; font-size: 13px; }
+.breadcrumb ol { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
+.breadcrumb li { display: flex; align-items: center; gap: 6px; }
+
+.breadcrumb-link {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--token-text-muted); text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+.breadcrumb-link:hover { color: var(--token-accent); text-decoration: none; }
+.breadcrumb-link > svg { width: 13px; height: 13px; flex-shrink: 0; }
+
+.breadcrumb-sep { color: var(--token-text-faint); font-size: 13px; line-height: 1; }
+.breadcrumb-sep::after { content: '›'; }
+
+.breadcrumb-current {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--token-text); font-weight: 500;
+}
+.breadcrumb-current > svg { width: 13px; height: 13px; flex-shrink: 0; }
+
+.breadcrumb-ellipsis { padding: 0 4px; color: var(--token-text-faint); }

package/dist/components/card.css

@@ -0,0 +1,56 @@
+/*
+ * @icen.ai/ui — Component: card（组合卡片容器）
+ * 包含：.card 四变体（默认 / elevated / outlined / glass）+ .card--interactive + .is-selected
+ * 子结构：.card-head / .card-title / .card-desc / .card-body / .card-foot / .card-meta / .card-action
+ * 规格源自 opengal src/presentation/ui/data/card.tsx。
+ */
+
+.card {
+  background: var(--token-card);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-inset);
+  border-radius: var(--radius-lg);
+}
+
+/* ── 变体 ── */
+.card--elevated { box-shadow: var(--token-shadow-card); }
+.card--outlined { border-color: var(--token-outline); box-shadow: none; }
+.card--glass {
+  background: var(--token-surface-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: none;
+}
+
+/* ── 修饰 ── */
+/* 可交互：cursor + .lift 基元同款效果（纯 CSS 无法组合类，规则在此复制一份） */
+.card--interactive {
+  cursor: pointer;
+  transition: border-color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+.card--interactive:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
+  box-shadow: var(--token-shadow-card);
+}
+.card.is-selected {
+  box-shadow: 0 0 0 2px var(--token-accent), 0 0 0 4px var(--token-bg);
+}
+
+/* ── 子结构 ── */
+.card-head {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+  padding: 16px;
+}
+.card-title { font-size: 15px; font-weight: 600; color: var(--token-text); line-height: 1.25; margin: 0; }
+.card-desc { font-size: 12px; color: var(--token-text-muted); margin: 2px 0 0; }
+.card-body { padding: 0 16px 16px; font-size: 13px; color: var(--token-text-muted); }
+.card-foot {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--token-outline-soft);
+}
+.card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--token-text-faint); }
+.card-action { margin-left: auto; }

package/dist/components/charts.css

@@ -0,0 +1,95 @@
+/*
+ * @icen.ai/ui — Component: charts（轻量图表，与 behaviors/charts 配套）
+ * 包含：.chart 容器 / .chart-empty / .chart-legend（图例行）/ .chart-labels（轴标签行）/
+ *       vbar（垂直柱状）/ hbar（水平条形）/ stack（堆叠条）/ donut（环形）/ line（折线）
+ * DOM 全部由 behaviors/charts.ts 以 createElement(NS) + textContent 构建；
+ * 单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 var(--token-accent)）。
+ * 规格源自 opengal src/presentation/ui/data/charts.tsx。
+ */
+
+.chart { width: 100%; }
+.chart-empty {
+  height: 150px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; color: var(--token-text-faint);
+}
+
+/* ── 图例 / 轴标签（donut / stack / vbar / line 共用） ── */
+.chart-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
+.chart-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; min-width: 0; }
+.chart-legend-dot {
+  width: 8px; height: 8px; flex-shrink: 0;
+  border-radius: var(--radius-full);
+  background: var(--chart-tone, var(--token-accent));
+}
+.chart-legend-label {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--token-text-muted);
+}
+.chart-legend-value { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--token-text-faint); }
+
+.chart-labels { display: flex; gap: 8px; margin-top: 8px; }
+.chart-labels > span {
+  flex: 1; min-width: 0;
+  text-align: center; font-size: 9px; color: var(--token-text-faint);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* ── vbar · 垂直柱状 ── */
+.chart-vbar { display: flex; align-items: flex-end; gap: 8px; height: 112px; }
+.chart-vbar-track {
+  flex: 1; height: 100%; min-width: 0;
+  display: flex; align-items: flex-end;
+  background: color-mix(in srgb, var(--token-fill-2) 45%, transparent);
+  border-radius: var(--radius-sm);
+}
+.chart-vbar-bar {
+  width: 100%;
+  border-radius: var(--radius-sm);
+  background: var(--chart-tone, var(--token-accent));
+  transition: height 500ms var(--ease-out);
+}
+
+/* ── hbar · 水平条形 ── */
+.chart-hbar { display: flex; flex-direction: column; gap: 8px; }
+.chart-hbar-row {
+  display: grid;
+  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
+  gap: 8px; align-items: center;
+  font-size: 11px;
+}
+.chart-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--token-text-muted); }
+.chart-hbar-track {
+  height: 10px; overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+}
+.chart-hbar-bar {
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--chart-tone, var(--token-accent));
+  transition: width 500ms var(--ease-out);
+}
+.chart-hbar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--token-text-faint); }
+
+/* ── stack · 堆叠条 ── */
+.chart-stack {
+  height: 16px;
+  display: flex; overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+  margin-bottom: 12px;
+}
+.chart-stack-seg {
+  height: 100%; min-width: 3px;
+  background: var(--chart-tone, var(--token-accent));
+  transition: width 500ms var(--ease-out);
+}
+
+/* ── donut · 环形 ── */
+.chart-donut { display: flex; align-items: center; gap: 12px; min-height: 150px; }
+.chart-donut > svg { width: 132px; height: 132px; flex-shrink: 0; }
+
+/* ── line · 折线 ── */
+.chart-line > svg { display: block; width: 100%; height: 150px; overflow: visible; }

package/dist/components/content.css

@@ -0,0 +1,195 @@
+/*
+ * @icen.ai/ui — Component: content（内容展示族）
+ * 包含：kbd（按键）/ code-inline（行内代码）/ list（分隔列表）/ accordion（手风琴，behaviors/accordion 配套）/
+ *       timeline（时间线）/ desc（描述列表）/ tree（树形，behaviors/tree 配套）
+ * 规格源自 opengal src/presentation/ui/data/exhibit.tsx 与 data/display.tsx。
+ */
+
+/* ══════════════ kbd · 按键 ══════════════ */
+.kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  vertical-align: middle;
+  font-family: var(--font-mono); font-weight: 500;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--token-outline);
+  background: var(--token-control);
+  color: var(--token-text-muted);
+  box-shadow: var(--token-shadow-inset);
+  height: 20px; min-width: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+}
+.kbd--sm { height: 16px; min-width: 16px; padding: 0 4px; font-size: 10px; }
+
+/* ══════════════ code-inline · 行内代码 ══════════════ */
+.code-inline {
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--token-accent);
+}
+
+/* ══════════════ list · 分隔列表 ══════════════ */
+.list { list-style: none; margin: 0; padding: 0; }
+.list-item {
+  padding: 8px;
+  border-radius: var(--radius-md);
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.list-item:hover { background: var(--token-control-hover); }
+.list .list-item + .list-item { border-top: 1px solid var(--token-outline-soft); }
+
+/* ══════════════ accordion · 手风琴（behaviors/accordion 配套） ══════════════
+ * DOM 契约：
+ *   <div class="accordion" data-single?>
+ *     <div class="accordion-item">
+ *       <button class="accordion-trigger">标题 <svg class="accordion-chevron"/></button>
+ *       <div class="accordion-panel"><div class="accordion-panel-inner">内容</div></div>
+ *     </div>
+ *   </div>
+ * 展开 = item 挂 .is-open；panel 用 grid-template-rows 0fr→1fr 做过渡。
+ */
+.accordion-item { border-bottom: 1px solid var(--token-outline-soft); }
+.accordion-item:last-child { border-bottom: 0; }
+.accordion-trigger {
+  width: 100%;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 12px 8px;
+  font-size: 14px; font-weight: 500;
+  color: var(--token-text); text-align: left;
+  background: none; border: 0; cursor: pointer;
+  border-radius: var(--radius-md);
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.accordion-trigger:hover { background: var(--token-control-hover); }
+.accordion-chevron {
+  width: 14px; height: 14px; flex-shrink: 0;
+  color: var(--token-text-faint);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }
+.accordion-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-normal) var(--ease-out);
+}
+.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
+.accordion-panel-inner {
+  overflow: hidden;
+  padding: 0 8px 12px;
+  font-size: 13px;
+  color: var(--token-text-muted);
+  line-height: 1.6;
+}
+
+/* ══════════════ timeline · 时间线 ══════════════
+ * DOM 契约：.timeline-item > .timeline-dot + .timeline-body
+ * 连接线 = item 的 ::after（相对 item 绝对定位，从 dot 下方贯穿到下一项），末项不画。
+ */
+.timeline { display: flex; flex-direction: column; }
+.timeline-item {
+  position: relative;
+  display: flex; gap: 12px;
+  padding-bottom: 24px;
+}
+.timeline-item:last-child { padding-bottom: 0; }
+.timeline-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 13.5px;              /* 28px dot 的水平中心 */
+  top: 32px;                 /* 28px dot + 4px 间距 */
+  bottom: 0;
+  width: 1px;
+  background: var(--token-outline-soft);
+}
+.timeline-dot {
+  width: 28px; height: 28px; flex-shrink: 0;
+  border-radius: var(--radius-full);
+  display: flex; align-items: center; justify-content: center;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  color: var(--token-text-muted);
+  z-index: 1;
+}
+.timeline-dot svg { width: 13px; height: 13px; }
+.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent); border-color: transparent; }
+.timeline-body { flex: 1; min-width: 0; }
+.timeline-head { display: flex; align-items: center; gap: 8px; }
+.timeline-title { font-size: 13px; font-weight: 500; color: var(--token-text); }
+.timeline-time { font-size: 11px; color: var(--token-text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
+.timeline-desc { font-size: 12px; color: var(--token-text-muted); margin: 4px 0 0; }
+
+/* ══════════════ desc · 描述列表 ══════════════
+ * 列数由容器 style="--desc-cols:N" 指定，默认 2；item 可用 style="--desc-span:N" 跨列。
+ * --bordered 变体：gap:1px 露出容器底色形成格线。
+ */
+.desc { display: flex; flex-direction: column; gap: 8px; }
+.desc-title { font-size: 13px; font-weight: 500; color: var(--token-text); margin: 0; }
+.desc-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--desc-cols, 2), minmax(0, 1fr));
+  gap: 1px;
+  margin: 0;
+}
+.desc--bordered .desc-grid {
+  background: var(--token-outline-soft);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.desc-item { grid-column: span var(--desc-span, 1); }
+.desc--bordered .desc-item { background: var(--token-card); padding: 8px 12px; }
+.desc:not(.desc--bordered) .desc-item { display: flex; flex-direction: column; gap: 2px; }
+.desc-item dt { font-size: 11px; color: var(--token-text-faint); }
+.desc-item dd { font-size: 13px; color: var(--token-text); margin: 0; }
+
+/* ══════════════ tree · 树形（behaviors/tree 配套） ══════════════
+ * DOM 契约：
+ *   <ul class="tree"><li>
+ *     <div class="tree-node" style="--depth:0">
+ *       <button class="tree-toggle"><svg/></button>   <!-- 叶子用空 span.tree-toggle 占 18px -->
+ *       <span class="tree-label">节点</span>
+ *     </div>
+ *     <ul>…子节点…</ul>                                <!-- 可选；behavior 切换 hidden -->
+ *   </li></ul>
+ * 折叠 = toggle 挂 .is-collapsed（chevron 转 -90°）+ 子 ul hidden；选中 = node 挂 .is-selected。
+ */
+.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
+.tree { user-select: none; }
+.tree-node {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 8px 6px calc(4px + var(--depth, 0) * 14px);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  color: var(--token-text);
+  cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.tree-node:hover { background: var(--token-control-hover); }
+.tree-node.is-selected {
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+  font-weight: 500;
+}
+.tree-node.is-disabled { opacity: 0.4; pointer-events: none; }
+.tree-toggle {
+  width: 18px; height: 18px; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: 0; background: none;
+  color: var(--token-text-muted);
+  cursor: pointer;
+}
+.tree-toggle:hover { color: var(--token-text); }
+.tree-toggle svg {
+  width: 13px; height: 13px;
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.tree-toggle.is-collapsed svg { transform: rotate(-90deg); }
+.tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/components/empty.css

@@ -0,0 +1,25 @@
+/*
+ * @icen.ai/ui — Component: empty（空状态）
+ * 包含：.empty 容器 + .empty-icon / .empty-title / .empty-desc / .empty-action
+ * 规格源自 opengal src/presentation/ui/data/display.tsx 的 EmptyState。
+ */
+
+.empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center;
+  padding: 48px 16px;
+}
+.empty-icon {
+  width: 48px; height: 48px;
+  border-radius: var(--radius-lg);
+  background: var(--token-card);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-inset);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--token-text-faint);
+  margin-bottom: 16px;
+}
+.empty-icon svg { width: 24px; height: 24px; }
+.empty-title { font-size: 14px; font-weight: 500; color: var(--token-text); margin: 0; }
+.empty-desc { font-size: 12px; color: var(--token-text-muted); margin: 4px 0 0; max-width: 240px; }
+.empty-action { margin-top: 16px; }