@fangxinyan/lumina 0.2.1 → 0.4.0

package/dist/styles.css

@@ -17,14 +17,15 @@
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-blur: 16px;
-  --shadow-offset: 6px;
-  --shadow-inset-blur: 10px;
-  --shadow-inset-offset: 4px;
 
-  /* Distance multiplier (tweakable at runtime) */
+  /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
 
+  --shadow-blur: calc(16px * var(--d));
+  --shadow-offset: calc(6px * var(--d));
+  --shadow-inset-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(4px * var(--d));
+
   --neu-out:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
@@ -49,6 +50,13 @@
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
+  /* Floating-overlay elevation.
+     No top-left highlight — there's no continuous surface beneath an overlay
+     panel, so the neumorphic light-reflection metaphor would read as a halo. */
+  --neu-float:
+    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
   --accent-ink: oklch(42% 0.12 235);
@@ -114,10 +122,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: 4px;
-  --shadow-blur: 10px;
-  --shadow-inset-offset: 3px;
-  --shadow-inset-blur: 7px;
+  --shadow-offset: calc(4px * var(--d));
+  --shadow-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(3px * var(--d));
+  --shadow-inset-blur: calc(7px * var(--d));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);
@@ -1084,7 +1092,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg-muted);
   font-size: 13px;
 }
-.accordion-item.open .accordion-body { max-height: 320px; }
 .accordion-body-inner { padding: 0 18px 16px; }
 .accordion-chev {
   transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
@@ -1311,7 +1318,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .menu {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 6px;
   min-width: 180px;
   z-index: 1000;
@@ -1366,7 +1373,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .modal {
   background: var(--bg);
   border-radius: var(--r-xl);
-  box-shadow: var(--neu-out-lg), 0 24px 60px -20px rgba(40, 55, 80, 0.3);
+  box-shadow: var(--neu-float);
   padding: var(--gap-6);
   width: min(480px, 92vw);
   animation: modalIn var(--dur-slow) var(--ease);
@@ -1553,7 +1560,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .toast {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 12px 16px;
   min-width: 240px;
   display: flex; align-items: flex-start; gap: 10px;
@@ -1588,7 +1595,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: var(--r-md);
   padding: var(--gap-3);
   min-width: 220px;
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   animation: menuIn var(--dur) var(--ease);
 }
 /* ============ Alert ============ */
@@ -1819,7 +1826,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   max-width: 260px;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 10px;
   animation: menuIn var(--dur) var(--ease);
 }
@@ -2333,7 +2340,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   max-width: 80vw;
   max-height: 80vh;
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-out-lg), 0 40px 80px -20px rgba(0,0,0,0.25);
+  box-shadow: var(--neu-float);
 }
 /* ============ Cascader ============ */
 .cascader {
@@ -2366,7 +2373,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: flex;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 6px;
   animation: menuIn var(--dur) var(--ease);
   gap: 4px;
@@ -2695,7 +2702,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 12px;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-float);
   display: flex;
   flex-direction: column;
   gap: 10px;

package/dist/{tokens-HWQ7KWPG.css → tokens-BIIUTPKN.css}

@@ -17,14 +17,15 @@
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-blur: 16px;
-  --shadow-offset: 6px;
-  --shadow-inset-blur: 10px;
-  --shadow-inset-offset: 4px;
 
-  /* Distance multiplier (tweakable at runtime) */
+  /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
 
+  --shadow-blur: calc(16px * var(--d));
+  --shadow-offset: calc(6px * var(--d));
+  --shadow-inset-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(4px * var(--d));
+
   --neu-out:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
@@ -49,6 +50,13 @@
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
+  /* Floating-overlay elevation.
+     No top-left highlight — there's no continuous surface beneath an overlay
+     panel, so the neumorphic light-reflection metaphor would read as a halo. */
+  --neu-float:
+    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
   --accent-ink: oklch(42% 0.12 235);
