@fangxinyan/lumina 0.4.0 → 0.5.1

package/dist/styles.css

@@ -592,14 +592,23 @@ input, textarea, select { font-family: inherit; color: inherit; }
 /* ============ Slider ============ */
 .slider {
   position: relative;
-  height: 36px;
   width: 100%;
   display: flex;
   align-items: center;
+  gap: 10px;
   cursor: pointer;
+  min-height: 36px;
 }
 .slider.has-marks { padding-bottom: 26px; }
 .slider.disabled { opacity: 0.5; cursor: not-allowed; }
+/* Rail: positioning context for track + thumbs + marks */
+.slider-rail {
+  position: relative;
+  flex: 1 1 0%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+}
 .slider-track {
   position: relative;
   width: 100%;
@@ -607,7 +616,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: 999px;
   background: var(--bg);
   box-shadow: var(--neu-in-sm);
-  overflow: hidden;
+  touch-action: none;
+  z-index: 1;
 }
 .slider-fill {
   position: absolute;
@@ -616,6 +626,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: 0 0 12px var(--accent-glow);
   border-radius: 999px;
   transition: left var(--dur-fast) var(--ease), right var(--dur-fast) var(--ease);
+  pointer-events: none;
 }
 .slider-thumb {
   position: absolute;
@@ -627,42 +638,42 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transform: translate(-50%, -50%);
   transition: all var(--dur-fast) var(--ease);
   display: grid; place-items: center;
-  pointer-events: none;
+  z-index: 3;
+  outline: none;
+  touch-action: none;
 }
-.slider.has-marks .slider-thumb { top: calc(50% - 13px); }
-.slider.has-marks .slider-track { margin-top: -26px; }
 .slider-thumb::after {
   content: "";
   width: 6px; height: 6px;
   border-radius: 999px;
-  background: var(--accent);
+  background: var(--slider-thumb-color, var(--accent));
+}
+.slider-thumb:focus-visible {
+  box-shadow: var(--neu-out-sm), 0 0 0 3px var(--accent-glow);
 }
 .slider:hover .slider-thumb { transform: translate(-50%, -50%) scale(1.08); }
-.slider input[type="range"] {
-  position: absolute;
-  inset: 0;
-  width: 100%; height: 100%;
-  opacity: 0;
-  cursor: inherit;
-  margin: 0;
-  pointer-events: auto;
+.slider-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent-ink);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
-/* In range mode (two stacked inputs), split the hit zones by half so the user can drag either thumb */
-.slider input[type="range"]:nth-of-type(1):not(:only-of-type) { right: 50%; }
-.slider input[type="range"]:nth-of-type(2) { left: 50%; }
-.slider.has-marks input[type="range"] { height: calc(100% - 26px); }
-.slider-value { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); margin-left: 10px; }
+/* Tone variants */
+.slider.success .slider-thumb { --slider-thumb-color: var(--success); }
 .slider.success .slider-fill { 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); }
-.slider.success .slider-thumb::after { background: var(--success); }
+.slider.success .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--success) 35%, transparent); }
+.slider.warning .slider-thumb { --slider-thumb-color: var(--warning); }
 .slider.warning .slider-fill { 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); }
-.slider.warning .slider-thumb::after { background: var(--warning); }
+.slider.warning .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--warning) 35%, transparent); }
+.slider.danger .slider-thumb { --slider-thumb-color: var(--danger); }
 .slider.danger  .slider-fill { 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); }
-.slider.danger  .slider-thumb::after { background: var(--danger); }
+.slider.danger  .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--danger) 35%, transparent); }
 /* Marks */
 .slider-marks {
   position: absolute;
   left: 0; right: 0;
-  bottom: 0;
+  bottom: -26px;
   height: 22px;
   pointer-events: none;
 }
@@ -684,8 +695,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: 999px;
   background: var(--bg);
   box-shadow: var(--neu-in-sm);
-  margin-top: -18px;
-  position: relative;
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1;
 }
 .slider-mark.active .slider-mark-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
@@ -1529,6 +1542,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);
@@ -1563,7 +1577,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);
@@ -1572,7 +1586,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); }
@@ -1593,10 +1607,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/form.md

