Celest Plume Docs Kit

A hand-crafted, framework-free implementation of the Plumest UI, built with pure TypeScript — no React, no dependencies. Every component below is rendered from src/lib/ui by server-side builders and wired by the vanilla initCelestialUI runtime. Pure TS No React MIT-style

Callouts

Five semantic variants, driven by the --cpd-* semantic colors.

Information

Default variant — use it for neutral context and tips.

Warning

Draw attention to something that could go wrong.

Error

For blockers and destructive operations.

Success

Confirm that something completed as expected.

Idea

Suggest an alternative approach or best practice.

Cards

Icon + title + description grid, linking to the real documentation.

Styles

Tokens, palette, typography and layout metrics.

Components

Every builder, its signature and data hooks.

Overview

Why the kit exists and how to contribute.

Live Demo

This page — the layout, sidebar and TOC are all kit output.

Steps

Numbered steps with a connecting line. Heading below is marked with data-cpd-step, so the ClerkTOC numbers it.

Install — no dependencies to install; copy the src/lib/ui directory into your project.

Render — call the builders and inject with set:html in Astro, or interpolate anywhere.

Initialize — one initCelestialUI() call wires every interaction.

Tabs

Simple mode — pass an items array or explicit panels.

Runtime

Builders are pure functions returning HTML strings — safe to render with set:html in Astro.

initCelestialUI() attaches delegated listeners for folders, drawer, TOC tracking, tabs, accordions and copy buttons.

Styles live in src/styles/celestial-docs.css, scoped under the cpd- prefix.

Accordions

Collapsible groups with copy-link support (id + hash deep-link).

Why no React?

The kit renders static HTML at build time; interactivity is ~350 lines of vanilla TypeScript. No virtual DOM, no hydration, no dependency tree.

How is the sidebar activated?

Each link is compared against the current pathname; folders on the active path open automatically. See isNavLinkActive.

Deep-link me

This accordion exposes an id, so its URL can be copied with the link button — open it and the hash will expand it.

Code Blocks

Filename header + one-click copy.

kit-usage.ts

// 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

File tree with collapsible folders and indent lines.

html.ts

types.ts

icons.ts

tokens.ts

docs-kit.css

celestial-docs.css

demo.astro

zh/demo.astro

Design Tokens

A sample of the --cpd-* palette. Full tables live in the Styles guide.

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

Badges, key caps, quotes and tables. Press Ctrl + C to copy. Badge Warn Danger

Plumest is our in-house docs style. This kit is its framework-free implementation — same layout, same tokens, hand-rolled in TypeScript.