zark-design 3.1.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +8 -3
  2. package/templates/README.md.hbs +567 -1
  3. package/templates/_shared/tokens.css.hbs +55 -1
  4. package/templates/html/components.css +553 -1
  5. package/templates/html/showcase.html.hbs +386 -71
  6. package/templates/jsx/App.example.jsx.hbs +1 -1
  7. package/templates/jsx/components.css +553 -1
package/templates/html/showcase.html.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8"/>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>{{name}} — Design System</title>
6
+ <title>{{name}} · Design System</title>
7
7
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
8
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
9
9
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
@@ -12,7 +12,7 @@
12
12
  <link rel="stylesheet" href="components.css"/>
13
13
  <style>
14
14
  /* ============================================================
15
- SHOWCASE — page-specific styles (BASE + app shell + sections)
15
+ SHOWCASE · page-specific styles (BASE + app shell + sections)
16
16
  Os tokens e componentes vêm de tokens.css + components.css.
17
17
  ============================================================ */
18
18
  * { box-sizing: border-box; }
@@ -1199,7 +1199,7 @@ main { background: var(--paper); }
1199
1199
  transition: color var(--t-fast);
1200
1200
  }
1201
1201
 
1202
- /* ---------- AVATAR (square cliente — extras) ---------- */
1202
+ /* ---------- AVATAR (square cliente · extras) ---------- */
1203
1203
  .av-space {
1204
1204
  width: 24px; height: 24px;
1205
1205
  border-radius: var(--r-sm);
@@ -1310,10 +1310,10 @@ main { background: var(--paper); }
1310
1310
  <div class="section-inner">
1311
1311
  <div class="section-header">
1312
1312
  <div>
1313
- <div class="eyebrow">01 — Foundations</div>
1313
+ <div class="eyebrow">01 · Foundations</div>
1314
1314
  <h2>Paleta cromática</h2>
1315
1315
  </div>
1316
- <p class="section-desc">Sistema warm, neutro, brand-on-paper. A cor da marca (`var(--brand-500)`) é a única assinatura cromática — usar com moderação em CTAs primários, focus rings e brand moments. Nunca como background dominante.</p>
1316
+ <p class="section-desc">Sistema warm, neutro, brand-on-paper. A cor da marca (`var(--brand-500)`) é a única assinatura cromática. Use com moderação em CTAs primários, focus rings e brand moments. Nunca como background dominante.</p>
1317
1317
  </div>
1318
1318
 
1319
1319
  <div class="stack">
@@ -1364,10 +1364,10 @@ main { background: var(--paper); }
1364
1364
  <div class="section-inner">
1365
1365
  <div class="section-header">
1366
1366
  <div>
1367
- <div class="eyebrow">02 — Foundations</div>
1367
+ <div class="eyebrow">02 · Foundations</div>
1368
1368
  <h2>Tipografia</h2>
1369
1369
  </div>
1370
- <p class="section-desc">Inter para UI e <strong>números</strong> (KPIs, valores, contadores). JetBrains Mono para código e labels técnicos. Space Grotesk para <strong>títulos</strong> — H1, H2, H3, modal titles, header bands. Cada uma tem um papel: nunca trocar.</p>
1370
+ <p class="section-desc">Inter para UI e <strong>números</strong> (KPIs, valores, contadores). JetBrains Mono para código e labels técnicos. Space Grotesk para <strong>títulos</strong>: H1, H2, H3, modal titles, header bands. Cada uma tem um papel: nunca trocar.</p>
1371
1371
  </div>
1372
1372
 
1373
1373
  <div class="grid-2">
@@ -1375,18 +1375,18 @@ main { background: var(--paper); }
1375
1375
  <div class="panel-head"><div class="panel-title">Famílias</div><div class="panel-kicker">3 fontes</div></div>
1376
1376
  <div class="panel-body">
1377
1377
  <div style="margin-bottom:24px">
1378
- <div class="sub-label">Inter — UI & Números</div>
1378
+ <div class="sub-label">Inter · UI & Números</div>
1379
1379
  <div style="font-family:var(--font-sans); font-size:var(--fs-2xl); color:var(--ink-700); line-height:1.2">The quick brown fox</div>
1380
1380
  <div style="font-family:var(--font-sans); font-size:var(--fs-3xl); font-weight:700; color:var(--ink-700); line-height:1; letter-spacing:-0.02em; margin-top:8px">R$ 13.676 · 28 / 100</div>
1381
1381
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-sans) · 400 · 500 · 600 · 700 · 800</div>
1382
1382
  </div>
1383
1383
  <div style="margin-bottom:24px">
1384
- <div class="sub-label">JetBrains Mono — Código & labels</div>
1384
+ <div class="sub-label">JetBrains Mono · Código & labels</div>
1385
1385
  <div style="font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--ink-700); line-height:1.2">const brand = #F56F10</div>
1386
1386
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-mono)</div>
1387
1387
  </div>
1388
1388
  <div>
1389
- <div class="sub-label">Space Grotesk — Títulos</div>
1389
+ <div class="sub-label">Space Grotesk · Títulos</div>
1390
1390
  <div style="font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--ink-700); letter-spacing:-0.02em; line-height:1.1">{{name}} Sistemas</div>
1391
1391
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-display) · h1 · h2 · h3 · modal title</div>
1392
1392
  </div>
@@ -1398,19 +1398,19 @@ main { background: var(--paper); }
1398
1398
  <div class="panel-body">
1399
1399
  <div class="sub-label">Pesos</div>
1400
1400
  <div style="font-size:var(--fs-xl); color:var(--ink-700); display:flex; flex-direction:column; gap:8px">
1401
- <div style="font-weight:400">Regular 400 — body padrão</div>
1402
- <div style="font-weight:500">Medium 500 — UI labels, botões</div>
1403
- <div style="font-weight:600">Semibold 600 — headings médios</div>
1404
- <div style="font-weight:700">Bold 700 — display, ênfase</div>
1401
+ <div style="font-weight:400">Regular 400 · body padrão</div>
1402
+ <div style="font-weight:500">Medium 500 · UI labels, botões</div>
1403
+ <div style="font-weight:600">Semibold 600 · headings médios</div>
1404
+ <div style="font-weight:700">Bold 700 · display, ênfase</div>
1405
1405
  </div>
1406
1406
  <div style="height:20px"></div>
1407
1407
  <div class="sub-label">Letter spacing</div>
1408
1408
  <div style="display:flex; flex-direction:column; gap:10px; font-size:var(--fs-base); color:var(--ink-700)">
1409
- <div style="letter-spacing:var(--ls-tight)">tight -0.02em — display</div>
1410
- <div style="letter-spacing:var(--ls-snug)">snug -0.01em — heading</div>
1411
- <div style="letter-spacing:var(--ls-normal)">normal 0 — body</div>
1412
- <div style="letter-spacing:var(--ls-wide); font-family:var(--font-mono); font-size:var(--fs-sm); text-transform:uppercase">wide 0.04em — button</div>
1413
- <div style="letter-spacing:var(--ls-widest); font-family:var(--font-mono); font-size:var(--fs-2xs); text-transform:uppercase">widest 0.14em — eyebrow</div>
1409
+ <div style="letter-spacing:var(--ls-tight)">tight -0.02em · display</div>
1410
+ <div style="letter-spacing:var(--ls-snug)">snug -0.01em · heading</div>
1411
+ <div style="letter-spacing:var(--ls-normal)">normal 0 · body</div>
1412
+ <div style="letter-spacing:var(--ls-wide); font-family:var(--font-mono); font-size:var(--fs-sm); text-transform:uppercase">wide 0.04em · button</div>
1413
+ <div style="letter-spacing:var(--ls-widest); font-family:var(--font-mono); font-size:var(--fs-2xs); text-transform:uppercase">widest 0.14em · eyebrow</div>
1414
1414
  </div>
