@@ -2682,6 +2682,7 @@ fn main() {
26822682 js_glue, b64,
26832683 );
26842684 let compile_fn = "function compileSource(src){return window._wasmCompile(src);}";
2685+ let editor_content = include_str!("playground_default.hl");
26852686
26862687 let playground_html = format!(
26872688 r##"<!DOCTYPE html>
@@ -2715,174 +2716,7 @@ button{{padding:6px 16px;border:none;border-radius:4px;cursor:pointer;font-size:
27152716<div class="panel" id="editor-panel">
27162717<div class="header"><h1>htmlang</h1><span class="tag">playground</span></div>
27172718<div class="editor-wrap">
2718−<textarea id="editor" spellcheck="false">@page htmlang Showcase
2719−@lang en
2720−
2721−-- Design tokens
2722−@let primary #3b82f6
2723−@let accent #ec4899
2724−@let ink #0f172a
2725−@let muted #64748b
2726−@let surface white
2727−@let bg #f8fafc
2728−@let radius 10
2729−@let base 8
2730−@let gap = $base * 2
2731−
2732−-- Style presets
2733−@define card [
2734− padding 24, background $surface, rounded $radius,
2735− border 1 #e2e8f0,
2736− dark:background #1e293b, dark:border 1 #334155
2737−]
2738−
2739−@mixin lift [
2740− transition all 0.2s ease,
2741− hover:shadow 0 12px 24px rgba(0,0,0,0.08)
2742−]
2743−
2744−-- Components (functions with parameters, defaults, and slots)
2745−@fn button $label $variant=primary
2746− @el [
2747− padding 10 20, rounded 8, cursor pointer, bold,
2748− background if($variant == primary, $primary, transparent),
2749− color if($variant == primary, white, $primary),
2750− border 1 $primary, transition all 0.15s ease,
2751− hover:opacity 0.9, active:opacity 0.8
2752− ]
2753− @text $label
2754−
2755−@fn feature $title $emoji
2756− @el [$card, ...$lift, spacing 10]
2757− @text [size 32] $emoji
2758− @text [bold, size 18, color $ink, dark:color #f1f5f9] $title
2759− @paragraph [color $muted, line-height 1.6]
2760− @children
2761−
2762−@fn stat $value $label
2763− @column [spacing 4, text-align center, padding 12]
2764− @text [bold, size 40, color $primary] $value
2765− @text [color $muted, size 12, text-transform uppercase, letter-spacing 2] $label
2766−
2767−-- Page
2768−@column [background $bg, dark:background #0f172a, min-height 100vh]
2769−
2770− -- Header
2771− @header [
2772− padding 16 32, background $surface, dark:background #1e293b,
2773− border-bottom 1 #e2e8f0, dark:border-bottom 1 #334155
2774− ]
2775− @row [center-y, max-width 1100, center-x, width 100%]
2776− @text [bold, size 18, color $ink, dark:color #f1f5f9] htmlang
2777− @el [width fill]
2778− @row [spacing 24]
2779− @link [color $muted, hover:color $primary] #docs Docs
2780− @link [color $muted, hover:color $primary] #blog Blog
2781− @link [color $muted, hover:color $primary] #github GitHub
2782−
2783− -- Hero
2784− @section [padding 80 32, max-width 900, center-x, text-align center, spacing 20]
2785− @el [
2786− padding 6 14, rounded 999,
2787− background $primary|alpha:0.12, color $primary,
2788− bold, size 12, text-transform uppercase, letter-spacing 2,
2789− before:content "* "
2790− ]
2791− Built with htmlang
2792− @text [bold, size 56, color $ink, dark:color #f1f5f9, line-height 1.1]
2793− Layouts that just {{@text [italic, color $primary] make sense}}.
2794− @paragraph [max-width 600, center-x, color $muted, line-height 1.7, size 18]
2795− A minimalist DSL that compiles to a single static HTML file.
2796− No cascade, no JavaScript, no build chain.
2797− @row [center-x, spacing 12, wrap]
2798− @button [label Get Started]
2799− @button [label Star on GitHub, variant ghost]
2800−
2801− -- Stats (each iteration could go here too)
2802− @section [padding 24 32, max-width 800, center-x]
2803− @row [wrap, center-x, spacing 20]
2804− @stat [value 0kb, label JavaScript]
2805− @stat [value 1, label HTML File]
2806− @stat [value 100%, label Static]
2807−
2808− -- Features (grid layout)
2809− @section [padding 64 32, max-width 1100, center-x, spacing 24]
2810− @column [spacing 8, text-align center]
2811− @text [bold, size 32, color $ink, dark:color #f1f5f9] Why htmlang?
2812− @text [color $muted] Primitives over CSS quirks.
2813−
2814− @el [grid, grid-cols 3, gap $gap]
2815− @feature [title Composable, emoji X]
2816− Functions, mixins, and slots make components first-class.
2817− @feature [title Predictable, emoji Y]
2818− Flex-based layout - no cascade, no surprises.
2819− @feature [title Static, emoji Z]
2820− One file out. Deploy anywhere. Loads instantly.
2821−
2822− -- Quote (semantic blockquote + cite)
2823− @section [padding 32, max-width 720, center-x]
2824− @blockquote [
2825− padding 24 32, background $surface, dark:background #1e293b,
2826− border-left 4 $primary, rounded $radius, italic,
2827− color $ink, dark:color #f1f5f9, line-height 1.7, size 18
2828− ]
2829− "I want to lay out an interface, not argue with the cascade."
2830− @cite [color $muted, size 13, italic]
2831− - every frontend dev, eventually
2832−
2833− -- Team (each + destructuring)
2834− @section [padding 48 32, max-width 1100, center-x, spacing 16]
2835− @text [bold, size 24, color $ink, dark:color #f1f5f9] The team
2836−
2837− @row [wrap, spacing 12]
2838− @each $name, $role in Ada Engineer, Grace Architect, Linus Maintainer, Ken Researcher
2839− @column [$card, ...$lift, spacing 6, width 200, text-align center]
2840− @text [bold, color $ink, dark:color #f1f5f9] $name
2841− @text [color $muted, size 13] $role
2842−
2843− -- FAQ (native disclosure widget + inline elements)
2844− @section [padding 48 32, max-width 720, center-x, spacing 12]
2845− @text [bold, size 24, color $ink, dark:color #f1f5f9] FAQ
2846−
2847− @details [$card]
2848− @summary [bold, color $ink, dark:color #f1f5f9, cursor pointer]
2849− Does it support dark mode?
2850− @paragraph [color $muted, line-height 1.7]
2851− Yes - prefix any style with {{@code [background $bg, padding 2 6, rounded 4, color $accent] dark:}} and it generates a media query.
2852−
2853− @details [$card]
2854− @summary [bold, color $ink, dark:color #f1f5f9, cursor pointer]
2855− How do reusable components work?
2856− @paragraph [color $muted, line-height 1.7]
2857− 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.
2858−
2859− -- Native widgets (progress + meter)
2860− @section [padding 48 32, max-width 720, center-x, spacing 16]
2861− @text [bold, size 24, color $ink, dark:color #f1f5f9] Native widgets
2862−
2863− @column [$card, spacing 16]
2864− @column [spacing 6]
2865− @row [center-y, spacing 12]
2866− @text [color $ink, dark:color #f1f5f9] Coverage
2867− @el [width fill]
2868− @text [color $muted, size 13] 70%
2869− @progress [value 70, max 100, width 100%]
2870−
2871− @column [spacing 6]
2872− @text [color $ink, dark:color #f1f5f9] Battery
2873− @meter [value 6, min 0, max 10, low 3, high 8, width 100%]
2874−
2875− -- Footer (hr divider + breadcrumb)
2876− @hr [border-top 1 #e2e8f0, dark:border-top 1 #334155]
2877− @footer [padding 32, max-width 1100, center-x]
2878− @row [center-y, wrap, spacing 16, width 100%]
2879− @text [color $muted, size 13]
2880− Made with htmlang.
2881− @el [width fill]
2882− @breadcrumb [spacing 8]
2883− @link [color $muted, hover:color $primary] / Home
2884− @link [color $muted, hover:color $primary] /docs Docs
2885− @text [color $muted, size 13] v1.0</textarea>
2719+<textarea id="editor" spellcheck="false">{editor_content}</textarea>
28862720</div>
28872721<div class="toolbar">
28882722<button class="btn-run" onclick="compile()">▶ Run (Ctrl+Enter)</button>