@fangxinyan/lumina 0.5.0 → 0.6.0

package/dist/styles.css

@@ -711,11 +711,28 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .slider.disabled .slider-mark { pointer-events: none; }
 /* ============ Progress ============ */
 .progress {
+  --progress-fill: var(--accent);
+  --progress-fill-glow: var(--accent-glow);
+  --progress-inset: 2px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
+.progress.sm { --progress-inset: 1px; }
+.progress.lg { --progress-inset: 2px; }
+.progress.success {
+  --progress-fill: var(--success);
+  --progress-fill-glow: color-mix(in oklch, var(--success) 35%, transparent);
+}
+.progress.warning {
+  --progress-fill: var(--warning);
+  --progress-fill-glow: color-mix(in oklch, var(--warning) 35%, transparent);
+}
+.progress.danger {
+  --progress-fill: var(--danger);
+  --progress-fill-glow: color-mix(in oklch, var(--danger) 35%, transparent);
+}
 .progress-label {
   display: flex;
   justify-content: space-between;
@@ -727,7 +744,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
   height: 10px;
   border-radius: 999px;
-  background: var(--bg);
+  padding: var(--progress-inset);
+  box-sizing: border-box;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--bg) 88%, var(--shadow-light)),
+    color-mix(in oklch, var(--bg) 92%, var(--shadow-dark))
+  );
   box-shadow: var(--neu-in-sm);
   overflow: hidden;
   position: relative;
@@ -735,41 +758,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .progress.sm .progress-track { height: 6px; }
 .progress.lg .progress-track { height: 14px; }
 .progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 70%, white), var(--accent));
-  border-radius: 999px;
-  box-shadow: 0 0 12px var(--accent-glow);
-  transition: width var(--dur-slow) var(--ease);
-}
-.progress.success .progress-bar { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
-.progress.warning .progress-bar { background: linear-gradient(90deg, color-mix(in oklch, var(--warning) 70%, white), var(--warning)); box-shadow: 0 0 10px color-mix(in oklch, var(--warning) 35%, transparent); }
-.progress.danger  .progress-bar { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger));  box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
-.ring {
-  --size: 72px;
-  --val: 50;
-  width: var(--size); height: var(--size);
-  border-radius: 999px;
-  background: conic-gradient(var(--accent) calc(var(--val) * 1%), var(--bg-sunken) 0);
-  display: grid; place-items: center;
   position: relative;
-  box-shadow: var(--neu-out-sm);
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--progress-fill) 68%, var(--shadow-light)) 0%,
+    var(--progress-fill) 55%,
+    color-mix(in oklch, var(--progress-fill) 84%, var(--shadow-dark)) 100%
+  );
+  box-shadow:
+    inset 1px 1px 2px color-mix(in oklch, var(--progress-fill) 18%, var(--shadow-dark)),
+    inset -1px -1px 2px color-mix(in oklch, var(--progress-fill) 14%, var(--shadow-light)),
+    1px 1px 4px color-mix(in oklch, var(--progress-fill) 16%, var(--shadow-dark)),
+    -1px -1px 4px color-mix(in oklch, var(--progress-fill) 10%, var(--shadow-light)),
+    0 0 10px var(--progress-fill-glow);
+  transition: width var(--dur-slow) var(--ease), box-shadow var(--dur) var(--ease);
+  overflow: hidden;
 }
