水平分栏（拖拽中间分隔条）
左侧面板：常用于文件树 / 列表 / 导航。拖动中间分隔条调整比例，双击复位到 50%。
右侧面板：主内容 / 详情区。键盘聚焦分隔条后可用 ← → 调整，Home/End 复位极值。
垂直分栏（上下）
上侧面板
下侧面板
<p class="chart-cap">水平分栏（拖拽中间分隔条）</p><div class="split-pane" data-split-pane style="height:200px;margin-top:6px"> <div class="split-pane-first" style="padding:14px;font-size:var(--density-font-size-sm);color:var(--token-text-muted)">左侧面板：常用于文件树 / 列表 / 导航。拖动中间分隔条调整比例，双击复位到 50%。</div> <div class="split-pane-divider" role="separator" aria-label="拖拽调整"></div> <div class="split-pane-second" style="padding:14px;font-size:var(--density-font-size-sm);color:var(--token-text-muted)">右侧面板：主内容 / 详情区。键盘聚焦分隔条后可用 ← → 调整，Home/End 复位极值。</div></div><p class="chart-cap" style="margin-top:20px">垂直分栏（上下）</p><div class="split-pane split-pane--vertical" data-split-pane style="height:240px;margin-top:6px"> <div class="split-pane-first" style="padding:14px;font-size:var(--density-font-size-sm);color:var(--token-text-muted)">上侧面板</div> <div class="split-pane-divider" role="separator" aria-label="拖拽调整"></div> <div class="split-pane-second" style="padding:14px;font-size:var(--density-font-size-sm);color:var(--token-text-muted)">下侧面板</div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initSplitPane } from '@icen.ai/ui/kit/split-pane';initSplitPane();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add split-pane
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/split-pane.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initSplitPane } from '@icen.ai/ui/behaviors/split-pane';initSplitPane(); <!-- DOM 契约 --><div class="split-pane [--vertical]" data-split-pane style="--split:50%; height:400px"> <div class="split-pane-first">左侧</div> <div class="split-pane-divider" role="separator"></div> <div class="split-pane-second">右侧</div></div><!-- data-split-min/max（默认 10/90）、data-split-step（键盘步长，默认 2） -->