4361500 · htmlang · git.iko.soy

git.iko.soy/htmlang

on master help sign in

Custom properties without magic

4361500iko2 weeks ago

DESIGN.md+4−3

compare with master

unifiedsplit

@@ -318,12 +318,13 @@ A multi-line string uses triple quotes; its indented lines are the value:

318@text $intro

319```

320

321−`@let --name value` also emits a CSS custom property, used as `$--name` and

321+`@let --name value` also declares the CSS custom property `--name` on

322−as `var(--name)` in the generated CSS:

322+`:root`. `$--name` is its value at compile time; `var(--name)` refers to it at

323+run time, so a stylesheet can override it:

323

324

324```

325```

325@let --brand #3b82f6

326@let --brand #3b82f6

326−@el [background $--brand] Themed

327+@el [background var(--brand), border 1 solid ${darken($--brand, 10)}] Themed

327```

328```

328

329

329## Expressions

330## Expressions

crates/htmlang-core/src/codegen.rs−97

@@ -861,10 +861,6 @@ fn build_element_css(doc: &Document, styles: &StyleCollector, dev: bool) -> Stri

861 // Generated rules always go in `@layer htmlang`, so unlayered user CSS

862 // (`@style`, `@raw`) overrides them regardless of specificity.

863 let styles_css = styles.to_css_formatted(dev);

864− // Fold literal values declared via `@theme` / `@let --name` back into

865− // `var(--name)` references so the generated CSS actually uses the

866− // custom properties emitted in `:root`.

867− let styles_css = substitute_css_vars(&styles_css, &root_vars);

868

864

869 // Emit the :root block first so the cascade picks up the custom

865 // Emit the :root block first so the cascade picks up the custom

870 // properties before the class rules consume them.

866 // properties before the class rules consume them.

@@ -2214,99 +2210,6 @@ fn css_px(value: &str) -> String {

2214 }

2210 }

2215}

2211}

2216

2212

2217−/// Rewrite literal values that match a declared CSS custom property (from

2218−/// `@theme` or `@let --name value`) to `var(--name)` references. Matches are

2219−/// anchored to CSS value boundaries so e.g. `#3b82f6` inside a longer hex or

2220−/// inside an identifier is not replaced. The `:root` block is emitted before

2221−/// this call runs, so its declarations are not affected.

2222−fn substitute_css_vars(css: &str, vars: &[(String, String)]) -> String {

2223− if css.is_empty() || vars.is_empty() {

2224− return css.to_string();

2225− }

2226− // Prefer longer values first so that if two vars share a prefix, the

2227− // longer (more specific) match wins.

2228− let mut pairs: Vec<(&str, String)> = vars

2229− .iter()

2230− .filter(|(name, value)| name.starts_with("--") && !value.is_empty())

2231− .map(|(name, value)| (value.as_str(), format!("var({})", name)))

2232− .collect();

2233− pairs.sort_by_key(|(v, _)| std::cmp::Reverse(v.len()));

2234− if pairs.is_empty() {

2235− return css.to_string();

2236− }

2237−

2238− let is_boundary_before = |b: Option<u8>| match b {

2239− None => true,

2240− Some(c) => matches!(c, b':' | b' ' | b',' | b'(' | b';' | b'{' | b'\n' | b'\t'),

2241− };

2242− let is_boundary_after = |b: Option<u8>| match b {

2243− None => true,

2244− Some(c) => matches!(c, b';' | b'}' | b',' | b' ' | b')' | b'\n' | b'\t'),

2245− };

2246−

2247− let bytes = css.as_bytes();

2248− let mut out = String::with_capacity(css.len());

2249− let mut i = 0;

2250− let mut prev: Option<u8> = None;

2251− // Only declaration values are rewritten — never selectors or at-rule

2252− // preludes such as `@media (min-width:768px)`. `blocks` records, for

2253− // each open `{`, whether it holds declarations (a style rule) or nested

2254− // rules (an at-rule like `@media` / `@layer`).

2255− let mut blocks: Vec<bool> = Vec::new();

2256− let mut prelude_start = 0;

2257− let mut in_value = false;

2258− while i < bytes.len() {

2259− match bytes[i] {

2260− b'{' => {

2261− let prelude = css[prelude_start..i].trim_start();

2262− blocks.push(!prelude.starts_with('@'));

2263− in_value = false;

2264− prelude_start = i + 1;

2265− }

2266− b'}' => {

2267− blocks.pop();

2268− in_value = false;

2269− prelude_start = i + 1;

2270− }

2271− b';' => {

2272− in_value = false;

2273− prelude_start = i + 1;

2274− }

2275− b':' if blocks.last() == Some(&true) => in_value = true,

2276− _ => {}

2277− }

2278− if in_value && is_boundary_before(prev) {

2279− let mut matched = false;

2280− for (val, repl) in &pairs {

2281− let vb = val.as_bytes();

2282− if i + vb.len() <= bytes.len() && &bytes[i..i + vb.len()] == vb {

2283− let next = bytes.get(i + vb.len()).copied();

2284− if is_boundary_after(next) {

2285− out.push_str(repl);

2286− prev = repl.as_bytes().last().copied();

2287− i += vb.len();

2288− matched = true;

2289− break;

2290− }

2291− }

2292− }

2293− if matched {

2294− continue;

2295− }

2296− }

2297− // Advance by one UTF-8 code point.

2298− let start = i;

2299− i += 1;

2300− while i < bytes.len() && (bytes[i] & 0xC0) == 0x80 {

2301− i += 1;

2302− }

2303− out.push_str(&css[start..i]);

2304− prev = bytes.get(i - 1).copied();

2305− }

2306− out

2307−}

2308−

2309−

2310/// Format a `line-height` value. CSS accepts either a unitless multiplier

2213/// Format a `line-height` value. CSS accepts either a unitless multiplier

2311/// (e.g. `1.5`) or a length (e.g. `24px`). Plain integers in htmlang source

2214/// (e.g. `1.5`) or a length (e.g. `24px`). Plain integers in htmlang source

2312/// are ambiguous: `[line-height 24]` was historically emitted as `24` (which

2215/// are ambiguous: `[line-height 24]` was historically emitted as `24` (which

examples/demo.html+1−1

@@ -1,3 +1,3 @@

1−<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>htmlang Demo</title><link rel="preload" href="https://picsum.photos/72" as="image"><link rel="preload" href="https://picsum.photos/640/200" as="image"><meta name="description" content="A one-page tour of htmlang."><meta name="theme-color" content="#3b82f6"><meta property="og:title" content="htmlang"><meta property="og:type" content="website"><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--ink:#0f172a;--muted:#64748b;--subtle:#f8fafc;}@layer htmlang{.a{display:flex;flex-direction:column;max-width:960px;margin-left:auto;margin-right:auto;padding:32px;gap:24px;background:white;}.b{display:flex;flex-direction:column;gap:8px;}.c{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;}.d{display:flex;flex-direction:row;gap:6px;align-items:center;}.e{color:var(--muted);}.f{color:var(--ink);}.g{display:flex;flex-direction:row;gap:16px;align-items:center;}.h{display:flex;flex-direction:column;flex:1;min-width:0;gap:6px;}.i{font-weight:bold;font-size:40px;color:var(--ink);}.j{margin:0;line-height:1.6;color:var(--muted);}.k{font-weight:bold;color:var(--primary);}.l{color:var(--primary);text-decoration:underline;}.m{width:72px;height:72px;border-radius:36px;}.n{border-top:1px solid #e5e7eb;}.o{display:flex;flex-direction:column;gap:12px;padding-block:8px;}.p{font-weight:bold;font-size:22px;color:var(--ink);}.q{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;}.r{display:flex;flex-direction:column;padding:16px;background:white;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.05);cursor:pointer;transition:all 0.2s ease;animation:fade-up 0.3s ease;}.s{display:flex;flex-direction:row;gap:10px;align-items:center;}.t{font-size:20px;color:var(--primary);}.u{font-weight:bold;font-size:16px;color:var(--ink);}.v{margin:0;line-height:1.7;}.w{font-weight:bold;}.x{font-style:italic;}.y{padding:2px 6px;background:#f1f5f9;border-radius:4px;font-family:monospace;font-size:13px;}.z{background:#fef08a;}.aa{display:flex;flex-direction:column;margin:0;padding-inline-start:16px;border-left:3px solid var(--primary);color:var(--muted);font-style:italic;}.ab{margin:0;white-space:pre;background:var(--ink);color:#e2e8f0;padding:16px;border-radius:8px;font-family:monospace;font-size:13px;overflow-x:auto;}.ac{display:flex;flex-direction:column;gap:6px;}.ad{display:flex;flex-direction:row;gap:10px;align-items:baseline;}.ae{font-weight:bold;min-width:80px;}.af{color:var(--muted);font-style:italic;}.ag{display:flex;flex-direction:row;gap:6px;}.ah{display:flex;flex-direction:column;width:18px;height:18px;border-radius:9px;background:var(--primary);opacity:0.4;}.ai{display:flex;flex-direction:row;gap:4px;}.aj{display:flex;flex-direction:column;width:24px;height:24px;border-radius:4px;background:var(--primary);color:white;text-align:center;font-size:12px;font-weight:bold;line-height:24px;}.ak{font-weight:bold;min-width:64px;}.al{color:var(--primary);font-weight:bold;}.am{color:#10b981;font-weight:bold;}.an{display:flex;flex-direction:column;padding:12px;border-radius:6px;background:var(--primary);color:white;}.ao{font-family:ui-monospace,monospace;}.ap{display:flex;flex-direction:column;gap:10px;max-width:420px;}.aq{font-weight:bold;font-size:13px;}.ar{padding:10px;border:1px solid #e5e7eb;border-radius:6px;transition:border 0.15s ease;}.as{padding:10px;border:1px solid #e5e7eb;border-radius:6px;}.at{display:flex;flex-direction:row;gap:8px;}.au{padding:10px 16px;background:var(--primary);color:white;font-weight:bold;border-radius:6px;border:0;transition:background 0.15s ease;cursor:pointer;}.av{padding:10px 16px;background:white;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;}.aw{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;}.ax{display:flex;flex-direction:column;flex:1;gap:8px;min-width:240px;}.ay{margin:0;padding-left:0;gap:4px;list-style:disc;padding-inline-start:20px;}.az{flex-direction:column;display:list-item;}.a0{margin:0;padding-left:0;list-style:decimal;padding-inline-start:20px;}.a1{text-align:left;padding:8px;}.a2{text-align:right;padding:8px;}.a3{padding:8px;border-top:1px solid #e5e7eb;}.a4{padding:8px;border-top:1px solid #e5e7eb;text-align:right;}.a5{display:flex;flex-direction:column;margin:0;gap:6px;}.a6{border-radius:8px;}.a7{color:var(--muted);font-size:13px;text-align:center;}.a8{display:flex;flex-direction:column;padding:12px;border:1px solid #e5e7eb;border-radius:6px;background:var(--subtle);}.a9{font-weight:bold;cursor:pointer;}.ba{margin:0;color:var(--muted);line-height:1.6;padding-block-start:6px;}.bb{flex-direction:column;display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"h h" "s m" "f f";gap:8px;padding:8px;background:var(--subtle);border-radius:8px;}.bc{display:flex;flex-direction:column;grid-area:h;padding:10px;background:var(--primary);color:white;border-radius:6px;text-align:center;}.bd{display:flex;flex-direction:column;grid-area:s;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}.be{display:flex;flex-direction:column;grid-area:m;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}.bf{display:flex;flex-direction:column;grid-area:f;padding:10px;background:var(--ink);color:white;border-radius:6px;text-align:center;}.bg{gap:4px;font-style:normal;}.bh,.bn{color:var(--primary);}.bi{font-size:13px;color:var(--muted);}.bj{font-size:13px;}.bk{display:flex;flex-direction:column;padding-block-start:24px;margin-block-start:24px;border-top:1px solid #e5e7eb;gap:8px;}.bl{display:flex;flex-direction:row;gap:8px;align-items:center;}.bm{display:flex;flex-direction:column;padding:12px 20px;background:var(--primary);color:white;font-weight:bold;border-radius:8px;transition:all 0.15s ease;cursor:pointer;}.bo{display:flex;flex-direction:column;flex:1;min-width:0;}.bp{color:var(--muted);font-size:13px;}.r:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);}.au:hover,.bm:hover{background:#3575dd;}.bn:hover{text-decoration:underline;}.an::before{content:"→ ";font-weight:bold;}.ar:focus{border:1px solid var(--primary);}.ar:valid{border:1px solid #10b981;}.ar:invalid{border:1px solid #ef4444;}.au:active,.bm:active{background:#2f68c5;}.bn:visited{color:#8b5cf6;}@media(prefers-color-scheme:dark){.a{background:#0b1220;color:#e2e8f0;}.i{color:white;}}@media print{.bk{display:none;}}}@keyframes fade-up {from { opacity: 0; transform: translateY(8px); }to { opacity: 1; transform: translateY(0); }}</style></head><body><noscript><style>.needs-js{display:none}</style></noscript><div class="a"><header class="b"><nav class="c"><div class="d"><a href="/" class="e">Home</a><span>/</span><a href="/demos" class="e">Demos</a><span>/</span><span class="f">htmlang</span></div></nav><div class="g"><div class="h"><span class="i">Welcome to htmlang</span><p class="j">A minimalist layout language that compiles to <span class="k">static HTML</span> — no JS, no build step. Visit the <a href="https://github.com" rel="noopener noreferrer" target="_blank" class="l">repo</a> for more.</p></div><img src="https://picsum.photos/72" class="m" alt="Avatar" fetchpriority="high"></div></header><hr class="n"><section class="o"><span class="p">Features</span><div class="q"><article class="r"><div class="s"><span class="t">✦</span><span class="u">Simple</span></div><span>Write layouts without CSS classes.</span></article><article class="r"><div class="s"><span class="t">⚡</span><span class="u">Fast</span></div><span>Compiles to a single self-contained HTML file.</span></article><article class="r"><div class="s"><span class="t">○</span><span class="u">Minimal</span></div><span>Zero runtime JavaScript by default.</span></article><article class="r"><div class="s"><span class="t">◆</span><span class="u">Typed</span></div><span>LSP with diagnostics and go-to-definition.</span></article></div></section><section class="o"><span class="p">Typography</span><p class="v">A quick brown fox jumps over <span class="w">the lazy</span> <span class="x">dog</span>. Press <kbd class="y">Ctrl+K</kbd> to search. <mark class="z">Highlighted</mark> uses mark. <abbr title="HyperText Markup Language + language">htmlang</abbr> is an abbreviation.</p><blockquote class="aa"><span>Layout is code. Style is code. Everything should compose.</span><cite>— Anonymous</cite></blockquote><pre class="ab">@let button $label