1415
1415
  </div>
1416
1416
  </div>
@@ -1419,7 +1419,7 @@ main { background: var(--paper); }
1419
1419
  <div style="height:24px"></div>
1420
1420
 
1421
1421
  <div class="panel">
1422
- <div class="panel-head"><div class="panel-title">Escala — fs tokens</div><div class="panel-kicker">10 → 88px</div></div>
1422
+ <div class="panel-head"><div class="panel-title">Escala · fs tokens</div><div class="panel-kicker">10 → 88px</div></div>
1423
1423
  <div class="panel-body" id="typeScale"></div>
1424
1424
  </div>
1425
1425
  </div>
@@ -1430,7 +1430,7 @@ main { background: var(--paper); }
1430
1430
  <div class="section-inner">
1431
1431
  <div class="section-header">
1432
1432
  <div>
1433
- <div class="eyebrow">03 — Foundations</div>
1433
+ <div class="eyebrow">03 · Foundations</div>
1434
1434
  <h2>Espaçamento</h2>
1435
1435
  </div>
1436
1436
  <p class="section-desc">Base 4px. Default de stack vertical: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-12</code> (24px). Default de gap em flex: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-8</code> (16px). Padding interno de card: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-16</code> ou <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-20</code>.</p>
@@ -1447,7 +1447,7 @@ main { background: var(--paper); }
1447
1447
  <div class="section-inner">
1448
1448
  <div class="section-header">
1449
1449
  <div>
1450
- <div class="eyebrow">04 — Foundations</div>
1450
+ <div class="eyebrow">04 · Foundations</div>
1451
1451
  <h2>Border radius</h2>
1452
1452
  </div>
1453
1453
  <p class="section-desc">xs em status dots, badges e progress bars · sm em tags, chips e botões pequenos · md em botões e inputs padrão · lg em cards · xl/2xl em modals e hero panels · 3xl raramente. Avatares usam <code style="font-family:var(--font-mono);color:var(--brand-700)">border-radius: 50%</code> direto (são círculos geométricos, não tags).</p>
@@ -1465,10 +1465,10 @@ main { background: var(--paper); }
1465
1465
  <div class="section-inner">
1466
1466
  <div class="section-header">
1467
1467
  <div>
1468
- <div class="eyebrow">05 — Foundations</div>
1468
+ <div class="eyebrow">05 · Foundations</div>
1469
1469
  <h2>Sombras</h2>
1470
1470
  </div>
1471
- <p class="section-desc">Sempre warm (rgba 20,17,12) — nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--brand-700)">--ring-focus</code> sempre presente em elementos interativos via teclado.</p>
1471
+ <p class="section-desc">Sempre warm (rgba 20,17,12), nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--brand-700)">--ring-focus</code> sempre presente em elementos interativos via teclado.</p>
1472
1472
  </div>
1473
1473
  <div class="panel">
1474
1474
  <div class="panel-body">
@@ -1483,16 +1483,16 @@ main { background: var(--paper); }
1483
1483
  <div class="section-inner">
1484
1484
  <div class="section-header">
1485
1485
  <div>
1486
- <div class="eyebrow">06 — Primitives</div>
1486
+ <div class="eyebrow">06 · Primitives</div>
1487
1487
  <h2>Botões</h2>
1488
1488
  </div>
1489
- <p class="section-desc">5 variantes × 4 tamanhos. Primary é a única cor de marca em CTA — use com moderação. Secondary é o default. Soft pra ações brand de menor peso. Ghost pra ações terciárias e icon-only.</p>
1489
+ <p class="section-desc">5 variantes × 4 tamanhos. Primary é a única cor de marca em CTA. Use com moderação. Secondary é o default. Soft pra ações brand de menor peso. Ghost pra ações terciárias e icon-only.</p>
1490
1490
  </div>
1491
1491
 
1492
1492
  <div class="panel">
1493
1493
  <div class="panel-head"><div class="panel-title">Buttons</div><div class="panel-kicker">5 variantes × 4 sizes</div></div>
1494
1494
  <div class="panel-body">
1495
- <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Variantes — md</div></div>
1495
+ <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Variantes · md</div></div>
1496
1496
  <div class="row">
1497
1497
  <button class="btn btn-primary btn-md">
1498
1498
  <svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13V5M5 9l4-4 4 4"/></svg>
@@ -1513,7 +1513,7 @@ main { background: var(--paper); }
1513
1513
  </button>
1514
1514
  </div>
1515
1515
 
1516
- <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos — primary</div></div>
1516
+ <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos · primary</div></div>
1517
1517
  <div class="row">
1518
1518
  <button class="btn btn-primary btn-xs">XS</button>
1519
1519
  <button class="btn btn-primary btn-sm">Small</button>
@@ -1568,7 +1568,7 @@ main { background: var(--paper); }
1568
1568
  <div class="section-inner">
1569
1569
  <div class="section-header">
1570
1570
  <div>
1571
- <div class="eyebrow">07 — Primitives</div>
1571
+ <div class="eyebrow">07 · Primitives</div>
1572
1572
  <h2>Inputs</h2>
1573
1573
  </div>
