@@ -2351,27 +2351,174 @@ button{{padding:6px 16px;border:none;border-radius:4px;cursor:pointer;font-size:
2351<div class="panel" id="editor-panel">
2351<div class="panel" id="editor-panel">
2352<div class="header"><h1>htmlang</h1><span class="tag">playground</span></div>
2352<div class="header"><h1>htmlang</h1><span class="tag">playground</span></div>
2353<div class="editor-wrap">
2353<div class="editor-wrap">
2354−<textarea id="editor" spellcheck="false">@page Hello World
2354+<textarea id="editor" spellcheck="false">@page htmlang Showcase
2355−@let primary #3b82f6
2355+@lang en
2358− @el [padding 20, background white, rounded 8, border 1 #e5e7eb, hover:border 1 $primary, transition all 0.15s ease]
2359− @text [bold, size 18] $title
2362−@column [max-width 800, center-x, padding 40, spacing 20]
2363− @text [bold, size 32, color $primary] Hello from htmlang!
2365− @paragraph [line-height 1.6]
2357+-- Design tokens
2366− Edit this code and press Ctrl+Enter to compile.
2358+@let primary #3b82f6
2367−
2359+@let accent #ec4899
2368− @row [wrap, spacing 10]
2360+@let ink #0f172a
2369− @card [title Simple]
2361+@let muted #64748b
2370− Write layouts without CSS
2362+@let surface white
2371− @card [title Fast]
2363+@let bg #f8fafc
2366+@let gap = $base * 2
2370+ padding 24, background $surface, rounded $radius,
2372+ dark:background #1e293b, dark:border 1 #334155
2376+ transition all 0.2s ease,
2377+ hover:shadow 0 12px 24px rgba(0,0,0,0.08)
2380+-- Components (functions with parameters, defaults, and slots)
2381+@fn button $label $variant=primary
2383+ padding 10 20, rounded 8, cursor pointer, bold,
2384+ background if($variant == primary, $primary, transparent),
2385+ color if($variant == primary, white, $primary),
2386+ border 1 $primary, transition all 0.15s ease,
2387+ hover:opacity 0.9, active:opacity 0.8
2391+@fn feature $title $emoji
2392+ @el [$card, ...$lift, spacing 10]
2393+ @text [size 32] $emoji
2394+ @text [bold, size 18, color $ink, dark:color #f1f5f9] $title
2395+ @paragraph [color $muted, line-height 1.6]
2398+@fn stat $value $label
2399+ @column [spacing 4, text-align center, padding 12]
2400+ @text [bold, size 40, color $primary] $value
2401+ @text [color $muted, size 12, text-transform uppercase, letter-spacing 2] $label
2404+@column [background $bg, dark:background #0f172a, min-height 100vh]
2408+ padding 16 32, background $surface, dark:background #1e293b,
2409+ border-bottom 1 #e2e8f0, dark:border-bottom 1 #334155
2411+ @row [center-y, max-width 1100, center-x, width 100%]
2412+ @text [bold, size 18, color $ink, dark:color #f1f5f9] htmlang
2415+ @link [color $muted, hover:color $primary] #docs Docs
2416+ @link [color $muted, hover:color $primary] #blog Blog
2417+ @link [color $muted, hover:color $primary] #github GitHub
2420+ @section [padding 80 32, max-width 900, center-x, text-align center, spacing 20]
2422+ padding 6 14, rounded 999,
2423+ background $primary|alpha:0.12, color $primary,
2424+ bold, size 12, text-transform uppercase, letter-spacing 2,
2425+ before:content "* "
2428+ @text [bold, size 56, color $ink, dark:color #f1f5f9, line-height 1.1]
2429+ Layouts that just {{@text [italic, color $primary] make sense}}.
2430+ @paragraph [max-width 600, center-x, color $muted, line-height 1.7, size 18]
2372− Compiles to a single HTML file
2431+ A minimalist DSL that compiles to a single static HTML file.
2373− @card [title Zero-dep]
2374− No JavaScript, no externals</textarea>
2432+ No cascade, no JavaScript, no build chain.
2433+ @row [center-x, spacing 12, wrap]
2434+ @button [label Get Started]
2435+ @button [label Star on GitHub, variant ghost]
2437+ -- Stats (each iteration could go here too)
2438+ @section [padding 24 32, max-width 800, center-x]
2439+ @row [wrap, center-x, spacing 20]
2440+ @stat [value 0kb, label JavaScript]
2441+ @stat [value 1, label HTML File]
2442+ @stat [value 100%, label Static]
2444+ -- Features (grid layout)
2445+ @section [padding 64 32, max-width 1100, center-x, spacing 24]
2446+ @column [spacing 8, text-align center]
2447+ @text [bold, size 32, color $ink, dark:color #f1f5f9] Why htmlang?
2448+ @text [color $muted] Primitives over CSS quirks.
2450+ @el [grid, grid-cols 3, gap $gap]
2451+ @feature [title Composable, emoji X]
2452+ Functions, mixins, and slots make components first-class.
2453+ @feature [title Predictable, emoji Y]
2454+ Flex-based layout - no cascade, no surprises.
2455+ @feature [title Static, emoji Z]
2456+ One file out. Deploy anywhere. Loads instantly.
2458+ -- Quote (semantic blockquote + cite)
2459+ @section [padding 32, max-width 720, center-x]
2461+ padding 24 32, background $surface, dark:background #1e293b,
2462+ border-left 4 $primary, rounded $radius, italic,
2463+ color $ink, dark:color #f1f5f9, line-height 1.7, size 18
2465+ "I want to lay out an interface, not argue with the cascade."
2466+ @cite [color $muted, size 13, italic]
2467+ - every frontend dev, eventually
2469+ -- Team (each + destructuring)
2470+ @section [padding 48 32, max-width 1100, center-x, spacing 16]
2471+ @text [bold, size 24, color $ink, dark:color #f1f5f9] The team
2473+ @row [wrap, spacing 12]
2474+ @each $name, $role in Ada Engineer, Grace Architect, Linus Maintainer, Ken Researcher
2475+ @column [$card, ...$lift, spacing 6, width 200, text-align center]
2476+ @text [bold, color $ink, dark:color #f1f5f9] $name
2477+ @text [color $muted, size 13] $role
2479+ -- FAQ (native disclosure widget + inline elements)
2480+ @section [padding 48 32, max-width 720, center-x, spacing 12]
2481+ @text [bold, size 24, color $ink, dark:color #f1f5f9] FAQ
2484+ @summary [bold, color $ink, dark:color #f1f5f9, cursor pointer]
2485+ Does it support dark mode?
2486+ @paragraph [color $muted, line-height 1.7]
2487+ Yes - prefix any style with {{@code [background $bg, padding 2 6, rounded 4, color $accent] dark:}} and it generates a media query.
2490+ @summary [bold, color $ink, dark:color #f1f5f9, cursor pointer]
2491+ How do reusable components work?
2492+ @paragraph [color $muted, line-height 1.7]
2493+ Use {{@code [background $bg, padding 2 6, rounded 4, color $accent] @fn}} for parameters and {{@code [background $bg, padding 2 6, rounded 4, color $accent] @children}} as a slot.
2495+ -- Native widgets (progress + meter)
2496+ @section [padding 48 32, max-width 720, center-x, spacing 16]
2497+ @text [bold, size 24, color $ink, dark:color #f1f5f9] Native widgets
2499+ @column [$card, spacing 16]
2500+ @column [spacing 6]
2501+ @row [center-y, spacing 12]
2502+ @text [color $ink, dark:color #f1f5f9] Coverage
2504+ @text [color $muted, size 13] 70%
2505+ @progress [value 70, max 100, width 100%]
2507+ @column [spacing 6]
2508+ @text [color $ink, dark:color #f1f5f9] Battery
2509+ @meter [value 6, min 0, max 10, low 3, high 8, width 100%]
2511+ -- Footer (hr divider + breadcrumb)
2512+ @hr [border-top 1 #e2e8f0, dark:border-top 1 #334155]
2513+ @footer [padding 32, max-width 1100, center-x]
2514+ @row [center-y, wrap, spacing 16, width 100%]
2515+ @text [color $muted, size 13]
2518+ @breadcrumb [spacing 8]
2519+ @link [color $muted, hover:color $primary] / Home
2520+ @link [color $muted, hover:color $primary] /docs Docs
2521+ @text [color $muted, size 13] v1.0</textarea>
2376<div class="toolbar">
2523<div class="toolbar">
2377<button class="btn-run" onclick="compile()">▶ Run (Ctrl+Enter)</button>
2524<button class="btn-run" onclick="compile()">▶ Run (Ctrl+Enter)</button>