zark-design 1.0.0 → 2.0.0

package/templates/{tokens.css → html/tokens.css}

@@ -1,18 +1,19 @@
 /* ============================================================
    ZARK DESIGN SYSTEM — TOKENS
-   Light, warm, neutral system inspired by ember/orange-on-paper
+   v3 · Sistemas/Apps · 2026
+   Importe este arquivo no entry-point do projeto antes de
+   components.css.
    ============================================================ */
 
 :root {
-  /* ---------- BRAND / ACCENT (Zark Liquid Lava scale) ---------- */
-  /* Anchored on official Zark brand color #F56F10 (Liquid Lava) */
+  /* ---------- BRAND / EMBER (Liquid Lava scale) ---------- */
   --ember-50:  #fff3e9;
   --ember-100: #ffe1c8;
   --ember-200: #ffc28e;
   --ember-300: #ffa056;
-  --ember-400: #ff8a3a;   /* liquid-lava-light */
+  --ember-400: #ff8a3a;
   --ember-500: #f56f10;   /* LIQUID LAVA — brand primary */
-  --ember-600: #d45e0d;   /* liquid-lava-dark — primary action */
+  --ember-600: #d45e0d;
   --ember-700: #ad4a09;
   --ember-800: #843706;
   --ember-900: #5e2704;
@@ -21,12 +22,12 @@
   --glucon-grey: #1b1a1e;
 
   /* ---------- NEUTRALS (warm paper → ink) ---------- */
-  --paper:     #fafaf8;   /* app bg */
-  --canvas:    #f5f4f1;   /* sidebar bg */
-  --surface:   #ffffff;   /* card bg */
-  --line-100:  #f0eeea;   /* hairlines on tinted bg */
-  --line-200:  #e8e6e1;   /* default borders */
-  --line-300:  #d8d5cf;   /* stronger dividers */
+  --paper:     #fafaf8;
+  --canvas:    #f5f4f1;
+  --surface:   #ffffff;
+  --line-100:  #f0eeea;
+  --line-200:  #e8e6e1;
+  --line-300:  #d8d5cf;
 
   --ink-50:    #f4f3f0;
   --ink-100:   #e8e6e1;
@@ -35,7 +36,7 @@
   --ink-400:   #6f6b64;
   --ink-500:   #4a4741;
   --ink-600:   #2e2c28;
-  --ink-700:   #1a1916;   /* near black */
+  --ink-700:   #1a1916;
   --ink-800:   #111110;
   --ink-900:   #0a0a09;
 
@@ -56,19 +57,35 @@
   --info-500:    #2f7adc;
   --info-700:    #1f5ba8;
 
-  /* tag/code accents */
   --tag-bg:    #fff0e0;
   --tag-fg:    #ad4a09;
   --code-bg:   #fff5ea;
   --code-fg:   #ad4a09;
 
-  /* ---------- TYPOGRAPHY ---------- */
-  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
-  /* Darker Grotesque for the brand-flavored display moments (ZARK wordmark vibe).
-     Use it sparingly in SaaS — section heroes, hero numbers, marketing surfaces.
-     UI text stays on Inter. */
-  --font-display: "Darker Grotesque", "Inter Tight", "Inter", sans-serif;
+  /* ---------- SPACE / CLIENTE COLORS (CRM) ---------- */
+  --space-zark:        #f56f10;
+  --space-zark-soft:   #fff3e9;
+  --space-allsec:      #c2410c;
+  --space-allsec-soft: #fff3e9;
+  --space-vipcar:      #ea580c;
+  --space-vipcar-soft: #fff3e9;
+  --space-limppe:      #f59e0b;
+  --space-limppe-soft: #fff8e6;
+  --space-gerais:      #1f2937;
+  --space-gerais-soft: #f4f3f0;
+  --space-mixshop:     #b91c1c;
+  --space-mixshop-soft:#fef1f1;
+  --space-vipseg:      #991b1b;
+  --space-vipseg-soft: #fef1f1;
+
+  /* ---------- TYPOGRAPHY ----------
+     Inter        → UI texto + NÚMEROS (KPIs, valores, contadores)
+     JetBrains    → Código, labels técnicos, kbd
+     Space Grotesk→ TÍTULOS (h1, h2, h3, modal titles, header bands)
+  */
+  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
+  --font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
   --font-ui:      "Inter", -apple-system, sans-serif;
 
   /* type scale (px) */
@@ -126,7 +143,7 @@
   --sp-40: 80px;
   --sp-48: 96px;
 
-  /* ---------- RADII ---------- */
+  /* ---------- RADII (sem pill) ---------- */
   --r-xs:  3px;
   --r-sm:  4px;
   --r-md:  6px;
@@ -134,9 +151,8 @@
   --r-xl:  12px;
   --r-2xl: 16px;
   --r-3xl: 20px;
-  --r-pill: 999px;
 
-  /* ---------- SHADOWS ---------- */
+  /* ---------- SHADOWS (warm-black, never cool-black) ---------- */
   --shadow-xs:  0 1px 0 rgba(20, 17, 12, 0.04);
   --shadow-sm:  0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
   --shadow-md:  0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
@@ -145,7 +161,7 @@
   --shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
   --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 
-  --ring-focus:  0 0 0 3px rgba(255, 93, 31, 0.20);
+  --ring-focus:      0 0 0 3px rgba(255, 93, 31, 0.20);
   --ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
 
   /* ---------- MOTION ---------- */
@@ -164,56 +180,27 @@
 }
 
 /* ============================================================
-   BASE
+   DARK THEME
    ============================================================ */