1574
1574
  <p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--brand-700)">--line-300</code>, raio <code style="font-family:var(--font-mono);color:var(--brand-700)">--r-lg</code>. Focus eleva o ring brand. Estado <code style="font-family:var(--font-mono);color:var(--brand-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
@@ -1577,7 +1577,7 @@ main { background: var(--paper); }
1577
1577
  <div class="panel">
1578
1578
  <div class="panel-head"><div class="panel-title">Inputs, toggles, segmented</div></div>
1579
1579
  <div class="panel-body">
1580
- <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Text inputs — sm/md/lg</div></div>
1580
+ <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Text inputs · sm/md/lg</div></div>
1581
1581
  <div class="row">
1582
1582
  <div style="width:240px">
1583
1583
  <label class="input input-sm">
@@ -1624,7 +1624,7 @@ main { background: var(--paper); }
1624
1624
  </div>
1625
1625
  </div>
1626
1626
 
1627
- <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">URL input — full-width (search-style)</div></div>
1627
+ <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">URL input · full-width (search-style)</div></div>
1628
1628
  <div class="row">
1629
1629
  <div class="url-input-full">
1630
1630
  <span class="scheme">
@@ -1658,7 +1658,7 @@ main { background: var(--paper); }
1658
1658
  <div class="section-inner">
1659
1659
  <div class="section-header">
1660
1660
  <div>
1661
- <div class="eyebrow">08 — Primitives</div>
1661
+ <div class="eyebrow">08 · Primitives</div>
1662
1662
  <h2>Tags, badges, kbd</h2>
1663
1663
  </div>
1664
1664
  <p class="section-desc">Tags curtos com raio --r-sm (4px) pra status e estados. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.tag-square</code> usa raio --r-xs (3px) ainda mais sharp pra data labels técnicos (linguagens, endpoints, IDs). Mono uppercase com letter-spacing wide é a assinatura.</p>
@@ -1666,7 +1666,7 @@ main { background: var(--paper); }
1666
1666
 
1667
1667
  <div class="panel">
1668
1668
  <div class="panel-body">
1669
- <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags — status (rounded-sm)</div></div>
1669
+ <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags · status (rounded-sm)</div></div>
1670
1670
  <div class="row">
1671
1671
  <span class="tag tag-brand">New</span>
1672
1672
  <span class="tag">Optional</span>
@@ -1677,7 +1677,7 @@ main { background: var(--paper); }
1677
1677
  <span class="tag tag-danger">Failed</span>
1678
1678
  </div>
1679
1679
 
1680
- <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags — square (data labels)</div></div>
1680
+ <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags · square (data labels)</div></div>
1681
1681
  <div class="row">
1682
1682
  <span class="tag tag-mono tag-square tag-xs">TypeScript</span>
1683
1683
  <span class="tag tag-mono tag-square tag-xs">Python</span>
@@ -1733,7 +1733,7 @@ main { background: var(--paper); }
1733
1733
  <div class="section-inner">
1734
1734
  <div class="section-header">
1735
1735
  <div>
1736
- <div class="eyebrow">09 — Primitives</div>
1736
+ <div class="eyebrow">09 · Primitives</div>
1737
1737
  <h2>Toggle & Segmented</h2>
1738
1738
  </div>
1739
1739
  <p class="section-desc">Toggle pra estados booleanos (on/off, mostrar/esconder). Segmented pra switch entre views ou modos exclusivos com 2-4 opções.</p>
@@ -1799,15 +1799,15 @@ main { background: var(--paper); }
1799
1799
  <div class="section-inner">
1800
1800
  <div class="section-header">
1801
1801
  <div>
1802
- <div class="eyebrow">10 — Primitives</div>
1802
+ <div class="eyebrow">10 · Primitives</div>
1803
1803
  <h2>Avatar & Kbd</h2>
1804
1804
  </div>
1805
- <p class="section-desc">Avatares usam Space Grotesk na inicial — micro-brand moment. Square pra contextos enterprise/team, circle pra contextos pessoais. Kbd sempre com border-bottom de 2px pra parecer tecla.</p>
1805
+ <p class="section-desc">Avatares usam Space Grotesk na inicial: micro-brand moment. Square pra contextos enterprise/team, circle pra contextos pessoais. Kbd sempre com border-bottom de 2px pra parecer tecla.</p>
1806
1806
  </div>
1807
1807
 
1808
1808
  <div class="grid-2">
1809
1809
  <div class="panel">
1810
- <div class="panel-head"><div class="panel-title">Avatar — sizes</div></div>
1810
+ <div class="panel-head"><div class="panel-title">Avatar · sizes</div></div>
1811
1811
  <div class="panel-body">
1812
1812
  <div class="row" style="align-items:flex-end">
1813
1813
  <span class="avatar" style="width:18px; height:18px; font-size:9px">R</span>
@@ -1831,7 +1831,7 @@ main { background: var(--paper); }
1831
1831
  </div>
1832
1832
 
1833
1833
  <div class="panel">
1834
- <div class="panel-head"><div class="panel-title">Kbd — combos</div></div>
1834
+ <div class="panel-head"><div class="panel-title">Kbd · combos</div></div>
1835
1835
  <div class="panel-body">
1836
1836
  <div class="row" style="margin-bottom:14px">
1837
1837
  <span class="sub-label" style="width:160px; margin-bottom:0">Open command palette</span>
@@ -1864,7 +1864,7 @@ main { background: var(--paper); }
1864
1864
  <div class="section-inner">
1865
1865
  <div class="section-header">
1866
1866
  <div>
1867
- <div class="eyebrow">11 — Patterns</div>
1867
+ <div class="eyebrow">11 · Patterns</div>
1868
1868
  <h2>Sidebar de aplicação</h2>
1869
1869
  </div>
1870
1870
  <p class="section-desc">Largura 240px, bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--canvas</code>, items com altura ~32px. Active state usa <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-50</code> bg + <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-700</code> texto. Footer leve com avatar + email do user.</p>
@@ -1996,7 +1996,7 @@ main { background: var(--paper); }
1996
1996
  <div class="section-inner">
1997
1997
  <div class="section-header">
1998
1998
  <div>
1999
- <div class="eyebrow">12 — Patterns</div>
1999
+ <div class="eyebrow">12 · Patterns</div>
2000
2000
  <h2>Cards</h2>
2001
2001
  </div>
2002
2002
  <p class="section-desc">Endpoint cards usam border-only (sem shadow) em row contínua. Stat cards trazem display font no número. Project cards combinam title + tags. Integration tile usa cores próprias por marca.</p>
@@ -2007,7 +2007,7 @@ main { background: var(--paper); }
2007
2007
  <div class="panel-body flush">
2008
2008
 
2009
2009
  <div style="padding:24px">
2010
- <div class="sub-label">Endpoint cards — borderless row</div>
2010
+ <div class="sub-label">Endpoint cards · borderless row</div>
2011
2011
  <div style="display:flex; gap:0; margin-top:4px">
2012
2012
  <div class="endpoint">
2013
2013
  <div class="head">
@@ -2050,7 +2050,7 @@ main { background: var(--paper); }
2050
2050
  <div class="stat-card">
2051
2051
  <div class="stat-card-head">
2052
2052
  <div>
2053
- <div class="stat-card-title">Páginas processadas — Últimos 7 dias</div>
2053
+ <div class="stat-card-title">Páginas processadas · Últimos 7 dias</div>
2054
2054
  <div class="stat-card-sub">+18% vs semana anterior</div>
2055
2055
  </div>
2056
2056
  <div class="stat-card-num">2.418</div>
@@ -2140,7 +2140,7 @@ main { background: var(--paper); }
2140
2140
  <div class="section-inner">
2141
2141
  <div class="section-header">
2142
2142
  <div>
2143
- <div class="eyebrow">13 — Patterns</div>
2143
+ <div class="eyebrow">13 · Patterns</div>
2144
2144
  <h2>Data Table</h2>
2145
2145
  </div>
2146
2146
  <p class="section-desc">Header em mono uppercase com letter-spacing wider e cor ink-300. Rows com hover sutil em paper. Endpoint sempre como tag mono square na primeira coluna. Status com tag colorido por estado.</p>
@@ -2181,10 +2181,10 @@ main { background: var(--paper); }
2181
2181
  <div class="section-inner">
2182
2182
  <div class="section-header">
2183
2183
  <div>
2184
- <div class="eyebrow">14 — Patterns</div>
2185
- <h2>Modal — onboarding</h2>
2184
+ <div class="eyebrow">14 · Patterns</div>
2185
+ <h2>Modal · onboarding</h2>
2186
2186
  </div>
2187
- <p class="section-desc">Modal max-width 460px, raio 2xl, shadow modal. Overlay com blur de 2px. Sempre anuncia step counter. Título em Space Grotesk — segue a regra: títulos sempre em display font.</p>
2187
+ <p class="section-desc">Modal max-width 460px, raio 2xl, shadow modal. Overlay com blur de 2px. Sempre anuncia step counter. Título em Space Grotesk, seguindo a regra: títulos sempre em display font.</p>
2188
2188
  </div>
2189
2189
 
2190
2190
  <div class="panel">
@@ -2251,14 +2251,14 @@ main { background: var(--paper); }
2251
2251
  <div class="section-inner">
2252
2252
  <div class="section-header">
2253
2253
  <div>
2254
- <div class="eyebrow">15 — Patterns</div>
2254
+ <div class="eyebrow">15 · Patterns</div>
2255
2255
  <h2>Code Block</h2>
2256
2256
  </div>
2257
2257
  <p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--code-bg</code> warm. Strings em success-700, keys em code-fg brand. Sempre com botões de eye/copy no canto top-right.</p>
2258
2258
  </div>
2259
2259
 
2260
2260
  <div class="panel">
2261
- <div class="panel-head"><div class="panel-title">Code block — MCP integration</div></div>
2261
+ <div class="panel-head"><div class="panel-title">Code block · MCP integration</div></div>
2262
2262
  <div class="panel-body">
2263
2263
  <div class="code-block">
2264
2264
  <div class="copy">
@@ -2291,7 +2291,7 @@ main { background: var(--paper); }
2291
2291
  <div class="section-inner">
2292
2292
  <div class="section-header">
2293
2293
  <div>
2294
- <div class="eyebrow">16 — Patterns</div>
2294
+ <div class="eyebrow">16 · Patterns</div>
2295
2295
  <h2>Banners & Toasts</h2>
2296
2296
  </div>
2297
2297
  <p class="section-desc">Announcement bar (full-width, neutro). Tip card (lateral, com ícone brand). Toast (bottom centered, ink-700 ou success-500, raio md). Sempre próximo da ação que originou.</p>
@@ -2348,7 +2348,7 @@ main { background: var(--paper); }
2348
2348
  <div class="section-inner">
2349
2349
  <div class="section-header">
2350
2350
  <div>
2351
- <div class="eyebrow">17 — App Patterns · CRM</div>
2351
+ <div class="eyebrow">17 · App Patterns · CRM</div>
2352
2352
  <h2>Status & Priority</h2>
2353
2353
  </div>
2354
2354
  <p class="section-desc">Matriz oficial unificada. Substitui as 3+ variações encontradas no CRM (URGENT/URGENTE em formatos diferentes, tags de status com alturas variando). Sempre mono uppercase, altura 22px, raio sm, dot colorido à esquerda. Modificadores (ATRASADA, PARADO) sobrescrevem o status base.</p>
@@ -2356,7 +2356,7 @@ main { background: var(--paper); }
2356
2356
 
2357
2357
  <div class="grid-2">
2358
2358
  <div class="panel">
2359
- <div class="panel-head"><div class="panel-title">Status — 5 estados base</div><div class="panel-kicker">tarefa lifecycle</div></div>
2359
+ <div class="panel-head"><div class="panel-title">Status · 5 estados base</div><div class="panel-kicker">tarefa lifecycle</div></div>
2360
2360
  <div class="panel-body">
2361
2361
  <div class="row" style="margin-bottom:14px">
2362
2362
  <span class="tag-dot s-todo">A FAZER</span>
@@ -2381,7 +2381,7 @@ main { background: var(--paper); }
2381
2381
  </div>
2382
2382
 
2383
2383
  <div class="panel">
2384
- <div class="panel-head"><div class="panel-title">Priority — 4 níveis</div><div class="panel-kicker">prioridade da tarefa</div></div>
2384
+ <div class="panel-head"><div class="panel-title">Priority · 4 níveis</div><div class="panel-kicker">prioridade da tarefa</div></div>
2385
2385
  <div class="panel-body">
2386
2386
  <div class="row" style="margin-bottom:14px">
2387
2387
  <span class="tag-dot p-urgent">URGENTE</span>
@@ -2411,7 +2411,7 @@ main { background: var(--paper); }
2411
2411
  <div class="section-inner">
2412
2412
  <div class="section-header">
2413
2413
  <div>
2414
- <div class="eyebrow">18 — App Patterns · CRM</div>
2414
+ <div class="eyebrow">18 · App Patterns · CRM</div>
2415
2415
  <h2>Cores por Espaço</h2>
2416
2416
  </div>
2417
2417
  <p class="section-desc">Cada cliente/espaço tem UMA cor fixa, usada em ícone na sidebar, tag de espaço, avatar quadrado e accent borders. Resolve o problema atual onde MIXSHOP/GERAIS/VIPSEG aparecem em cores diferentes em telas diferentes.</p>
@@ -2449,7 +2449,7 @@ main { background: var(--paper); }
2449
2449
  <div class="section-inner">
2450
2450
  <div class="section-header">
2451
2451
  <div>
2452
- <div class="eyebrow">19 — App Patterns · CRM</div>
2452
+ <div class="eyebrow">19 · App Patterns · CRM</div>
2453
2453
  <h2>Stat Cards (unificado)</h2>
2454
2454
  </div>
2455
2455
  <p class="section-desc">Hoje o CRM tem 4 estilos competindo (border-only, ícone em quadrado colorido, mini sem ícone, alerta vermelho). Padrão unificado: ícone em quadrado colorido (28px) + label mono uppercase + número em display font. Variantes só pra progress e crítico.</p>
@@ -2512,7 +2512,7 @@ main { background: var(--paper); }
2512
2512
  <div class="section-inner">
2513
2513
  <div class="section-header">
2514
2514
  <div>
2515
- <div class="eyebrow">20 — App Patterns · CRM</div>
2515
+ <div class="eyebrow">20 · App Patterns · CRM</div>
2516
2516
  <h2>Critical Alert Banner</h2>
2517
2517
  </div>
2518
2518
  <p class="section-desc">Padrão derivado do "8 TAREFAS EM ATRASO" do dashboard. Banner pleno de bg vermelho (danger-50) + border vermelho (danger-500) + lista de items clicáveis. Reservado para situações que exigem ação imediata. NUNCA usar pra warnings normais (esses vão em banner amarelo).</p>
@@ -2568,7 +2568,7 @@ main { background: var(--paper); }
2568
2568
  <div class="section-inner">
2569
2569
  <div class="section-header">
2570
2570
  <div>
2571
- <div class="eyebrow">21 — App Patterns · CRM</div>
2571
+ <div class="eyebrow">21 · App Patterns · CRM</div>
2572
2572
  <h2>Funnel & Progress</h2>
2573
2573
  </div>
2574
2574
  <p class="section-desc">Funnel horizontal segmentado (Pipeline de Vendas) usa as mesmas cores do status do estágio. Progress bar simples (KPI com meta) usa success ou brand. Mesma altura: 8px no funnel, 4px em stat-card.</p>
@@ -2576,7 +2576,7 @@ main { background: var(--paper); }
2576
2576
 
2577
2577
  <div class="grid-2">
2578
2578
  <div class="panel">
2579
- <div class="panel-head"><div class="panel-title">Funnel — Pipeline de vendas</div></div>
2579
+ <div class="panel-head"><div class="panel-title">Funnel · Pipeline de vendas</div></div>
2580
2580
  <div class="panel-body">
2581
2581
  <div class="sub-label">Funil</div>
2582
2582
  <div class="funnel">
@@ -2632,14 +2632,14 @@ main { background: var(--paper); }
2632
2632
  <div class="section-inner">
2633
2633
  <div class="section-header">
2634
2634
  <div>
2635
- <div class="eyebrow">22 — App Patterns · CRM</div>
2635
+ <div class="eyebrow">22 · App Patterns · CRM</div>
2636
2636
  <h2>Kanban Column</h2>
2637
2637
  </div>
2638
- <p class="section-desc">Coluna minimalista — sem bg cinza pesado. Header em mono uppercase com dot colorido (mesma cor do status) + contador. Empty state usa o componente Empty State (seção 25). "+ Nova tarefa" sempre como primeiro affordance.</p>
2638
+ <p class="section-desc">Coluna minimalista, sem bg cinza pesado. Header em mono uppercase com dot colorido (mesma cor do status) + contador. Empty state usa o componente Empty State (seção 25). "+ Nova tarefa" sempre como primeiro affordance.</p>
2639
2639
  </div>
2640
2640
 
2641
2641
  <div class="panel">
2642
- <div class="panel-head"><div class="panel-title">Kanban — Tarefas e Acompanhamento</div><div class="panel-kicker">5 estados</div></div>
2642
+ <div class="panel-head"><div class="panel-title">Kanban · Tarefas e Acompanhamento</div><div class="panel-kicker">5 estados</div></div>
2643
2643
  <div class="panel-body">
2644
2644
  <div class="kanban">
2645
2645
  <div class="k-col">
@@ -2736,14 +2736,14 @@ main { background: var(--paper); }
2736
2736
  <div class="section-inner">
2737
2737
  <div class="section-header">
2738
2738
  <div>
2739
- <div class="eyebrow">23 — App Patterns · CRM</div>
2739
+ <div class="eyebrow">23 · App Patterns · CRM</div>
2740
2740
  <h2>Lead Card (Pipeline)</h2>
2741
2741
  </div>
2742
2742
  <p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em brand quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
2743
2743
  </div>
2744
2744
 
2745
2745
  <div class="panel">
2746
- <div class="panel-head"><div class="panel-title">Lead cards — variações</div></div>
2746
+ <div class="panel-head"><div class="panel-title">Lead cards · variações</div></div>
2747
2747
  <div class="panel-body">
2748
2748
  <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; max-width:840px">
2749
2749
 
@@ -2824,7 +2824,7 @@ main { background: var(--paper); }
2824
2824
  <div class="section-inner">
2825
2825
  <div class="section-header">
2826
2826
  <div>
2827
- <div class="eyebrow">24 — App Patterns · CRM</div>
2827
+ <div class="eyebrow">24 · App Patterns · CRM</div>
2828
2828
  <h2>Filter Chips</h2>
2829
2829
  </div>
2830
2830
  <p class="section-desc">Substitui os 3 padrões de filtro no CRM (chips, dropdowns, toggle filters). Chip mono uppercase com contador opcional, raio --r-sm. Active state usa brand-50 + border brand-200. Use SEMPRE quando houver até 6 categorias; acima disso, dropdown.</p>
@@ -2832,7 +2832,7 @@ main { background: var(--paper); }
2832
2832
 
2833
2833
  <div class="grid-2">
2834
2834
  <div class="panel">
2835
- <div class="panel-head"><div class="panel-title">Chip group — categoria</div></div>
2835
+ <div class="panel-head"><div class="panel-title">Chip group · categoria</div></div>
2836
2836
  <div class="panel-body">
2837
2837
  <div class="sub-label">Vault de acessos</div>
2838
2838
  <div class="chips" id="chipsAcessos">
@@ -2890,10 +2890,10 @@ main { background: var(--paper); }
2890
2890
  <div class="section-inner">
2891
2891
  <div class="section-header">
2892
2892
  <div>
2893
- <div class="eyebrow">25 — App Patterns · CRM</div>
2893
+ <div class="eyebrow">25 · App Patterns · CRM</div>
2894
2894
  <h2>Empty State</h2>
2895
2895
  </div>
2896
- <p class="section-desc">Container dashed + sparkle ícone + texto muted. Usado em colunas de Kanban vazias, drop zones do Pipeline, listas sem dados. Sempre passivo (não convida ação direta) — pra CTA explícito, use o k-add com "+ Novo X".</p>
2896
+ <p class="section-desc">Container dashed + sparkle ícone + texto muted. Usado em colunas de Kanban vazias, drop zones do Pipeline, listas sem dados. Sempre passivo (não convida ação direta). Pra CTA explícito, use o k-add com "+ Novo X".</p>
2897
2897
  </div>
2898
2898
 
2899
2899
  <div class="grid-3">
@@ -2936,10 +2936,10 @@ main { background: var(--paper); }
2936
2936
  <div class="section-inner">
2937
2937
  <div class="section-header">
2938
2938
  <div>
2939
- <div class="eyebrow">26 — App Patterns · CRM</div>
2939
+ <div class="eyebrow">26 · App Patterns · CRM</div>
2940
2940
  <h2>Biblioteca de Ícones</h2>
2941
2941
  </div>
2942
- <p class="section-desc">Set oficial — outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--brand-700)">currentColor</code>. Nunca trocar por filled, nunca misturar com Lucide ou Heroicons num mesmo contexto. Quando faltar ícone, criar seguindo as mesmas regras.</p>
2942
+ <p class="section-desc">Set oficial: outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--brand-700)">currentColor</code>. Nunca trocar por filled, nunca misturar com Lucide ou Heroicons num mesmo contexto. Quando faltar ícone, criar seguindo as mesmas regras.</p>
2943
2943
  </div>