-.ring.success { background: conic-gradient(var(--success) calc(var(--val) * 1%), var(--bg-sunken) 0); }
-.ring.warning { background: conic-gradient(var(--warning) calc(var(--val) * 1%), var(--bg-sunken) 0); }
-.ring.danger  { background: conic-gradient(var(--danger)  calc(var(--val) * 1%), var(--bg-sunken) 0); }
-.ring::before {
+.progress-bar::before {
   content: "";
   position: absolute;
-  inset: 8px;
-  border-radius: 999px;
-  background: var(--bg);
-  box-shadow: var(--neu-in-sm);
-}
-.ring-label {
-  position: relative;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--accent-ink);
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--shadow-light) 72%, transparent) 0%,
+    color-mix(in oklch, var(--shadow-light) 28%, transparent) 38%,
+    transparent 70%
+  );
+  pointer-events: none;
 }
 /* ============ Tag & Badge ============ */
 .tag {
@@ -1542,6 +1560,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tip-anchor {
   position: relative;
   display: inline-flex;
+  align-self: flex-start;
 }
 .tip {
   background: var(--bg-sunken);
@@ -1576,7 +1595,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-float);
   padding: 12px 16px;
   min-width: 240px;
-  display: flex; align-items: flex-start; gap: 10px;
+  display: flex; align-items: center; gap: 10px;
   font-size: 13px;
   pointer-events: auto;
   animation: toastIn var(--dur-slow) var(--ease);
@@ -1585,7 +1604,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .toast.success { border-color: var(--success); }
 .toast.warning { border-color: var(--warning); }
 .toast.danger  { border-color: var(--danger); }
-.toast .toast-icon { color: var(--accent); margin-top: 2px; }
+.toast .toast-icon { color: var(--accent); flex-shrink: 0; }
 .toast.success .toast-icon { color: var(--success); }
 .toast.warning .toast-icon { color: var(--warning); }
 .toast.danger  .toast-icon { color: var(--danger); }
@@ -1606,10 +1625,91 @@ input, textarea, select { font-family: inherit; color: inherit; }
   z-index: 1000;
   background: var(--bg);
   border-radius: var(--r-md);
-  padding: var(--gap-3);
   min-width: 220px;
   box-shadow: var(--neu-float);
-  animation: menuIn var(--dur) var(--ease);
+  position: relative;
+}
+/*
+ * Direction-aware entrance.
+ * We animate `opacity` + `translate` (the standalone property, NOT `transform`)
+ * so we don't clobber the inline `transform: translateX(-50%)` that useFloating
+ * applies for cross-axis centering.
+ */
+.popover-bottom { animation: popoverInDown var(--dur) var(--ease); }
+.popover-top    { animation: popoverInUp   var(--dur) var(--ease); }
+.popover-left   { animation: popoverInLeft var(--dur) var(--ease); }
+.popover-right  { animation: popoverInRight var(--dur) var(--ease); }
+@keyframes popoverInDown  { from { opacity: 0; translate: 0 -6px; } }
+@keyframes popoverInUp    { from { opacity: 0; translate: 0  6px; } }
+@keyframes popoverInLeft  { from { opacity: 0; translate:  6px 0; } }
+@keyframes popoverInRight { from { opacity: 0; translate: -6px 0; } }
+/* ---- Header ---- */
+.popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-3) var(--gap-3) 0;
+  gap: var(--gap-2);
+}
+.popover-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--fg);
+}
+.popover-close {
+  all: unset;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--fg-muted);
+  line-height: 1;
+  padding: 2px 4px;
+  border-radius: var(--r-xs);
+  transition: color var(--dur-fast) var(--ease);
+  margin-left: auto;
+}
+.popover-close:hover {
+  color: var(--fg);
+}
+/* ---- Body ---- */
+.popover-body {
+  padding: var(--gap-3);
+}
+.popover-header + .popover-body {
+  padding-top: var(--gap-2);
+}
+/* ---- Arrow ---- */
+.popover-arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--bg);
+  box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.2);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.popover-arrow-bottom {
+  top: -5px;
+  left: 50%;
+  margin-left: -5px;
+  box-shadow: -2px -2px 4px rgba(163, 177, 198, 0.2);
+}
+.popover-arrow-top {
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.2);
+}
+.popover-arrow-left {
+  right: -5px;
+  top: 50%;
+  margin-top: -5px;
+  box-shadow: 2px -2px 4px rgba(163, 177, 198, 0.2);
+}
+.popover-arrow-right {
+  left: -5px;
+  top: 50%;
+  margin-top: -5px;
+  box-shadow: -2px 2px 4px rgba(163, 177, 198, 0.2);
 }
 /* ============ Alert ============ */
 .alert {

package/docs/llms/appshell.md

@@ -0,0 +1,36 @@
+# AppShell 应用外壳
+
+> 组合 TitleBar、Sidebar 与主内容区的 Electron 桌面布局容器。
+
+## 导入
+
+```tsx
+import { AppShell, TitleBar, Sidebar, StatusBar } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 完整工作台外壳
+
+```tsx
+<AppShell
+  titleBar={<TitleBar title="Lumina Mail" platform="mac" />}
+  sidebar={<Sidebar items={items} activeKey={active} onSelect={setActive} />}
+>
+  <main>...</main>
+</AppShell>
+```
+
+## API
+
+**AppShell**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| titleBar | `ReactNode` | — | 顶部标题栏区域 |
+| sidebar | `ReactNode` | — | 左侧导航区域 |
+| children | `ReactNode` | — | 主内容区 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/popover.md

@@ -1,6 +1,6 @@
 # Popover 气泡卡片
 
-> 比 Tooltip 更丰富,可承载交互内容。
+> 比 Tooltip 更丰富，可承载交互内容。
 
 ## 导入
 
@@ -10,11 +10,137 @@ import { Popover } from "@fangxinyan/lumina";
 
 ## 示例
 
-### 基础
+### 基础用法
+
+点击触发，弹出气泡卡片
+
+```tsx
+<Row gap={24}>
+  <Popover
+    title="确认删除？"
+    content={
+      <div>
+        <div style={{ color: "var(--fg-muted)", fontSize: 13, marginBottom: 12 }}>
+          删除后无法恢复。
+        </div>
+        <Row gap={6}>
+          <Button size="sm" variant="ghost">取消</Button>
+          <Button size="sm" variant="danger">删除</Button>
+        </Row>
+      </div>
+    }
+  >
+    <Button variant="danger" icon="trash">删除项目</Button>
+  </Popover>
+
+  <Popover
+    placement="right"
+    content={
+      <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 160 }}>
+        <Avatar alt="金" size="sm" />
+        <div>
+          <div style={{ fontSize: 13, fontWeight: 600 }}>金伟</div>
+          <div style={{ fontSize: 11, color: "var(--fg-muted)" }}>设计总监</div>
+        </div>
+      </div>
+    }
+  >
+    <Avatar alt="金" />
+  </Popover>
+</Row>
+```
+
+### 四方向
+
+支持 top / bottom / left / right 四个方向
+
+```tsx
+<div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 12 }}>
+  <Popover placement="top" arrow content={<div>上方弹出内容</div>}>
+    <Button variant="ghost">上方</Button>
+  </Popover>
+  <Popover placement="bottom" arrow content={<div>下方弹出内容</div>}>
+    <Button variant="ghost">下方</Button>
+  </Popover>
+  <Popover placement="left" arrow content={<div>左侧弹出内容</div>}>
+    <Button variant="ghost">左侧</Button>
+  </Popover>
+  <Popover placement="right" arrow content={<div>右侧弹出内容</div>}>
+    <Button variant="ghost">右侧</Button>
+  </Popover>
+</div>
+```
+
+### 箭头
+
+arrow 属性添加指向触发元素的小箭头
+
+```tsx
+<Popover
+  arrow
+  title="系统通知"
+  content={<div style={{ color: "var(--fg-muted)", fontSize: 13 }}>你有 3 条未读消息。</div>}
+>
+  <Button icon="bell">消息</Button>
+</Popover>
+```
+
+### 可关闭
+
+closable 显示关闭按钮，适合信息提示场景
+
+```tsx
+<Popover
+  closable
+  arrow
+  title="注意事项"
+  content={<div style={{ color: "var(--fg-muted)", fontSize: 13 }}>此操作需要管理员权限才能执行。</div>}
+>
+  <Button icon="alert">权限</Button>
+</Popover>
+```
+
+### Hover 触发
+
+trigger="hover" 鼠标悬停触发
+
+```tsx
+<Popover
+  trigger="hover"
+  arrow
+  content={
+    <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 160 }}>
+      <Avatar alt="云" size="sm" />
+      <div>
+        <div style={{ fontSize: 13, fontWeight: 600 }}>云曦</div>
+        <div style={{ fontSize: 11, color: "var(--fg-muted)" }}>前端工程师</div>
+      </div>
+    </div>
+  }
+>
+  <Avatar alt="云" />
+</Popover>
+```
+
+### 表单内容
+
+气泡内可放置表单等复杂交互
 
 ```tsx
