@zaip-ai/cli 1.0.6 → 1.0.7

package/templates/.agents/design/apps/catalog/dist/storybook/index.json

@@ -1 +1 @@
-{"v":5,"entries":{"zaip-components--documentação":{"id":"zaip-components--documentação","title":"ZAIP/Components","name":"Documentação","importPath":"./src/stories/Components.stories.tsx","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"zaip-components--catalog":{"type":"story","subtype":"story","id":"zaip-components--catalog","name":"Catalog","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Catalog"},"zaip-design-system--documentação":{"id":"zaip-design-system--documentação","title":"ZAIP/Design System","name":"Documentação","importPath":"./src/stories/DesignSystem.stories.tsx","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"zaip-design-system--overview":{"type":"story","subtype":"story","id":"zaip-design-system--overview","name":"Overview","title":"ZAIP/Design System","importPath":"./src/stories/DesignSystem.stories.tsx","componentPath":"./src/pages/DesignSystemPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Overview"}}}
+{"v":5,"entries":{"zaip-components--documentação":{"id":"zaip-components--documentação","title":"ZAIP/Components","name":"Documentação","importPath":"./src/stories/Components.stories.tsx","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"zaip-components--catalog":{"type":"story","subtype":"story","id":"zaip-components--catalog","name":"Catalog","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Catalog"},"zaip-components--dialogs-and-popups":{"type":"story","subtype":"story","id":"zaip-components--dialogs-and-popups","name":"Dialogs And Popups","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"DialogsAndPopups"},"zaip-components--cards-and-metrics":{"type":"story","subtype":"story","id":"zaip-components--cards-and-metrics","name":"Cards And Metrics","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"CardsAndMetrics"},"zaip-components--tables":{"type":"story","subtype":"story","id":"zaip-components--tables","name":"Tables","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Tables"},"zaip-components--filters-and-forms":{"type":"story","subtype":"story","id":"zaip-components--filters-and-forms","name":"Filters And Forms","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"FiltersAndForms"},"zaip-components--badges":{"type":"story","subtype":"story","id":"zaip-components--badges","name":"Badges","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Badges"},"zaip-components--charts":{"type":"story","subtype":"story","id":"zaip-components--charts","name":"Charts","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Charts"},"zaip-components--loading-empty-and-error":{"type":"story","subtype":"story","id":"zaip-components--loading-empty-and-error","name":"Loading Empty And Error","title":"ZAIP/Components","importPath":"./src/stories/Components.stories.tsx","componentPath":"./src/pages/ComponentsPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"LoadingEmptyAndError"},"zaip-design-system--documentação":{"id":"zaip-design-system--documentação","title":"ZAIP/Design System","name":"Documentação","importPath":"./src/stories/DesignSystem.stories.tsx","type":"docs","tags":["dev","test","manifest","autodocs"],"storiesImports":[]},"zaip-design-system--overview":{"type":"story","subtype":"story","id":"zaip-design-system--overview","name":"Overview","title":"ZAIP/Design System","importPath":"./src/stories/DesignSystem.stories.tsx","componentPath":"./src/pages/DesignSystemPage.tsx","tags":["dev","test","manifest","autodocs"],"exportName":"Overview"}}}

package/templates/.agents/design/apps/catalog/src/components/Primitives.tsx

@@ -1,15 +1,18 @@
 import type {
-  ButtonHTMLAttributes,
+  ComponentPropsWithRef,
+  CSSProperties,
   InputHTMLAttributes,
   ReactNode,
   SelectHTMLAttributes,
 } from "react";
+import { useEffect, useRef, useState } from "react";
+import { focusDialogTarget, handleDialogKeyboard } from "./dialog-focus.js";
 
 export function Button({
   variant = "primary",
   className = "",
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & {
+}: ComponentPropsWithRef<"button"> & {
   variant?: "primary" | "secondary" | "ghost";
 }) {
   return (
@@ -135,3 +138,166 @@ export function DataTable() {
     </div>
   );
 }
+
+export function FilterForm() {
+  return (
+    <form className="filter-form" onSubmit={(event) => event.preventDefault()}>
+      <SelectField aria-label="Filtrar por status" label="Status" defaultValue="all">
+        <option value="all">Todos os status</option>
+        <option value="executing">Em execução</option>
+        <option value="completed">Concluído</option>
+      </SelectField>
+      <Field label="Buscar trabalho" placeholder="Task, SPEC ou PRD" type="search" />
+      <Button type="submit">Aplicar filtros</Button>
+      <Button type="reset" variant="ghost">
+        Limpar
+      </Button>
+    </form>
+  );
+}
+
+export function ChartPanel() {
+  const values = [34, 56, 43, 78, 62, 91];
+  return (
+    <Card>
+      <div className="chart-heading">
+        <div>
+          <p className="metric-label">Tokens por execução</p>
+          <strong>Últimas 6 execuções</strong>
+        </div>
+        <Badge tone="accent">+12%</Badge>
+      </div>
+      <div
+        aria-label="Gráfico de barras: uso de tokens cresce de 34 para 91 unidades nas últimas seis execuções."
+        className="bar-chart"
+        role="img"
+      >
+        {values.map((value) => (
+          <span
+            aria-hidden="true"
+            className="bar-chart-column"
+            key={`bar-${value}`}
+            style={{ "--bar-size": `${value}%` } as CSSProperties}
+          >
+            <i />
+          </span>
+        ))}
+      </div>
+      <p className="chart-caption">
+        O resumo textual preserva o significado fora da cor e da forma.
+      </p>
+    </Card>
+  );
+}
+
+export function DialogSpecimen() {
+  const [open, setOpen] = useState(false);
+  const opener = useRef<HTMLButtonElement>(null);
+  const dialog = useRef<HTMLElement>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    focusDialogTarget(closeButton.current);
+    const containKeyboardFocus = (event: globalThis.KeyboardEvent) => {
+      const focusables = Array.from(
+        dialog.current?.querySelectorAll<HTMLElement>(
+          'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',
+        ) ?? [],
+      );
+      handleDialogKeyboard(event, focusables, document.activeElement as HTMLElement | null, () =>
+        setOpen(false),
+      );
+    };
+    window.addEventListener("keydown", containKeyboardFocus);
+    return () => {
+      window.removeEventListener("keydown", containKeyboardFocus);
+      focusDialogTarget(opener.current);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <Card>
+        <p className="metric-label">Dialog / popup</p>
+        <h3>Detalhe com foco explícito</h3>
+        <p>Use para decisões focadas, com título, descrição e saída sempre disponíveis.</p>
+        <Button onClick={() => setOpen(true)} ref={opener}>
+          Abrir exemplo
+        </Button>
+      </Card>
+      {open ? (
+        /* biome-ignore lint/a11y/noStaticElementInteractions: the backdrop only detects an outside-pointer dismissal. */
+        <div
+          className="dialog-backdrop"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) setOpen(false);
+          }}
+        >
+          <section
+            aria-describedby="catalog-dialog-description"
+            aria-labelledby="catalog-dialog-title"
+            aria-modal="true"
+            className="dialog-panel"
+            ref={dialog}
+            role="dialog"
+          >
+            <header>
+              <div>
+                <p className="metric-label">Task em verificação</p>
+                <h3 id="catalog-dialog-title">Revisar evidências</h3>
+              </div>
+              <button
+                aria-label="Fechar diálogo"
+                className="dialog-close"
+                onClick={() => setOpen(false)}
+                ref={closeButton}
+                type="button"
+              >
+                ×
+              </button>
+            </header>
+            <p id="catalog-dialog-description">
+              Confirme os artefatos associados antes de concluir a etapa.
+            </p>
+            <footer>
+              <Button onClick={() => setOpen(false)} variant="secondary">
+                Voltar
+              </Button>
+              <Button onClick={() => setOpen(false)}>Confirmar revisão</Button>
+            </footer>
+          </section>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function StateGallery() {
+  return (
+    <div className="state-grid">
+      <Card>
+        <div aria-busy="true" aria-live="polite" className="state-panel">
+          <span aria-hidden="true" className="loading-spinner" />
+          <div>
+            <h3>Carregando projeção</h3>
+            <p>Aguarde enquanto os dados locais são consolidados.</p>
+          </div>
+        </div>
+      </Card>
+      <EmptyState />
+      <Card>
+        <div className="state-panel state-error" role="alert">
+          <span aria-hidden="true" className="state-symbol">
+            !
+          </span>
+          <div>
+            <h3>Não foi possível atualizar</h3>
+            <p>Verifique a sessão e tente novamente sem perder os filtros.</p>
+            <Button variant="secondary">Tentar novamente</Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/.agents/design/apps/catalog/src/components/dialog-focus.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from "vitest";
+import { focusDialogTarget, handleDialogKeyboard } from "./dialog-focus.js";
+
+function target() {
+  return { focus: vi.fn<() => void>() };
+}
+
+function keyboard(key: string, shiftKey = false) {
+  return { key, shiftKey, preventDefault: vi.fn<() => void>() };
+}
+
+describe("dialog focus management", () => {
+  it("enters, cycles in both directions, closes on Escape, and restores the opener", () => {
+    const opener = target();
+    const close = target();
+    const back = target();
+    const confirm = target();
+    const focusables = [close, back, confirm];
+
+    focusDialogTarget(close);
+    expect(close.focus).toHaveBeenCalledOnce();
+
+    const forward = keyboard("Tab");
+    handleDialogKeyboard(forward, focusables, confirm, vi.fn());
+    expect(forward.preventDefault).toHaveBeenCalledOnce();
+    expect(close.focus).toHaveBeenCalledTimes(2);
+
+    const backward = keyboard("Tab", true);
+    handleDialogKeyboard(backward, focusables, close, vi.fn());
+    expect(backward.preventDefault).toHaveBeenCalledOnce();
+    expect(confirm.focus).toHaveBeenCalledOnce();
+
+    const closeDialog = vi.fn();
+    const escapeEvent = keyboard("Escape");
+    handleDialogKeyboard(escapeEvent, focusables, back, closeDialog);
+    expect(escapeEvent.preventDefault).toHaveBeenCalledOnce();
+    expect(closeDialog).toHaveBeenCalledOnce();
+
+    focusDialogTarget(opener);
+    expect(opener.focus).toHaveBeenCalledOnce();
+  });
+});

package/templates/.agents/design/apps/catalog/src/components/dialog-focus.ts

@@ -0,0 +1,38 @@
+export interface FocusTarget {
+  focus(): void;
+}
+
+export interface DialogKeyboardEvent {
+  key: string;
+  shiftKey: boolean;
+  preventDefault(): void;
+}
+
+export function focusDialogTarget(target: FocusTarget | null): void {
+  target?.focus();
+}
+
+export function handleDialogKeyboard(
+  event: DialogKeyboardEvent,
+  focusables: readonly FocusTarget[],
+  activeElement: FocusTarget | null,
+  close: () => void,
+): void {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    close();
+    return;
+  }
+  if (event.key !== "Tab" || focusables.length === 0) return;
+
+  const currentIndex = focusables.indexOf(activeElement as FocusTarget);
+  const targetIndex = event.shiftKey
+    ? currentIndex <= 0
+      ? focusables.length - 1
+      : currentIndex - 1
+    : currentIndex < 0 || currentIndex === focusables.length - 1
+      ? 0
+      : currentIndex + 1;
+  event.preventDefault();
+  focusables[targetIndex]?.focus();
+}

package/templates/.agents/design/apps/catalog/src/design-contract.test.ts

@@ -7,14 +7,19 @@ const designRoot = resolve(import.meta.dirname, "../../..");
 
 describe("design contract", () => {
   it("keeps structured tokens aligned with DESIGN.md frontmatter", async () => {
-    const [markdown, tokensSource, ...styles] = await Promise.all([
-      readFile(resolve(designRoot, "DESIGN.md"), "utf8"),
-      readFile(resolve(designRoot, "tokens.json"), "utf8"),
-      readFile(resolve(import.meta.dirname, "styles.css"), "utf8"),
-      readFile(resolve(import.meta.dirname, "styles/catalog.css"), "utf8"),
-      readFile(resolve(import.meta.dirname, "styles/design-system.css"), "utf8"),
-      readFile(resolve(import.meta.dirname, "styles/components.css"), "utf8"),
-    ]);
+    const [markdown, tokensSource, componentsPage, primitives, stories, app, ...styles] =
+      await Promise.all([
+        readFile(resolve(designRoot, "DESIGN.md"), "utf8"),
+        readFile(resolve(designRoot, "tokens.json"), "utf8"),
+        readFile(resolve(import.meta.dirname, "pages/ComponentsPage.tsx"), "utf8"),
+        readFile(resolve(import.meta.dirname, "components/Primitives.tsx"), "utf8"),
+        readFile(resolve(import.meta.dirname, "stories/Components.stories.tsx"), "utf8"),
+        readFile(resolve(import.meta.dirname, "App.tsx"), "utf8"),
+        readFile(resolve(import.meta.dirname, "styles.css"), "utf8"),
+        readFile(resolve(import.meta.dirname, "styles/catalog.css"), "utf8"),
+        readFile(resolve(import.meta.dirname, "styles/design-system.css"), "utf8"),
+        readFile(resolve(import.meta.dirname, "styles/components.css"), "utf8"),
+      ]);
     const css = styles.join("\n");
     const match = /^---\n([\s\S]+?)\n---/.exec(markdown);
     expect(match?.[1]).toBeDefined();
@@ -23,11 +28,35 @@ describe("design contract", () => {
 
     expect(tokens.colors).toEqual(design.colors);
     expect(tokens.dark).toEqual(design.dark);
+    expect(tokens.effects).toEqual(design.effects);
     expect(tokens.neutral).toEqual(design.neutral);
     expect(tokens.rounded).toEqual(design.rounded);
     expect(tokens.spacing).toEqual(design.spacing);
     for (const value of Object.values(tokens.colors as Record<string, string>)) {
       expect(css.toLowerCase()).toContain(value.toLowerCase());
     }
+    for (const value of Object.values(tokens.effects as Record<string, string>)) {
+      expect(css.replaceAll(" ", "").toLowerCase()).toContain(value.toLowerCase());
+    }
+
+    expect(app).toContain('"components"');
+    expect(app).toContain('"design-system"');
+    expect(app).toContain("window.location.hash");
+    for (const family of [
+      "Dialogs e popups",
+      "Cards e métricas",
+      "Tabelas",
+      "Filtros e formulários",
+      "Badges e ações",
+      "Gráficos",
+      "Carregando, vazio e erro",
+    ]) {
+      expect(componentsPage).toContain(family);
+    }
+    for (const specimen of ["DialogSpecimen", "ChartPanel", "FilterForm", "StateGallery"]) {
+      expect(primitives).toContain(`function ${specimen}`);
+      expect(componentsPage).toContain(`<${specimen}`);
+      expect(stories).toContain(`<${specimen}`);
+    }
   });
 });

package/templates/.agents/design/apps/catalog/src/pages/ComponentsPage.tsx

@@ -3,42 +3,44 @@ import {
   Badge,
   Button,
   Card,
+  ChartPanel,
   DataTable,
-  EmptyState,
+  DialogSpecimen,
   Field,
+  FilterForm,
   Metric,
   SelectField,
+  StateGallery,
 } from "../components/Primitives.js";
 
+const dashboardFamilies = [
+  ["Dialogs e popups", "TaskDetailsDialog, TraceStageDialog", "Foco, contexto e saída explícita"],
+  ["Cards e métricas", "TaskBoard, CostSummary", "Agrupamento, valor, unidade e tendência"],
+  ["Tabelas", "DataTable, CostTables", "Cabeçalhos, densidade e alinhamento numérico"],
+  ["Filtros e formulários", "CostFilters, PricingSettingsDialog", "Labels, ajuda e erro acionável"],
+  ["Badges", "task-origin-badge, status badges", "Estado legível sem depender apenas de cor"],
+  ["Gráficos", "CostCharts", "Título, resumo textual e escala comparável"],
+  ["Estados", "App, TraceabilityWorkspace", "Carregando, vazio e erro recuperável"],
+] as const;
+
 export function ComponentsPage() {
   return (
     <>
       <PageIntro
         eyebrow="Documentação executável"
         title="Components"
-        description="Espécimes básicos para padronizar estados, comportamento e acessibilidade. Componentes de negócio continuam nos módulos do produto."
+        description="Famílias reais do dashboard representadas por espécimes compartilhados com o Storybook. O catálogo documenta o contrato; os componentes de negócio continuam em seus módulos."
       />
       <Section
-        title="Ações e status"
-        description="Hierarquia explícita e feedback que não depende apenas de cor."
+        title="Dialogs e popups"
+        description="Superfícies focadas com nome acessível, contexto, Escape e ação de fechamento."
       >
-        <Card>
-          <div className="specimen-row">
-            <Button>Primário</Button>
-            <Button variant="secondary">Secundário</Button>
-            <Button variant="ghost">Ghost</Button>
-            <Button disabled>Desabilitado</Button>
-          </div>
-          <div className="specimen-row">
-            <Badge tone="accent">Accent</Badge>
-            <Badge tone="success">Sucesso</Badge>
-            <Badge tone="warning">Atenção</Badge>
-            <Badge tone="error">Erro</Badge>
-            <Badge>Neutro</Badge>
-          </div>
-        </Card>
+        <DialogSpecimen />
       </Section>
-      <Section title="Métricas" description="Números tabulares acompanhados de unidade e contexto.">
+      <Section
+        title="Cards e métricas"
+        description="Cards agrupam uma ideia; métricas mantêm unidade, período e comparação."
+      >
         <div className="metric-grid">
           <Metric label="Tokens totais" value="1,28M" change="+8,4% no período" />
           <Metric label="Custo de execução" value="R$ 284" change="62% do custo total" />
@@ -46,9 +48,16 @@ export function ComponentsPage() {
         </div>
       </Section>
       <Section
-        title="Formulários"
-        description="Labels persistentes, ajuda objetiva, foco visível e erro acionável."
+        title="Tabelas"
+        description="Cabeçalhos semânticos, alinhamento numérico e contêiner responsivo."
       >
+        <DataTable />
+      </Section>
+      <Section
+        title="Filtros e formulários"
+        description="Filtros frequentes ficam compactos; edição mantém labels, ajuda e erro acionável."
+      >
+        <FilterForm />
         <Card>
           <div className="form-grid">
             <Field label="Nome" placeholder="Ex.: Checkout B2B" />
@@ -67,16 +76,68 @@ export function ComponentsPage() {
         </Card>
       </Section>
       <Section
-        title="Dados tabulares"
-        description="Cabeçalhos semânticos, alinhamento numérico e leitura responsiva."
+        title="Badges e ações"
+        description="Sinais curtos permanecem legíveis em texto; ações expõem hierarquia e estado."
       >
-        <DataTable />
+        <Card>
+          <div className="specimen-row">
+            <Badge tone="accent">Em execução</Badge>
+            <Badge tone="success">Concluída</Badge>
+            <Badge tone="warning">Em verificação</Badge>
+            <Badge tone="error">Falhou</Badge>
+            <Badge>Planejada</Badge>
+          </div>
+          <div className="specimen-row">
+            <Button>Primário</Button>
+            <Button variant="secondary">Secundário</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button disabled>Desabilitado</Button>
+          </div>
+        </Card>
+      </Section>
+      <Section
+        title="Gráficos"
+        description="Visualizações possuem título descritivo, comparação consistente e alternativa textual."
+      >
+        <ChartPanel />
       </Section>
       <Section
-        title="Estado vazio"
-        description="Explique o estado e ofereça a próxima ação segura."
+        title="Carregando, vazio e erro"
+        description="Estados assíncronos explicam o que ocorre e oferecem recuperação quando possível."
       >
-        <EmptyState />
+        <StateGallery />
+      </Section>
+      <Section
+        title="Mapa para o dashboard"
+        description="Famílias documentadas aqui correspondem a padrões reais, sem acoplar o catálogo ao produto."
+      >
+        <div className="table-wrap">
+          <table>
+            <caption className="sr-only">
+              Famílias de componentes e referências no dashboard
+            </caption>
+            <thead>
+              <tr>
+                <th>Família</th>
+                <th>Referência de produto</th>
+                <th>Contrato</th>
+              </tr>
+            </thead>
+            <tbody>
+              {dashboardFamilies.map(([family, source, contract]) => (
+                <tr key={family}>
+                  <td>
+                    <strong>{family}</strong>
+                  </td>
+                  <td>
+                    <code>{source}</code>
+                  </td>
+                  <td>{contract}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </Section>
     </>
   );

package/templates/.agents/design/apps/catalog/src/stories/Components.stories.tsx

@@ -1,4 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Badge,
+  Card,
+  ChartPanel,
+  DataTable,
+  DialogSpecimen,
+  FilterForm,
+  Metric,
+  StateGallery,
+} from "../components/Primitives.js";
 import { ComponentsPage } from "../pages/ComponentsPage.js";
 
 const meta = {
@@ -10,3 +20,47 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export const Catalog: Story = {};
+
+export const DialogsAndPopups: Story = {
+  render: () => <DialogSpecimen />,
+};
+
+export const CardsAndMetrics: Story = {
+  render: () => (
+    <div className="metric-grid">
+      <Metric label="Tokens totais" value="1,28M" change="+8,4% no período" />
+      <Metric label="Custo" value="R$ 284" change="62% do total" />
+      <Metric label="Assertividade" value="94,2%" change="+3,1 p.p." />
+    </div>
+  ),
+};
+
+export const Tables: Story = {
+  render: () => <DataTable />,
+};
+
+export const FiltersAndForms: Story = {
+  render: () => <FilterForm />,
+};
+
+export const Badges: Story = {
+  render: () => (
+    <Card>
+      <div className="specimen-row">
+        <Badge tone="accent">Em execução</Badge>
+        <Badge tone="success">Concluída</Badge>
+        <Badge tone="warning">Em verificação</Badge>
+        <Badge tone="error">Falhou</Badge>
+        <Badge>Planejada</Badge>
+      </div>
+    </Card>
+  ),
+};
+
+export const Charts: Story = {
+  render: () => <ChartPanel />,
+};
+
+export const LoadingEmptyAndError: Story = {
+  render: () => <StateGallery />,
+};