zark-design 3.0.1 → 3.0.3

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.1",
+  "version": "3.0.3",
   "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>