1+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>htmlang Demo</title><link rel="preload" href="https://picsum.photos/72" as="image"><link rel="preload" href="https://picsum.photos/640/200" as="image"><meta name="description" content="A one-page tour of htmlang."><meta name="theme-color" content="#3b82f6"><meta property="og:title" content="htmlang"><meta property="og:type" content="website"><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--ink:#0f172a;--muted:#64748b;--subtle:#f8fafc;}@layer htmlang{.a{display:flex;flex-direction:column;max-width:960px;margin-left:auto;margin-right:auto;padding:32px;gap:24px;background:white;}.b{display:flex;flex-direction:column;gap:8px;}.c{display:flex;flex-direction:column;gap:6px;color:#64748b;font-size:13px;}.d{display:flex;flex-direction:row;gap:6px;align-items:center;}.e{color:#64748b;}.f{color:#0f172a;}.g{display:flex;flex-direction:row;gap:16px;align-items:center;}.h{display:flex;flex-direction:column;flex:1;min-width:0;gap:6px;}.i{font-weight:bold;font-size:40px;color:#0f172a;}.j{margin:0;line-height:1.6;color:#64748b;}.k{font-weight:bold;color:#3b82f6;}.l{color:#3b82f6;text-decoration:underline;}.m{width:72px;height:72px;border-radius:36px;}.n{border-top:1px solid #e5e7eb;}.o{display:flex;flex-direction:column;gap:12px;padding-block:8px;}.p{font-weight:bold;font-size:22px;color:#0f172a;}.q{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;}.r{display:flex;flex-direction:column;padding:16px;background:white;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.05);cursor:pointer;transition:all 0.2s ease;animation:fade-up 0.3s ease;}.s{display:flex;flex-direction:row;gap:10px;align-items:center;}.t{font-size:20px;color:#3b82f6;}.u{font-weight:bold;font-size:16px;color:#0f172a;}.v{margin:0;line-height:1.7;}.w{font-weight:bold;}.x{font-style:italic;}.y{padding:2px 6px;background:#f1f5f9;border-radius:4px;font-family:monospace;font-size:13px;}.z{background:#fef08a;}.aa{display:flex;flex-direction:column;margin:0;padding-inline-start:16px;border-left:3px solid #3b82f6;color:#64748b;font-style:italic;}.ab{margin:0;white-space:pre;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:8px;font-family:monospace;font-size:13px;overflow-x:auto;}.ac{display:flex;flex-direction:column;gap:6px;}.ad{display:flex;flex-direction:row;gap:10px;align-items:baseline;}.ae{font-weight:bold;min-width:80px;}.af{color:#64748b;font-style:italic;}.ag{display:flex;flex-direction:row;gap:6px;}.ah{display:flex;flex-direction:column;width:18px;height:18px;border-radius:9px;background:#3b82f6;opacity:0.4;}.ai{display:flex;flex-direction:row;gap:4px;}.aj{display:flex;flex-direction:column;width:24px;height:24px;border-radius:4px;background:#3b82f6;color:white;text-align:center;font-size:12px;font-weight:bold;line-height:24px;}.ak{font-weight:bold;min-width:64px;}.al{color:#3b82f6;font-weight:bold;}.am{color:#10b981;font-weight:bold;}.an{display:flex;flex-direction:column;padding:12px;border-radius:6px;background:#3b82f6;color:white;}.ao{font-family:ui-monospace,monospace;}.ap{display:flex;flex-direction:column;gap:10px;max-width:420px;}.aq{font-weight:bold;font-size:13px;}.ar{padding:10px;border:1px solid #e5e7eb;border-radius:6px;transition:border 0.15s ease;}.as{padding:10px;border:1px solid #e5e7eb;border-radius:6px;}.at{display:flex;flex-direction:row;gap:8px;}.au{padding:10px 16px;background:#3b82f6;color:white;font-weight:bold;border-radius:6px;border:0;transition:background 0.15s ease;cursor:pointer;}.av{padding:10px 16px;background:white;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;}.aw{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;}.ax{display:flex;flex-direction:column;flex:1;gap:8px;min-width:240px;}.ay{margin:0;padding-left:0;gap:4px;list-style:disc;padding-inline-start:20px;}.az{flex-direction:column;display:list-item;}.a0{margin:0;padding-left:0;list-style:decimal;padding-inline-start:20px;}.a1{text-align:left;padding:8px;}.a2{text-align:right;padding:8px;}.a3{padding:8px;border-top:1px solid #e5e7eb;}.a4{padding:8px;border-top:1px solid #e5e7eb;text-align:right;}.a5{display:flex;flex-direction:column;margin:0;gap:6px;}.a6{border-radius:8px;}.a7{color:#64748b;font-size:13px;text-align:center;}.a8{display:flex;flex-direction:column;padding:12px;border:1px solid #e5e7eb;border-radius:6px;background:#f8fafc;}.a9{font-weight:bold;cursor:pointer;}.ba{margin:0;color:#64748b;line-height:1.6;padding-block-start:6px;}.bb{flex-direction:column;display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"h h" "s m" "f f";gap:8px;padding:8px;background:#f8fafc;border-radius:8px;}.bc{display:flex;flex-direction:column;grid-area:h;padding:10px;background:#3b82f6;color:white;border-radius:6px;text-align:center;}.bd{display:flex;flex-direction:column;grid-area:s;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}.be{display:flex;flex-direction:column;grid-area:m;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}.bf{display:flex;flex-direction:column;grid-area:f;padding:10px;background:#0f172a;color:white;border-radius:6px;text-align:center;}.bg{gap:4px;font-style:normal;}.bh,.bn{color:#3b82f6;}.bi{font-size:13px;color:#64748b;}.bj{font-size:13px;}.bk{display:flex;flex-direction:column;padding-block-start:24px;margin-block-start:24px;border-top:1px solid #e5e7eb;gap:8px;}.bl{display:flex;flex-direction:row;gap:8px;align-items:center;}.bm{display:flex;flex-direction:column;padding:12px 20px;background:#3b82f6;color:white;font-weight:bold;border-radius:8px;transition:all 0.15s ease;cursor:pointer;}.bo{display:flex;flex-direction:column;flex:1;min-width:0;}.bp{color:#64748b;font-size:13px;}.r:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);}.au:hover,.bm:hover{background:#3575dd;}.bn:hover{text-decoration:underline;}.an::before{content:"→ ";font-weight:bold;}.ar:focus{border:1px solid #3b82f6;}.ar:valid{border:1px solid #10b981;}.ar:invalid{border:1px solid #ef4444;}.au:active,.bm:active{background:#2f68c5;}.bn:visited{color:#8b5cf6;}@media(prefers-color-scheme:dark){.a{background:#0b1220;color:#e2e8f0;}.i{color:white;}}@media print{.bk{display:none;}}}@keyframes fade-up {from { opacity: 0; transform: translateY(8px); }to { opacity: 1; transform: translateY(0); }}</style></head><body><noscript><style>.needs-js{display:none}</style></noscript><div class="a"><header class="b"><nav class="c"><div class="d"><a href="/" class="e">Home</a><span>/</span><a href="/demos" class="e">Demos</a><span>/</span><span class="f">htmlang</span></div></nav><div class="g"><div class="h"><span class="i">Welcome to htmlang</span><p class="j">A minimalist layout language that compiles to <span class="k">static HTML</span> — no JS, no build step. Visit the <a href="https://github.com" rel="noopener noreferrer" target="_blank" class="l">repo</a> for more.</p></div><img src="https://picsum.photos/72" class="m" alt="Avatar" fetchpriority="high"></div></header><hr class="n"><section class="o"><span class="p">Features</span><div class="q"><article class="r"><div class="s"><span class="t">✦</span><span class="u">Simple</span></div><span>Write layouts without CSS classes.</span></article><article class="r"><div class="s"><span class="t">⚡</span><span class="u">Fast</span></div><span>Compiles to a single self-contained HTML file.</span></article><article class="r"><div class="s"><span class="t">○</span><span class="u">Minimal</span></div><span>Zero runtime JavaScript by default.</span></article><article class="r"><div class="s"><span class="t">◆</span><span class="u">Typed</span></div><span>LSP with diagnostics and go-to-definition.</span></article></div></section><section class="o"><span class="p">Typography</span><p class="v">A quick brown fox jumps over <span class="w">the lazy</span> <span class="x">dog</span>. Press <kbd class="y">Ctrl+K</kbd> to search. <mark class="z">Highlighted</mark> uses mark. <abbr title="HyperText Markup Language + language">htmlang</abbr> is an abbreviation.</p><blockquote class="aa"><span>Layout is code. Style is code. Everything should compose.</span><cite>— Anonymous</cite></blockquote><pre class="ab">@let button $label

2 @el [padding 12, background blue]

