zark-design 3.0.2 → 3.0.4

package/bin/cli.js

@@ -347,6 +347,9 @@ async function runInit(args) {
   ctx.nameDesc = ctx.preset === 'zark'
     ? 'Sistema de design para apps e sistemas internos da ZARK'
     : `Sistema de design para apps e sistemas do(a) **${ctx.name}**`;
+  ctx.slugUpper = (ctx.slug || ctx.name).toUpperCase().replace(/[^A-Z0-9_]/g, '_');
+  // Logos: preset traz PNGs reais; custom gera SVGs placeholder dinâmicos
+  ctx.logoExt = ctx.preset ? 'png' : 'svg';
 
   console.log(c.dim('  Contexto:'));
   console.log(c.dim(`    Nome:    ${ctx.name} (slug: ${ctx.slug})`));
@@ -382,10 +385,23 @@ async function runInit(args) {
     // Preset traz assets prontos
     await copyDir(path.join(PRESETS_DIR, ctx.preset, 'assets'), path.join(target, 'assets'), ctx, copyOpts);
   } else {
-    // Custom: pasta vazia + README instrutivo
+    // Custom: SVG placeholders (showcase renderiza bonito até você substituir) + README instrutivo
     const assetsReadme = renderTemplate(await fs.readFile(path.join(SHARED_DIR, 'ASSETS-README.md.hbs'), 'utf-8'), ctx);
     await fs.writeFile(path.join(target, 'assets/README.md'), assetsReadme);
     written.push('assets/README.md (pasta pra você colar seus logos)');
+    // SVG placeholders dinâmicos com a cor de marca aplicada
+    const phLogo = renderTemplate(
+      await fs.readFile(path.join(SHARED_DIR, 'placeholder-assets/logo-primary.svg'), 'utf-8'),
+      ctx
+    ).replace(/var\(--brand-500, #888\)/g, ctx.brand['500']);
+    const phIcon = renderTemplate(
+      await fs.readFile(path.join(SHARED_DIR, 'placeholder-assets/icon.svg'), 'utf-8'),
+      ctx
+    ).replace(/var\(--brand-500, #888\)/g, ctx.brand['500'])
+     .replace(/>L</, `>${ctx.name.charAt(0).toUpperCase()}<`);
+    await fs.writeFile(path.join(target, 'assets/logo-primary.svg'), phLogo);
+    await fs.writeFile(path.join(target, 'assets/icon.svg'), phIcon);
+    written.push('assets/logo-primary.svg (placeholder com cor de marca)', 'assets/icon.svg (placeholder)');
   }
 
   // Log

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zark-design",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Design system scaffolder seguindo método ZARK — `npx zark-design init` em modo preset (ZARK pronto) ou custom (cor e logos suas, paleta 50→900 gerada). HTML + JSX side-by-side. Dark mode nativo. Sem dependência runtime.",
   "type": "module",
   "bin": {

package/templates/_shared/placeholder-assets/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="12" fill="var(--brand-500, #888)"/>
+  <text x="32" y="42" text-anchor="middle" font-family="system-ui, sans-serif"
+        font-size="28" font-weight="800" fill="#fff">L</text>
+</svg>

package/templates/_shared/placeholder-assets/logo-primary.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 40" width="180" height="40">
+  <rect width="180" height="40" rx="6" fill="var(--brand-500, #888)"/>
+  <text x="90" y="26" text-anchor="middle" font-family="system-ui, sans-serif"
+        font-size="14" font-weight="700" fill="#fff" letter-spacing="0.5">LOGO</text>
+</svg>

package/templates/html/index.html.hbs

@@ -18,7 +18,7 @@
   <!-- SIDEBAR -->
   <aside class="zk-sidebar">
     <div class="zk-sidebar-brand">
-      <img src="assets/logo-primary.png" alt="{{name}}" class="zk-sidebar-logo"/>
+      <img src="assets/logo-primary.{{logoExt}}" alt="{{name}}" class="zk-sidebar-logo"/>
     </div>
 
     <div class="zk-sidebar-eyebrow">Workspace</div>

package/templates/html/showcase.html.hbs

@@ -12,9 +12,35 @@
 <link rel="stylesheet" href="components.css"/>
 <style>
 /* ============================================================
-   SHOWCASE — page-specific styles (sidebar, topbar, sections)
+   SHOWCASE — page-specific styles (BASE + app shell + sections)
    Os tokens e componentes vêm de tokens.css + components.css.
    ============================================================ */
+* { 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(--brand-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);} }
+
+/* ============================================================
+   APP SHELL
+   ============================================================ */
+.app {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  min-height: 100vh;
+}
 
 /* ---------- SIDEBAR ---------- */
 .sidebar {
@@ -307,7 +333,7 @@ main { background: var(--paper); }
 .tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
 .tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
 .tag-square { border-radius: var(--r-xs); }
-.tag-brand   { background: var(--brand-50);   color: var(--brand-700); }
+.tag-ember   { background: var(--brand-50);   color: var(--brand-700); }
 .tag-mono    { background: var(--tag-bg);     color: var(--tag-fg); }
 .tag-success { background: var(--success-50); color: var(--success-700); }
 .tag-warning { background: var(--warning-50); color: var(--warning-700); }
@@ -1207,7 +1233,7 @@ main { background: var(--paper); }
   <!-- =================== SIDEBAR =================== -->
   <aside class="sidebar">
     <div class="sidebar-brand">
-      <img src="assets/logo-primary.png" alt="{{name}}" class="sidebar-logo"/>
+      <img src="assets/logo-primary.{{logoExt}}" alt="{{name}}" class="sidebar-logo"/>
     </div>
 
     <div class="sidebar-eyebrow">Foundations</div>
@@ -1798,7 +1824,7 @@ main { background: var(--paper); }
                 <div class="row">
                   <div style="display:flex; align-items:center; gap:8px">
                     <span class="avatar" style="width:22px; height:22px; font-size:10px">M</span>
-                    <span style="font-size:var(--fs-sm); color:var(--ink-500); font-family:var(--font-mono)">mayconjordanr@gmail.com</span>
+                    <span style="font-size:var(--fs-sm); color:var(--ink-500); font-family:var(--font-mono)">user@exemplo.com</span>
                   </div>
                 </div>
               </div>
@@ -1850,7 +1876,7 @@ main { background: var(--paper); }
               <div class="demo-sidebar">
                 <div class="ds-side">
                   <div style="padding:8px 10px 16px">
-                    <img src="assets/logo-primary.png" alt="{{name}}" style="height:18px; display:block"/>
+                    <img src="assets/logo-primary.{{logoExt}}" alt="{{name}}" style="height:18px; display:block"/>
                   </div>
                   <div style="padding:0 4px 8px">
                     <label class="input input-sm">
@@ -1906,7 +1932,7 @@ main { background: var(--paper); }
 
                   <div style="display:flex; align-items:center; gap:8px; padding:8px 10px">
                     <span class="avatar avatar-sq" style="width:22px; height:22px; font-size:10px">M</span>
-                    <span style="font-size:var(--fs-xs); color:var(--ink-500); font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap">maycon@zark.app</span>
+                    <span style="font-size:var(--fs-xs); color:var(--ink-500); font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap">contato@exemplo.com</span>
                   </div>
                 </div>
 
@@ -2299,7 +2325,7 @@ main { background: var(--paper); }
               <div class="row">
                 <div class="toast">
                   Welcome to {{name}}!
-                  <img src="assets/icon.png" alt="{{name}}" style="height:14px; width:auto; display:block; filter:brightness(0) invert(1)"/>
+                  <img src="assets/icon.{{logoExt}}" alt="{{name}}" style="height:14px; width:auto; display:block; filter:brightness(0) invert(1)"/>
                 </div>
 
                 <div class="toast toast-success">
@@ -3073,7 +3099,7 @@ main { background: var(--paper); }
           <div style="height:80px"></div>
 
           <div style="text-align:center; padding:48px 0; border-top:1px solid var(--line-200)">
-            <img src="assets/logo-primary.png" alt="{{name}}" style="height:48px; display:inline-block"/>
+            <img src="assets/logo-primary.{{logoExt}}" alt="{{name}}" style="height:48px; display:inline-block"/>
             <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>
           </div>
         </div>

package/templates/jsx/App.example.jsx.hbs

@@ -40,8 +40,8 @@ import {
   Icons,
 } from './index';
 
-import logoZark from './assets/logo-primary.png';
-import iconZark from './assets/icon.png';
+import logoZark from './assets/logo-primary.{{logoExt}}';
+import iconZark from './assets/icon.{{logoExt}}';
 
 export default function App() {
   const [tab, setTab] = useState('hoje');