create-sdd-ai-stack 0.1.17

package/template/next/src/app/globals.css

@@ -0,0 +1,437 @@
+@import "tailwindcss";
+
+/* ═══════════════════════════════════════════════════════════════
+   EXECUTIVE ENGINEERING — DESIGN TOKENS
+   Lei: SDD/DESIGN.md. NUNCA edite token fora daqui.
+   ═══════════════════════════════════════════════════════════════ */
+
+@theme {
+  /* ── Superfícies ── */
+  --color-surface: #111319;
+  --color-surface-base: #0a0d12;
+  --color-surface-raised: #11151c;
+  --color-surface-overlay: #181e27;
+  --color-surface-container-low: #191c21;
+  --color-surface-container: #1d2025;
+  --color-surface-container-high: #272a30;
+  --color-surface-container-highest: #32353b;
+  --color-surface-bright: #36393f;
+
+  /* ── Texto ── */
+  --color-on-surface: #e1e2ea;
+  --color-text-primary: #f4f1ea;
+  --color-text-secondary: #94a3b8;
+  --color-text-muted: #56657a;
+
+  /* ── Bordas ── */
+  --color-border-subtle: #1e2633;
+  --color-border-prominent: #2d384b;
+  --color-outline: #8d937b;
+  --color-outline-variant: #434935;
+
+  /* ── Acentos ── */
+  --color-primary: #baf336;
+  --color-primary-dim: #a1d811;
+  --color-on-primary: #0a0d12;
+  --color-primary-container: #b4f230;
+  --color-on-primary-container: #253600;
+  --color-secondary: #45dfa4;
+  --color-secondary-dim: #34d399;
+  --color-on-secondary: #003825;
+  --color-secondary-container: #00bd85;
+  --color-on-secondary-container: #00452e;
+  --color-tertiary: #9cc5fd;
+  --color-on-tertiary: #003257;
+  --color-tertiary-container: #cce2ff;
+  --color-on-tertiary-container: #306698;
+  --color-error: #ffb4ab;
+  --color-on-error: #690005;
+  --color-error-container: #93000a;
+  --color-on-error-container: #ffdad6;
+
+  /* ── Glows ── */
+  --kpi-accent-glow: rgba(186, 243, 54, 0.12);
+  --mint-accent-glow: rgba(52, 211, 153, 0.12);
+
+  /* ── Tipografia: famílias ── */
+  --font-sans: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
+  --font-editorial: var(--font-playfair), ui-serif, Georgia, serif;
+
+  /* ── Tipografia: escala ── */
+  --text-display-hero: 64px;
+  --text-display-hero--line-height: 72px;
+  --text-display-hero--letter-spacing: -0.035em;
+  --text-display-hero--font-weight: 800;
+
+  --text-display-hero-mobile: 38px;
+  --text-display-hero-mobile--line-height: 44px;
+  --text-display-hero-mobile--letter-spacing: -0.025em;
+  --text-display-hero-mobile--font-weight: 800;
+
+  --text-metric-stat: 48px;
+  --text-metric-stat--line-height: 52px;
+  --text-metric-stat--letter-spacing: -0.03em;
+  --text-metric-stat--font-weight: 700;
+
+  --text-metric-stat-mobile: 32px;
+  --text-metric-stat-mobile--line-height: 36px;
+  --text-metric-stat-mobile--letter-spacing: -0.02em;
+  --text-metric-stat-mobile--font-weight: 700;
+
+  --text-headline-lg: 32px;
+  --text-headline-lg--line-height: 40px;
+  --text-headline-lg--letter-spacing: -0.02em;
+  --text-headline-lg--font-weight: 700;
+
+  --text-headline-md: 24px;
+  --text-headline-md--line-height: 32px;
+  --text-headline-md--letter-spacing: -0.015em;
+  --text-headline-md--font-weight: 600;
+
+  --text-headline-sm: 18px;
+  --text-headline-sm--line-height: 26px;
+  --text-headline-sm--letter-spacing: -0.01em;
+  --text-headline-sm--font-weight: 600;
+
+  --text-body-lg: 17px;
+  --text-body-lg--line-height: 28px;
+
+  --text-body-md: 15px;
+  --text-body-md--line-height: 24px;
+
+  --text-body-sm: 13px;
+  --text-body-sm--line-height: 20px;
+
+  --text-editorial-quote: 26px;
+  --text-editorial-quote--line-height: 36px;
+  --text-editorial-quote--letter-spacing: -0.01em;
+  --text-editorial-quote--font-weight: 500;
+
+  --text-code-inline: 13px;
+  --text-code-inline--line-height: 18px;
+  --text-code-inline--letter-spacing: -0.01em;
+  --text-code-inline--font-weight: 500;
+
+  --text-label-mono: 11px;
+  --text-label-mono--line-height: 16px;
+  --text-label-mono--letter-spacing: 0.06em;
+  --text-label-mono--font-weight: 600;
+
+  /* ── Raios ── */
+  --radius-sm: 0.125rem;
+  --radius-DEFAULT: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* ── Espaçamento ── */
+  --spacing-gutter: 1.5rem;
+  --spacing-gutter-desktop: 2rem;
+  --spacing-margin: 1rem;
+  --spacing-margin-tablet: 2rem;
+  --spacing-margin-desktop: 3rem;
+  --spacing-space-xs: 0.25rem;
+  --spacing-space-sm: 0.5rem;
+  --spacing-space-md: 1rem;
+  --spacing-space-lg: 1.5rem;
+  --spacing-space-xl: 2.5rem;
+  --spacing-space-2xl: 4rem;
+  --spacing-space-3xl: 6rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BASE
+   ═══════════════════════════════════════════════════════════════ */
+
+@layer base {
+  * {
+    border-color: var(--color-border-subtle);
+  }
+
+  html {
+    scroll-behavior: smooth;
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--color-surface-base);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    /* Tier 0: micro-dot grid estrutural */
+    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+    background-size: 24px 24px;
+  }
+
+  :focus-visible {
+    outline: 1px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  ::selection {
+    background: rgba(186, 243, 54, 0.25);
+    color: var(--color-text-primary);
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--color-surface-base);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-surface-container-high);
+    border-radius: 9999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border-prominent);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   COMPONENTES (próximo de shadcn — edite aqui, não em componente)
+   ═══════════════════════════════════════════════════════════════ */
+
+@layer components {
+  /* Botões */
+  .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: var(--radius-DEFAULT);
+    background-color: var(--color-primary);
+    color: var(--color-on-primary);
+    font-weight: 600;
+    padding: 0.625rem 1.25rem;
+    transition:
+      background-color 150ms ease,
+      box-shadow 150ms ease,
+      transform 100ms ease;
+  }
+  .btn-primary:hover {
+    background-color: #c8f75a;
+    box-shadow: 0 0 16px rgba(186, 243, 54, 0.3);
+  }
+  .btn-primary:active {
+    transform: scale(0.98);
+  }
+  .btn-primary:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: var(--radius-DEFAULT);
+    border: 1px solid var(--color-border-subtle);
+    background-color: transparent;
+    color: var(--color-text-primary);
+    font-weight: 500;
+    padding: 0.625rem 1.25rem;
+    transition:
+      border-color 150ms ease,
+      background-color 150ms ease;
+  }
+  .btn-secondary:hover {
+    border-color: var(--color-text-secondary);
+    background-color: rgba(255, 255, 255, 0.04);
+  }
+
+  .btn-ghost {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+    padding: 0.375rem 0.5rem;
+    transition: color 150ms ease;
+  }
+  .btn-ghost:hover {
+    color: var(--color-primary);
+  }
+
+  /* Cards */
+  .card {
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border-subtle);
+    background-color: var(--color-surface-raised);
+    padding: 1.25rem;
+    transition:
+      border-color 200ms ease,
+      box-shadow 200ms ease;
+  }
+  .card:hover {
+    border-color: var(--color-border-prominent);
+  }
+
+  .card-metric {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border-subtle);
+    background-color: var(--color-surface-raised);
+    padding: 1.25rem;
+    transition: box-shadow 250ms ease;
+  }
+  .card-metric::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 3rem;
+    height: 3rem;
+    background: radial-gradient(
+      circle at top right,
+      var(--kpi-accent-glow),
+      transparent 70%
+    );
+    opacity: 0;
+    transition: opacity 250ms ease;
+  }
+  .card-metric:hover::after {
+    opacity: 1;
+  }
+
+  /* Chips / badges de taxonomia */
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-subtle);
+    background-color: var(--color-surface-raised);
+    color: var(--color-text-secondary);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 4px 8px;
+    transition:
+      border-color 150ms ease,
+      color 150ms ease;
+  }
+  .chip:hover {
+    border-color: var(--color-border-prominent);
+  }
+  .chip-active {
+    background-color: rgba(186, 243, 54, 0.08);
+    border-color: rgba(186, 243, 54, 0.4);
+    color: var(--color-primary);
+  }
+
+  /* Campos */
+  .field-label {
+    display: block;
+    margin-bottom: 0.375rem;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+  }
+  .field {
+    width: 100%;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border-subtle);
+    background-color: var(--color-surface-base);
+    color: var(--color-text-primary);
+    padding: 0.625rem 0.75rem;
+    font-size: 15px;
+    transition: border-color 150ms ease;
+  }
+  .field::placeholder {
+    color: var(--color-text-muted);
+  }
+  .field:hover {
+    border-color: var(--color-border-prominent);
+  }
+  .field:focus {
+    outline: none;
+    border-color: var(--color-primary);
+  }
+  .field[aria-invalid="true"] {
+    border-color: var(--color-error);
+  }
+
+  /* Label mono / section eyebrow */
+  .label-mono {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+  }
+
+  /* Status dot pulsante */
+  .status-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 9999px;
+    background-color: var(--color-secondary);
+    box-shadow: 0 0 0 0 var(--mint-accent-glow);
+    animation: status-pulse 2s infinite;
+  }
+
+  /* Container de largura máxima */
+  .container-grid {
+    margin-inline: auto;
+    width: 100%;
+    max-width: 1320px;
+    padding-inline: var(--spacing-gutter);
+  }
+  @media (min-width: 1024px) {
+    .container-grid {
+      padding-inline: var(--spacing-gutter-desktop);
+    }
+  }
+}
+
+@layer utilities {
+  @keyframes status-pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--mint-accent-glow);
+    }
+    70% {
+      box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
+    }
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   A11Y — respeitar preferências do usuário
+   ═══════════════════════════════════════════════════════════════ */
+
+/* biome-ignore-start lint/complexity/noImportantStyles: !important é o único jeito de respeitar prefers-reduced-motion sobre transition inline */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* biome-ignore-end lint/complexity/noImportantStyles: fim do bloco prefers-reduced-motion */