-<Popover content={<>...</>}>
-  <Button>触发</Button>
+<Popover
+  title="快速备注"
+  closable
+  arrow
+  content={
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <Input placeholder="输入备注..." />
+      <div style={{ display: "flex", justifyContent: "flex-end", gap: 6 }}>
+        <Button size="sm">保存</Button>
+      </div>
+    </div>
+  }
+>
+  <Button icon="edit">备注</Button>
 </Popover>
 ```
 
@@ -25,9 +151,15 @@ import { Popover } from "@fangxinyan/lumina";
 | Prop | 类型 | 默认 | 说明 |
 | --- | --- | --- | --- |
 | content \* | `ReactNode` | — | 浮层内容 |
-| placement | `"top" | "bottom" | "left" | "right"` | `"bottom"` | 位置 |
+| title | `ReactNode` | — | 标题 |
+| placement | `"top" | "bottom" | "left" | "right"` | `"bottom"` | 弹出位置 |
 | trigger | `"click" | "hover"` | `"click"` | 触发方式 |
-| open / defaultOpen / onOpenChange | `—` | — | 受控显示 |
+| arrow | `boolean` | `false` | 显示箭头 |
+| closable | `boolean` | `false` | 显示关闭按钮 |
+| width | `number | "auto"` | — | 面板宽度，"auto" 自适应 |
+| open | `boolean` | — | 受控显示状态 |
+| defaultOpen | `boolean` | `false` | 非受控初始状态 |
+| onOpenChange | `(open: boolean) => void` | — | 显示状态变化回调 |
 
 
 ---

package/docs/llms/progress.md

@@ -1,11 +1,11 @@
 # Progress 进度
 
-> 条形进度 Progress 与环形进度 Ring。
+> 条形进度 Progress。
 
 ## 导入
 
 ```tsx