@@ -115,10 +123,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: 4px;
-  --shadow-blur: 10px;
-  --shadow-inset-offset: 3px;
-  --shadow-inset-blur: 7px;
+  --shadow-offset: calc(4px * var(--d));
+  --shadow-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(3px * var(--d));
+  --shadow-inset-blur: calc(7px * var(--d));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);

package/dist/tokens.css

@@ -17,14 +17,15 @@
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-blur: 16px;
-  --shadow-offset: 6px;
-  --shadow-inset-blur: 10px;
-  --shadow-inset-offset: 4px;
 
-  /* Distance multiplier (tweakable at runtime) */
+  /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
 
+  --shadow-blur: calc(16px * var(--d));
+  --shadow-offset: calc(6px * var(--d));
+  --shadow-inset-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(4px * var(--d));
+
   --neu-out:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
@@ -49,6 +50,13 @@
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
+  /* Floating-overlay elevation.
+     No top-left highlight — there's no continuous surface beneath an overlay
+     panel, so the neumorphic light-reflection metaphor would read as a halo. */
+  --neu-float:
+    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
   --accent-ink: oklch(42% 0.12 235);
@@ -115,10 +123,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: 4px;
-  --shadow-blur: 10px;
-  --shadow-inset-offset: 3px;
-  --shadow-inset-blur: 7px;
+  --shadow-offset: calc(4px * var(--d));
+  --shadow-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(3px * var(--d));
+  --shadow-inset-blur: calc(7px * var(--d));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);

package/docs/llms/autocomplete.md

@@ -0,0 +1,56 @@
+# AutoComplete 自动补全
+
+> 输入时展示建议下拉,不限定必须从候选中选。
+
+## 示例
+
+### 基础
+
+```tsx
+<AutoComplete
+  options={[
+    { value: "light" },
+    { value: "dark" },
+    { value: "system" },
+  ]}
+  placeholder="主题"
+/>
+```
+
+### 自定义 label
+
+```tsx
+options={[{ value: "zh", label: "中文 · Chinese" }]}
+```
+
+### 动态加载
+
+onSearch 在用户输入时触发,常配合后端检索使用。
+
+```tsx
+const [opts, setOpts] = useState([]);
+<AutoComplete
+  options={opts}
+  onSearch={(text) => setOpts(generate(text))}
+/>
+```
+
+## API
+
+**AutoComplete**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `string` | — | 受控 / 初始值 |
+| onChange | `(value, option?) => void` | — | 文本变更 |
+| onSelect | `(value, option) => void` | — | 选中项回调 |
+| onSearch | `(text) => void` | — | 输入变化回调 |
+| options \* | `{ value, label?, disabled? }[]` | — | 候选项 |
+| filterOption | `boolean | (input, option) => boolean` | `true` | 过滤函数,false 关闭过滤 |
+| notFoundContent | `ReactNode` | — | 无匹配占位 |
+| allowClear / disabled / size / autoFocus / placeholder | `-` | — | 常规属性 |
+| matchTriggerWidth | `boolean` | `true` | 下拉宽度跟随输入框 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/commandpalette.md

