Celest Plume Docs Kit
纯 TypeScript 手搓的 Plumest 风格组件库，不依赖 React、零运行时依赖。下方所有组件均由 src/lib/ui 的构建器输出 HTML，再由原生 initCelestialUI runtime 接管交互。 Pure TS No React MIT-style
Callouts
五种语义变体，由 --cpd-* 语义色驱动。
信息
默认变体 —— 用于中性说明与提示。
警告
提醒可能出错的地方。
错误
用于阻塞性问题与破坏性操作。
成功
确认某事按预期完成。
灵感
建议替代方案或最佳实践。
Cards
图标 + 标题 + 描述的卡片网格，可跳转到真实文档。
Styles
令牌、色板、字体与布局度量。
Components
每个构建器的签名与 data 钩子。
Overview
Kit 的由来与贡献方式。
Live Demo
本页 —— 布局、侧边栏与 TOC 全部来自 Kit。
Steps
带连接线的编号步骤。下方标题标记了 data-cpd-step，ClerkTOC 会为其编号。
安装 — 无需安装依赖，把 src/lib/ui 目录拷进项目即可。
渲染 — 在 Astro 中调用构建器并以 set:html 注入，或任意插值。
初始化 — 一次 initCelestialUI() 调用接管全部交互。
Tabs
简单模式 —— 传入 items 数组或显式面板。
Runtime
构建器是返回 HTML 字符串的纯函数 —— 可在 Astro 中通过
set:html 安全渲染。initCelestialUI() 为折叠、抽屉、TOC 追踪、Tabs、Accordion 与复制按钮挂载事件委托。样式位于
src/styles/celestial-docs.css，全部以 cpd- 前缀隔离。Accordions
可折叠分组，支持复制链接（id + hash 深链）。
构建期输出静态 HTML，交互只有约 350 行原生 TypeScript：无虚拟 DOM、无水合、无依赖树。
每个链接与当前
pathname 比对；激活路径上的分组自动展开。见 isNavLinkActive。本 Accordion 带
id，可用链接按钮复制地址 —— 打开后 hash 会自动展开它。Code Blocks
文件名头 + 一键复制。
// src/lib/ui — pure TS, no framework
import { renderSidebar, renderToc, callout, cards } from '../lib/ui';
const nav = {
tree: [
{ type: 'folder', label: 'Guides', children: [
{ type: 'link', label: 'Intro', href: '/guides/example/' },
]},
],
pathname: '/demo/',
};
// Server-side: HTML strings
const sidebarHtml = renderSidebar(nav);
const tocHtml = renderToc(tocItems, { steps: true });
const noteHtml = callout('Hello from a pure-TS builder', { type: 'idea' });File Tree
文件树：可折叠目录 + 缩进线。
html.ts
types.ts
icons.ts
tokens.ts
docs-kit.css
celestial-docs.css
demo.astro
zh/demo.astro
Design Tokens
--cpd-* 色板示例。完整表格见「样式规范」文档。
| Variable | Light | Dark |
|---|---|---|
--cpd-background | hsl(0 0% 96%) | hsl(0 0% 7.04%) |
--cpd-primary | hsl(40 48% 39%) | hsl(40 52% 63%) |
--cpd-sidebar-width | 268px | |
--cpd-radius | 8px | |
Extras
徽章、按键、引用与表格。 Press Ctrl + C to copy. Badge Warn Danger
Plumest 是本项目自有的文档样式，本 Kit 是它的无框架实现 —— 同样的布局、同样的令牌，全部用 TypeScript 手写。