-* { box-sizing: border-box; }
-html, body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-sans);
-  font-size: var(--fs-base);
-  line-height: var(--lh-base);
-  color: var(--ink-700);
-  background: var(--paper);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-::selection { background: var(--ember-200); color: var(--ink-700); }
-
-a { color: inherit; }
-button { font-family: inherit; }
-
-/* ============================================================
-   DARK THEME — opt-in via [data-theme="dark"] OR auto via prefers-color-scheme
-   ============================================================
-   Filosofia: o brand (liquid-lava/ember) MANTÉM os mesmos valores —
-   é a assinatura visual ZARK. O que muda são neutros, semânticos
-   suaves, sombras e ring-focus pra contraste correto.
-   ============================================================ */
-
 [data-theme="dark"] {
-  /* Brand: liquid-lava preservado, mas os tons claros viram acentos */
   --ember-50:  #2a1810;
   --ember-100: #3d2114;
-  --ember-200: #5e2704;   /* invertido com 900 */
+  --ember-200: #5e2704;
   --ember-300: #843706;
   --ember-400: #ad4a09;
-  --ember-500: #f56f10;   /* LIQUID LAVA — inalterado, brand é brand */
-  --ember-600: #ff8a3a;   /* mais claro = mais hover/active no dark */
+  --ember-500: #f56f10;   /* brand inalterado */
+  --ember-600: #ff8a3a;
   --ember-700: #ffa056;
   --ember-800: #ffc28e;
   --ember-900: #ffe1c8;
 
-  /* Neutros: paper/canvas/surface vão pra escala dark-void */
-  --paper:     #0e0d11;   /* app bg — mais escuro que dark-void puro */
-  --canvas:    #151419;   /* dark-void — sidebar bg */
-  --surface:   #1b1a1e;   /* glucon-grey — card bg */
-  --line-100:  #232227;   /* hairlines */
-  --line-200:  #2c2b32;   /* default borders */
-  --line-300:  #3a383f;   /* stronger dividers */
+  --paper:     #0e0d11;
+  --canvas:    #151419;
+  --surface:   #1b1a1e;
+  --line-100:  #232227;
+  --line-200:  #2c2b32;
+  --line-300:  #3a383f;
 
-  /* Ink invertido: agora é warm-white sobre dark, não warm-black sobre paper */
   --ink-50:    #1a1916;
   --ink-100:   #2c2b27;
   --ink-200:   #4a4741;
@@ -221,23 +208,20 @@ button { font-family: inherit; }
   --ink-400:   #a09c95;
   --ink-500:   #c8c5bf;
   --ink-600:   #e0ddd6;
-  --ink-700:   #f0ede5;   /* near-white com warm tone */
+  --ink-700:   #f0ede5;
   --ink-800:   #f7f5ef;
   --ink-900:   #fafaf8;
 
-  /* Semânticos suaves (50) ficam mais escuros pra fundo no dark */
   --success-50: #0f2419;
   --warning-50: #2a1f08;
   --danger-50:  #2a1010;
   --info-50:    #0e1a2c;
 
-  /* Tag/code mantêm legibilidade no dark */
-  --tag-bg:     #3d2114;
-  --tag-fg:     #ffc28e;
-  --code-bg:    #2a1810;
-  --code-fg:    #ffa056;
+  --tag-bg:  #3d2114;
+  --tag-fg:  #ffc28e;
+  --code-bg: #2a1810;
+  --code-fg: #ffa056;
 
-  /* Sombras dark — invertidas: borda + glow leve em vez de drop-shadow grosso */
   --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.5);
   --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
   --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -246,52 +230,25 @@ button { font-family: inherit; }
   --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
   --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 