@@ -0,0 +1,58 @@
+# CommandPalette ⌘K 命令面板
+
+> 全局命令搜索与执行入口。
+
+## 示例
+
+### 基础 + 快捷键
+
+在当前页面按 ⌘K / Ctrl+K 打开。分组、快捷键提示、键盘导航都已内置。
+
+```tsx
+const [open, setOpen] = useState(false);
+useEffect(() => {
+  const h = (e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      setOpen(o => !o);
+    }
+  };
+  window.addEventListener("keydown", h);
+  return () => window.removeEventListener("keydown", h);
+}, []);
+
+<CommandPalette open={open} onOpenChange={setOpen} items={[...]} />
+```
+
+## API
+
+**CommandPalette**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| open / onOpenChange \* | `boolean / (open: boolean) => void` | — | 受控开关 |
+| items \* | `CommandItem[]` | — | 所有命令项 |
+| placeholder | `string` | `"搜索命令…"` | 搜索框占位文本 |
+| filter | `(item, query) => boolean` | `子序列匹配` | 自定义过滤函数 |
+| emptyText | `ReactNode` | — | 无结果占位 |
+| resetOnOpen | `boolean` | `true` | 打开时清空输入 |
+| footer | `ReactNode` | — | 底部区;null 隐藏 |
+
+
+**CommandItem**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key \* | `string` | — | 唯一键 |
+| label \* | `string` | — | 主文案(也参与搜索) |
+| description | `ReactNode` | — | 副标题 |
+| icon | `ReactNode` | — | 前置图标 |
+| shortcut | `ReactNode` | — | 右侧快捷键 |
+| keywords | `string[]` | — | 额外搜索关键词 |
+| group | `string` | — | 分组标题 |
+| disabled | `boolean` | — | 禁用 |
+| onSelect | `() => void` | — | 选中回调(会自动关闭面板) |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/contextmenu.md

@@ -0,0 +1,55 @@
+# ContextMenu 右键菜单
+
+> 桌面应用风格的右键上下文菜单。
+
+## 示例
+
+### 基础
+
+```tsx
+<ContextMenu items={[
+  { key: "copy", label: "复制", shortcut: "⌘C", onSelect: () => {} },
+  { key: "cut",  label: "剪切", shortcut: "⌘X", onSelect: () => {} },
+  { key: "d",    type: "divider" },
+  { key: "del",  label: "删除", danger: true, onSelect: () => {} },
+]}>
+  <div>右键点击我</div>
+</ContextMenu>
+```
+
+### 文件管理器示例
+
+典型的文件右键菜单,带图标、快捷键、分组分隔、危险操作高亮。
+
+```tsx
+<ContextMenu items={[...]}>...
+```
+
+## API
+
+**ContextMenu**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| items \* | `ContextMenuItem[]` | — | 菜单项 |
+| children \* | `ReactElement` | — | 触发元素(恰好一个) |
+| disabled | `boolean` | — | 禁用,恢复浏览器原生菜单 |
+| minWidth | `number` | `180` | 面板最小宽度 |
+
+
+**ContextMenuItem**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key \* | `string` | — | 唯一键 |
+| label | `ReactNode` | — | 文案 |
+| icon | `ReactNode` | — | 前置图标 |
+| shortcut | `ReactNode` | — | 右侧快捷键提示 |
+| disabled | `boolean` | — | 禁用 |
+| danger | `boolean` | — | 危险态(红色) |
+| type | `"divider"` | — | 置为 "divider" 渲染分隔线 |
+| onSelect | `() => void` | — | 选中回调 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/form.md