-import { Progress, Ring } from "@fangxinyan/lumina";
+import { Progress } from "@fangxinyan/lumina";
 ```
 
 ## 示例
@@ -16,19 +16,19 @@ import { Progress, Ring } from "@fangxinyan/lumina";
 <Progress value={v} label="下载中" showValue />
 ```
 
-### 尺寸
+### 自定义颜色
 
 ```tsx
-<Progress size="sm" value={60} />
-<Progress value={60} />
-<Progress size="lg" value={60} />
+<Progress value={66} color="oklch(72% 0.18 285)" label="品牌同步" showValue />
+<Progress value={38} color="#22c1c3" label="音频缓冲" showValue />
 ```
 
-### 环形进度
+### 尺寸
 
 ```tsx
-<Ring value={65} />
-<Ring value={90} tone="success" size={80}><strong>90%</strong></Ring>
+<Progress size="sm" value={60} />
+<Progress value={60} />
+<Progress size="lg" value={60} />
 ```
 
 ## API
@@ -40,19 +40,11 @@ import { Progress, Ring } from "@fangxinyan/lumina";
 | value \* | `number` | — | 0–max 之间 |
 | max | `number` | `100` | 最大值 |
 | tone | `"accent" | "success" | "warning" | "danger"` | `"accent"` | 色调 |
+| color | `string` | — | 自定义填充色,覆盖 tone |
 | size | `"sm" | "md" | "lg"` | `"md"` | 尺寸 |
 | label | `ReactNode` | — | 顶部文案 |
 | showValue | `boolean` | `false` | 显示百分比 |
 
 
-**Ring**
-
-| Prop | 类型 | 默认 | 说明 |
-| --- | --- | --- | --- |
-| value \* | `number` | — | 0–100 |
-| size | `number` | `72` | 直径 (px) |
-| tone | `"accent" | "success" | ...` | `"accent"` | 色调 |
-
-
 ---
 [← 回到索引](../llms.md)

package/docs/llms/timeline.md