package/template/next/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { JetBrains_Mono, Manrope, Playfair_Display } from "next/font/google";
+import "./globals.css";
+
+const manrope = Manrope({
+  subsets: ["latin"],
+  variable: "--font-manrope",
+  display: "swap",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+  display: "swap",
+});
+
+const playfair = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-playfair",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: { default: "[NOME DO APP]", template: "%s | [NOME DO APP]" },
+  description: "[DESCRIÇÃO DE UMA LINHA]",
+  metadataBase: new URL("https://example.com"),
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="pt-BR" data-scroll-behavior="smooth">
+      <body
+        className={`${manrope.variable} ${jetbrainsMono.variable} ${playfair.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/template/next/src/app/not-found.tsx

@@ -0,0 +1,11 @@
+export default function NotFound() {
+  return (
+    <main className="container-grid flex min-h-screen flex-col items-start justify-center py-24">
+      <p className="label-mono">404</p>
+      <h1 className="mt-4 text-headline-lg">Recurso não encontrado.</h1>
+      <a href="/" className="btn-secondary mt-8">
+        Voltar ao início
+      </a>
+    </main>
+  );
+}

package/template/next/src/features/example/actions.ts

@@ -0,0 +1,43 @@
+"use server";
+import { revalidatePath, updateTag } from "next/cache";
+import { z } from "zod";
+import { createExampleUseCases } from "./container";
+import { CreateExampleSchema } from "./domain/example.schema";
+
+export type ExampleActionState = {
+  ok: boolean;
+  errors?: Record<string, string[]>;
+  error?: string;
+};
+
+export async function createExampleAction(
+  _prev: ExampleActionState,
+  formData: FormData,
+): Promise<ExampleActionState> {
+  // 1. AUTENTICAÇÃO (ver SDD/NEXT.md §5)
+  // const user = await requireUser();
+
+  // 2. VALIDAÇÃO — Zod no server é a única fonte de verdade
+  const parsed = CreateExampleSchema.safeParse({
+    title: formData.get("title"),
+    body: formData.get("body"),
+  });
+
+  if (!parsed.success) {
+    return { ok: false, errors: z.flattenError(parsed.error).fieldErrors };
+  }
+
+  try {
+    // 3. MUTAÇÃO via use case
+    const { createExample } = createExampleUseCases();
+    await createExample.execute(parsed.data);
+
+    // 4. CACHE
+    updateTag("examples");
+    revalidatePath("/home");
+
+    return { ok: true };
+  } catch {
+    return { ok: false, error: "Não foi possível criar. Tente novamente." };
+  }
+}

package/template/next/src/features/example/application/create-example.usecase.ts

@@ -0,0 +1,26 @@
+import type { CreateExampleInput } from "../domain/example.schema";
+import type { Example, IExampleRepository } from "../domain/IExampleRepository";
+
+export class AppError extends Error {
+  constructor(
+    message: string,
+    readonly code: string,
+  ) {
+    super(message);
+    this.name = "AppError";
+  }
+}
+
+export class CreateExampleUseCase {
+  constructor(private readonly repo: IExampleRepository) {}
+
+  async execute(input: CreateExampleInput): Promise<Example> {
+    const title = input.title.trim();
+
+    if (title.length < 3) {
+      throw new AppError("Título inválido", "EXAMPLE_INVALID_TITLE");
+    }
+
+    return this.repo.create({ title, body: input.body.trim() });
+  }
+}

package/template/next/src/features/example/container.ts

@@ -0,0 +1,16 @@
+import "server-only";
+import { CreateExampleUseCase } from "./application/create-example.usecase";
+import type { IExampleRepository } from "./domain/IExampleRepository";
+import { InMemoryExampleRepository } from "./infrastructure/example.repository";
+
+export interface IExampleUseCases {
+  createExample: CreateExampleUseCase;
+}
+
+export function createExampleUseCases(
+  repo: IExampleRepository = new InMemoryExampleRepository(),
+): IExampleUseCases {
+  return {
+    createExample: new CreateExampleUseCase(repo),
+  };
+}

package/template/next/src/features/example/domain/IExampleRepository.ts

@@ -0,0 +1,11 @@
+export interface IExampleRepository {
+  create(input: { title: string; body: string }): Promise<Example>;
+  findById(id: string): Promise<Example | null>;
+}
+
+export interface Example {
+  id: string;
+  title: string;
+  body: string;
+  createdAt: Date;
+}

package/template/next/src/features/example/domain/example.schema.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+export const ExampleTitleSchema = z
+  .string()
+  .min(3, "Título precisa ter ao menos 3 caracteres")
+  .max(120, "Título muito longo");
+
+export const ExampleBodySchema = z
+  .string()
+  .min(10, "Conteúdo precisa ter ao menos 10 caracteres")
+  .max(5000, "Conteúdo muito longo");
+
+export const CreateExampleSchema = z.object({
+  title: ExampleTitleSchema,
+  body: ExampleBodySchema,
+});
+
+export type CreateExampleInput = z.infer<typeof CreateExampleSchema>;

package/template/next/src/features/example/infrastructure/example.repository.ts

@@ -0,0 +1,26 @@
+import "server-only";
+import { randomUUID } from "node:crypto";
+import type { Example, IExampleRepository } from "../domain/IExampleRepository";
+
+/**
+ * Adaptador em memória — SUBSTITUA pelo Prisma/Seu DB.
+ * Ver SDD/stacks/database.md. A interface do domínio NÃO muda.
+ */
+export class InMemoryExampleRepository implements IExampleRepository {
+  private readonly store = new Map<string, Example>();
+
+  async create(input: { title: string; body: string }): Promise<Example> {
+    const example: Example = {
+      id: randomUUID(),
+      title: input.title,
+      body: input.body,
+      createdAt: new Date(),
+    };
+    this.store.set(example.id, example);
+    return example;
+  }
+
+  async findById(id: string): Promise<Example | null> {
+    return this.store.get(id) ?? null;
+  }
+}

package/template/next/src/features/example/ui/create-example-form.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
+import { createExampleAction, type ExampleActionState } from "../actions";
+
+const initialState: ExampleActionState = { ok: false };
+
+export function CreateExampleForm() {
+  const [state, formAction] = useActionState(createExampleAction, initialState);
+
+  return (
+    <form action={formAction} className="card flex flex-col gap-4">
+      <div>
+        <label htmlFor="title" className="field-label">
+          Título
+        </label>
+        <input
+          id="title"
+          name="title"
+          className="field"
+          placeholder="Ex: Migração do ledger"
+          aria-invalid={state.errors?.title ? true : undefined}
+          aria-describedby={state.errors?.title ? "title-error" : undefined}
+        />
+        {state.errors?.title ? (
+          <p id="title-error" className="mt-1 text-body-sm text-error">
+            {state.errors.title[0]}
+          </p>
+        ) : null}
+      </div>
+
+      <div>
+        <label htmlFor="body" className="field-label">
+          Conteúdo
+        </label>
+        <textarea id="body" name="body" rows={4} className="field" />
+        {state.errors?.body ? (
+          <p className="mt-1 text-body-sm text-error">{state.errors.body[0]}</p>
+        ) : null}
+      </div>
+
+      {state.error ? <p className="text-body-sm text-error">{state.error}</p> : null}
+
+      <SubmitButton />
+    </form>
+  );
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" className="btn-primary self-start" disabled={pending}>
+      {pending ? "Processando..." : "Criar exemplo"}
+    </button>
+  );
+}