{
"groups": [
{ "id": "foundation", "name": "Foundation", "items": ["token-architecture", "typography", "colors", "icons", "size", "radius", "shadow", "opacity", "animation", "layout"] },
{
"id": "charts",
"name": "Charts",
"items": ["charts", "bar-chart", "bar-list", "dashboard", "donut", "line-chart", "sparkline", "stat"]
},
{
"id": "components",
"name": "Components",
"items": [
"accordion", "avatar", "badge", "banner", "breadcrumb", "button",
"calendar", "card", "chat", "checkbox", "chip", "code-block", "color-picker", "command-palette", "counter", "datepicker", "divider",
"dropdown", "empty-state", "file-uploader", "flag", "footer", "forms", "header", "input", "kanban", "link", "list", "media-player", "menu", "modal", "navigation",
"pagination", "popover", "progress", "radio", "rating", "resizable", "scroll-area", "segmented", "select", "sheet",
"skeleton", "slider", "spinner", "stepper", "switch", "table", "tabs",
"time-picker", "timeline", "toast", "tooltip", "tree"
]
},
{
"id": "templates",
"name": "Templates",
"items": [
"ai-chat", "app-shell", "auth", "data-table", "dock", "inspector", "library", "playbar"
]
}
],
"items": {
"token-architecture": {
"name": "Token Architecture",
"description": "The reasoning behind the tokens: three tiers (DTCG source \u2192 generated CSS), the naming grammar, role prefixes (`bg` fills, `fg` ink \u2014 text AND icons, `border` boundaries), the property\u2260role principle, sanctioned cross-role exceptions, the value-display roles, the minting checklist, and the Figma round-trip via the letbe plugin.",
"usage": "Nothing to mount — this page is the contract the other token pages obey. Bind **L2 semantic** roles by default (`var(--lb-bg-accent)`, `var(--lb-fg-muted)`, `var(--lb-border-focus)`); reach for **L3** only in the three concept families `--lb-action-*` / `--lb-field-*` / `--lb-surface-*`, and bind **L1** directly only on the sanctioned flat scale (`--lb-size-*` for spacing/sizing). Name grammar is `--lb-` + optional L3 concept + role axis + variant + state, where the axis says what the pixel *is*: `bg-*` surfaces and fills, `fg-*` ink — text AND icons, since every icon draws with `currentColor` — `border-*` boundaries; state suffixes (`-hover`, `-pressed`, `-disabled`) exist ONLY at L3, and the modifier vocabulary is closed (`subtle` → `muted` → default → `strong` → `bolder`). Three cross-role bindings are sanctioned and nothing else: a filled control's border taking its own fill (`action.border-primary-* → {bg.accent*}`), a cutout ring taking the surface it cuts into (`surface.border-cutout → {bg.default}`), and the role-free categorical palette `data.1..8`. Never edit `tokens/theme.css` — it is generated; edit `tokens/source-tokens.json` (DTCG `$value`/`$type`, aliases written `{path.to.token}`) and run `node scripts/build-tokens.js`, then add the new pairings to `scripts/audit-contrast.js` (rewrites `tokens/CONTRAST.md`, exits non-zero on a failing pair) and hand the names to the letbe Figma plugin, which builds its variables from the same source file."
},
"typography": {
"name": "Typography",
"description": "Six semantic text roles — display, heading, body, action, label, caption — each with multiple sizes. Use display for hero moments, heading for section titles, body for paragraph content, action for interactive text (buttons, tabs), label for form field labels, caption for helper/metadata text. All styles come from `source-tokens.json` and scale with the theme editor's base size.",
"usage": "Pure CSS — nothing to init, and there are no `.lb-text-*` / `.lb-type-*` utility classes: consumers bind the five per-property L2 composite vars directly, e.g. `font: var(--lb-t-body-m-font-weight) var(--lb-t-body-m-font-size)/var(--lb-t-body-m-line-height) var(--lb-t-body-m-font-family); letter-spacing: var(--lb-t-body-m-letter-spacing)`. Token shape is `--lb-t-{role}-{size}-{font-family|font-size|font-weight|line-height|letter-spacing}`; the six documented roles are display `xl/l/m/s/xs`, heading `xl/l/m/s/xs/2xs`, body `xl/l/m/s/xs`, action `l/m/s`, label `l/m/s` and caption `m/s`, and `tokens/theme.css` also ships `code` `s/m/l` plus one size-less composite, `--lb-t-overline-*` (the uppercase micro-label voice, bound directly by several components in `components.css`). Family resolves in three hops — composite → role alias `--lb-typography-family-{display|heading|body|action|label|caption|code}` → numbered L1 slot `--lb-font-family-1|2|3`; action points at slot 2 and code at slot 3, every other role at slot 1, so re-pointing a slot re-faces every role bound to it without touching a composite. Responsive: only display (all five) and heading `xl/l/m` shrink, emitted as `@media (max-width: 600px) { html:not([data-typo-preview]) { … } }` — M and L inherit the base values; the theme editor's Viewport switcher forces a mode by setting `data-typo-preview=\"S\"` or `\"M\"` on `` (L removes the attribute, since L is the base state), which is why the S rule is guarded by `:not()`."
},
"colors": {
"name": "Colors",
"description": "Six L1 color palettes — neutral, violet (brand), blue (info), green (success), yellow (warning), red (danger) — each with 11 steps from 50 (lightest) to 950 (darkest). Primitives are immutable; theming happens by remapping L2 semantic tokens to different L1 palettes. Pick brand color in the theme editor to generate a new `brand.*` palette.",
"usage": "Nothing to init. Never bind an L1 palette step in component CSS (`--lb-violet-600` is immutable and identical in both themes) — bind the L2 roles `--lb-fg-*` (ink, and icon color via `currentColor`), `--lb-bg-*` (surfaces and fills), `--lb-border-*` (boundaries, dividers, focus rings), the role-free chart palette `--lb-data-1..8`, the syntax palette `--lb-code-1..8`, or the L3 concepts `--lb-action-*` / `--lb-field-*` / `--lb-surface-*`; only L2 and L3 flip between themes. L1 is eight 11-step ramps — `--lb-{neutral|violet|blue|green|yellow|red|orange|cyan}-{50…950}` — with orange and cyan existing to complete the 8-hue rotation the `data` and `code` groups need. Dark mode is `[data-theme=\"dark\"]` on **any** element (not just ``), mirrored by `@media (prefers-color-scheme: dark)`; the L3 aliases are re-declared verbatim inside both dark blocks so section-scoped theming re-substitutes correctly. The theme editor's brand picker generates a full `brand.*` L1 palette from one hex and remaps the L2 accent tokens — including a separately measured `bg.accent-value` chosen against its neutral track — to reference it, leaving L1 violet intact; every shipped pairing is measured in `tokens/CONTRAST.md`."
},
"icons": {
"name": "Icons",
"description": "254 icons bundled as standalone SVGs in three categories. OUTLINED (Lucide, stroke-based, default) — navigation, actions, status, people, docs, AI-era set (sparkles, bot, brain, audio-lines, mic, circle-stop, loader-circle, paperclip…), dev/data (terminal, braces, git-branch, database…), media/music (shuffle, repeat, disc-3, podcast, mic-vocal, guitar…). FILLED — 13 solid status/rating glyphs. BRAND (Simple Icons + Bootstrap Icons, filled single-path logos, `fill: currentColor`) — the letbe house mark, social (tiktok, x-logo, instagram, facebook, linkedin, whatsapp, telegram, discord, reddit, threads, bluesky, mastodon, snapchat, pinterest, twitch, youtube), music/creator (spotify, apple-music, soundcloud, bandcamp, deezer, tidal, youtube-music, patreon, substack, medium), dev/design (github, gitlab, figma, slack, dribbble, behance, google, apple). Lucide 1.0 removed all brand icons, hence the dual sourcing; brand logos are trademarks — usage subject to each brand's guidelines (see assets/icons/LICENSE.txt). Use `LB.icon('name', element)` to inject by name; stroke width follows `--lb-stroke-icon` (outlined only — brand/filled color via fill). Requires serving over http (not `file://`).",
"usage": "`` — `LB.init()` runs `initIcons(root)` over every `[data-lb-icon]`, fetches `assets/icons/.svg` and injects it; the sweep is idempotent (marks `el._lbIconDone`) and re-runs on every `LB.init()`, so dynamically added markup hydrates itself. Base path is auto-derived from lb.js's own ``. Config keys: `x` (categories), `series` (array of `{ name, data }`), `orientation` (\"vertical\" | \"horizontal\"), `stacked` (bool), `colors` (override per-series colors), `legend` (bool, default true for multi-series). Programmatic: `el._lbBarChart.setData({ … })`."
},
"bar-list": {
"name": "Bar List",
"description": "Ranked horizontal bar list — top countries, top sources, top pages. Each row is a label + value with a proportional bar layer behind. Pure HTML/CSS — JS only computes the per-row width as a percentage of the largest value. Drops into Card or any container; consumer can pair labels with `` for clickable rows by adding `--interactive`. The bar color picks `--lb-data-1` by default; override per-list via `style=\"--color: …\"`.",
"usage": "`