@@ -0,0 +1,121 @@
+# Form 表单
+
+> 受控表单,字段绑定 + 校验,API 对齐 antd。
+
+## 示例
+
+### 基础
+
+```tsx
+const [form] = Form.useForm();
+
+<Form form={form} layout="vertical" onFinish={(values) => console.log(values)}>
+  <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
+    <Input placeholder="输入用户名" />
+  </Form.Item>
+  <Form.Item name="email" label="邮箱" rules={[{ type: "email", message: "邮箱格式不正确" }]}>
+    <Input placeholder="foo@example.com" />
+  </Form.Item>
+  <Form.Item>
+    <Button type="submit" variant="primary">提交</Button>
+  </Form.Item>
+</Form>
+```
+
+### 复合校验 + 自定义 validator
+
+rules 支持 required / min / max / pattern / type / validator。validator 可返回 Promise。
+
+```tsx
+rules={[
+  { required: true, message: "必填" },
+  { pattern: /^[a-z0-9_]+$/, message: "只允许小写字母、数字和下划线" },
+  {
+    validator: async (_, value) => {
+      if (value === "admin") throw new Error("admin 已被占用");
+    },
+  },
+]}
+```
+
+### 非 value 类控件
+
+Checkbox / Switch 的绑定属性不是 value,需要用 valuePropName 指定;对应的 trigger 名称通常仍是 onChange。
+
+```tsx
+<Form.Item name="agree" valuePropName="checked">
+  <Checkbox>同意协议</Checkbox>
+</Form.Item>
+
+<Form.Item name="notify" valuePropName="checked">
+  <Switch />
+</Form.Item>
+```
+
+### 命令式 API
+
+通过 Form.useForm() 拿到实例,外部可主动 setFieldsValue / validateFields / resetFields。
+
+```tsx
+form.setFieldsValue({ title: "..." })
+form.validateFields().then(values => {...})
+form.resetFields()
+```
+
+## API
+
+**Form**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| form | `FormInstance` | — | 由 useForm() 创建的实例,受控推荐传入 |
+| layout | `"horizontal" | "vertical" | "inline"` | `"horizontal"` | 布局方式 |
+| initialValues | `Partial<V>` | — | 字段初始值 |
+| onFinish / onFinishFailed | `(values | {values, errorFields}) => void` | — | 提交成功/失败 |
+| onValuesChange | `(changed, all) => void` | — | 任一字段变化 |
+| requiredMark | `boolean` | `true` | 是否在必填 label 前显示 * |
+| disabled | `boolean` | — | 整体禁用 |
+
+
+**Form.Item**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| name | `string` | — | 字段 key;省略则仅布局不绑定 |
+| label | `ReactNode` | — | 字段标签 |
+| rules | `Rule[]` | — | 校验规则数组 |
+| noStyle | `boolean` | — | 不渲染外层 item 包装 |
+| valuePropName | `string` | `"value"` | 注入值的 prop 名 |
+| trigger | `string` | `"onChange"` | 监听的事件名 |
+| initialValue | `any` | — | 此字段初始值;优先级低于 Form initialValues |
+| help / extra | `ReactNode` | — | 辅助/补充说明 |
+| hidden | `boolean` | — | 隐藏(字段仍保留) |
+
+
+**Rule**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| required | `boolean` | — | 必填 |
+| message | `string` | — | 错误提示文案 |
+| pattern | `RegExp` | — | 正则校验 |
+| min / max / len | `number` | — | 字符串/数组长度或数字范围 |
+| type | `string` | — | "string" \| "number" \| "email" \| "url" \| "array" |
+| validator | `(rule, value) => Promise<void>` | — | 自定义,抛出错误或 reject 视为失败 |
+
+
+**FormInstance**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| getFieldValue / getFieldsValue | `(name?) => any` | — | 读取字段值 |
+| setFieldValue / setFieldsValue | `(name/obj, value) => void` | — | 写入字段值 |
+| validateFields | `(names?) => Promise<V>` | — | 触发校验,返回 Promise<values>,失败时 reject({errorFields}) |
+| resetFields | `(names?) => void` | — | 重置到初始值 |
+| isFieldTouched | `(name) => boolean` | — | 字段是否交互过 |
+| getFieldError | `(name) => string[]` | — | 字段当前错误信息 |
+| submit | `() => void` | — | 等同于触发提交 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/inputnumber.md

@@ -0,0 +1,57 @@
+# InputNumber 数字输入
+
+> 带步进按钮的数字输入框。
+
+## 示例
+
+### 基础
+
+```tsx
+<InputNumber defaultValue={5} min={0} max={100} />
+```
+
+### 小数精度
+
+```tsx
+<InputNumber defaultValue={0.5} min={0} max={1} step={0.1} precision={2} />
+```
+
+### 尺寸
+
+```tsx
+<InputNumber size="sm" /> / <InputNumber /> / <InputNumber size="lg" />
+```
+
+### 隐藏步进按钮
+
+```tsx
+<InputNumber controls={false} defaultValue={100} />
+```
+
+### 受控
+
+```tsx
+const [v, setV] = useState(10);
+<InputNumber value={v} onChange={setV} />
+```
+
+## API
+
+**InputNumber**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `number | null` | — | 受控 / 初始值 |
+| onChange | `(value: number | null) => void` | — | 变更回调 |
+| onPressEnter | `(e) => void` | — | 回车事件 |
+| min / max | `number` | — | 数值范围 |
+| step | `number` | `1` | 步进值 |
+| precision | `number` | — | 小数位数 |
+| size | `"sm" | "md" | "lg"` | `"md"` | 尺寸 |
+| controls | `boolean` | `true` | 是否显示步进按钮 |
+| disabled / readOnly / placeholder | `-` | — | 常规属性 |
+| prefix / suffix | `ReactNode` | — | 内嵌前/后置内容 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/splitter.md