-  --ring-focus:  0 0 0 3px rgba(255, 138, 58, 0.30);
+  --ring-focus:      0 0 0 3px rgba(255, 138, 58, 0.30);
   --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
 }
 
-/* Dark mode automático via OS, opt-out: <html data-theme="light"> */
+/* Auto dark via OS, opt-out: <html data-theme="light"> */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --ember-50:  #2a1810;
-    --ember-100: #3d2114;
-    --ember-200: #5e2704;
-    --ember-300: #843706;
-    --ember-400: #ad4a09;
-    --ember-500: #f56f10;
-    --ember-600: #ff8a3a;
-    --ember-700: #ffa056;
-    --ember-800: #ffc28e;
+    --ember-50:  #2a1810;  --ember-100: #3d2114;  --ember-200: #5e2704;
+    --ember-300: #843706;  --ember-400: #ad4a09;  --ember-500: #f56f10;
+    --ember-600: #ff8a3a;  --ember-700: #ffa056;  --ember-800: #ffc28e;
     --ember-900: #ffe1c8;
-
-    --paper:     #0e0d11;
-    --canvas:    #151419;
-    --surface:   #1b1a1e;
-    --line-100:  #232227;
-    --line-200:  #2c2b32;
-    --line-300:  #3a383f;
-
-    --ink-50:    #1a1916;
-    --ink-100:   #2c2b27;
-    --ink-200:   #4a4741;
-    --ink-300:   #6f6b64;
-    --ink-400:   #a09c95;
-    --ink-500:   #c8c5bf;
-    --ink-600:   #e0ddd6;
-    --ink-700:   #f0ede5;
-    --ink-800:   #f7f5ef;
+    --paper:     #0e0d11;  --canvas:    #151419;  --surface:   #1b1a1e;
+    --line-100:  #232227;  --line-200:  #2c2b32;  --line-300:  #3a383f;
+    --ink-50:    #1a1916;  --ink-100:   #2c2b27;  --ink-200:   #4a4741;
+    --ink-300:   #6f6b64;  --ink-400:   #a09c95;  --ink-500:   #c8c5bf;
+    --ink-600:   #e0ddd6;  --ink-700:   #f0ede5;  --ink-800:   #f7f5ef;
     --ink-900:   #fafaf8;
-
-    --success-50: #0f2419;
-    --warning-50: #2a1f08;
-    --danger-50:  #2a1010;
-    --info-50:    #0e1a2c;
-
-    --tag-bg:     #3d2114;
-    --tag-fg:     #ffc28e;
-    --code-bg:    #2a1810;
-    --code-fg:    #ffa056;
-
+    --success-50: #0f2419; --warning-50: #2a1f08; --danger-50:  #2a1010; --info-50: #0e1a2c;
+    --tag-bg: #3d2114; --tag-fg: #ffc28e; --code-bg: #2a1810; --code-fg: #ffa056;
     --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.5);
     --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
     --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -299,8 +256,28 @@ button { font-family: inherit; }
     --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
     --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
     --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-
-    --ring-focus:  0 0 0 3px rgba(255, 138, 58, 0.30);
+    --ring-focus:      0 0 0 3px rgba(255, 138, 58, 0.30);
     --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
   }
 }
+
+/* ============================================================
+   BASE
+   ============================================================ */
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--fs-base);
+  line-height: var(--lh-base);
+  color: var(--ink-700);
+  background: var(--paper);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+::selection { background: var(--ember-200); color: var(--ink-700); }
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; }
+
+@keyframes zk-spin   { to { transform: rotate(360deg); } }
+@keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

package/templates/jsx/App.example.jsx