@@ -0,0 +1,140 @@
+# Timeline 时间线
+
+> 垂直时间线，支持等待状态、自定义圆点、交替布局
+
+## 示例
+
+### 基础用法
+
+最简单的时间线
+
+```tsx
+<Timeline
+  items={[
+    { children: "创建项目 2024-01-01" },
+    { children: "初始化仓库 2024-01-05" },
+    { children: "发布 v0.1.0 2024-02-01" },
+    { children: "里程碑达成 2024-03-15" },
+  ]}
+/>
+```
+
+### 彩色节点
+
+通过 color 区分不同状态
+
+```tsx
+<Timeline
+  items={[
+    { children: "成功部署", color: "success" },
+    { children: "告警通知", color: "warning" },
+    { children: "构建失败", color: "danger" },
+    { children: "信息更新", color: "info" },
+  ]}
+/>
+```
+
+### 等待状态
+
+pending 属性展示加载中的末尾节点，适合表示流程尚未结束
+
+```tsx
+<Timeline
+  pending
+  pendingContent="部署中..."
+  items={[
+    { children: "提交代码 10:21", color: "success" },
+    { children: "代码审查通过 10:45", color: "success" },
+    { children: "CI 构建完成 11:02", color: "success" },
+  ]}
+/>
+```
+
+### 自定义等待图标
+
+pending 传入 ReactNode 自定义等待指示器
+
+```tsx
+<Timeline
+  pending={<Icon name="clock" size={14} />}
+  pendingContent="等待审批..."
+  items={[
+    { children: "提交申请" },
+    { children: "部门审核通过" },
+  ]}
+/>
+```
+
+### 自定义圆点
+
+通过 dot 字段自定义每个节点的图标
+
+```tsx
+<Timeline
+  items={[
+    { children: "项目创建", dot: <Icon name="folder" size={14} /> },
+    { children: "代码提交", dot: <Icon name="code" size={14} /> },
+    { children: "发布上线", dot: <Icon name="zap" size={14} /> },
+  ]}
+/>
+```
+
+### 交替模式
+
+mode="alternate" 让内容交替出现在两侧
+
+```tsx
+<Timeline
+  mode="alternate"
+  items={[
+    { children: "创建项目", label: "2024-01" },
+    { children: "完成设计稿", label: "2024-02" },
+    { children: "开发完成", label: "2024-03" },
+    { children: "发布上线", label: "2024-04" },
+  ]}
+/>
+```
+
+### 倒序
+
+reverse 属性将时间线反转，最新的事件在最上面
+
+```tsx
+<Timeline
+  reverse
+  pending
+  pendingContent="进行中..."
+  items={[
+    { children: "第一步：需求确认", color: "success" },
+    { children: "第二步：开发中", color: "success" },
+    { children: "第三步：测试", color: "warning" },
+  ]}
+/>
+```
+
+## API
+
+**Timeline**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| items \* | `TimelineItemConfig[]` | — | 时间线节点数组 |
+| pending | `boolean | ReactNode` | `false` | 显示末尾等待节点；true 显示默认 spinner，传 ReactNode 自定义 |
+| pendingContent | `ReactNode` | `"加载中..."` | 等待节点的文字内容 |
+| mode | `"left" | "right" | "alternate"` | `"left"` | 布局模式 |
+| reverse | `boolean` | `false` | 反转节点顺序 |
+
+
+**TimelineItemConfig**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key | `string` | — | 唯一标识 |
+| children | `ReactNode` | — | 节点内容 |
+| label | `ReactNode` | — | 对侧标签（alternate 模式下使用） |
+| color | `"accent" | "success" | "warning" | "danger" | "info" | "muted"` | `"accent"` | 圆点颜色 |
+| dot | `ReactNode` | — | 自定义圆点内容 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.5.0`
+- **版本**: `0.6.0`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
@@ -23,13 +23,14 @@
    `npm install @fangxinyan/lumina`
 2. **引入样式**(任一即可):  
    ```tsx
-   import "@fangxinyan/lumina/styles"; // 一次性引入全部组件样式
+   import "@fangxinyan/lumina/styles"; // 设计令牌 + 全局 reset + 全部组件样式
    ```
    或按组件单独引入(适合 tree-shake 到极限):  
    ```tsx