3 @text $label</pre></section><section class="o"><span class="p">Control flow</span><div class="ac"><div class="ad"><span class="ae">Alice</span><span class="e">Engineer</span></div><div class="ad"><span class="ae">Bob</span><span class="e">Designer</span></div><div class="ad"><span class="ae">Carol</span><span class="e">PM</span></div></div><span class="af" data-state="">(Nothing — @each ... @else fallback)</span><div class="ag"><div class="ah"></div><div class="ah"></div><div class="ah"></div><div class="ah"></div><div class="ah"></div><div class="ah"></div></div><div class="ai"><div class="aj"><span>1</span></div><div class="aj"><span>2</span></div><div class="aj"><span>3</span></div><div class="aj"><span>4</span></div><div class="aj"><span>5</span></div><div class="aj"><span>6</span></div></div><div class="d"><span class="ak">Count:</span><span class="al">3 items</span></div><span class="am">✓ Ready</span><div class="an"><span>Conditional styling via <code class="ao">if(cond, a, b)</code>.</span></div></section><section class="o"><span class="p">Forms</span><form action="/subscribe" class="ap"><label class="aq" for="email">Email</label><input class="ar" id="email" type="email" name="email" placeholder="you@example.com" required><label class="aq" for="role">Role</label><select class="as" id="role" name="role"><option value="dev">Developer</option><option value="designer">Designer</option><option value="other">Other</option></select><label class="aq" for="msg">Message</label><textarea class="as" id="msg" name="msg" rows="3"></textarea><div class="at"><button class="au" type="submit">Subscribe</button><button class="av" type="reset">Reset</button></div><progress value="60" max="100"></progress></form></section><section class="o"><span class="p">Data</span><div class="aw"><div class="ax"><span class="w">Unordered</span><ul class="ay"><li class="az">Composable with @each</li><li class="az">Indent to nest children</li><li class="az">Bold list items work too</li></ul><span class="w">Ordered</span><ol class="a0"><li class="az">First</li><li class="az">Second</li><li class="az">Third</li></ol></div><div class="ax"><span class="w">Table</span><table><thead><tr><th class="a1">Item</th><th class="a2">Qty</th></tr></thead><tbody><tr><td class="a3">Widgets</td><td class="a4">12</td></tr><tr><td class="a3">Gadgets</td><td class="a4">7</td></tr></tbody></table></div></div><figure class="a5"><img src="https://picsum.photos/640/200" class="a6" alt="A random placeholder" fetchpriority="high"><figcaption class="a7">A placeholder image.</figcaption></figure></section><section class="o"><span class="p">Disclosure + grid areas</span><details class="a8"><summary class="a9">What is htmlang?</summary><p class="ba">htmlang is a layout-first language that compiles to a single, self-contained HTML file with embedded CSS.</p></details><div class="bb"><div class="bc"><span>Header</span></div><div class="bd"><span>Sidebar</span></div><div class="be"><span>Main</span></div><div class="bf"><span>Footer</span></div></div></section><section class="o"><span class="p">Misc</span><address class="bg"><span class="w">htmlang HQ</span><span>123 Flexbox Avenue</span><a href="mailto:hi@htmlang.dev" class="bh">hi@htmlang.dev</a></address><div class="s"><span class="bi">Published</span><time class="bj" datetime="2026-04-16">April 16 2026</time></div><div class="s"><span class="bi">Confidence</span><meter value="8" min="0" max="10" low="3" high="7">8/10</meter></div></section><footer class="bk"><div class="bl"><div class="bm"><a href="https://github.com" rel="noopener noreferrer" target="_blank">Get Started</a></div><a href="https://github.com" rel="noopener noreferrer" target="_blank" class="bn">Browse source</a><div class="bo"></div><span class="bp">© 2026 htmlang</span></div></footer></div></body></html>

tests/snapshots.rs+3−7

@@ -3014,13 +3014,9 @@ fn test_theme_directive() {

3014 "theme should emit spacing var, got: {}",

3015 html

3016 );

3017− // Theme tokens collapse to `var(--name)` references so runtime theming

3017+ // Values are written as given: a matching literal is not turned into

3018− // actually takes effect (users can override `--primary` with CSS).

3018+ // `var(--primary)`

3019− assert!(

3020− html.contains("background:var(--primary)"),

3019+ assert!(html.contains("background:#3b82f6"), "{}", html);

3021− "theme var should resolve to var(--primary), got: {}",

3022− html

3023− );

3024}

3020}

3025

3021

3026#[test]

3022#[test]

tests/snapshots/stress_deeply_nested.html+1−1

@@ -1 +1 @@

1−<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Deeply Nested Stress Test</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--border:#e2e8f0;--radius:8;}@layer htmlang{.a{display:flex;flex-direction:column;gap:20px;padding:24px;}.b{display:flex;flex-direction:column;background:#f0f9ff;border-radius:12px;padding:20px;border:1px solid #bae6fd;}.c{font-weight:bold;font-size:20px;color:#0369a1;}.d{display:flex;flex-direction:row;gap:16px;margin-top:16px;}.e{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);flex:1;min-width:0;}.f{font-weight:bold;font-size:16px;color:#1e293b;}.g{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.h{display:flex;flex-direction:column;background:#f1f5f9;border-radius:6px;padding:12px;}.i{font-size:14px;color:#475569;}.j{display:flex;flex-direction:column;gap:4px;margin-top:8px;}.k{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;transition:all 0.15s;}.l{font-size:13px;color:#64748b;}.m{display:flex;flex-direction:row;gap:6px;margin-top:4px;align-items:center;}.n{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#10b981;}.o{display:flex;flex-direction:column;padding:4px 8px;background:#dbeafe;border-radius:4px;}.p{font-size:11px;color:#1d4ed8;}.q{flex-direction:column;display:inline-block;margin-left:4px;}.r{font-size:10px;color:var(--primary);}.s{display:flex;flex-direction:column;margin-top:2px;}.t{font-size:9px;color:#93c5fd;}.u{display:flex;flex-direction:column;padding:2px 4px;background:#eff6ff;border-radius:2px;margin-top:1px;}.v{font-size:8px;color:#bfdbfe;}.w{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;}.x{display:flex;flex-direction:column;margin-top:4px;padding:6px;background:#f0fdf4;border-radius:4px;}.y{font-size:12px;color:#166534;}.z{display:flex;flex-direction:row;gap:4px;margin-top:2px;}.aa{display:flex;flex-direction:column;padding:2px 6px;background:#bbf7d0;border-radius:2px;}.ab{font-size:10px;color:#15803d;}.ac{display:flex;flex-direction:column;padding:2px 6px;background:#fef3c7;border-radius:2px;}.ad{font-size:10px;color:#92400e;}.ae{display:flex;flex-direction:column;gap:12px;margin-top:12px;}.af,.bo{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);}.ag{font-weight:bold;font-size:16px;}.ah{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;margin-top:8px;}.ai{display:flex;flex-direction:row;gap:8px;margin-top:8px;}.aj{display:flex;flex-direction:column;flex:1;min-width:0;background:#eff6ff;border-radius:4px;padding:8px;}.ak{font-size:12px;color:#1d4ed8;font-weight:bold;}.al{display:flex;flex-direction:column;margin-top:4px;height:60px;background:#dbeafe;border-radius:4px;padding:8px;}.am{font-size:20px;font-weight:bold;color:#1e40af;}.an{display:flex;flex-direction:row;gap:2px;margin-top:2px;}.ao{display:flex;flex-direction:column;width:4px;height:12px;background:#93c5fd;border-radius:1px;}.ap{display:flex;flex-direction:column;width:4px;height:18px;background:#60a5fa;border-radius:1px;}.aq{display:flex;flex-direction:column;width:4px;height:8px;background:#93c5fd;border-radius:1px;}.ar{display:flex;flex-direction:column;width:4px;height:22px;background:var(--primary);border-radius:1px;}.as{display:flex;flex-direction:column;width:2px;height:2px;border-radius:50%;background:white;margin-top:1px;}.at{font-size:6px;color:white;}.au{display:flex;flex-direction:column;flex:1;min-width:0;background:#f0fdf4;border-radius:4px;padding:8px;}.av{font-size:12px;color:#166534;font-weight:bold;}.aw{display:flex;flex-direction:column;margin-top:4px;height:60px;background:#dcfce7;border-radius:4px;padding:8px;}.ax{font-size:20px;font-weight:bold;color:#166534;}.ay{font-size:10px;color:#16a34a;}.az{flex-direction:column;padding:1px 4px;background:#bbf7d0;border-radius:2px;display:inline-block;}.a0{font-size:8px;color:#15803d;}.a1{display:flex;flex-direction:column;gap:8px;margin-top:8px;}.a2,.bb{display:flex;flex-direction:column;padding:8px;border:1px solid var(--border);border-radius:4px;}.a3{font-size:12px;color:#64748b;margin-bottom:4px;}.a4{padding:6px 10px;border-radius:4px;border:1px solid var(--border);width:100%;}.a5{display:flex;flex-direction:column;margin-top:4px;padding:4px 8px;background:#fef2f2;border-radius:4px;}.a6{font-size:11px;color:#991b1b;}.a7{font-size:10px;color:#dc2626;}.a8{display:flex;flex-direction:column;margin-top:1px;padding:2px 4px;background:#fee2e2;border-radius:2px;}.a9{font-size:9px;color:#b91c1c;}.ba{display:flex;flex-direction:column;gap:6px;margin-top:8px;}.bc{font-size:14px;font-weight:bold;color:#1e293b;}.bd{display:flex;flex-direction:column;gap:4px;margin-top:6px;margin-left:12px;}.be{display:flex;flex-direction:column;padding:6px;background:#f8fafc;border-radius:4px;}.bf{display:flex;flex-direction:row;gap:8px;align-items:center;}.bg{display:flex;flex-direction:column;width:8px;height:8px;border-radius:2px;background:var(--primary);}.bh{font-size:12px;color:#475569;}.bi{display:flex;flex-direction:column;margin-top:4px;margin-left:16px;}.bj{font-size:11px;color:#94a3b8;}.bk{display:flex;flex-direction:column;margin-left:12px;margin-top:2px;padding:2px 6px;background:#eff6ff;border-radius:2px;}.bl{display:flex;flex-direction:column;background:#fefce8;border-radius:12px;padding:20px;border:1px solid #fde68a;margin-top:20px;}.bm{font-weight:bold;font-size:20px;color:#854d0e;}.bn{display:flex;flex-direction:column;gap:12px;margin-top:16px;}.bp{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;}.bq{display:flex;flex-direction:column;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:6px;}.br{font-size:13px;color:#1e293b;}.bs{flex-direction:column;margin-top:6px;width:80px;height:80px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;}.bt{font-size:24px;color:#94a3b8;font-weight:bold;}.bu{flex-direction:column;position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;}.bv{font-size:10px;color:white;}.bw{display:flex;flex-direction:column;margin-top:1px;}.bx{display:flex;flex-direction:column;padding:1px 3px;background:#1e3a5f;border-radius:2px;margin-top:1px;}.by{font-size:7px;color:white;}.bz{display:flex;flex-direction:row;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:4px;}.b0{font-size:13px;color:#1e293b;flex:1;min-width:0;}.b1{display:flex;flex-direction:column;padding:4px 12px;background:#f1f5f9;border-radius:4px;}.b2{font-size:12px;color:#64748b;}.b3{display:flex;flex-direction:column;gap:6px;margin-top:12px;}.b4{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--border);}.b5{font-size:14px;color:#1e293b;flex:1;min-width:0;}.b6{display:flex;flex-direction:column;width:36px;height:20px;border-radius:10px;background:var(--primary);padding:2px;}.b7{display:flex;flex-direction:column;width:16px;height:16px;border-radius:50%;background:white;margin-left:16px;}.b8{display:flex;flex-direction:column;background:#fdf2f8;border-radius:12px;padding:20px;border:1px solid #fbcfe8;margin-top:20px;}.b9{font-weight:bold;font-size:20px;color:#9d174d;}.ca{display:flex;flex-direction:column;background:white;border-radius:8px;padding:12px;border:1px solid var(--border);flex:1;min-width:0;}.cb{font-weight:bold;font-size:14px;color:#1e293b;}.cc{display:flex;flex-direction:column;margin-top:8px;background:#f0fdf4;border-radius:6px;padding:8px;}.cd{display:flex;flex-direction:column;margin-top:4px;}.ce{display:flex;flex-direction:row;gap:4px;}.cf{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#86efac;border-radius:2px;}.cg{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#4ade80;border-radius:2px;}.ch{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#22c55e;border-radius:2px;}.ci{font-size:11px;color:#16a34a;}.cj{font-size:10px;color:#22c55e;}.ck{display:flex;flex-direction:column;margin-top:2px;padding:2px 6px;background:#dcfce7;border-radius:2px;}.cl{font-size:9px;color:#15803d;}.cm{font-size:8px;color:#4ade80;}.cn{display:flex;flex-direction:column;padding:1px 3px;background:#bbf7d0;border-radius:1px;margin-top:1px;}.co{font-size:7px;color:#166534;}.k:hover,.w:hover{background:var(--border);}.bb:hover{background:#f8fafc;}@media(prefers-color-scheme:dark){.af{background:#1e293b;}.ah{background:#0f172a;}}}</style></head><body><div class="a"><div class="b"><span class="c">Level 1 - App Shell</span><div class="d"><div class="e"><span class="f">Level 2 - Sidebar</span><div class="g"><div class="h"><span class="i">Level 3 - Nav Group</span><div class="j"><div class="k"><span class="l">Level 4 - Nav Item</span><div class="m"><div class="n"></div><div class="o"><span class="p">Level 5 - Badge</span><div class="q"><span class="r">Level 6 - Badge Detail</span><div class="s"><span class="t">Level 7 - Sub Detail</span><div class="u"><span class="v">Level 8 - Deepest Badge</span></div></div></div></div></div></div><div class="w"><span class="l">Level 4 - Second Nav Item</span><div class="x"><span class="y">Level 5 - Status</span><div class="z"><div class="aa"><span class="ab">Level 6 - Online</span></div><div class="ac"><span class="ad">Level 6 - Away</span></div></div></div></div></div></div><div class="h"><span class="i">Level 3 - Second Group</span><div class="j"><div class="w"><span class="l">Settings</span></div><div class="w"><span class="l">Profile</span></div><div class="w"><span class="l">Security</span></div></div></div></div></div><div class="e"><span class="f">Level 2 - Main Content</span><div class="ae"><div class="af"><span class="ag">Level 3 - Dashboard Card</span><div class="ah"><span class="l">Level 4 - Chart Area</span><div class="ai"><div class="aj"><span class="ak">Level 5 - Metric A</span><div class="al"><span class="am">Level 6 - Value</span><div class="s"><span class="r">Level 7 - Trend</span><div class="an"><div class="ao"></div><div class="ap"></div><div class="aq"></div><div class="ar"><div class="as"><span class="at">Level 8 - Spark Dot</span></div></div></div></div></div></div><div class="au"><span class="av">Level 5 - Metric B</span><div class="aw"><span class="ax">Level 6 - Value</span><div class="s"><span class="ay">Level 7 - Change</span><div class="az"><span class="a0">Level 8 - Delta</span></div></div></div></div></div></div></div><div class="af"><span class="ag">Level 3 - Form Card</span><div class="ah"><span class="l">Level 4 - Form Section</span><div class="a1"><div class="a2"><span class="a3">Level 5 - Field Group</span><input class="a4" type="text" placeholder="Name"><div class="a5"><span class="a6">Level 6 - Validation Error</span><div class="s"><span class="a7">Level 7 - Error Detail</span><div class="a8"><span class="a9">Level 8 - Error Code</span></div></div></div></div><div class="a2"><span class="a3">Level 5 - Select Group</span><select class="a4"><option value="a">Option A</option><option value="b">Option B</option><option value="c">Option C</option></select></div></div></div></div><div class="af"><span class="ag">Level 3 - Nested Lists Card</span><div class="ah"><span class="l">Level 4 - Category Browser</span><div class="ba"><div class="bb"><span class="bc">Level 5 - Electronics</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="bb"><span class="bc">Level 5 - Clothing</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="bb"><span class="bc">Level 5 - Books</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div></div></div></div></div></div></div></div><div class="bl"><span class="bm">Level 1 - Settings Panel</span><div class="bn"><div class="bo"><span class="f">Level 2 - Account Settings</span><div class="g"><div class="bp"><span class="i">Level 3 - Profile Section</span><div class="bq"><span class="br">Level 4 - Avatar Upload</span><div class="bs"><span class="bt">Level 5 - Initials</span><div class="bu"><span class="bv">Level 6 - Edit Icon</span><div class="bw"><span class="v">Level 7 - Tooltip</span><div class="bx"><span class="by">Level 8 - Tooltip Arrow</span></div></div></div></div></div></div><div class="bp"><span class="i">Level 3 - Preferences</span><div class="ba"><div class="bz"><span class="b0">Level 4 - Language</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div><div class="bz"><span class="b0">Level 4 - Timezone</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div><div class="bz"><span class="b0">Level 4 - Currency</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div></div></div></div></div><div class="bo"><span class="f">Level 2 - Notification Preferences</span><div class="b3"><div class="b4"><span class="b5">Email Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">Push Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">SMS Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">Slack Notifications</span><div class="b6"><div class="b7"></div></div></div></div></div></div></div><div class="b8"><span class="b9">Level 1 - Monitoring</span><div class="d"><div class="ca"><span class="cb">Level 2 - API</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Database</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Cache</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Queue</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div></div></div></div></body></html>