@@ -0,0 +1,229 @@
+// App.example.jsx — exemplo completo demonstrando o design system em uso.
+// Replique a estrutura no seu projeto. Lembre de importar tokens.css + components.css
+// no entry-point (main.jsx / App.jsx).
+
+import React, { useState } from 'react';
+import './tokens.css';
+import './components.css';
+
+import {
+  Button,
+  Input,
+  Tag,
+  TagDot,
+  Badge,
+  Toggle,
+  Segmented,
+  Chips,
+  StatCard,
+  AlertCritical,
+  Funnel,
+  EmptyState,
+  KanbanBoard,
+  KanbanColumn,
+  LeadCard,
+  TableActions,
+  Sidebar,
+  SidebarLink,
+  SidebarSection,
+  Panel,
+  Section,
+  Modal,
+  Toast,
+  Announce,
+  Tip,
+  CodeBlock,
+  Avatar,
+  AvatarSpace,
+  Kbd,
+  Spec,
+  Icons,
+} from './index';
+
+import logoZark from './assets/logo-zark-laranja.png';
+import iconZark from './assets/zark-icon.png';
+
+export default function App() {
+  const [tab, setTab] = useState('hoje');
+  const [filter, setFilter] = useState('todas');
+  const [stealth, setStealth] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'var(--sidebar-w) 1fr', minHeight: '100vh' }}>
+
+      {/* SIDEBAR */}
+      <Sidebar logo={<img src={logoZark} alt="ZARK" className="zk-sidebar-logo"/>}>
+        <SidebarSection>Workspace</SidebarSection>
+        <SidebarLink active icon={<Icons.Home/>} shortcut={<Kbd>⌥D</Kbd>}>Dashboard</SidebarLink>
+        <SidebarLink icon={<Icons.Activity/>} shortcut={<Kbd>⌥P</Kbd>}>Pipeline</SidebarLink>
+        <SidebarLink icon={<Icons.Usage/>} shortcut={<Kbd>⌥T</Kbd>}>Painel de Equipe</SidebarLink>
+        <SidebarLink icon={<Icons.Docs/>} shortcut={<Kbd>⌥F</Kbd>}>Financeiro</SidebarLink>
+
+        <SidebarSection>Compartilhados</SidebarSection>
+        <SidebarLink icon={<AvatarSpace name="Z" spaceKey="zark" size={18}/>}>ZARK</SidebarLink>
+        <SidebarLink icon={<AvatarSpace name="V" spaceKey="vipcar" size={18}/>}>VIPCAR</SidebarLink>
+        <SidebarLink icon={<AvatarSpace name="L" spaceKey="limppe" size={18}/>}>LIMPPE TEC</SidebarLink>
+      </Sidebar>
+
+      {/* MAIN */}
+      <main style={{ padding: 32 }}>
+
+        {/* Header */}
+        <header style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          marginBottom: 32,
+        }}>
+          <div>
+            <div className="eyebrow">Hoje · 05 mai 2026</div>
+            <h1 style={{
+              fontFamily: 'var(--font-display)',
+              fontSize: 'var(--fs-3xl)',
+              fontWeight: 700, margin: 0, color: 'var(--ink-700)',
+              letterSpacing: 'var(--ls-tight)',
+            }}>Olá, Renan</h1>
+          </div>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <Segmented
+              value={tab}
+              onChange={setTab}
+              items={[
+                { value: 'hoje', label: 'Hoje' },
+                { value: 'semana', label: 'Semana' },
+                { value: 'todas', label: 'Todas' },
+              ]}
+            />
+            <Button variant="primary" icon={<Icons.Plus size={14}/>} onClick={() => setModalOpen(true)}>
+              Nova Tarefa
+            </Button>
+          </div>
+        </header>
+
+        {/* Stats */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
+          <StatCard label="CONCLUÍDAS · SEMANA" value="8" sub="+18% vs anterior" iconColor="green" icon={<Icons.Check size={14}/>}/>
+          <StatCard label="CRIADAS · SEMANA"    value="19" sub="média 2.7/dia"  iconColor="orange" icon={<Icons.Plus size={14}/>}/>
+          <StatCard label="ATIVAS · TOTAL"      value="45" sub="12 esta semana" iconColor="blue"   icon={<Icons.Activity size={14}/>}/>
+          <StatCard label="ATRASADAS"           value="8"  sub="requer ação imediata" iconColor="red" icon={<Icons.Warning size={14}/>} critical/>
+        </div>
+
+        {/* Critical alert */}
+        <div style={{ marginBottom: 32 }}>
+          <AlertCritical
+            title="8 tarefas em atraso"
+            items={[
+              { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'Enviar proposta para TR PAULO', source: 'ZARK · Tarefas', meta: '3 dias' },
+              { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'CHAMANDO O HEXA!', source: 'VIPCAR · Acompanhamento', meta: '3 dias' },
+            ]}
+            footer="+ 6 outras tarefas atrasadas"
+          />
+        </div>
+
+        {/* Pipeline funnel */}
+        <Panel title="Funil de Vendas" kicker="Pipeline · maio">
+          <Funnel stages={[
+            { label: 'Novo',         count: 0, color: '#3b82f6',          percent: 0 },
+            { label: 'Qualificando', count: 4, color: '#7c3aed',          percent: 36 },
+            { label: 'Reunião',      count: 1, color: 'var(--ember-500)', percent: 18 },
+            { label: 'Proposta',     count: 0, color: '#06b6d4',          percent: 0 },
+            { label: 'Won',          count: 0, color: 'var(--success-500)', percent: 0 },
+            { label: 'Perdido',      count: 0, color: 'var(--ink-300)',   percent: 0 },
+          ]}/>
+        </Panel>
+
+        <div style={{ height: 24 }}/>
+
+        {/* Filter chips + Kanban */}
+        <Chips
+          value={filter}
+          onChange={setFilter}
+          items={[
+            { value: 'todas',    label: 'TODAS',     count: 7 },
+            { value: 'urgentes', label: 'URGENTES',  count: 4 },
+            { value: 'paradas',  label: 'PARADAS',   count: 5 },
+          ]}
+        />
+
+        <div style={{ height: 16 }}/>
+
+        <KanbanBoard>
+          <KanbanColumn title="A FAZER" count={3} dotColor="#9a6500" onAddClick={() => alert('Nova tarefa')}>
+            <LeadCard
+              hot
+              name="Tiffany Dias"
+              status={<TagDot kind="status" value="paused">PARADO</TagDot>}
+              channels={<><Icons.Bell size={12}/><Icons.Globe size={12}/></>}
+              time="5d"
+              indicator="Indicado por Karol"
+              paused
+            />
+          </KanbanColumn>
+
+          <KanbanColumn title="EM PROGRESSO" count={1} dotColor="var(--ember-500)" onAddClick={() => {}}>
+            <LeadCard
+              hot
+              name="Paulo Turismo"
+              company="TR PAULO"
+              status={<TagDot kind="status" value="paused">PARADO</TagDot>}
+              channels={<Icons.Bell size={12}/>}
+              time="5d"
+              followUp="Follow-up: 27/04/2026"
+              indicator="Indicado por Gustavo"
+              paused
+            />
+          </KanbanColumn>
+
+          <KanbanColumn title="EM REVISÃO" count={0} dotColor="var(--info-500)" onAddClick={() => {}}>
+            <EmptyState text="Arraste tarefas aqui" style={{ minHeight: 120 }}/>
+          </KanbanColumn>
+        </KanbanBoard>
+
+        <div style={{ height: 32 }}/>
+
+        {/* Inputs / settings demo */}
+        <Panel title="Inputs & controles">
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 16 }}>
+            <Input size="sm" placeholder="Buscar tarefas..." icon={<Icons.Search size={14}/>} suffix={<Kbd>⌘K</Kbd>}/>
+            <Toggle on={stealth} onChange={setStealth}/>
+            <span style={{ fontSize: 'var(--fs-md)', color: 'var(--ink-600)' }}>Modo stealth</span>
+            <Tag tone="ember" size="sm">NEW</Tag>
+          </div>
+
+          <div style={{ display: 'flex', gap: 8 }}>
+            <Button variant="primary"   icon={<Icons.Plus size={14}/>}>Novo Lead</Button>
+            <Button variant="secondary" icon={<Icons.Filter size={14}/>}>Filtrar</Button>
+            <Button variant="soft"      icon={<Icons.Sparkles size={14}/>}>Try with AI</Button>
+            <Button variant="ghost"     icon={<Icons.Help size={14}/>}>Help</Button>
+          </div>
+
+          <Spec label="Heights" value="22 / 28 / 32 / 40 px"/>
+          <Spec label="Primary fill" value="ember-600 → ember-700 hover"/>
+        </Panel>
+
+        <div style={{ height: 32 }}/>
+
+        {/* Toast */}
+        <Toast tone="default" icon={<img src={iconZark} alt="ZARK" style={{ height: 14, filter: 'brightness(0) invert(1)' }}/>}>
+          Welcome to ZARK!
+        </Toast>
+
+        {/* Modal */}
+        <Modal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          title="Vamos começar"
+          description="Complete essas ações pra ganhar créditos bônus."
+          footer={
+            <>
+              <Button variant="ghost" onClick={() => setModalOpen(false)}>Cancelar</Button>
+              <Button variant="primary" onClick={() => setModalOpen(false)}>Continuar</Button>
+            </>
+          }
+        >
+          <p style={{ margin: 0, color: 'var(--ink-500)' }}>Conteúdo do modal aqui.</p>
+        </Modal>
+
+      </main>
+    </div>
+  );
+}