@@ -0,0 +1,63 @@
+# Splitter 可拖拽分栏
+
+> 两栏之间可拖拽的分隔条,支持横向、纵向与嵌套。
+
+## 示例
+
+### 水平分栏
+
+```tsx
+<Splitter defaultSize={200} min={120} max={360}>
+  <SidePanel />
+  <MainPanel />
+</Splitter>
+```
+
+### 垂直分栏
+
+direction="vertical" 让面板上下排列,分隔条变成横条。
+
+```tsx
+<Splitter direction="vertical" defaultSize={120} min={60}>...</Splitter>
+```
+
+### 嵌套分栏
+
+组合使用两个 Splitter 可以搭出 IDE 风格的三区布局。
+
+```tsx
+<Splitter defaultSize={180}>
+  <SideNav />
+  <Splitter direction="vertical" defaultSize={180}>
+    <Editor />
+    <Terminal />
+  </Splitter>
+</Splitter>
+```
+
+### 受控模式
+
+通过 size / onResize 可以持久化宽度或与其他状态联动。
+
+```tsx
+const [w, setW] = useState(220);
+<Splitter size={w} onResize={setW}>...</Splitter>
+```
+
+## API
+
+**Splitter**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| direction | `"horizontal" | "vertical"` | `"horizontal"` | 布局方向 |
+| defaultSize | `number` | `240` | 非受控初始宽/高 (px) |
+| size / onResize | `number / (n: number) => void` | — | 受控宽/高 |
+| onResizeEnd | `(n: number) => void` | — | 拖动结束回调 |
+| min / max | `number` | `80 / Infinity` | 尺寸限制 (px) |
+| step | `number` | `16` | 方向键步长 (px) |
+| children \* | `[ReactNode, ReactNode]` | — | 必须恰好两个子节点 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/statusbar.md

@@ -0,0 +1,53 @@
+# StatusBar 状态栏
+
+> 窗口底部状态栏,展示分支、编码、行列等应用元信息。
+
+## 示例
+
+### 基础
+
+```tsx
+<StatusBar
+  left={<StatusBar.Item icon={<Icon name="check" size={12} />} tone="success">Ready</StatusBar.Item>}
+  right={<StatusBar.Item tone="muted">UTF-8</StatusBar.Item>}
+/>
+```
+
+### 可点击项
+
+为 Item 提供 onClick 会渲染成按钮,支持悬停高亮。
+
+```tsx
+<StatusBar.Item onClick={...}>TypeScript</StatusBar.Item>
+```
+
+### 语义色
+
+tone 控制文字颜色:default / muted / accent / success / warning / danger。
+
+```tsx
+<StatusBar.Item tone="danger">3 errors</StatusBar.Item>
+```
+
+## API
+
+**StatusBar**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| left | `ReactNode` | — | 左侧槽位 |
+| center | `ReactNode` | — | 中部槽位(绝对居中) |
+| right | `ReactNode` | — | 右侧槽位 |
+
+
+**StatusBar.Item**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| icon | `ReactNode` | — | 前置图标 |
+| tone | `"default" | "muted" | "accent" | "success" | "warning" | "danger"` | `"default"` | 语义色 |
+| onClick | `(e) => void` | — | 点击回调(提供时渲染为 button) |
+
+
+---
+[← 回到索引](../llms.md)