@@ -52,6 +52,32 @@ Checkbox / Switch 的绑定属性不是 value,需要用 valuePropName 指定;对
 </Form.Item>
 ```
 
+### 实时值预览
+
+onValuesChange 可以监听任何字段变化。下方面板会实时展示 form.getFieldsValue() 的结果。
+
+```tsx
+<Form onValuesChange={(changed, all) => setSnapshot(all)}>
+  ...
+</Form>
+<pre>{JSON.stringify(snapshot, null, 2)}</pre>
+```
+
+### 横排复选 (嵌套 Form.Item)
+
+外层 Form.Item 只做布局(无 name),内层若干 Form.Item 各自绑定字段并加 noStyle。my-assistant 里 "新建角色" 弹窗用的就是这个模式。
+
+```tsx
+<Form.Item className="checkbox-row">
+  <Form.Item name="addToHistory" valuePropName="checked" initialValue={true} noStyle>
+    <Checkbox label="添加到登录列表" />
+  </Form.Item>
+  <Form.Item name="setAsLast" valuePropName="checked" initialValue={false} noStyle>
+    <Checkbox label="设为最近登录" />
+  </Form.Item>
+</Form.Item>
+```
+
 ### 命令式 API
 
 通过 Form.useForm() 拿到实例,外部可主动 setFieldsValue / validateFields / resetFields。

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/slider.md

@@ -41,14 +41,24 @@ const [v, setV] = useState<[number, number]>([20, 70]);
 <Slider range value={v} onChange={setV} showValue />
 ```
 
-### 刻度标记
+### 渐变色
 
-marks 提供可点击刻度,点击即可跳到该值。
+colors 传入颜色数组,填充和滑块圆点会按当前位置动态插值。
+
+```tsx
+<Slider defaultValue={60} showValue
+  colors={["#3b82f6", "#22c55e", "#eab308", "#ef4444"]} />
+```
+
+### 刻度标记 + 渐变
+
+marks 配合 colors 可直观表达冷暖等语义。
 
 ```tsx
 <Slider
   defaultValue={37}
   marks={{ 0: "0°C", 26: "冷", 37: "正常", 100: "100°C" }}
+  colors={["#3b82f6", "#22c55e", "#eab308", "#ef4444"]}
 />
 ```
 
@@ -64,6 +74,7 @@ marks 提供可点击刻度,点击即可跳到该值。
 | range | `boolean` | `false` | 是否为双滑块区间模式 |
 | marks | `Record<number, ReactNode>` | — | 刻度,点击可跳到对应值 |
 | tone | `"accent" | "success" | "warning" | "danger"` | `"accent"` | 色调 |
+| colors | `string[]` | — | 渐变色数组,按位置插值;覆盖 tone |
 | showValue | `boolean` | `false` | 显示数值 |
 | disabled | `boolean` | `false` | 禁用 |
 

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.4.0`
+- **版本**: `0.5.1`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
@@ -69,16 +69,17 @@
 - [Tag 标签](./llms/tag.md) — 标记关键词、状态或分类。
 - [Badge 徽标数](./llms/badge.md) — 右上角的小型计数或状态指示器。
 - [Avatar 头像](./llms/avatar.md) — 用图像、首字母代表用户或事物。
+- [Image 图片](./llms/image.md) — 凹陷外框包裹的图片容器,带预览、错误占位。
 - [Divider 分隔符](./llms/divider.md) — 对内容进行分割。
 - [Progress 进度](./llms/progress.md) — 条形进度 Progress 与环形进度 Ring。
+- [Timeline 时间线](./llms/timeline.md) — 垂直时间线，支持等待状态、自定义圆点、交替布局
 - [List 列表](./llms/list.md) — 承载一组结构化的同质化数据。
 - [Table 表格](./llms/table.md) — 结构化数据展示。
 - [Table Pro](./llms/tablepro.md) — 带工具栏 / 搜索 / 筛选 / 排序 / 多选 / 分页的全功能表格。
-- [Image 图片](./llms/image.md) — 凹陷外框包裹的图片容器,带预览、错误占位。
-- [Calendar 日历](./llms/calendar.md) — 查看与选择日期。
 - [Pagination 分页](./llms/pagination.md) — 分页控件,支持快速跳转与每页条数切换。
 - [Tabs 选项卡](./llms/tabs.md) — 同一层级的内容分组,通过标签切换。
 - [Accordion 折叠面板](./llms/accordion.md) — 纵向折叠面板。
+- [Calendar 日历](./llms/calendar.md) — 查看与选择日期。
 
 ### 反馈
 
@@ -86,7 +87,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) — 表示任务正在进行,提示用户等待。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -47,11 +47,15 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@babel/standalone": "^7.29.2",
+    "@types/node": "^25.6.0",
+    "@types/prismjs": "^1.26.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "postcss": "^8.5.10",
     "postcss-import": "^16.1.1",
+    "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.2.4",

package/dist/Popover-NYEKT5CQ.css

@@ -1,10 +0,0 @@
-/* ============ Popover ============ */
-.popover {
-  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);
-}