2944
2944
 
2945
2945
  <div class="panel">
@@ -3048,7 +3048,7 @@ main { background: var(--paper); }
3048
3048
  <div class="section-inner">
3049
3049
  <div class="section-header">
3050
3050
  <div>
3051
- <div class="eyebrow">27 — App Patterns · CRM</div>
3051
+ <div class="eyebrow">27 · App Patterns · CRM</div>
3052
3052
  <h2>Table Row Actions</h2>
3053
3053
  </div>
3054
3054
  <p class="section-desc">Substitui os ícones soltos coloridos (check verde / lápis cinza / lixeira vermelha) por botões com border + hover state. Mais clicável, alinha com o resto do sistema e dá feedback visual real.</p>
@@ -3098,6 +3098,321 @@ main { background: var(--paper); }
3098
3098
 
3099
3099
  <div style="height:80px"></div>
3100
3100
 
3101
+ <!-- ============ SEÇÃO 28: ADVANCED COMPONENTS v3.3 ============ -->
3102
+ <section>
3103
+ <div class="section-head">
3104
+ <div class="eyebrow">28 · Advanced · v3.3</div>
3105
+ <h2>Componentes avançados</h2>
3106
+ </div>
3107
+ <p class="section-desc">Padrões maiores adaptados de referências externas de qualidade pra identidade ZARK. Removidos: pill 999px, glassmorphism, gradientes coloridos, drop-shadow XL, bounce/elastic animation. Mantidos: a essência visual (dropdown rico, dock, chart card animado, orbit KPI, wheel picker) traduzida pra warm/hairline/tokens.</p>
3108
+
3109
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:32px">
3110
+
3111
+ <!-- 28.1 UserDropdown -->
3112
+ <div class="panel">
3113
+ <div class="panel-head">
3114
+ <div class="panel-title">User Dropdown</div>
3115
+ <div class="panel-kicker">.zk-user-menu</div>
3116
+ </div>
3117
+ <div class="panel-body" style="padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:16px; background:var(--paper); position:relative; min-height:520px">
3118
+ <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); text-align:center"><b style="color:var(--brand-700)">Recarregue a página</b> pra ver a mount animation (fade + translate-Y + scale). Hover em itens: ícone desliza +2px.</div>
3119
+ <div class="zk-user-menu" style="position:static">
3120
+ <div class="zk-user-menu-panel" style="position:static; box-shadow:var(--shadow-lg)">
3121
+ <div class="head">
3122
+ <div class="avatar" style="background:var(--brand-500); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:var(--fs-md)">MJ</div>
3123
+ <div class="who">
3124
+ <div class="name">Maycon Jordan</div>
3125
+ <div class="handle">@mayconj</div>
3126
+ </div>
3127
+ <span class="status-badge online">Online</span>
3128
+ </div>
3129
+ <div class="zk-user-menu-sep"></div>
3130
+ <div class="zk-user-menu-group">
3131
+ <button class="zk-user-menu-item">
3132
+ <span class="icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg></span>
3133
+ <span class="label">Seu perfil</span>
3134
+ </button>
3135
+ <button class="zk-user-menu-item">
3136
+ <span class="icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg></span>
3137
+ <span class="label">Preferências</span>
3138
+ </button>
3139
+ <button class="zk-user-menu-item">
3140
+ <span class="icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0v5l-2 3h16l-2-3V8z"/><path d="M10 21a2 2 0 0 0 4 0"/></svg></span>
3141
+ <span class="label">Notificações</span>
3142
+ <span class="right">3</span>
3143
+ </button>
3144
+ </div>
3145
+ <div class="zk-user-menu-sep"></div>
3146
+ <div class="zk-user-menu-group">
3147
+ <button class="zk-user-menu-item is-brand">
3148
+ <span class="icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="none"><polygon points="12 2 15 9 22 9 17 14 19 21 12 17 5 21 7 14 2 9 9 9 12 2"/></svg></span>
3149
+ <span class="label">Upgrade Pro</span>
3150
+ <span class="badge-off">20% off</span>
3151
+ </button>
3152
+ </div>
3153
+ <div class="zk-user-menu-sep"></div>
3154
+ <div class="zk-user-menu-group">
3155
+ <button class="zk-user-menu-item">
3156
+ <span class="icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="3"/><circle cx="15" cy="15" r="3"/><path d="M4 4l16 16"/></svg></span>
3157
+ <span class="label">Trocar conta</span>
3158
+ </button>
3159
+ <button class="zk-user-menu-item is-danger">
3160
+ <span class="icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg></span>
3161
+ <span class="label">Sair</span>
3162
+ </button>
3163
+ </div>
3164
+ </div>
3165
+ </div>
3166
+ </div>
3167
+ </div>
3168
+
3169
+ <!-- 28.2 ToolbarDock -->
3170
+ <div class="panel">
3171
+ <div class="panel-head">
3172
+ <div class="panel-title">Toolbar Dock</div>
3173
+ <div class="panel-kicker">.zk-dock</div>
3174
+ </div>
3175
+ <div class="panel-body" style="padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; background:var(--paper); min-height:520px">
3176
+ <div class="sub-label" style="width:100%; margin-bottom:0">Light</div>
3177
+ <div class="zk-dock">
3178
+ <button class="zk-dock-btn" aria-label="Comentar">
3179
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10l-5 4V6z"/></svg>
3180
+ </button>
3181
+ <button class="zk-dock-btn" aria-label="Inbox">
3182
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l4-8h8l4 8v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z"/><path d="M4 12h4l2 3h4l2-3h4"/></svg>
3183
+ <span class="dot"></span>
3184
+ </button>
3185
+ <button class="zk-dock-btn" aria-label="Toggle">
3186
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="7" width="18" height="10" rx="5"/><circle cx="16" cy="12" r="3" fill="currentColor" stroke="none"/></svg>
3187
+ </button>
3188
+ <button class="zk-dock-btn" aria-label="Editar">
3189
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3l7 7-11 11H3v-7L14 3z"/></svg>
3190
+ </button>
3191
+ <div class="zk-dock-sep"></div>
3192
+ <button class="zk-dock-btn" aria-label="Compartilhar">
3193
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.5" y1="10.5" x2="15.5" y2="6.5"/><line x1="8.5" y1="13.5" x2="15.5" y2="17.5"/></svg>
3194
+ </button>
3195
+ <button class="zk-dock-btn" aria-label="Menu">
3196
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
3197
+ <span class="dot"></span>
3198
+ </button>
3199
+ </div>
3200
+
3201
+ <div class="sub-label" style="width:100%; margin-bottom:0; margin-top:24px">Dark</div>
3202
+ <div class="zk-dock dark">
3203
+ <button class="zk-dock-btn" aria-label="Comentar">
3204
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10l-5 4V6z"/></svg>
3205
+ </button>
3206
+ <button class="zk-dock-btn" aria-label="Inbox">
3207
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l4-8h8l4 8v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z"/><path d="M4 12h4l2 3h4l2-3h4"/></svg>
3208
+ <span class="dot"></span>
3209
+ </button>
3210
+ <div class="zk-dock-sep"></div>
3211
+ <button class="zk-dock-btn" aria-label="Compartilhar">
3212
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.5" y1="10.5" x2="15.5" y2="6.5"/><line x1="8.5" y1="13.5" x2="15.5" y2="17.5"/></svg>
3213
+ </button>
3214
+ <button class="zk-dock-btn" aria-label="Menu">
3215
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
3216
+ </button>
3217
+ </div>
3218
+
3219
+ <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); text-align:center; margin-top:8px">Hover pra ver o estado active dos ícones. Notification dot em brand-500 com border do surface.</div>
3220
+ </div>
3221
+ </div>
3222
+
3223
+ <!-- 28.3 ChartCard -->
3224
+ <div class="panel">
3225
+ <div class="panel-head">
3226
+ <div class="panel-title">Chart Card animado</div>
3227
+ <div class="panel-kicker">.zk-chart-card</div>
3228
+ </div>
3229
+ <div class="panel-body" style="padding:32px; display:flex; justify-content:center; background:var(--paper); min-height:520px">
3230
+ <div style="display:flex; flex-direction:column; gap:16px; align-items:center">
3231
+ <div class="zk-chart-card" id="chart-card-demo">
3232
+ <div class="zk-chart-card-viz">
3233
+ <div class="tags">
3234
+ <span class="tag"><span class="dot" style="background:var(--viz-cat-1)"></span>+15,2%</span>
3235
+ <span class="tag"><span class="dot" style="background:var(--viz-cat-8)"></span>+18,7%</span>
3236
+ </div>
3237
+ <svg viewBox="0 0 356 180" preserveAspectRatio="xMidYMid meet">
3238
+ <rect class="bar-1" x="40" y="110" width="15" height="20" fill="var(--viz-cat-8)" rx="2" opacity="0.85"/>
3239
+ <rect class="bar-2" x="60" y="90" width="15" height="20" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3240
+ <rect class="bar-3" x="80" y="70" width="15" height="40" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3241
+ <rect class="bar-4" x="100" y="80" width="15" height="30" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3242
+ <rect class="bar-5" x="120" y="110" width="15" height="30" fill="var(--viz-cat-8)" rx="2" opacity="0.85"/>
3243
+ <rect class="bar-6" x="140" y="60" width="15" height="50" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3244
+ <rect class="bar-7" x="160" y="80" width="15" height="30" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3245
+ <rect class="bar-8" x="180" y="110" width="15" height="20" fill="var(--viz-cat-8)" rx="2" opacity="0.85"/>
3246
+ <rect class="bar-9" x="200" y="70" width="15" height="40" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3247
+ <rect class="bar-10" x="220" y="110" width="15" height="30" fill="var(--viz-cat-8)" rx="2" opacity="0.85"/>
3248
+ <rect class="bar-11" x="240" y="80" width="15" height="30" fill="var(--viz-cat-1)" rx="2" opacity="0.85"/>
3249
+ <rect class="bar-12" x="260" y="110" width="15" height="20" fill="var(--viz-cat-8)" rx="2" opacity="0.85"/>
3250
+ <rect class="bar-13" x="280" y="110" width="15" height="20" fill="var(--viz-cat-8)" rx="2" opacity="0.85"/>
3251
+ </svg>
3252
+ <div class="zk-chart-card-detail">
3253
+ <div class="row">
3254
+ <span class="dot" style="background:var(--viz-cat-1)"></span>
3255
+ <span class="label">Leads qualificados</span>
3256
+ <span class="value">+15,2%</span>
3257
+ </div>
3258
+ <div class="row" style="margin-top:4px">
3259
+ <span class="dot" style="background:var(--viz-cat-8)"></span>
3260
+ <span class="label">Perdidos</span>
3261
+ <span class="value">-8,4%</span>
3262
+ </div>
3263
+ </div>
3264
+ </div>
3265
+ <div class="zk-chart-card-body">
3266
+ <div class="title">Novos leads</div>
3267
+ <div class="desc">Últimos 7 dias · 142 no total</div>
3268
+ </div>
3269
+ </div>
3270
+ <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); text-align:center; max-width:340px"><b style="color:var(--brand-700)">Passe o mouse no card</b> pra ver as barras redimensionarem + tags saírem + tooltip aparecer. CSS transitions 400ms, sem lib.</div>
3271
+ </div>
3272
+ </div>
3273
+ </div>
3274
+
3275
+ <!-- 28.4 OrbitCard -->
3276
+ <div class="panel">
3277
+ <div class="panel-head">
3278
+ <div class="panel-title">Orbit KPI Card</div>
3279
+ <div class="panel-kicker">.zk-orbit-card</div>
3280
+ </div>
3281
+ <div class="panel-body" style="padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:16px; background:var(--paper); min-height:520px">
3282
+ <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); text-align:center"><b style="color:var(--brand-700)">Recarregue a página</b> pra ver o ripple: 43 dots aparecem em stagger (15ms cada), depois o total central, depois os metrics slide-up.</div>
3283
+ <div class="zk-orbit-card">
3284
+ <div class="zk-orbit-card-viz">
3285
+ <svg viewBox="0 0 320 272">
3286
+ <!-- Outer ring: 32 dots @ radius 130, center (160, 130) -->
3287
+ <g fill="var(--viz-cat-1)" opacity="0.55">
3288
+ <circle cx="160" cy="0" r="4" style="--i:0"/>
3289
+ <circle cx="185" cy="4" r="4" style="--i:1"/>
3290
+ <circle cx="210" cy="12" r="4" style="--i:2"/>
3291
+ <circle cx="232" cy="26" r="4" style="--i:3"/>
3292
+ <circle cx="252" cy="44" r="4" style="--i:4"/>
3293
+ <circle cx="268" cy="66" r="4" style="--i:5"/>
3294
+ <circle cx="280" cy="91" r="4" style="--i:6"/>
3295
+ <circle cx="287" cy="118" r="4" style="--i:7"/>
3296
+ <circle cx="290" cy="147" r="4" style="--i:8"/>
3297
+ <circle cx="287" cy="176" r="4" style="--i:9"/>
3298
+ <circle cx="280" cy="203" r="4" style="--i:10"/>
3299
+ <circle cx="268" cy="228" r="4" style="--i:11"/>
3300
+ <circle cx="252" cy="250" r="4" style="--i:12"/>
3301
+ <circle cx="135" cy="0" r="4" style="--i:13"/>
3302
+ <circle cx="110" cy="4" r="4" style="--i:14"/>
3303
+ <circle cx="88" cy="12" r="4" style="--i:15"/>
3304
+ <circle cx="66" cy="26" r="4" style="--i:16"/>
3305
+ <circle cx="46" cy="44" r="4" style="--i:17"/>
3306
+ <circle cx="30" cy="66" r="4" style="--i:18"/>
3307
+ <circle cx="18" cy="91" r="4" style="--i:19"/>
3308
+ <circle cx="11" cy="118" r="4" style="--i:20"/>
3309
+ <circle cx="8" cy="147" r="4" style="--i:21"/>
3310
+ <circle cx="11" cy="176" r="4" style="--i:22"/>
3311
+ <circle cx="18" cy="203" r="4" style="--i:23"/>
3312
+ <circle cx="30" cy="228" r="4" style="--i:24"/>
3313
+ <circle cx="46" cy="250" r="4" style="--i:25"/>
3314
+ </g>
3315
+ <!-- Inner ring: 24 dots @ radius 100, center (160, 130) -->
3316
+ <g fill="var(--viz-cat-4)" opacity="0.6">
3317
+ <circle cx="160" cy="30" r="4" style="--i:26"/>
3318
+ <circle cx="188" cy="36" r="4" style="--i:27"/>
3319
+ <circle cx="213" cy="48" r="4" style="--i:28"/>
3320
+ <circle cx="233" cy="66" r="4" style="--i:29"/>
3321
+ <circle cx="248" cy="88" r="4" style="--i:30"/>
3322
+ <circle cx="258" cy="112" r="4" style="--i:31"/>
3323
+ <circle cx="260" cy="138" r="4" style="--i:32"/>
3324
+ <circle cx="256" cy="164" r="4" style="--i:33"/>
3325
+ <circle cx="246" cy="188" r="4" style="--i:34"/>
3326
+ <circle cx="132" cy="36" r="4" style="--i:35"/>
3327
+ <circle cx="107" cy="48" r="4" style="--i:36"/>
3328
+ <circle cx="87" cy="66" r="4" style="--i:37"/>
3329
+ <circle cx="72" cy="88" r="4" style="--i:38"/>
3330
+ <circle cx="62" cy="112" r="4" style="--i:39"/>
3331
+ <circle cx="60" cy="138" r="4" style="--i:40"/>
3332
+ <circle cx="64" cy="164" r="4" style="--i:41"/>
3333
+ <circle cx="74" cy="188" r="4" style="--i:42"/>
3334
+ </g>
3335
+ </svg>
3336
+ <div class="center">
3337
+ <div class="kicker">Total</div>
3338
+ <div class="value">R$ 2.125</div>
3339
+ </div>
3340
+ <div class="fade"></div>
3341
+ </div>
3342
+ <div class="zk-orbit-card-body">
3343
+ <div class="zk-orbit-card-metrics">
3344
+ <div class="zk-orbit-card-metric">
3345
+ <div class="head">
3346
+ <div class="bar" style="background:var(--viz-cat-1)"></div>
3347
+ <div class="label">Bônus</div>
3348
+ </div>
3349
+ <div class="value">R$ 1.250</div>
3350
+ <div class="delta">+15,2%</div>
3351
+ </div>
3352
+ <div class="zk-orbit-card-metric">
3353
+ <div class="head">
3354
+ <div class="bar" style="background:var(--viz-cat-4)"></div>
3355
+ <div class="label">Incentivos</div>
3356
+ </div>
3357
+ <div class="value">R$ 875</div>
3358
+ <div class="delta">+8,7%</div>
3359
+ </div>
3360
+ </div>
3361
+ <button class="btn btn-secondary btn-md" style="width:100%">Ver detalhes</button>
3362
+ </div>
3363
+ </div>
3364
+ </div>
3365
+ </div>
3366
+
3367
+ <!-- 28.5 WheelPicker -->
3368
+ <div class="panel" style="grid-column:1 / -1">
3369
+ <div class="panel-head">
3370
+ <div class="panel-title">Wheel Time Picker</div>
3371
+ <div class="panel-kicker">.zk-wheel-picker</div>
3372
+ </div>
3373
+ <div class="panel-body" style="padding:48px; display:flex; justify-content:center; align-items:center; background:var(--paper); min-height:400px; gap:64px; flex-wrap:wrap">
3374
+ <div class="zk-wheel-picker">
3375
+ <div class="zk-wheel-picker-wheel">
3376
+ <svg viewBox="0 0 360 360">
3377
+ <path class="wedge pos" d="M180 180 L180 20 A160 160 0 0 1 293 67 Z"/>
3378
+ <text class="wedge-label pos" x="240" y="60" text-anchor="middle" dominant-baseline="middle">+2h</text>
3379
+ <path class="wedge pos" d="M180 180 L293 67 A160 160 0 0 1 340 180 Z"/>
3380
+ <text class="wedge-label pos" x="303" y="120" text-anchor="middle" dominant-baseline="middle">+1h</text>
3381
+ <path class="wedge pos" d="M180 180 L340 180 A160 160 0 0 1 293 293 Z"/>
3382
+ <text class="wedge-label pos" x="303" y="240" text-anchor="middle" dominant-baseline="middle">+30m</text>
3383
+ <path class="wedge pos" d="M180 180 L293 293 A160 160 0 0 1 180 340 Z"/>
3384
+ <text class="wedge-label pos" x="240" y="300" text-anchor="middle" dominant-baseline="middle">+15m</text>
3385
+ <path class="wedge" d="M180 180 L180 340 A160 160 0 0 1 67 293 Z"/>
3386
+ <text class="wedge-label" x="120" y="300" text-anchor="middle" dominant-baseline="middle">-15m</text>
3387
+ <path class="wedge" d="M180 180 L67 293 A160 160 0 0 1 20 180 Z"/>
3388
+ <text class="wedge-label" x="57" y="240" text-anchor="middle" dominant-baseline="middle">-30m</text>
3389
+ <path class="wedge" d="M180 180 L20 180 A160 160 0 0 1 67 67 Z"/>
3390
+ <text class="wedge-label" x="57" y="120" text-anchor="middle" dominant-baseline="middle">-1h</text>
3391
+ <path class="wedge" d="M180 180 L67 67 A160 160 0 0 1 180 20 Z"/>
3392
+ <text class="wedge-label" x="120" y="60" text-anchor="middle" dominant-baseline="middle">-2h</text>
3393
+ </svg>
3394
+ </div>
3395
+ <div class="zk-wheel-picker-input">
3396
+ <input type="text" value="09:00" placeholder="HH:MM"/>
3397
+ </div>
3398
+ </div>
3399
+ <div style="max-width:280px">
3400
+ <div class="sub-label" style="margin-bottom:12px">Wheel Time Picker</div>
3401
+ <p style="font-size:var(--fs-sm); color:var(--ink-500); line-height:1.55; margin:0">
3402
+ <b style="color:var(--brand-700)">Passe o mouse no picker</b> pra ver o wheel aparecer com opacity 0→1 + scale 0.9→1 + rotate -8deg→0. Clique fora ou foque o input pra esconder.
3403
+ </p>
3404
+ <p style="font-size:var(--fs-sm); color:var(--ink-500); line-height:1.55; margin:14px 0 0">
3405
+ Input central em raio <code style="font-family:var(--font-mono); color:var(--brand-700)">--r-md</code> (nunca pill 999px). 8 wedges com atalhos de +/- tempo: positivos em brand, negativos em ink neutro. Sem drop-shadow-xl.
3406
+ </p>
3407
+ </div>
3408
+ </div>
3409
+ </div>
3410
+
3411
+ </div>
3412
+ </section>
3413
+
3414
+ <div style="height:80px"></div>
3415
+
3101
3416
  <div style="text-align:center; padding:48px 0; border-top:1px solid var(--line-200)">
3102
3417
  <img src="assets/logo-primary.{{logoExt}}" alt="{{name}}" style="height:48px; display:inline-block"/>
3103
3418
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-300); letter-spacing:var(--ls-wider); text-transform:uppercase; margin-top:16px">Design System · Sistemas v3 · 2026 · App Patterns extraídos do CRM</div>
@@ -3276,7 +3591,7 @@ const rows = [
3276
3591
  ['/SCRAPE','https://www.zark.dev/playground/extract','Completed','2','Mai 05, 26 09:57'],
3277
3592
  ['/SCRAPE','https://www.zark.dev/extract','Failed','0','Mai 05, 26 09:55'],
3278
3593
  ['/SCRAPE','https://www.zark.dev/templates','Completed','1','Mai 05, 26 09:54'],
3279
- ['/SEARCH','llm-ready scraper for SaaS','Pending','—','Mai 05, 26 09:50'],
3594
+ ['/SEARCH','llm-ready scraper for SaaS','Pending','-','Mai 05, 26 09:50'],
3280
3595
  ];
3281
3596
  const toneFor = s => s === 'Completed' ? 'success' : s === 'Failed' ? 'danger' : 'warning';
3282
3597
  document.getElementById('tableRows').innerHTML = rows.map(r => `