Changelog

Framework tab CSS output fix on page load

• FixCSS output panel no longer shows tokens-only on a fresh load when the Framework tab was last active. The panel initialisation now restores the saved tab before rendering CSS, so the correct output appears immediately without needing a second click.

CSS panel polish & changelog fixes

• FixCSS panel header — "Framework" tab text and action buttons were being clipped by overflow:hidden. Title now truncates instead; tabs and buttons are always fully visible.
• Improved"CSS Output" label shortened to "CSS" — frees space in the compact panel header.
• FixChangelog page header — mismatched closing tag broke the page layout; version badge corrected from v3 to v4.

Full Geist colour palette

• NewSix new colour scales added to primitives — Purple, Pink, Teal, Cyan, Orange, Yellow — each with full 100–900 steps and light/dark values matching Geist's palette.
• ImprovedGreen, Red, and Amber scales expanded from 5 sparse steps to full 9-step scales (100–900).
• FixColour primitives preview was showing only 3 scales — Green and Red were mapped to wrong prefixes (emerald-, rose-) and rendered blank. All 11 scales now display correctly.

v4 — Geist-identical styles, token editor redesign & full live sync

• NewAll exported component styles now match Vercel Geist exactly — 36px button height, 6px radius, black/white focus borders, flat cards, true neutral grays, uppercase table headers.
• NewToken editor panel rebuilt — double-dash prefix label, moon icon dark toggle, checkerboard colour swatch, 26px compact inputs, modified indicator as left border stripe.
• ImprovedFull live sync audit — editing any component token (btn-, card-, input-, tab-, etc.) now immediately rerenders the correct preview section via a regex-based component section map.
• FixDark mode hardcoded values replaced with token vars — toggle thumb, modal shadow, table hover, tabs border, input placeholder, select chevron SVG.
• FixFluid token resolution — computeTokenValue now receives the full token map so clamp() endpoints that reference token names resolve correctly.
• FixDark block generation — fluid tokens were incorrectly excluded from the dark override output due to a falsy check on fluidMin.

Changelog, class labels & app tooltips

• NewChangelog page with two-column layout, tagged entries, and full release history.
• NewComponent section headers now show their CSS class names in muted monospace for quick reference.
• NewApp header buttons use styled data-tooltip tooltips — replaces slow browser title attributes. Toggle buttons update their label dynamically.
• ImprovedGetting Started section redesigned with a controls reference grid covering every top-bar button.
• FixNon-working keyboard shortcut references removed from tooltips and documentation.

Git, Cloudflare deployment, favicon & mobile layout

• NewProject moved to Git — version controlled and pushed to GitHub.
• NewDeployed to Cloudflare Pages from the repo root — index.html, app.js, style.css served as a static site.
• NewCustom favicon from brand logo SVG. Full Open Graph and Twitter card meta tags for clean link previews.
• NewMobile layout — app UI hidden below 1000px, style guide shown alone with a banner and footer.
• ImprovedStyle guide constrained to 900px max-width and centered. Logo in header is now a reload link.
• FixPanel toggle desync resolved — nav and editor now share a single sync function so neither clobbers the other.
• FixHero title italic text no longer clips on the right edge.

Colour palette redesign, code tokens & preview polish

• NewColour primitives redesigned in Geist style — connected horizontal strips with label left and numbered steps.
• NewCode tokens split into inline and block — each controls colour, font size, line height, padding, radius, background, and border independently.
• ImprovedRadius and shadow previews rebuilt with a minimal stage layout. Consistent spacing rhythm across all sections.
• RemovedDuplicate status colours removed from primitives. Hover animation removed from colour swatches.
• FixPre/block code colour no longer overrides to accent on every render.

Fluid type, type-scale token linking & settings

• NewFluid type tokens reference type scale token names as endpoints — max always matches the actual scale.
• NewFluid spacing tokens using clamp(). Settings panel exposes min/max viewport breakpoints for all clamp calculations.
• FixCrash resolved when fluid token endpoints referenced token names instead of raw values.

v3 — Geist-inspired redesign & live token editor

• NewComplete redesign — dark/light mode, three-panel layout (nav, preview, editor), noise texture background.
• NewLive token editor — add, edit, delete tokens with instant preview and CSS output updates. Zero page refresh.
• NewCSS output panel with Tokens and Framework tabs, copy to clipboard, and download as file.
• NewUndo / redo with step badges. Import / export token sets as JSON. Command palette for quick navigation.
• NewFull component library in the preview — buttons, inputs, badges, alerts, cards, modals, tabs, tooltips, avatars, and more.
• ExperimentalModular IIFE architecture — TokenStore, CSSEngine, ThemeEngine, PreviewEngine, UI. No build step, no frameworks.

Component token controls & framework CSS output

• NewComponent-level token controls — buttons, inputs, badges, and cards each have dedicated editable tokens for padding, radius, colour, and font size.
• NewFramework CSS tab — generates utility classes and component styles driven by the active token set.
• ImprovedIndividual colour tokens can carry separate light and dark values with a per-token toggle.

Motion, shadow tokens & visual scale previews

• NewMotion tokens — duration and easing values with interactive click-to-preview boxes in the style guide.
• NewShadow tokens from sm to 2xl with live preview and CSS output.
• ImprovedType scale and spacing sections show visual scale previews, not just raw values.

Live CSS output & semantic token mapping

• NewCSS :root block generated live from all tokens. Dark mode override block auto-generated from tokens with dark values.
• NewPrimitive → semantic token mapping — component styles reference semantic tokens, never hardcoded values.
• NewUndo / redo and import / export token sets as JSON.

Token-driven live preview

• NewReplaced static markup with a JS-rendered live preview — every section re-renders instantly when tokens change.
• NewToken categories introduced — colour, typography, spacing, and radius.
• ImprovedSingle-file app — no build step, no external dependencies beyond Google Fonts.

Initial release — static style guide

• NewStatic HTML/CSS style guide — colour swatches, type scale, spacing scale, and basic component examples.
• NewDark / light mode via data-theme attribute. Single file, no dependencies, instant load.