package/templates/jsx/components/AlertCritical.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+/**
+ * AlertCritical — banner pleno vermelho pra ação imediata
+ * Padrão derivado do "8 TAREFAS EM ATRASO" do dashboard.
+ *
+ * @param title    string ou ReactNode (renderizado no header)
+ * @param items    [{ tag, label, source, meta }]
+ * @param footer   string (ex: "+ 4 outras tarefas atrasadas")
+ * @param icon     opcional — default usa um ⚠
+ */
+export function AlertCritical({ title, items = [], footer, icon, onItemClick }) {
+  return (
+    <div className="alert-critical">
+      <div className="alert-critical-head">
+        {icon || (
+          <svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 2L1 15h16L9 2zM9 7v4M9 13v0.5"/>
+          </svg>
+        )}
+        {title}
+      </div>
+      <div className="alert-critical-list">
+        {items.map((it, i) => (
+          <div
+            key={i}
+            className="alert-critical-row"
+            onClick={() => onItemClick?.(it, i)}
+            style={onItemClick ? { cursor: 'pointer' } : undefined}
+          >
+            {it.tag}
+            <span style={{ fontWeight: 500 }}>{it.label}</span>
+            <span className="src">{it.source}</span>
+            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{it.meta}</span>
+          </div>
+        ))}
+      </div>
+      {footer && <div className="alert-critical-foot">{footer}</div>}
+    </div>
+  );
+}
+
+export default AlertCritical;