1+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Deeply Nested Stress Test</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--border:#e2e8f0;--radius:8;}@layer htmlang{.a{display:flex;flex-direction:column;gap:20px;padding:24px;}.b{display:flex;flex-direction:column;background:#f0f9ff;border-radius:12px;padding:20px;border:1px solid #bae6fd;}.c{font-weight:bold;font-size:20px;color:#0369a1;}.d{display:flex;flex-direction:row;gap:16px;margin-top:16px;}.e{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid #e2e8f0;flex:1;min-width:0;}.f{font-weight:bold;font-size:16px;color:#1e293b;}.g{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.h{display:flex;flex-direction:column;background:#f1f5f9;border-radius:6px;padding:12px;}.i{font-size:14px;color:#475569;}.j{display:flex;flex-direction:column;gap:4px;margin-top:8px;}.k{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;transition:all 0.15s;}.l{font-size:13px;color:#64748b;}.m{display:flex;flex-direction:row;gap:6px;margin-top:4px;align-items:center;}.n{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#10b981;}.o{display:flex;flex-direction:column;padding:4px 8px;background:#dbeafe;border-radius:4px;}.p{font-size:11px;color:#1d4ed8;}.q{flex-direction:column;display:inline-block;margin-left:4px;}.r{font-size:10px;color:#3b82f6;}.s{display:flex;flex-direction:column;margin-top:2px;}.t{font-size:9px;color:#93c5fd;}.u{display:flex;flex-direction:column;padding:2px 4px;background:#eff6ff;border-radius:2px;margin-top:1px;}.v{font-size:8px;color:#bfdbfe;}.w{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;}.x{display:flex;flex-direction:column;margin-top:4px;padding:6px;background:#f0fdf4;border-radius:4px;}.y{font-size:12px;color:#166534;}.z{display:flex;flex-direction:row;gap:4px;margin-top:2px;}.aa{display:flex;flex-direction:column;padding:2px 6px;background:#bbf7d0;border-radius:2px;}.ab{font-size:10px;color:#15803d;}.ac{display:flex;flex-direction:column;padding:2px 6px;background:#fef3c7;border-radius:2px;}.ad{font-size:10px;color:#92400e;}.ae{display:flex;flex-direction:column;gap:12px;margin-top:12px;}.af,.bo{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid #e2e8f0;}.ag{font-weight:bold;font-size:16px;}.ah{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;margin-top:8px;}.ai{display:flex;flex-direction:row;gap:8px;margin-top:8px;}.aj{display:flex;flex-direction:column;flex:1;min-width:0;background:#eff6ff;border-radius:4px;padding:8px;}.ak{font-size:12px;color:#1d4ed8;font-weight:bold;}.al{display:flex;flex-direction:column;margin-top:4px;height:60px;background:#dbeafe;border-radius:4px;padding:8px;}.am{font-size:20px;font-weight:bold;color:#1e40af;}.an{display:flex;flex-direction:row;gap:2px;margin-top:2px;}.ao{display:flex;flex-direction:column;width:4px;height:12px;background:#93c5fd;border-radius:1px;}.ap{display:flex;flex-direction:column;width:4px;height:18px;background:#60a5fa;border-radius:1px;}.aq{display:flex;flex-direction:column;width:4px;height:8px;background:#93c5fd;border-radius:1px;}.ar{display:flex;flex-direction:column;width:4px;height:22px;background:#3b82f6;border-radius:1px;}.as{display:flex;flex-direction:column;width:2px;height:2px;border-radius:50%;background:white;margin-top:1px;}.at{font-size:6px;color:white;}.au{display:flex;flex-direction:column;flex:1;min-width:0;background:#f0fdf4;border-radius:4px;padding:8px;}.av{font-size:12px;color:#166534;font-weight:bold;}.aw{display:flex;flex-direction:column;margin-top:4px;height:60px;background:#dcfce7;border-radius:4px;padding:8px;}.ax{font-size:20px;font-weight:bold;color:#166534;}.ay{font-size:10px;color:#16a34a;}.az{flex-direction:column;padding:1px 4px;background:#bbf7d0;border-radius:2px;display:inline-block;}.a0{font-size:8px;color:#15803d;}.a1{display:flex;flex-direction:column;gap:8px;margin-top:8px;}.a2,.bb{display:flex;flex-direction:column;padding:8px;border:1px solid #e2e8f0;border-radius:4px;}.a3{font-size:12px;color:#64748b;margin-bottom:4px;}.a4{padding:6px 10px;border-radius:4px;border:1px solid #e2e8f0;width:100%;}.a5{display:flex;flex-direction:column;margin-top:4px;padding:4px 8px;background:#fef2f2;border-radius:4px;}.a6{font-size:11px;color:#991b1b;}.a7{font-size:10px;color:#dc2626;}.a8{display:flex;flex-direction:column;margin-top:1px;padding:2px 4px;background:#fee2e2;border-radius:2px;}.a9{font-size:9px;color:#b91c1c;}.ba{display:flex;flex-direction:column;gap:6px;margin-top:8px;}.bc{font-size:14px;font-weight:bold;color:#1e293b;}.bd{display:flex;flex-direction:column;gap:4px;margin-top:6px;margin-left:12px;}.be{display:flex;flex-direction:column;padding:6px;background:#f8fafc;border-radius:4px;}.bf{display:flex;flex-direction:row;gap:8px;align-items:center;}.bg{display:flex;flex-direction:column;width:8px;height:8px;border-radius:2px;background:#3b82f6;}.bh{font-size:12px;color:#475569;}.bi{display:flex;flex-direction:column;margin-top:4px;margin-left:16px;}.bj{font-size:11px;color:#94a3b8;}.bk{display:flex;flex-direction:column;margin-left:12px;margin-top:2px;padding:2px 6px;background:#eff6ff;border-radius:2px;}.bl{display:flex;flex-direction:column;background:#fefce8;border-radius:12px;padding:20px;border:1px solid #fde68a;margin-top:20px;}.bm{font-weight:bold;font-size:20px;color:#854d0e;}.bn{display:flex;flex-direction:column;gap:12px;margin-top:16px;}.bp{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;}.bq{display:flex;flex-direction:column;margin-top:8px;padding:10px;border:1px solid #e2e8f0;border-radius:6px;}.br{font-size:13px;color:#1e293b;}.bs{flex-direction:column;margin-top:6px;width:80px;height:80px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;}.bt{font-size:24px;color:#94a3b8;font-weight:bold;}.bu{flex-direction:column;position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center;}.bv{font-size:10px;color:white;}.bw{display:flex;flex-direction:column;margin-top:1px;}.bx{display:flex;flex-direction:column;padding:1px 3px;background:#1e3a5f;border-radius:2px;margin-top:1px;}.by{font-size:7px;color:white;}.bz{display:flex;flex-direction:row;gap:8px;align-items:center;padding:6px 8px;border:1px solid #e2e8f0;border-radius:4px;}.b0{font-size:13px;color:#1e293b;flex:1;min-width:0;}.b1{display:flex;flex-direction:column;padding:4px 12px;background:#f1f5f9;border-radius:4px;}.b2{font-size:12px;color:#64748b;}.b3{display:flex;flex-direction:column;gap:6px;margin-top:12px;}.b4{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #e2e8f0;}.b5{font-size:14px;color:#1e293b;flex:1;min-width:0;}.b6{display:flex;flex-direction:column;width:36px;height:20px;border-radius:10px;background:#3b82f6;padding:2px;}.b7{display:flex;flex-direction:column;width:16px;height:16px;border-radius:50%;background:white;margin-left:16px;}.b8{display:flex;flex-direction:column;background:#fdf2f8;border-radius:12px;padding:20px;border:1px solid #fbcfe8;margin-top:20px;}.b9{font-weight:bold;font-size:20px;color:#9d174d;}.ca{display:flex;flex-direction:column;background:white;border-radius:8px;padding:12px;border:1px solid #e2e8f0;flex:1;min-width:0;}.cb{font-weight:bold;font-size:14px;color:#1e293b;}.cc{display:flex;flex-direction:column;margin-top:8px;background:#f0fdf4;border-radius:6px;padding:8px;}.cd{display:flex;flex-direction:column;margin-top:4px;}.ce{display:flex;flex-direction:row;gap:4px;}.cf{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#86efac;border-radius:2px;}.cg{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#4ade80;border-radius:2px;}.ch{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#22c55e;border-radius:2px;}.ci{font-size:11px;color:#16a34a;}.cj{font-size:10px;color:#22c55e;}.ck{display:flex;flex-direction:column;margin-top:2px;padding:2px 6px;background:#dcfce7;border-radius:2px;}.cl{font-size:9px;color:#15803d;}.cm{font-size:8px;color:#4ade80;}.cn{display:flex;flex-direction:column;padding:1px 3px;background:#bbf7d0;border-radius:1px;margin-top:1px;}.co{font-size:7px;color:#166534;}.k:hover,.w:hover{background:#e2e8f0;}.bb:hover{background:#f8fafc;}@media(prefers-color-scheme:dark){.af{background:#1e293b;}.ah{background:#0f172a;}}}</style></head><body><div class="a"><div class="b"><span class="c">Level 1 - App Shell</span><div class="d"><div class="e"><span class="f">Level 2 - Sidebar</span><div class="g"><div class="h"><span class="i">Level 3 - Nav Group</span><div class="j"><div class="k"><span class="l">Level 4 - Nav Item</span><div class="m"><div class="n"></div><div class="o"><span class="p">Level 5 - Badge</span><div class="q"><span class="r">Level 6 - Badge Detail</span><div class="s"><span class="t">Level 7 - Sub Detail</span><div class="u"><span class="v">Level 8 - Deepest Badge</span></div></div></div></div></div></div><div class="w"><span class="l">Level 4 - Second Nav Item</span><div class="x"><span class="y">Level 5 - Status</span><div class="z"><div class="aa"><span class="ab">Level 6 - Online</span></div><div class="ac"><span class="ad">Level 6 - Away</span></div></div></div></div></div></div><div class="h"><span class="i">Level 3 - Second Group</span><div class="j"><div class="w"><span class="l">Settings</span></div><div class="w"><span class="l">Profile</span></div><div class="w"><span class="l">Security</span></div></div></div></div></div><div class="e"><span class="f">Level 2 - Main Content</span><div class="ae"><div class="af"><span class="ag">Level 3 - Dashboard Card</span><div class="ah"><span class="l">Level 4 - Chart Area</span><div class="ai"><div class="aj"><span class="ak">Level 5 - Metric A</span><div class="al"><span class="am">Level 6 - Value</span><div class="s"><span class="r">Level 7 - Trend</span><div class="an"><div class="ao"></div><div class="ap"></div><div class="aq"></div><div class="ar"><div class="as"><span class="at">Level 8 - Spark Dot</span></div></div></div></div></div></div><div class="au"><span class="av">Level 5 - Metric B</span><div class="aw"><span class="ax">Level 6 - Value</span><div class="s"><span class="ay">Level 7 - Change</span><div class="az"><span class="a0">Level 8 - Delta</span></div></div></div></div></div></div></div><div class="af"><span class="ag">Level 3 - Form Card</span><div class="ah"><span class="l">Level 4 - Form Section</span><div class="a1"><div class="a2"><span class="a3">Level 5 - Field Group</span><input class="a4" type="text" placeholder="Name"><div class="a5"><span class="a6">Level 6 - Validation Error</span><div class="s"><span class="a7">Level 7 - Error Detail</span><div class="a8"><span class="a9">Level 8 - Error Code</span></div></div></div></div><div class="a2"><span class="a3">Level 5 - Select Group</span><select class="a4"><option value="a">Option A</option><option value="b">Option B</option><option value="c">Option C</option></select></div></div></div></div><div class="af"><span class="ag">Level 3 - Nested Lists Card</span><div class="ah"><span class="l">Level 4 - Category Browser</span><div class="ba"><div class="bb"><span class="bc">Level 5 - Electronics</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="bb"><span class="bc">Level 5 - Clothing</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="bb"><span class="bc">Level 5 - Books</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div></div></div></div></div></div></div></div><div class="bl"><span class="bm">Level 1 - Settings Panel</span><div class="bn"><div class="bo"><span class="f">Level 2 - Account Settings</span><div class="g"><div class="bp"><span class="i">Level 3 - Profile Section</span><div class="bq"><span class="br">Level 4 - Avatar Upload</span><div class="bs"><span class="bt">Level 5 - Initials</span><div class="bu"><span class="bv">Level 6 - Edit Icon</span><div class="bw"><span class="v">Level 7 - Tooltip</span><div class="bx"><span class="by">Level 8 - Tooltip Arrow</span></div></div></div></div></div></div><div class="bp"><span class="i">Level 3 - Preferences</span><div class="ba"><div class="bz"><span class="b0">Level 4 - Language</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div><div class="bz"><span class="b0">Level 4 - Timezone</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div><div class="bz"><span class="b0">Level 4 - Currency</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div></div></div></div></div><div class="bo"><span class="f">Level 2 - Notification Preferences</span><div class="b3"><div class="b4"><span class="b5">Email Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">Push Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">SMS Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">Slack Notifications</span><div class="b6"><div class="b7"></div></div></div></div></div></div></div><div class="b8"><span class="b9">Level 1 - Monitoring</span><div class="d"><div class="ca"><span class="cb">Level 2 - API</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Database</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Cache</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Queue</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div></div></div></div></body></html>

