@zaip-ai/cli 0.1.0 → 1.0.2

package/templates/.zaip-aios/design/apps/catalog/src/pages/DesignSystemPage.tsx

@@ -0,0 +1,185 @@
+import { PageIntro, Section } from "../components/CatalogShell.js";
+import { Badge, Button, Card, Field } from "../components/Primitives.js";
+
+const primaryColors = [
+  ["Primary", "#00B0F0", "Ação, foco e identidade"],
+  ["Primary strong", "#018abb", "Hover e ênfase reforçada"],
+  ["Primary ink", "#006b91", "Texto e ícones sobre fundos claros"],
+] as const;
+
+const secondaryColors = [
+  ["Secondary", "#0a0e17", "Navy profundo da identidade"],
+  ["Secondary surface", "#111827", "Superfície elevada no tema escuro"],
+  ["Secondary muted", "#334155", "Apoio visual de menor contraste"],
+] as const;
+
+const neutralColors = [
+  ["Text primary", "#0f172a", "--zaip-ink"],
+  ["Text secondary", "#475569", "--zaip-copy"],
+  ["Text muted", "#94a3b8", "--zaip-muted"],
+  ["Border", "#e2e8f0", "--zaip-border"],
+  ["Surface muted", "#f8fafc", "--zaip-surface-muted"],
+  ["Canvas", "#f5f7fb", "--zaip-bg"],
+  ["White", "#ffffff", "--zaip-surface"],
+] as const;
+
+const semanticColors = [
+  ["Success", "#16a34a", "Operação concluída", "success"],
+  ["Warning", "#d97706", "Atenção ou revisão", "warning"],
+  ["Danger", "#dc2626", "Erro ou ação destrutiva", "danger"],
+] as const;
+
+function ColorGrid({ colors }: { colors: ReadonlyArray<readonly [string, string, string]> }) {
+  return (
+    <div className="swatch-grid">
+      {colors.map(([name, value, usage]) => (
+        <article className="swatch" key={name}>
+          <div style={{ background: value }} />
+          <strong>{name}</strong>
+          <code>{value}</code>
+          <small>{usage}</small>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+export function DesignSystemPage() {
+  return (
+    <>
+      <PageIntro
+        eyebrow="Fundação visual"
+        title="Design system"
+        description="Tokens, linguagem e decisões visuais compartilhadas pelas interfaces do repositório. Cada amostra abaixo aplica o contrato central em uma superfície real."
+      />
+      <Section
+        title="Cores primárias"
+        description="O ciano é a assinatura ZAIP e fica reservado para identidade, foco e ações prioritárias."
+      >
+        <ColorGrid colors={primaryColors} />
+      </Section>
+      <Section
+        title="Cores secundárias"
+        description="A família navy cria profundidade e sustenta superfícies escuras sem competir com o ciano."
+      >
+        <ColorGrid colors={secondaryColors} />
+      </Section>
+      <Section
+        title="Neutras"
+        description="A escala neutra organiza texto, bordas e superfícies com contraste previsível."
+      >
+        <ColorGrid colors={neutralColors} />
+      </Section>
+      <Section
+        title="Cores semânticas"
+        description="Success, warning e danger comunicam estado; elas não substituem as cores da marca."
+      >
+        <div className="semantic-grid">
+          {semanticColors.map(([name, value, usage, tone]) => (
+            <article className={`semantic-card semantic-${tone}`} key={name}>
+              <span className="semantic-dot" style={{ background: value }} aria-hidden="true" />
+              <div>
+                <strong>{name}</strong>
+                <p>{usage}</p>
+                <code>{value}</code>
+              </div>
+            </article>
+          ))}
+        </div>
+      </Section>
+      <Section
+        title="Tipografia"
+        description="Hierarquia compacta para produto e escala expressiva para superfícies públicas."
+      >
+        <Card>
+          <div className="type-sample type-display">
+            <span>Display</span>Agentes que entregam com evidência.
+          </div>
+          <div className="type-sample type-heading">
+            <span>Heading</span>Clareza antes de complexidade
+          </div>
+          <div className="type-sample type-body">
+            <span>Body</span>Uma linguagem visual consistente reduz decisões repetidas e ajuda
+            agentes e pessoas a reutilizarem o caminho certo.
+          </div>
+        </Card>
+      </Section>
+      <Section
+        title="Superfícies e ações"
+        description="Tokens precisam aparecer em componentes reais, não apenas em tabelas de cores."
+      >
+        <div className="two-column">
+          <Card accent>
+            <Badge tone="accent">Contrato ativo</Badge>
+            <h3>Uma fonte canônica</h3>
+            <p>O DESIGN.md orienta intenção; tokens e stories mantêm a documentação executável.</p>
+            <div className="row">
+              <Button>Executar agora</Button>
+              <Button variant="secondary">Ver detalhes</Button>
+            </div>
+          </Card>
+          <Card>
+            <Field
+              label="Nome do fluxo"
+              hint="Use um nome curto e orientado ao resultado."
+              defaultValue="Onboarding autônomo"
+            />
+            <div className="row">
+              <Badge tone="success">Pronto</Badge>
+              <Badge tone="warning">Revisão</Badge>
+              <Badge tone="error">Falhou</Badge>
+            </div>
+          </Card>
+        </div>
+      </Section>
+      <Section
+        title="Dark mode na prática"
+        description="O tema troca canvas, superfícies, texto e bordas, preservando o ciano como foco e ação. Use o controle no topo para aplicar o tema à página inteira."
+      >
+        <div className="dark-specimen">
+          <div className="dark-specimen-copy">
+            <Badge tone="accent">Tema escuro</Badge>
+            <p className="eyebrow">Automação ativa</p>
+            <h3>Decisões claras, mesmo com menos luz.</h3>
+            <p>
+              Superfícies navy reduzem brilho, enquanto texto, bordas e estados preservam contraste
+              e hierarquia.
+            </p>
+            <div className="row">
+              <Button>Executar agora</Button>
+              <Button variant="secondary">Ver detalhes</Button>
+            </div>
+          </div>
+          <div className="dark-metric-card">
+            <span className="metric-label">Execuções saudáveis</span>
+            <strong>98,7%</strong>
+            <div className="dark-status-row">
+              <Badge tone="success">Pronto</Badge>
+              <Badge tone="warning">Revisão</Badge>
+              <Badge tone="error">Falhou</Badge>
+            </div>
+          </div>
+        </div>
+      </Section>
+      <Section
+        title="Escala"
+        description="Espaçamento e raios previsíveis evitam microdecisões a cada tela."
+      >
+        <div className="scale-grid">
+          {["4", "8", "16", "24", "40", "64"].map((value) => (
+            <div key={value}>
+              <span style={{ width: `${value}px` }} />
+              <code>{value}px</code>
+            </div>
+          ))}
+          {["8", "16", "24", "999"].map((value) => (
+            <div key={`r-${value}`}>
+              <i style={{ borderRadius: `${value}px` }} />
+              <code>radius {value}px</code>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </>
+  );
+}

package/templates/.zaip-aios/design/apps/catalog/src/stories/Components.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentsPage } from "../pages/ComponentsPage.js";
+
+const meta = {
+  title: "ZAIP/Components",
+  component: ComponentsPage,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof ComponentsPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Catalog: Story = {};

package/templates/.zaip-aios/design/apps/catalog/src/stories/DesignSystem.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DesignSystemPage } from "../pages/DesignSystemPage.js";
+
+const meta = {
+  title: "ZAIP/Design System",
+  component: DesignSystemPage,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof DesignSystemPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Overview: Story = {};

package/templates/.zaip-aios/design/apps/catalog/src/styles/catalog.css

@@ -0,0 +1,315 @@
+.catalog-shell {
+  min-height: 100vh;
+  background: var(--surface-muted);
+  color: var(--text);
+  transition:
+    background 180ms ease,
+    color 180ms ease;
+}
+.topbar {
+  position: sticky;
+  z-index: 20;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 72px;
+  padding: 0 5vw;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(10, 14, 23, 0.94);
+  color: #f1f5f9;
+  backdrop-filter: blur(18px);
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: inherit;
+  text-decoration: none;
+}
+.brand-logo {
+  display: block;
+  width: 84px;
+  height: 40px;
+  object-fit: contain;
+}
+.brand-product {
+  padding-left: 12px;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  color: #f1f5f9;
+  font-size: 0.84rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.topbar nav {
+  display: flex;
+  gap: 8px;
+}
+.topbar nav a {
+  border-radius: 999px;
+  padding: 9px 14px;
+  color: #94a3b8;
+  text-decoration: none;
+}
+.topbar nav a:hover,
+.topbar nav a[aria-current="page"] {
+  background: rgba(0, 176, 240, 0.12);
+  color: #00b0f0;
+}
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 999px;
+  padding: 8px 13px;
+  background: rgba(255, 255, 255, 0.06);
+  color: #f1f5f9;
+  font-size: 0.78rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.theme-toggle:hover {
+  border-color: rgba(0, 176, 240, 0.55);
+  background: rgba(0, 176, 240, 0.1);
+}
+
+main {
+  width: min(1180px, 90vw);
+  margin: 0 auto;
+  padding-bottom: 80px;
+}
+.page-intro {
+  padding: clamp(72px, 10vw, 128px) 0 56px;
+}
+.eyebrow,
+.metric-label {
+  margin: 0;
+  color: #006b91;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+h1,
+h2,
+h3,
+p {
+  overflow-wrap: anywhere;
+}
+h1 {
+  max-width: 900px;
+  margin: 12px 0 0;
+  font-size: clamp(2.5rem, 6vw, 4.25rem);
+  line-height: 1.05;
+  letter-spacing: -0.05em;
+}
+.lede {
+  max-width: 760px;
+  margin: 24px 0 0;
+  color: #526176;
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
+  line-height: 1.7;
+}
+.catalog-section {
+  padding: 48px 0;
+  border-top: 1px solid #dbe4ef;
+}
+.section-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(260px, 1fr);
+  gap: 32px;
+  margin-bottom: 28px;
+}
+.section-heading h2 {
+  margin: 0;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  line-height: 1.15;
+  letter-spacing: -0.035em;
+}
+.section-heading p {
+  margin: 4px 0 0;
+  color: #526176;
+  line-height: 1.65;
+}
+
+.swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+}
+.swatch {
+  overflow: hidden;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+}
+.swatch > div {
+  height: 118px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.swatch strong,
+.swatch code,
+.swatch small {
+  display: block;
+  margin-inline: 18px;
+}
+.swatch strong {
+  margin-top: 16px;
+}
+.swatch code {
+  margin-top: 4px;
+  color: #006b91;
+}
+.swatch small {
+  margin-top: 8px;
+  margin-bottom: 18px;
+  color: #526176;
+}
+.type-sample {
+  padding: 24px 0;
+  border-bottom: 1px solid #dbe4ef;
+}
+.type-sample:last-child {
+  border: 0;
+}
+.type-sample span {
+  display: block;
+  margin-bottom: 12px;
+  color: #006b91;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.type-display {
+  font-size: clamp(2.2rem, 5vw, 4rem);
+  font-weight: 650;
+  line-height: 1.05;
+  letter-spacing: -0.05em;
+}
+.type-heading {
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 650;
+  line-height: 1.15;
+  letter-spacing: -0.035em;
+}
+.type-body {
+  max-width: 720px;
+  font-size: 1rem;
+  line-height: 1.65;
+}
+.two-column,
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+.row,
+.specimen-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+.specimen-row:first-child {
+  margin-top: 0;
+}
+.scale-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+.scale-grid div {
+  display: grid;
+  min-height: 112px;
+  align-content: center;
+  justify-items: center;
+  gap: 12px;
+  border: 1px solid #dbe4ef;
+  border-radius: 16px;
+  background: #ffffff;
+}
+.scale-grid span {
+  display: block;
+  height: 20px;
+  min-width: 4px;
+  background: #00b0f0;
+}
+.scale-grid i {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #00b0f0;
+}
+.scale-grid code {
+  color: #526176;
+  font-size: 0.72rem;
+}
+footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 28px 5vw;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  background: #0a0e17;
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+
+@media (max-width: 760px) {
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+    padding-block: 14px;
+  }
+  .topbar nav {
+    width: 100%;
+  }
+  .topbar-actions {
+    width: 100%;
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .topbar nav a {
+    flex: 1;
+    text-align: center;
+  }
+  main {
+    width: min(100% - 32px, 1180px);
+  }
+  .section-heading,
+  .two-column,
+  .form-grid,
+  .dark-specimen {
+    grid-template-columns: 1fr;
+  }
+  .semantic-grid,
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .scale-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  footer {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .semantic-grid,
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+  .scale-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}