package/templates/jsx/components/Avatar.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * Avatar — circle (default) ou square (square=true)
+ *
+ * @param name    string — primeira letra é renderizada
+ * @param size    number (px)  default 24
+ * @param color   CSS color    default --ember-500
+ * @param square  boolean — usa raio --r-sm em vez de 50%
+ * @param src     string — se passada, renderiza <img>
+ */
+export function Avatar({ name, size = 24, color = 'var(--ember-500)', square = false, src, className = '', ...rest }) {
+  const cls = ['avatar', square && 'avatar-sq', className].filter(Boolean).join(' ');
+  const style = {
+    width: size,
+    height: size,
+    background: color,
+    fontSize: Math.round(size * 0.42),
+    ...rest.style,
+  };
+
+  if (src) {
+    return <img src={src} alt={name || ''} className={cls} style={{ ...style, objectFit: 'cover' }}/>;
+  }
+  return <span className={cls} style={style}>{(name || '?').charAt(0).toUpperCase()}</span>;
+}
+
+/**
+ * AvatarSpace — square avatar com cor fixa por espaço/cliente
+ * @param spaceKey  'zark' | 'allsec' | 'vipcar' | 'limppe' | 'gerais' | 'mixshop' | 'vipseg'
+ */
+export function AvatarSpace({ name, spaceKey = 'zark', size = 24 }) {
+  const color = `var(--space-${spaceKey})`;
+  return (
+    <span className="av-space" style={{ background: color, width: size, height: size, fontSize: Math.round(size * 0.46) }}>
+      {(name || spaceKey).charAt(0).toUpperCase()}
+    </span>
+  );
+}
+
+export default Avatar;

package/templates/jsx/components/Badge.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ * Badge — small notification counter
+ * @param tone  'ember' (default) | 'ink'
+ */
+export function Badge({ count, tone = 'ember', className = '', ...rest }) {
+  const cls = ['badge', tone === 'ink' && 'badge-ink', className].filter(Boolean).join(' ');
+  return <span className={cls} {...rest}>{count}</span>;
+}
+
+export default Badge;