tests/snapshots/stress_large.html+1−1

@@ -1 +1 @@

1−<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Stress Test Large Document</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--secondary:#10b981;--accent:#f59e0b;--danger:#ef4444;--dark:#1e293b;--light:#f8fafc;--gray:#64748b;--border:#e2e8f0;--radius:8;--gap:16;--gap-sm:8;--gap-lg:24;}@layer htmlang{.a{display:flex;flex-direction:row;gap:0;min-height:100vh;}.b{display:flex;flex-direction:column;width:260px;background:white;border-right:1px solid var(--border);padding:16px;gap:8px;}.c{display:flex;flex-direction:row;gap:12px;padding:8px;align-items:center;}.d{flex-direction:column;width:36px;height:36px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.e{display:flex;flex-direction:column;gap:2px;}.f{font-weight:bold;font-size:16px;color:var(--dark);}.g{font-size:12px;color:var(--gray);}.h{display:flex;flex-direction:column;width:100%;height:1px;background:var(--border);margin:8px 0;}.i{display:flex;flex-direction:column;margin-bottom:24px;}.j{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}.k{color:var(--primary);font-weight:bold;padding:8px 12px;background:#eff6ff;border-radius:6px;}.l{color:var(--gray);padding:8px 12px;border-radius:6px;transition:all 0.15s;}.m{display:flex;flex-direction:column;gap:4px;}.n{display:flex;flex-direction:row;gap:8px;align-items:center;}.o{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:var(--secondary);}.p{font-size:13px;color:var(--gray);}.q{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:var(--accent);}.r{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#cbd5e1;}.s{display:flex;flex-direction:column;margin-top:auto;padding:12px;background:#f1f5f9;border-radius:8px;}.t{flex-direction:column;width:28px;height:28px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.u{display:flex;flex-direction:column;gap:0;}.v{font-size:13px;font-weight:bold;color:var(--dark);}.w{font-size:11px;color:var(--gray);}.x{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--light);}.y{display:flex;flex-direction:column;padding:12px 24px;background:white;border-bottom:1px solid var(--border);}.z{display:flex;flex-direction:row;gap:16px;align-items:center;}.aa{display:flex;flex-direction:row;gap:8px;}.ab{color:var(--gray);font-size:14px;}.ac{color:var(--border);font-size:14px;}.ad{color:var(--dark);font-size:14px;}.ae{font-weight:bold;font-size:22px;color:var(--dark);}.af{display:flex;flex-direction:column;flex:1;min-width:0;}.ag{display:flex;flex-direction:row;gap:12px;align-items:center;}.ah{padding:8px 12px;border-radius:6px;border:1px solid var(--border);width:240px;transition:all 0.2s;}.ai{display:flex;flex-direction:column;position:relative;}.aj{padding:8px 16px;background:var(--primary);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.ak{display:flex;flex-direction:column;position:absolute;top:-2px;right:-2px;}.al{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:var(--danger);}.am{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.an{display:flex;flex-direction:column;padding:24px;overflow-y:auto;}.ao{display:flex;flex-direction:column;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;}.ap{color:#1e40af;font-size:14px;}.aq,.av{display:flex;flex-direction:row;gap:16px;margin-top:24px;}.ar{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);}.as{font-size:14px;color:var(--gray);}.at{font-weight:bold;font-size:28px;color:var(--dark);margin-top:4px;}.au{font-size:12px;color:var(--secondary);margin-top:2px;}.aw{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);transition:all 0.2s;animation:fade-in 0.3s ease;}.ax{font-weight:bold;font-size:18px;color:var(--dark);}.ay{display:flex;flex-direction:column;margin-top:8px;}.az{flex-direction:column;height:200px;background:var(--light);border-radius:6px;margin-top:12px;display:flex;align-items:flex-end;padding:16px;gap:8px;}.a0{display:flex;flex-direction:column;width:100%;height:40%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a1{display:flex;flex-direction:column;width:100%;height:65%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a2{display:flex;flex-direction:column;width:100%;height:45%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a3{display:flex;flex-direction:column;width:100%;height:80%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a4{display:flex;flex-direction:column;width:100%;height:55%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a5{display:flex;flex-direction:column;width:100%;height:70%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a6{display:flex;flex-direction:column;width:100%;height:90%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a7{display:flex;flex-direction:column;width:100%;height:60%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a8{display:flex;flex-direction:column;width:100%;height:75%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a9{display:flex;flex-direction:column;width:100%;height:85%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.ba{display:flex;flex-direction:column;width:100%;height:50%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.bb{display:flex;flex-direction:column;width:100%;height:95%;background:var(--primary);border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.bc{display:flex;flex-direction:column;gap:12px;margin-top:12px;}.bd{display:flex;flex-direction:row;gap:12px;align-items:center;padding:8px;border-radius:6px;}.be{flex-direction:column;width:32px;height:32px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.bf{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}.bg{font-size:14px;font-weight:bold;color:var(--dark);}.bh{display:flex;flex-direction:column;flex:1;min-width:0;gap:16px;}.bi{display:flex;flex-direction:column;gap:0;margin-top:12px;}.bj{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:var(--light);border-bottom:1px solid var(--border);}.bk{display:flex;flex-direction:column;width:200px;}.bl{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;}.bm{display:flex;flex-direction:column;width:150px;}.bn{display:flex;flex-direction:column;width:120px;}.bo{display:flex;flex-direction:row;gap:0;padding:12px 16px;border-bottom:1px solid var(--border);}.bp{font-size:14px;}.bq{display:flex;flex-direction:row;gap:0;}.br{font-size:13px;color:var(--dark);flex:1;min-width:0;}.bs{display:flex;flex-direction:column;width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden;}.bt{display:flex;flex-direction:column;width:67%;flex:1;min-height:0;background:var(--primary);border-radius:4px;}.bu{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.bv{display:flex;flex-direction:row;gap:12px;padding:8px 12px;align-items:center;}.bw{flex-direction:column;width:24px;height:24px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;}.bx{font-size:10px;color:var(--primary);font-weight:bold;}.by{font-size:14px;color:var(--dark);flex:1;min-width:0;}.bz{display:flex;flex-direction:column;width:340px;gap:16px;}.b0{padding:8px 16px;background:var(--secondary);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.b1{padding:8px 16px;background:var(--accent);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.b2{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.b3{display:flex;flex-direction:row;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;transition:all 0.15s;}.b4{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;}.b5{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:var(--secondary);}.b6{display:flex;flex-direction:row;gap:0;flex-wrap:wrap;margin-top:8px;}.b7{flex-direction:column;display:inline-block;padding:4px 10px;background:#f1f5f9;color:var(--gray);border-radius:4px;font-size:12px;margin:2px;}.b8{display:flex;flex-direction:row;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center;}.b9{display:flex;flex-direction:row;gap:0;align-items:center;}.ca{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:var(--primary);padding:2px;cursor:pointer;transition:all 0.2s;}.cb{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;margin-left:18px;transition:all 0.2s;}.cc{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:#cbd5e1;padding:2px;cursor:pointer;transition:all 0.2s;}.cd{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;transition:all 0.2s;}.ce{display:flex;flex-direction:column;margin-top:24px;}.cf{display:flex;flex-direction:row;gap:16px;margin-bottom:12px;align-items:center;}.cg{padding:8px 12px;border-radius:6px;border:1px solid var(--border);width:240px;}.ch{padding:6px 12px;border-radius:4px;border:1px solid var(--border);background:white;color:var(--gray);font-size:13px;cursor:pointer;transition:all 0.15s;}.ci{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:var(--light);border-bottom:2px solid var(--border);border-radius:6px 6px 0 0;}.cj{display:flex;flex-direction:column;width:60px;}.ck{display:flex;flex-direction:row;gap:0;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.1s;}.cl{flex-direction:column;width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.cm{font-size:14px;color:var(--dark);}.cn{flex-direction:column;display:inline-block;padding:2px 8px;background:var(--secondary);color:white;border-radius:12px;font-size:12px;}.co{display:flex;flex-direction:row;gap:16px;padding:12px 16px;align-items:center;border-top:1px solid var(--border);}.cp{display:flex;flex-direction:row;gap:4px;}.cq{padding:6px 10px;border-radius:4px;border:1px solid var(--border);background:white;color:var(--gray);font-size:13px;cursor:pointer;}.cr{padding:6px 10px;border-radius:4px;border:1px solid var(--primary);background:var(--primary);color:white;font-size:13px;cursor:pointer;}.cs{display:flex;flex-direction:column;padding:24px 24px;background:white;border-top:1px solid var(--border);}.ct{display:flex;flex-direction:row;gap:24px;}.cu{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}.cv{font-weight:bold;font-size:14px;color:var(--dark);}.cw{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;margin-bottom:4px;}.cx{color:var(--gray);font-size:13px;}.l:hover{color:var(--primary);background:#f1f5f9;}.ab:hover,.cx:hover{color:var(--primary);}.aj:hover,.am:hover,.b0:hover,.b1:hover,.b2:hover{background:var(--dark);}.aw:hover{box-shadow:0 4 12 rgba(0,0,0,0.1);}.a0:hover,.a1:hover,.a2:hover,.a3:hover,.a4:hover,.a5:hover,.a6:hover,.a7:hover,.a8:hover,.a9:hover,.ba:hover,.bb:hover{background:#2563eb;}.bd:hover,.bo:hover,.ck:hover{background:var(--light);}.b3:hover{background:#f1f5f9;}.ch:hover{background:#f1f5f9;color:var(--dark);}.ah:focus{border:1px solid var(--primary);}@media(min-width:640px){.aq,.ct{flex-direction:column;}.bz{flex:1;min-width:0;}}@media(min-width:1024px){.aq,.ct{flex-direction:row;}}@media(prefers-color-scheme:dark){.b{background:#0f172a;border-right:1px solid var(--dark);}.f,.v,.ad,.ae,.at,.ax,.bg,.br,.by,.cm,.cv{color:white;}.h,.bs{background:#334155;}.k,.bw{background:#1e3a5f;}.s,.ch,.cq{background:var(--dark);}.x,.az,.bj,.ci{background:#0f172a;}.y{background:#0f172a;border-bottom:1px solid var(--dark);}.ah{border:1px solid #334155;background:var(--dark);color:white;}.ar,.aw{background:var(--dark);border:1px solid #334155;}.bo,.b8,.ck{border-bottom:1px solid #334155;}.b7{background:#334155;color:#94a3b8;}.cc{background:#475569;}.cs{background:#0f172a;border-top:1px solid var(--dark);}}}@keyframes fade-in {from{opacity:0}to{opacity:1}}@keyframes slide-down {0%{transform:translateY(-10px);opacity:0}100%{transform:translateY(0);opacity:1}}</style></head><body><div class="a"><div class="b"><div class="c"><div class="d"><span>HL</span></div><div class="e"><span class="f">htmlang</span><span class="g">Dashboard v2.0</span></div></div><div class="h"></div><div class="i"><span class="j">Navigation</span><div class="e"><a href="/dashboard" class="k">Dashboard</a><a href="/analytics" class="l">Analytics</a><a href="/projects" class="l">Projects</a><a href="/team" class="l">Team</a><a href="/messages" class="l">Messages</a><a href="/calendar" class="l">Calendar</a><a href="/documents" class="l">Documents</a><a href="/settings" class="l">Settings</a></div></div><div class="i"><span class="j">Favorites</span><div class="e"><a href="/project/alpha" class="l">Project Alpha</a><a href="/project/beta" class="l">Project Beta</a><a href="/reports/q4" class="l">Q4 Reports</a></div></div><div class="i"><span class="j">Shortcuts</span><div class="m"><div class="n"><div class="o"></div><span class="p">Online (12)</span></div><div class="n"><div class="q"></div><span class="p">Away (3)</span></div><div class="n"><div class="r"></div><span class="p">Offline (5)</span></div></div></div><div class="s"><div class="n"><div class="t"><span>JD</span></div><div class="u"><span class="v">Jane Doe</span><span class="w">jane@example.com</span></div></div></div></div><div class="x"><header class="y"><div class="z"><div class="e"><div class="aa"><div class="aa"><a href="/" class="ab">Home</a><span class="ac">/</span></div><span class="ad">Dashboard</span></div><span class="ae">Dashboard Overview</span></div><div class="af"></div><div class="ag"><input class="ah" type="search" placeholder="Search..."><div class="ai"><button class="aj">Alerts</button><div class="ak"><div class="al"></div></div></div><button class="am">Settings</button></div></div></header><div class="an"><div class="ao"><span class="ap">Welcome back! You have 3 new notifications and 2 pending tasks.</span></div><div class="aq"><div class="ar"><span class="as">Total Revenue</span><span class="at">$48</span><span class="au">+12.5% from last month</span></div><div class="ar"><span class="as">Active Users</span><span class="at">2</span><span class="au">+8.2% from last week</span></div><div class="ar"><span class="as">Conversion Rate</span><span class="at">3.24%</span><span class="au">+0.4% from yesterday</span></div><div class="ar"><span class="as">Open Tickets</span><span class="at">142</span><span class="au">-5.1% from last month</span></div></div><div class="av"><div class="aw"><span class="ax">Revenue Overview</span><div class="ay"><div class="az"><div class="a0"></div><div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div><div class="a5"></div><div class="a6"></div><div class="a7"></div><div class="a8"></div><div class="a9"></div><div class="ba"></div><div class="bb"></div></div></div></div><div class="aw"><span class="ax">Activity Feed</span><div class="ay"><div class="bc"><div class="bd"><div class="be"><span>Alice</span></div><div class="bf"><span class="bg">Alice</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Bob</span></div><div class="bf"><span class="bg">Bob</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Carol</span></div><div class="bf"><span class="bg">Carol</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Dave</span></div><div class="bf"><span class="bg">Dave</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Eve</span></div><div class="bf"><span class="bg">Eve</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Frank</span></div><div class="bf"><span class="bg">Frank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Grace</span></div><div class="bf"><span class="bg">Grace</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Hank</span></div><div class="bf"><span class="bg">Hank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div></div></div></div></div><div class="aq"><div class="bh"><div class="aw"><span class="ax">Project Status</span><div class="ay"><div class="bi"><div class="bj"><div class="bk"><span class="bl">Project</span></div><div class="bm"><span class="bl">Status</span></div><div class="bn"><span class="bl">Progress</span></div><div class="af"><span class="bl">Due Date</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Alpha</span></div><div class="bm"><span class="as">In Progress</span></div><div class="bn"><span class="bp">75%</span></div><div class="af"><span class="as">Dec 15 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Beta</span></div><div class="bm"><span class="as">Review</span></div><div class="bn"><span class="bp">90%</span></div><div class="af"><span class="as">Nov 30 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Gamma</span></div><div class="bm"><span class="as">Planning</span></div><div class="bn"><span class="bp">20%</span></div><div class="af"><span class="as">Jan 20 2026</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Delta</span></div><div class="bm"><span class="as">Completed</span></div><div class="bn"><span class="bp">100%</span></div><div class="af"><span class="as">Oct 10 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Epsilon</span></div><div class="bm"><span class="as">On Hold</span></div><div class="bn"><span class="bp">45%</span></div><div class="af"><span class="as">Feb 28 2026</span></div></div></div></div></div><div class="aw"><span class="ax">Progress Breakdown</span><div class="ay"><div class="bc"><div class="m"><div class="bq"><span class="br">Alpha</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Beta</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Gamma</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Delta</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Epsilon</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div></div></div></div><div class="aw"><span class="ax">Recent Activity Log</span><div class="ay"><div class="bu"><div class="bv"><div class="bw"><span class="bx">0</span></div><span class="by">Deployed v2.3.1 to production</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">1</span></div><span class="by">Merged feature/auth-redesign</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">2</span></div><span class="by">Closed issue #482: Login timeout</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">3</span></div><span class="by">Updated CI/CD pipeline config</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">4</span></div><span class="by">Added unit tests for payment module</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">5</span></div><span class="by">Reviewed PR #156: API refactor</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">6</span></div><span class="by">Fixed memory leak in worker pool</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">7</span></div><span class="by">Released hotfix 2.3.2</span><span class="w">just now</span></div></div></div></div></div><div class="bz"><div class="aw"><span class="ax">Quick Actions</span><div class="ay"><div class="bu"><button class="aj">New Project</button><button class="b0">Create Report</button><button class="b1">Invite Member</button><button class="b2">View Backlog</button></div></div></div><div class="aw"><span class="ax">Team Members</span><div class="ay"><div class="bu"><div class="b3"><div class="t"><span>Alice</span></div><div class="b4"><span class="v">Alice</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Bob</span></div><div class="b4"><span class="v">Bob</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Carol</span></div><div class="b4"><span class="v">Carol</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Dave</span></div><div class="b4"><span class="v">Dave</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Eve</span></div><div class="b4"><span class="v">Eve</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Frank</span></div><div class="b4"><span class="v">Frank</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Grace</span></div><div class="b4"><span class="v">Grace</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Hank</span></div><div class="b4"><span class="v">Hank</span><span class="w">Developer</span></div><div class="b5"></div></div></div></div></div><div class="aw"><span class="ax">Tags</span><div class="ay"><div class="b6"><div class="b7"><span>frontend</span></div><div class="b7"><span>backend</span></div><div class="b7"><span>devops</span></div><div class="b7"><span>design</span></div><div class="b7"><span>mobile</span></div><div class="b7"><span>security</span></div><div class="b7"><span>performance</span></div><div class="b7"><span>testing</span></div><div class="b7"><span>docs</span></div><div class="b7"><span>infra</span></div><div class="b7"><span>ux</span></div><div class="b7"><span>api</span></div></div></div></div><div class="aw"><span class="ax">Notifications</span><div class="ay"><div class="bi"><div class="b8"><div class="al"></div><span class="br">New deployment completed</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">PR review requested</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Build failed on staging</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Meeting in 30 minutes</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Subscription renewal due</span><span class="w">now</span></div></div></div></div><div class="aw"><span class="ax">Settings</span><div class="ay"><div class="bc"><div class="b9"><span class="by">Dark Mode</span><div class="ca"><div class="cb"></div></div></div><div class="b9"><span class="by">Notifications</span><div class="ca"><div class="cb"></div></div></div><div class="b9"><span class="by">Auto-save</span><div class="cc"><div class="cd"></div></div></div><div class="b9"><span class="by">Compact View</span><div class="cc"><div class="cd"></div></div></div></div></div></div></div></div><div class="ce"><div class="aw"><span class="ax">Data Table</span><div class="ay"><div class="bi"><div class="cf"><input class="cg" type="search" placeholder="Filter results..."><div class="af"></div><div class="aa"><button class="ch">all</button><button class="ch">design</button><button class="ch">development</button><button class="ch">marketing</button><button class="ch">analytics</button></div></div><div class="ci"><div class="cj"><span class="bl">ID</span></div><div class="bk"><span class="bl">Name</span></div><div class="bm"><span class="bl">Category</span></div><div class="bn"><span class="bl">Status</span></div><div class="af"><span class="bl">Updated</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="co"><span class="p">Showing 1-20 of 142 results</span><div class="af"></div><div class="cp"><button class="cq">Prev</button><button class="cr">1</button><button class="cq">2</button><button class="cq">3</button><button class="cq">Next</button></div></div></div></div></div></div></div><footer class="cs"><div class="ct"><div class="cu"><span class="cv">htmlang Dashboard</span><span class="g">Built with htmlang - a declarative HTML language</span><span class="w">Copyright 2025 htmlang contributors</span></div><div class="m"><span class="cw">Product</span><a href="/features" class="cx">Features</a><a href="/pricing" class="cx">Pricing</a><a href="/changelog" class="cx">Changelog</a><a href="/roadmap" class="cx">Roadmap</a></div><div class="m"><span class="cw">Resources</span><a href="/docs" class="cx">Documentation</a><a href="/api" class="cx">API Reference</a><a href="/guides" class="cx">Guides</a><a href="/examples" class="cx">Examples</a></div><div class="m"><span class="cw">Company</span><a href="/about" class="cx">About</a><a href="/blog" class="cx">Blog</a><a href="/careers" class="cx">Careers</a><a href="/contact" class="cx">Contact</a></div><div class="m"><span class="cw">Legal</span><a href="/privacy" class="cx">Privacy Policy</a><a href="/terms" class="cx">Terms of Service</a><a href="/cookies" class="cx">Cookie Policy</a></div></div></footer></div></div></body></html>