-   import "@fangxinyan/lumina/tokens";         // 设计令牌 + 全局 reset
-   import { Button } from "@fangxinyan/lumina"; // 会自动带上 Button.css
+   import "@fangxinyan/lumina/tokens";         // 仅设计令牌,不含全局 reset
+   import { Button } from "@fangxinyan/lumina"; // 会自动带上 Button.css / shared.css
    ```
+   如果你还需要 reset / scrollbar / focus-visible 基线样式,请改用 `@fangxinyan/lumina/styles`。
 3. **TypeScript**: 所有 `XxxProps` 接口都是 `export`,可直接 `import { Button, type ButtonProps } from "@fangxinyan/lumina";`
 4. **主题**: 用 `<ThemeProvider>` 包根;运行时可通过 `useTheme()` 改。六种强调色 (`rose / sky / coral / mint / violet / amber`) × 两种模式 (`light / dark` + `system`) × 三档密度 (`compact / comfortable / spacious`)。详见 [`llms/theme.md`](./llms/theme.md)。
 5. **图标**: 所有接受 `icon / leadingIcon / trailingIcon` 的 prop 用字符串 `IconName`。完整列表见 [`llms/icon.md`](./llms/icon.md)。
@@ -71,7 +72,8 @@
 - [Avatar 头像](./llms/avatar.md) — 用图像、首字母代表用户或事物。
 - [Image 图片](./llms/image.md) — 凹陷外框包裹的图片容器,带预览、错误占位。
 - [Divider 分隔符](./llms/divider.md) — 对内容进行分割。
-- [Progress 进度](./llms/progress.md) — 条形进度 Progress 与环形进度 Ring。
+- [Progress 进度](./llms/progress.md) — 条形进度 Progress。
+- [Timeline 时间线](./llms/timeline.md) — 垂直时间线，支持等待状态、自定义圆点、交替布局
 - [List 列表](./llms/list.md) — 承载一组结构化的同质化数据。
 - [Table 表格](./llms/table.md) — 结构化数据展示。
 - [Table Pro](./llms/tablepro.md) — 带工具栏 / 搜索 / 筛选 / 排序 / 多选 / 分页的全功能表格。
@@ -86,7 +88,7 @@
 - [Drawer 抽屉](./llms/drawer.md) — 从屏幕边缘滑出的浮层。
 - [Toast 通知](./llms/toast.md) — 全局轻量提示,4 种语义。
 - [Tooltip 文字提示](./llms/tooltip.md) — 鼠标悬浮触发的简短说明。
-- [Popover 气泡卡片](./llms/popover.md) — 比 Tooltip 更丰富,可承载交互内容。
+- [Popover 气泡卡片](./llms/popover.md) — 比 Tooltip 更丰富，可承载交互内容。
 - [Alert 警告提示](./llms/alert.md) — 页面中嵌入的警告/提示。
 - [Empty 空状态](./llms/empty.md) — 列表、页面或容器无数据时的占位。
 - [Spinner 加载](./llms/spinner.md) — 表示任务正在进行,提示用户等待。
@@ -98,6 +100,7 @@
 - [WindowControls 窗口控件](./llms/windowcontrols.md) — 独立的窗口控件按钮组。
 - [Sidebar 侧边栏](./llms/sidebar.md) — 应用主导航,沿屏幕左侧垂直排列。
 - [StatusBar 状态栏](./llms/statusbar.md) — 窗口底部状态栏,展示分支、编码、行列等应用元信息。
+- [AppShell 应用外壳](./llms/appshell.md) — 组合 TitleBar、Sidebar 与主内容区的 Electron 桌面布局容器。
 - [Splitter 可拖拽分栏](./llms/splitter.md) — 两栏之间可拖拽的分隔条,支持横向、纵向与嵌套。
 - [ContextMenu 右键菜单](./llms/contextmenu.md) — 桌面应用风格的右键上下文菜单。
 - [CommandPalette ⌘K 命令面板](./llms/commandpalette.md) — 全局命令搜索与执行入口。