1+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Stress Test Large Document</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--secondary:#10b981;--accent:#f59e0b;--danger:#ef4444;--dark:#1e293b;--light:#f8fafc;--gray:#64748b;--border:#e2e8f0;--radius:8;--gap:16;--gap-sm:8;--gap-lg:24;}@layer htmlang{.a{display:flex;flex-direction:row;gap:0;min-height:100vh;}.b{display:flex;flex-direction:column;width:260px;background:white;border-right:1px solid #e2e8f0;padding:16px;gap:8px;}.c{display:flex;flex-direction:row;gap:12px;padding:8px;align-items:center;}.d{flex-direction:column;width:36px;height:36px;border-radius:50%;background:#3b82f6;color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.e{display:flex;flex-direction:column;gap:2px;}.f{font-weight:bold;font-size:16px;color:#1e293b;}.g{font-size:12px;color:#64748b;}.h{display:flex;flex-direction:column;width:100%;height:1px;background:#e2e8f0;margin:8px 0;}.i{display:flex;flex-direction:column;margin-bottom:24px;}.j{font-weight:bold;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}.k{color:#3b82f6;font-weight:bold;padding:8px 12px;background:#eff6ff;border-radius:6px;}.l{color:#64748b;padding:8px 12px;border-radius:6px;transition:all 0.15s;}.m{display:flex;flex-direction:column;gap:4px;}.n{display:flex;flex-direction:row;gap:8px;align-items:center;}.o{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#10b981;}.p{font-size:13px;color:#64748b;}.q{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#f59e0b;}.r{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#cbd5e1;}.s{display:flex;flex-direction:column;margin-top:auto;padding:12px;background:#f1f5f9;border-radius:8px;}.t{flex-direction:column;width:28px;height:28px;border-radius:50%;background:#3b82f6;color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.u{display:flex;flex-direction:column;gap:0;}.v{font-size:13px;font-weight:bold;color:#1e293b;}.w{font-size:11px;color:#64748b;}.x{display:flex;flex-direction:column;flex:1;min-width:0;background:#f8fafc;}.y{display:flex;flex-direction:column;padding:12px 24px;background:white;border-bottom:1px solid #e2e8f0;}.z{display:flex;flex-direction:row;gap:16px;align-items:center;}.aa{display:flex;flex-direction:row;gap:8px;}.ab{color:#64748b;font-size:14px;}.ac{color:#e2e8f0;font-size:14px;}.ad{color:#1e293b;font-size:14px;}.ae{font-weight:bold;font-size:22px;color:#1e293b;}.af{display:flex;flex-direction:column;flex:1;min-width:0;}.ag{display:flex;flex-direction:row;gap:12px;align-items:center;}.ah{padding:8px 12px;border-radius:6px;border:1px solid #e2e8f0;width:240px;transition:all 0.2s;}.ai{display:flex;flex-direction:column;position:relative;}.aj{padding:8px 16px;background:var(--primary);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.ak{display:flex;flex-direction:column;position:absolute;top:-2px;right:-2px;}.al{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:#ef4444;}.am{padding:8px 16px;background:#64748b;color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.an{display:flex;flex-direction:column;padding:24px;overflow-y:auto;}.ao{display:flex;flex-direction:column;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;}.ap{color:#1e40af;font-size:14px;}.aq,.av{display:flex;flex-direction:row;gap:16px;margin-top:24px;}.ar{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid #e2e8f0;}.as{font-size:14px;color:#64748b;}.at{font-weight:bold;font-size:28px;color:#1e293b;margin-top:4px;}.au{font-size:12px;color:#10b981;margin-top:2px;}.aw{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid #e2e8f0;transition:all 0.2s;animation:fade-in 0.3s ease;}.ax{font-weight:bold;font-size:18px;color:#1e293b;}.ay{display:flex;flex-direction:column;margin-top:8px;}.az{flex-direction:column;height:200px;background:#f8fafc;border-radius:6px;margin-top:12px;display:flex;align-items:flex-end;padding:16px;gap:8px;}.a0{display:flex;flex-direction:column;width:100%;height:40%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a1{display:flex;flex-direction:column;width:100%;height:65%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a2{display:flex;flex-direction:column;width:100%;height:45%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a3{display:flex;flex-direction:column;width:100%;height:80%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a4{display:flex;flex-direction:column;width:100%;height:55%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a5{display:flex;flex-direction:column;width:100%;height:70%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a6{display:flex;flex-direction:column;width:100%;height:90%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a7{display:flex;flex-direction:column;width:100%;height:60%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a8{display:flex;flex-direction:column;width:100%;height:75%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.a9{display:flex;flex-direction:column;width:100%;height:85%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.ba{display:flex;flex-direction:column;width:100%;height:50%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.bb{display:flex;flex-direction:column;width:100%;height:95%;background:#3b82f6;border-radius:4px 4px 0 0;transition:all 0.2s;min-width:20px;}.bc{display:flex;flex-direction:column;gap:12px;margin-top:12px;}.bd{display:flex;flex-direction:row;gap:12px;align-items:center;padding:8px;border-radius:6px;}.be{flex-direction:column;width:32px;height:32px;border-radius:50%;background:#3b82f6;color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.bf{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}.bg{font-size:14px;font-weight:bold;color:#1e293b;}.bh{display:flex;flex-direction:column;flex:1;min-width:0;gap:16px;}.bi{display:flex;flex-direction:column;gap:0;margin-top:12px;}.bj{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;}.bk{display:flex;flex-direction:column;width:200px;}.bl{font-weight:bold;font-size:12px;color:#64748b;text-transform:uppercase;}.bm{display:flex;flex-direction:column;width:150px;}.bn{display:flex;flex-direction:column;width:120px;}.bo{display:flex;flex-direction:row;gap:0;padding:12px 16px;border-bottom:1px solid #e2e8f0;}.bp{font-size:14px;}.bq{display:flex;flex-direction:row;gap:0;}.br{font-size:13px;color:#1e293b;flex:1;min-width:0;}.bs{display:flex;flex-direction:column;width:100%;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;}.bt{display:flex;flex-direction:column;width:67%;flex:1;min-height:0;background:var(--primary);border-radius:4px;}.bu{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.bv{display:flex;flex-direction:row;gap:12px;padding:8px 12px;align-items:center;}.bw{flex-direction:column;width:24px;height:24px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;}.bx{font-size:10px;color:#3b82f6;font-weight:bold;}.by{font-size:14px;color:#1e293b;flex:1;min-width:0;}.bz{display:flex;flex-direction:column;width:340px;gap:16px;}.b0{padding:8px 16px;background:var(--secondary);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.b1{padding:8px 16px;background:var(--accent);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.b2{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:none;cursor:pointer;transition:all 0.2s;font-size:14px;}.b3{display:flex;flex-direction:row;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;transition:all 0.15s;}.b4{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;}.b5{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:#10b981;}.b6{display:flex;flex-direction:row;gap:0;flex-wrap:wrap;margin-top:8px;}.b7{flex-direction:column;display:inline-block;padding:4px 10px;background:#f1f5f9;color:#64748b;border-radius:4px;font-size:12px;margin:2px;}.b8{display:flex;flex-direction:row;gap:10px;padding:10px 12px;border-bottom:1px solid #e2e8f0;align-items:center;}.b9{display:flex;flex-direction:row;gap:0;align-items:center;}.ca{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:#3b82f6;padding:2px;cursor:pointer;transition:all 0.2s;}.cb{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;margin-left:18px;transition:all 0.2s;}.cc{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:#cbd5e1;padding:2px;cursor:pointer;transition:all 0.2s;}.cd{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;transition:all 0.2s;}.ce{display:flex;flex-direction:column;margin-top:24px;}.cf{display:flex;flex-direction:row;gap:16px;margin-bottom:12px;align-items:center;}.cg{padding:8px 12px;border-radius:6px;border:1px solid #e2e8f0;width:240px;}.ch{padding:6px 12px;border-radius:4px;border:1px solid #e2e8f0;background:white;color:#64748b;font-size:13px;cursor:pointer;transition:all 0.15s;}.ci{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:#f8fafc;border-bottom:2px solid #e2e8f0;border-radius:6px 6px 0 0;}.cj{display:flex;flex-direction:column;width:60px;}.ck{display:flex;flex-direction:row;gap:0;padding:10px 16px;border-bottom:1px solid #e2e8f0;cursor:pointer;transition:all 0.1s;}.cl{flex-direction:column;width:24px;height:24px;border-radius:50%;background:#3b82f6;color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.cm{font-size:14px;color:#1e293b;}.cn{flex-direction:column;display:inline-block;padding:2px 8px;background:var(--secondary);color:white;border-radius:12px;font-size:12px;}.co{display:flex;flex-direction:row;gap:16px;padding:12px 16px;align-items:center;border-top:1px solid #e2e8f0;}.cp{display:flex;flex-direction:row;gap:4px;}.cq{padding:6px 10px;border-radius:4px;border:1px solid #e2e8f0;background:white;color:#64748b;font-size:13px;cursor:pointer;}.cr{padding:6px 10px;border-radius:4px;border:1px solid #3b82f6;background:#3b82f6;color:white;font-size:13px;cursor:pointer;}.cs{display:flex;flex-direction:column;padding:24px 24px;background:white;border-top:1px solid #e2e8f0;}.ct{display:flex;flex-direction:row;gap:24px;}.cu{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}.cv{font-weight:bold;font-size:14px;color:#1e293b;}.cw{font-weight:bold;font-size:12px;color:#64748b;text-transform:uppercase;margin-bottom:4px;}.cx{color:#64748b;font-size:13px;}.l:hover{color:#3b82f6;background:#f1f5f9;}.ab:hover,.cx:hover{color:#3b82f6;}.aj:hover,.am:hover,.b0:hover,.b1:hover,.b2:hover{background:#1e293b;}.aw:hover{box-shadow:0 4 12 rgba(0,0,0,0.1);}.a0:hover,.a1:hover,.a2:hover,.a3:hover,.a4:hover,.a5:hover,.a6:hover,.a7:hover,.a8:hover,.a9:hover,.ba:hover,.bb:hover{background:#2563eb;}.bd:hover,.bo:hover,.ck:hover{background:#f8fafc;}.b3:hover{background:#f1f5f9;}.ch:hover{background:#f1f5f9;color:#1e293b;}.ah:focus{border:1px solid #3b82f6;}@media(min-width:640px){.aq,.ct{flex-direction:column;}.bz{flex:1;min-width:0;}}@media(min-width:1024px){.aq,.ct{flex-direction:row;}}@media(prefers-color-scheme:dark){.b{background:#0f172a;border-right:1px solid #1e293b;}.f,.v,.ad,.ae,.at,.ax,.bg,.br,.by,.cm,.cv{color:white;}.h,.bs{background:#334155;}.k,.bw{background:#1e3a5f;}.s,.ch,.cq{background:#1e293b;}.x,.az,.bj,.ci{background:#0f172a;}.y{background:#0f172a;border-bottom:1px solid #1e293b;}.ah{border:1px solid #334155;background:#1e293b;color:white;}.ar,.aw{background:#1e293b;border:1px solid #334155;}.bo,.b8,.ck{border-bottom:1px solid #334155;}.b7{background:#334155;color:#94a3b8;}.cc{background:#475569;}.cs{background:#0f172a;border-top:1px solid #1e293b;}}}@keyframes fade-in {from{opacity:0}to{opacity:1}}@keyframes slide-down {0%{transform:translateY(-10px);opacity:0}100%{transform:translateY(0);opacity:1}}</style></head><body><div class="a"><div class="b"><div class="c"><div class="d"><span>HL</span></div><div class="e"><span class="f">htmlang</span><span class="g">Dashboard v2.0</span></div></div><div class="h"></div><div class="i"><span class="j">Navigation</span><div class="e"><a href="/dashboard" class="k">Dashboard</a><a href="/analytics" class="l">Analytics</a><a href="/projects" class="l">Projects</a><a href="/team" class="l">Team</a><a href="/messages" class="l">Messages</a><a href="/calendar" class="l">Calendar</a><a href="/documents" class="l">Documents</a><a href="/settings" class="l">Settings</a></div></div><div class="i"><span class="j">Favorites</span><div class="e"><a href="/project/alpha" class="l">Project Alpha</a><a href="/project/beta" class="l">Project Beta</a><a href="/reports/q4" class="l">Q4 Reports</a></div></div><div class="i"><span class="j">Shortcuts</span><div class="m"><div class="n"><div class="o"></div><span class="p">Online (12)</span></div><div class="n"><div class="q"></div><span class="p">Away (3)</span></div><div class="n"><div class="r"></div><span class="p">Offline (5)</span></div></div></div><div class="s"><div class="n"><div class="t"><span>JD</span></div><div class="u"><span class="v">Jane Doe</span><span class="w">jane@example.com</span></div></div></div></div><div class="x"><header class="y"><div class="z"><div class="e"><div class="aa"><div class="aa"><a href="/" class="ab">Home</a><span class="ac">/</span></div><span class="ad">Dashboard</span></div><span class="ae">Dashboard Overview</span></div><div class="af"></div><div class="ag"><input class="ah" type="search" placeholder="Search..."><div class="ai"><button class="aj">Alerts</button><div class="ak"><div class="al"></div></div></div><button class="am">Settings</button></div></div></header><div class="an"><div class="ao"><span class="ap">Welcome back! You have 3 new notifications and 2 pending tasks.</span></div><div class="aq"><div class="ar"><span class="as">Total Revenue</span><span class="at">$48</span><span class="au">+12.5% from last month</span></div><div class="ar"><span class="as">Active Users</span><span class="at">2</span><span class="au">+8.2% from last week</span></div><div class="ar"><span class="as">Conversion Rate</span><span class="at">3.24%</span><span class="au">+0.4% from yesterday</span></div><div class="ar"><span class="as">Open Tickets</span><span class="at">142</span><span class="au">-5.1% from last month</span></div></div><div class="av"><div class="aw"><span class="ax">Revenue Overview</span><div class="ay"><div class="az"><div class="a0"></div><div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div><div class="a5"></div><div class="a6"></div><div class="a7"></div><div class="a8"></div><div class="a9"></div><div class="ba"></div><div class="bb"></div></div></div></div><div class="aw"><span class="ax">Activity Feed</span><div class="ay"><div class="bc"><div class="bd"><div class="be"><span>Alice</span></div><div class="bf"><span class="bg">Alice</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Bob</span></div><div class="bf"><span class="bg">Bob</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Carol</span></div><div class="bf"><span class="bg">Carol</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Dave</span></div><div class="bf"><span class="bg">Dave</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Eve</span></div><div class="bf"><span class="bg">Eve</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Frank</span></div><div class="bf"><span class="bg">Frank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Grace</span></div><div class="bf"><span class="bg">Grace</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Hank</span></div><div class="bf"><span class="bg">Hank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div></div></div></div></div><div class="aq"><div class="bh"><div class="aw"><span class="ax">Project Status</span><div class="ay"><div class="bi"><div class="bj"><div class="bk"><span class="bl">Project</span></div><div class="bm"><span class="bl">Status</span></div><div class="bn"><span class="bl">Progress</span></div><div class="af"><span class="bl">Due Date</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Alpha</span></div><div class="bm"><span class="as">In Progress</span></div><div class="bn"><span class="bp">75%</span></div><div class="af"><span class="as">Dec 15 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Beta</span></div><div class="bm"><span class="as">Review</span></div><div class="bn"><span class="bp">90%</span></div><div class="af"><span class="as">Nov 30 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Gamma</span></div><div class="bm"><span class="as">Planning</span></div><div class="bn"><span class="bp">20%</span></div><div class="af"><span class="as">Jan 20 2026</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Delta</span></div><div class="bm"><span class="as">Completed</span></div><div class="bn"><span class="bp">100%</span></div><div class="af"><span class="as">Oct 10 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Epsilon</span></div><div class="bm"><span class="as">On Hold</span></div><div class="bn"><span class="bp">45%</span></div><div class="af"><span class="as">Feb 28 2026</span></div></div></div></div></div><div class="aw"><span class="ax">Progress Breakdown</span><div class="ay"><div class="bc"><div class="m"><div class="bq"><span class="br">Alpha</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Beta</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Gamma</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Delta</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Epsilon</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div></div></div></div><div class="aw"><span class="ax">Recent Activity Log</span><div class="ay"><div class="bu"><div class="bv"><div class="bw"><span class="bx">0</span></div><span class="by">Deployed v2.3.1 to production</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">1</span></div><span class="by">Merged feature/auth-redesign</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">2</span></div><span class="by">Closed issue #482: Login timeout</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">3</span></div><span class="by">Updated CI/CD pipeline config</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">4</span></div><span class="by">Added unit tests for payment module</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">5</span></div><span class="by">Reviewed PR #156: API refactor</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">6</span></div><span class="by">Fixed memory leak in worker pool</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">7</span></div><span class="by">Released hotfix 2.3.2</span><span class="w">just now</span></div></div></div></div></div><div class="bz"><div class="aw"><span class="ax">Quick Actions</span><div class="ay"><div class="bu"><button class="aj">New Project</button><button class="b0">Create Report</button><button class="b1">Invite Member</button><button class="b2">View Backlog</button></div></div></div><div class="aw"><span class="ax">Team Members</span><div class="ay"><div class="bu"><div class="b3"><div class="t"><span>Alice</span></div><div class="b4"><span class="v">Alice</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Bob</span></div><div class="b4"><span class="v">Bob</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Carol</span></div><div class="b4"><span class="v">Carol</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Dave</span></div><div class="b4"><span class="v">Dave</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Eve</span></div><div class="b4"><span class="v">Eve</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Frank</span></div><div class="b4"><span class="v">Frank</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Grace</span></div><div class="b4"><span class="v">Grace</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Hank</span></div><div class="b4"><span class="v">Hank</span><span class="w">Developer</span></div><div class="b5"></div></div></div></div></div><div class="aw"><span class="ax">Tags</span><div class="ay"><div class="b6"><div class="b7"><span>frontend</span></div><div class="b7"><span>backend</span></div><div class="b7"><span>devops</span></div><div class="b7"><span>design</span></div><div class="b7"><span>mobile</span></div><div class="b7"><span>security</span></div><div class="b7"><span>performance</span></div><div class="b7"><span>testing</span></div><div class="b7"><span>docs</span></div><div class="b7"><span>infra</span></div><div class="b7"><span>ux</span></div><div class="b7"><span>api</span></div></div></div></div><div class="aw"><span class="ax">Notifications</span><div class="ay"><div class="bi"><div class="b8"><div class="al"></div><span class="br">New deployment completed</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">PR review requested</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Build failed on staging</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Meeting in 30 minutes</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Subscription renewal due</span><span class="w">now</span></div></div></div></div><div class="aw"><span class="ax">Settings</span><div class="ay"><div class="bc"><div class="b9"><span class="by">Dark Mode</span><div class="ca"><div class="cb"></div></div></div><div class="b9"><span class="by">Notifications</span><div class="ca"><div class="cb"></div></div></div><div class="b9"><span class="by">Auto-save</span><div class="cc"><div class="cd"></div></div></div><div class="b9"><span class="by">Compact View</span><div class="cc"><div class="cd"></div></div></div></div></div></div></div></div><div class="ce"><div class="aw"><span class="ax">Data Table</span><div class="ay"><div class="bi"><div class="cf"><input class="cg" type="search" placeholder="Filter results..."><div class="af"></div><div class="aa"><button class="ch">all</button><button class="ch">design</button><button class="ch">development</button><button class="ch">marketing</button><button class="ch">analytics</button></div></div><div class="ci"><div class="cj"><span class="bl">ID</span></div><div class="bk"><span class="bl">Name</span></div><div class="bm"><span class="bl">Category</span></div><div class="bn"><span class="bl">Status</span></div><div class="af"><span class="bl">Updated</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="co"><span class="p">Showing 1-20 of 142 results</span><div class="af"></div><div class="cp"><button class="cq">Prev</button><button class="cr">1</button><button class="cq">2</button><button class="cq">3</button><button class="cq">Next</button></div></div></div></div></div></div></div><footer class="cs"><div class="ct"><div class="cu"><span class="cv">htmlang Dashboard</span><span class="g">Built with htmlang - a declarative HTML language</span><span class="w">Copyright 2025 htmlang contributors</span></div><div class="m"><span class="cw">Product</span><a href="/features" class="cx">Features</a><a href="/pricing" class="cx">Pricing</a><a href="/changelog" class="cx">Changelog</a><a href="/roadmap" class="cx">Roadmap</a></div><div class="m"><span class="cw">Resources</span><a href="/docs" class="cx">Documentation</a><a href="/api" class="cx">API Reference</a><a href="/guides" class="cx">Guides</a><a href="/examples" class="cx">Examples</a></div><div class="m"><span class="cw">Company</span><a href="/about" class="cx">About</a><a href="/blog" class="cx">Blog</a><a href="/careers" class="cx">Careers</a><a href="/contact" class="cx">Contact</a></div><div class="m"><span class="cw">Legal</span><a href="/privacy" class="cx">Privacy Policy</a><a href="/terms" class="cx">Terms of Service</a><a href="/cookies" class="cx">Cookie Policy</a></div></div></footer></div></div></body></html>