@softize/opus 12.10.0 → 13.0.0

package/src/ui/docs/registry.tsx

@@ -10,96 +10,94 @@
  * componente ganham o cabeçalho (título + badge de origem + whenToUse) do `meta` central via o
  * helper `comp`; páginas conceituais renderizam o markdown direto (o próprio md traz o H1/lead).
  */
-import { useEffect } from 'react'
-import * as lucideIcons from 'lucide-react'
-import * as opusUi from '../react.tsx'
-import { componentMeta } from '../meta.ts'
-import { navigate } from '../router.ts'
-import { DocPage } from './doc.tsx'
-import { DocMarkdown } from './markdown.tsx'
-import { OpusChangelog } from './changelog.tsx'
+import { useEffect } from "react";
+import * as lucideIcons from "lucide-react";
+import * as opusUi from "../react.tsx";
+import { componentMeta } from "../meta.ts";
+import { navigate } from "../router.ts";
+import { DocPage } from "./doc.tsx";
+import { DocMarkdown } from "./markdown.tsx";
+import { OpusChangelog } from "./changelog.tsx";
 
 // — Conceituais (Começar/Framework/Design/Introdução) —
-import gettingStartedMd from './content/getting-started.md?raw'
-import upgradingMd from './content/upgrading.md?raw'
-import cycleMd from './content/cycle.md?raw'
-import authMd from './content/auth.md?raw'
-import auditMd from './content/audit.md?raw'
-import eventsMd from './content/events.md?raw'
-import logMd from './content/log.md?raw'
-import queueMd from './content/queue.md?raw'
-import schedulerMd from './content/scheduler.md?raw'
-import actionsMd from './content/actions.md?raw'
-import dataMd from './content/data.md?raw'
-import storageMd from './content/storage.md?raw'
-import aiMd from './content/ai.md?raw'
-import mcpMd from './content/mcp.md?raw'
-import testingMd from './content/testing.md?raw'
-import runtimeMd from './content/runtime.md?raw'
-import uiMd from './content/ui.md?raw'
-import cliMd from './content/cli.md?raw'
-import tokensMd from './content/tokens.md?raw'
-import communicationMd from './content/communication.md?raw'
-import customizationMd from './content/customization.md?raw'
+import gettingStartedMd from "./content/getting-started.md?raw";
+import upgradingMd from "./content/upgrading.md?raw";
+import cycleMd from "./content/cycle.md?raw";
+import authMd from "./content/auth.md?raw";
+import auditMd from "./content/audit.md?raw";
+import eventsMd from "./content/events.md?raw";
+import logMd from "./content/log.md?raw";
+import observabilityMd from "./content/observability.md?raw";
+import queueMd from "./content/queue.md?raw";
+import schedulerMd from "./content/scheduler.md?raw";
+import actionsMd from "./content/actions.md?raw";
+import dataMd from "./content/data.md?raw";
+import storageMd from "./content/storage.md?raw";
+import aiMd from "./content/ai.md?raw";
+import mcpMd from "./content/mcp.md?raw";
+import testingMd from "./content/testing.md?raw";
+import runtimeMd from "./content/runtime.md?raw";
+import uiMd from "./content/ui.md?raw";
+import cliMd from "./content/cli.md?raw";
+import tokensMd from "./content/tokens.md?raw";
+import semanticContextMd from "./content/semantic-context.md?raw";
+import communicationMd from "./content/communication.md?raw";
+import customizationMd from "./content/customization.md?raw";
 
 // — Componentes —
-import accordionMd from './content/accordion.md?raw'
-import alertMd from './content/alert.md?raw'
-import alertDialogMd from './content/alert-dialog.md?raw'
-import confirmMd from './content/confirm.md?raw'
-import aspectRatioMd from './content/aspect-ratio.md?raw'
-import avatarMd from './content/avatar.md?raw'
-import badgeMd from './content/badge.md?raw'
-import dotMd from './content/dot.md?raw'
-import dockMd from './content/dock.md?raw'
-import breadcrumbMd from './content/breadcrumb.md?raw'
-import buttonMd from './content/button.md?raw'
-import buttonGroupMd from './content/button-group.md?raw'
-import calendarMd from './content/calendar.md?raw'
-import cardMd from './content/card.md?raw'
-import carouselMd from './content/carousel.md?raw'
-import askMd from './content/ask.md?raw'
-import chatMd from './content/chat.md?raw'
-import checkboxMd from './content/checkbox.md?raw'
-import collapsibleMd from './content/collapsible.md?raw'
-import iconPickerMd from './content/icon-picker.md?raw'
-import commandMd from './content/command.md?raw'
-import composerMd from './content/composer.md?raw'
-import copyableMd from './content/copyable.md?raw'
-import dialogMd from './content/dialog.md?raw'
-import detailMd from './content/detail.md?raw'
-import dictionaryValueMd from './content/dictionary-value.md?raw'
-import emptyValueMd from './content/empty-value.md?raw'
-import drawerMd from './content/drawer.md?raw'
-import menuMd from './content/menu.md?raw'
-import emptyMd from './content/empty.md?raw'
-import fieldMd from './content/field.md?raw'
-import inputMd from './content/input.md?raw'
-import inputGroupMd from './content/input-group.md?raw'
-import inputOtpMd from './content/input-otp.md?raw'
-import itemMd from './content/item.md?raw'
-import kbdMd from './content/kbd.md?raw'
-import labelMd from './content/label.md?raw'
-import markdownMd from './content/markdown.md?raw'
-import paginationMd from './content/pagination.md?raw'
-import popoverMd from './content/popover.md?raw'
-import progressMd from './content/progress.md?raw'
-import radioGroupMd from './content/radio-group.md?raw'
-import scrollAreaMd from './content/scroll-area.md?raw'
-import selectMd from './content/select.md?raw'
-import separatorMd from './content/separator.md?raw'
-import skeletonMd from './content/skeleton.md?raw'
-import sliderMd from './content/slider.md?raw'
-import spinnerMd from './content/spinner.md?raw'
-import switchMd from './content/switch.md?raw'
-import tableMd from './content/table.md?raw'
-import tabsMd from './content/tabs.md?raw'
-import textareaMd from './content/textarea.md?raw'
-import toastMd from './content/toast.md?raw'
-import toggleMd from './content/toggle.md?raw'
-import toggleGroupMd from './content/toggle-group.md?raw'
-import tooltipMd from './content/tooltip.md?raw'
-import truncateMd from './content/truncate.md?raw'
+import accordionMd from "./content/accordion.md?raw";
+import alertMd from "./content/alert.md?raw";
+import aspectRatioMd from "./content/aspect-ratio.md?raw";
+import avatarMd from "./content/avatar.md?raw";
+import badgeMd from "./content/badge.md?raw";
+import dotMd from "./content/dot.md?raw";
+import dockMd from "./content/dock.md?raw";
+import breadcrumbMd from "./content/breadcrumb.md?raw";
+import buttonMd from "./content/button.md?raw";
+import calendarMd from "./content/calendar.md?raw";
+import cardMd from "./content/card.md?raw";
+import metricCardMd from "./content/metric-card.md?raw";
+import carouselMd from "./content/carousel.md?raw";
+import askMd from "./content/ask.md?raw";
+import chatMd from "./content/chat.md?raw";
+import checkboxMd from "./content/checkbox.md?raw";
+import collapsibleMd from "./content/collapsible.md?raw";
+import iconPickerMd from "./content/icon-picker.md?raw";
+import commandMd from "./content/command.md?raw";
+import composerMd from "./content/composer.md?raw";
+import copyableMd from "./content/copyable.md?raw";
+import dialogMd from "./content/dialog.md?raw";
+import detailMd from "./content/detail.md?raw";
+import dictionaryValueMd from "./content/dictionary-value.md?raw";
+import emptyValueMd from "./content/empty-value.md?raw";
+import drawerMd from "./content/drawer.md?raw";
+import menuMd from "./content/menu.md?raw";
+import emptyMd from "./content/empty.md?raw";
+import fieldMd from "./content/field.md?raw";
+import inputMd from "./content/input.md?raw";
+import inputOtpMd from "./content/input-otp.md?raw";
+import itemMd from "./content/item.md?raw";
+import kbdMd from "./content/kbd.md?raw";
+import labelMd from "./content/label.md?raw";
+import markdownMd from "./content/markdown.md?raw";
+import paginationMd from "./content/pagination.md?raw";
+import popoverMd from "./content/popover.md?raw";
+import progressMd from "./content/progress.md?raw";
+import radioGroupMd from "./content/radio-group.md?raw";
+import scrollAreaMd from "./content/scroll-area.md?raw";
+import selectMd from "./content/select.md?raw";
+import separatorMd from "./content/separator.md?raw";
+import skeletonMd from "./content/skeleton.md?raw";
+import sliderMd from "./content/slider.md?raw";
+import spinnerMd from "./content/spinner.md?raw";
+import switchMd from "./content/switch.md?raw";
+import tableMd from "./content/table.md?raw";
+import tabsMd from "./content/tabs.md?raw";
+import textareaMd from "./content/textarea.md?raw";
+import toastMd from "./content/toast.md?raw";
+import toggleMd from "./content/toggle.md?raw";
+import tooltipMd from "./content/tooltip.md?raw";
+import truncateMd from "./content/truncate.md?raw";
 
 // — Patterns (markdown + palco doc-client injetado no scope dos previews) —
 import {
@@ -110,37 +108,40 @@ import {
   docWorkspaceList,
   docWorkspaceStatus,
   docWorkspaceView,
-} from './doc-client'
-import actionFormMd from './content/action-form.md?raw'
-import actionFormDialogMd from './content/action-form-dialog.md?raw'
-import actionFormCardMd from './content/action-form-card.md?raw'
-import actionSearchMd from './content/action-list.md?raw'
-import actionViewMd from './content/action-view.md?raw'
-import actionTriggerMd from './content/action-trigger.md?raw'
-import actionSearchDialogMd from './content/action-list-dialog.md?raw'
-import pageMd from './content/page.md?raw'
-import sidebarMd from './content/sidebar.md?raw'
-import splitMd from './content/split.md?raw'
-import routerMd from './content/router.md?raw'
-import dataStateMd from './content/data-state.md?raw'
+} from "./doc-client";
+import actionFormMd from "./content/action-form.md?raw";
+import actionFormDialogMd from "./content/action-form-dialog.md?raw";
+import actionFormCardMd from "./content/action-form-card.md?raw";
+import actionSearchMd from "./content/action-list.md?raw";
+import actionViewMd from "./content/action-view.md?raw";
+import actionTriggerMd from "./content/action-trigger.md?raw";
+import actionSearchDialogMd from "./content/action-list-dialog.md?raw";
+import pageMd from "./content/page.md?raw";
+import contentMd from "./content/content.md?raw";
+import sidebarMd from "./content/sidebar.md?raw";
+import splitMd from "./content/split.md?raw";
+import routerMd from "./content/router.md?raw";
+import dataStateMd from "./content/data-state.md?raw";
 
 export interface DocEntry {
-  slug: string
-  title: string
+  slug: string;
+  title: string;
   /** Tag técnica opcional exibida na nav ao lado do título — o subpath do SDK (ex.: 'auth'). */
-  badge?: string
-  render: () => React.ReactElement
+  badge?: string;
+  render: () => React.ReactElement;
 }
 
 export interface DocGroup {
   /** Sub-rótulo opcional dentro da seção (ex.: Primitivos). Ausente = páginas direto na seção. */
-  label?: string
-  pages: DocEntry[]
+  label?: string;
+  /** Ícone opcional apresentado no nó expansível do grupo. */
+  icon?: React.ReactNode;
+  pages: DocEntry[];
 }
 
 export interface DocSection {
-  label: string
-  groups: DocGroup[]
+  label: string;
+  groups: DocGroup[];
 }
 
 /**
@@ -154,10 +155,12 @@ export interface DocSection {
 // precisar, entra por alias no scope do chamador.
 const iconScope: Record<string, unknown> = Object.fromEntries(
   Object.entries(lucideIcons).filter(([name]) => !(name in opusUi)),
-)
+);
 
 /** Página conceitual (Começar/Framework/Design/Intro): markdown direto (o H1/lead moram no md). */
-const doc = (content: string) => (): React.ReactElement => <DocMarkdown content={content} scope={iconScope} />
+const doc = (content: string) => (): React.ReactElement => (
+  <DocMarkdown content={content} scope={iconScope} />
+);
 
 /**
  * Página de componente: o cabeçalho (título + badge de origem + whenToUse) vem do `meta` central
@@ -170,9 +173,9 @@ const comp =
     <DocPage title={title} meta={componentMeta[key]}>
       <DocMarkdown content={content} scope={iconScope} />
     </DocPage>
-  )
+  );
 
-/** O palco dos patterns no scope dos previews: ícones + client fake + contratos de mentira. */
+/** O palco dos patterns no scope dos previews: ícones, cliente simulado e contratos de exemplo. */
 const patternScope = {
   ...iconScope,
   DocBrowserActionProvider,
@@ -182,7 +185,7 @@ const patternScope = {
   docWorkspaceView,
   docSessionArchive,
   docSessionDelete,
-}
+};
 
 /** Página de pattern: igual ao `comp`, mas os previews enxergam o palco doc-client no scope. */
 const pattern =
@@ -191,18 +194,20 @@ const pattern =
     <DocPage title={title} meta={componentMeta[key]}>
       <DocMarkdown content={content} scope={patternScope} />
     </DocPage>
-  )
+  );
 
 /** Entrada 'UI' do Docs: a UI é um recurso do MESMO SDK, mas mora na superfície `/ui` (o
  *  catálogo é grande e visual). Em vez de duplicar, a página redireciona pra lá. */
 function UiRedirect(): React.ReactElement {
   useEffect(() => {
-    if (typeof window === 'undefined') return
+    if (typeof window === "undefined") return;
     // `replace`: um redirect não merece uma entrada no histórico — com `push`, o "voltar"
     // cairia aqui de novo e redirecionaria outra vez.
-    navigate('/ui', { replace: true })
-  }, [])
-  return <p className="text-sm text-muted-foreground">Redirecionando para a UI…</p>
+    navigate("/ui", { replace: true });
+  }, []);
+  return (
+    <p className="text-sm text-muted-foreground">Redirecionando para a UI…</p>
+  );
 }
 
 /** As seções da doc do SDK (surface `/docs` do site). "Começar" fica na RAIZ (seção sem
@@ -210,13 +215,21 @@ function UiRedirect(): React.ReactElement {
 export const PROTOCOL_SECTIONS: DocSection[] = [
   {
     // Sem label → páginas soltas no topo do menu (sem cabeçalho de seção).
-    label: '',
+    label: "",
     groups: [
       {
         pages: [
-          { slug: 'getting-started', title: 'Getting started', render: doc(gettingStartedMd) },
-          { slug: 'cycle', title: 'Evolução contínua', render: doc(cycleMd) },
-          { slug: 'upgrading', title: 'Atualizar a base', render: doc(upgradingMd) },
+          {
+            slug: "getting-started",
+            title: "Getting started",
+            render: doc(gettingStartedMd),
+          },
+          { slug: "cycle", title: "Evolução contínua", render: doc(cycleMd) },
+          {
+            slug: "upgrading",
+            title: "Atualizar a base",
+            render: doc(upgradingMd),
+          },
         ],
       },
     ],
@@ -224,15 +237,27 @@ export const PROTOCOL_SECTIONS: DocSection[] = [
   {
     // O núcleo invariante do protocolo — uma página por recurso. Opus é protocolo + peças
     // opcionais entregues como SDK (não Framework: a inversão de controle é do app).
-    label: 'Protocolo',
+    label: "Protocolo",
     groups: [
       {
         pages: [
-          { slug: 'actions', title: 'Actions & contratos', render: doc(actionsMd) },
-          { slug: 'runtime', title: 'Runtime & adapters', render: doc(runtimeMd) },
-          { slug: 'data', title: 'Camada de dados', render: doc(dataMd) },
-          { slug: 'testing', title: 'Testes de action', render: doc(testingMd) },
-          { slug: 'cli', title: 'CLI opus', render: doc(cliMd) },
+          {
+            slug: "actions",
+            title: "Actions & contratos",
+            render: doc(actionsMd),
+          },
+          {
+            slug: "runtime",
+            title: "Runtime & adapters",
+            render: doc(runtimeMd),
+          },
+          { slug: "data", title: "Camada de dados", render: doc(dataMd) },
+          {
+            slug: "testing",
+            title: "Testes de action",
+            render: doc(testingMd),
+          },
+          { slug: "cli", title: "CLI opus", render: doc(cliMd) },
         ],
       },
     ],
@@ -240,171 +265,490 @@ export const PROTOCOL_SECTIONS: DocSection[] = [
   {
     // As peças OPT-IN que você liga (adapter + driver). A UI também é recurso do SDK, mas
     // com catálogo próprio — a entrada 'ui' redireciona pra superfície /ui.
-    label: 'Recursos',
+    label: "Recursos",
     groups: [
       {
         pages: [
-          { slug: 'auth', title: 'Autenticação', badge: 'auth', render: doc(authMd) },
-          { slug: 'audit', title: 'Auditoria', badge: 'audit', render: doc(auditMd) },
-          { slug: 'events', title: 'Eventos', badge: 'events', render: doc(eventsMd) },
-          { slug: 'log', title: 'Log', badge: 'log', render: doc(logMd) },
-          { slug: 'queue', title: 'Filas', badge: 'queue', render: doc(queueMd) },
-          { slug: 'scheduler', title: 'Agendador', badge: 'scheduler', render: doc(schedulerMd) },
-          { slug: 'storage', title: 'Armazenamento', badge: 'storage', render: doc(storageMd) },
-          { slug: 'ai', title: 'IA generativa', badge: 'ai', render: doc(aiMd) },
-          { slug: 'mcp', title: 'MCP', badge: 'mcp', render: doc(mcpMd) },
-          { slug: 'ui', title: 'UI ↗', render: () => <UiRedirect /> },
+          {
+            slug: "auth",
+            title: "Autenticação",
+            badge: "auth",
+            render: doc(authMd),
+          },
+          {
+            slug: "audit",
+            title: "Auditoria",
+            badge: "audit",
+            render: doc(auditMd),
+          },
+          {
+            slug: "events",
+            title: "Eventos",
+            badge: "events",
+            render: doc(eventsMd),
+          },
+          { slug: "log", title: "Log", badge: "log", render: doc(logMd) },
+          {
+            slug: "observability",
+            title: "Observabilidade",
+            badge: "observability",
+            render: doc(observabilityMd),
+          },
+          {
+            slug: "queue",
+            title: "Filas",
+            badge: "queue",
+            render: doc(queueMd),
+          },
+          {
+            slug: "scheduler",
+            title: "Agendador",
+            badge: "scheduler",
+            render: doc(schedulerMd),
+          },
+          {
+            slug: "storage",
+            title: "Armazenamento",
+            badge: "storage",
+            render: doc(storageMd),
+          },
+          {
+            slug: "ai",
+            title: "IA generativa",
+            badge: "ai",
+            render: doc(aiMd),
+          },
+          { slug: "mcp", title: "MCP", badge: "mcp", render: doc(mcpMd) },
+          { slug: "ui", title: "UI ↗", render: () => <UiRedirect /> },
         ],
       },
     ],
   },
-]
+];
 
 /** As seções da parte de UI do SDK (`/ui`): consumo, design, catálogo de componentes e
  *  patterns. Mesma família das seções de protocolo — superfície própria só pelo volume. */
 export const UI_SECTIONS: DocSection[] = [
   {
     // Raiz (sem label): o "getting started" da UI.
-    label: '',
-    groups: [{ pages: [{ slug: 'como-consumir', title: 'Getting started', render: doc(uiMd) }] }],
+    label: "",
+    groups: [
+      {
+        pages: [
+          {
+            slug: "como-consumir",
+            title: "Getting started",
+            render: doc(uiMd),
+          },
+        ],
+      },
+    ],
   },
   {
-    label: 'Design',
+    label: "Design",
     groups: [
       {
         pages: [
-          { slug: 'tokens', title: 'Tokens & Tema', render: doc(tokensMd) },
-          { slug: 'communication', title: 'Comunicação', render: doc(communicationMd) },
-          { slug: 'customization', title: 'Customização', render: doc(customizationMd) },
+          { slug: "tokens", title: "Tokens & Tema", render: doc(tokensMd) },
+          {
+            slug: "semantic-context",
+            title: "Contexto & Variante",
+            render: doc(semanticContextMd),
+          },
+          {
+            slug: "communication",
+            title: "Comunicação",
+            render: doc(communicationMd),
+          },
+          {
+            slug: "customization",
+            title: "Customização",
+            render: doc(customizationMd),
+          },
         ],
       },
     ],
   },
   {
-    label: 'Componentes',
+    label: "Componentes",
     groups: [
       {
-        label: 'Fundamentos',
+        label: "Fundamentos",
+        icon: <lucideIcons.Blocks className="size-4" />,
         pages: [
-          { slug: 'router', title: 'Router', render: pattern('Router', 'router', routerMd) },
+          {
+            slug: "router",
+            title: "Router",
+            render: pattern("Router", "router", routerMd),
+          },
         ],
       },
       {
-        label: 'Layout',
+        label: "Layout",
+        icon: <lucideIcons.PanelsTopLeft className="size-4" />,
         pages: [
-          { slug: 'split', title: 'Split & Pane', render: pattern('Split & Pane', 'split', splitMd) },
-          { slug: 'sidebar', title: 'Sidebar', render: pattern('Sidebar', 'sidebar', sidebarMd) },
-          { slug: 'page', title: 'Page', render: pattern('Page', 'page', pageMd) },
-          { slug: 'accordion', title: 'Accordion', render: comp('Accordion', 'accordion', accordionMd) },
-          { slug: 'aspect-ratio', title: 'Aspect Ratio', render: comp('Aspect Ratio', 'aspect-ratio', aspectRatioMd) },
-          { slug: 'card', title: 'Card', render: comp('Card', 'card', cardMd) },
-          { slug: 'collapsible', title: 'Collapsible', render: comp('Collapsible', 'collapsible', collapsibleMd) },
-          { slug: 'scroll-area', title: 'Scroll Area', render: comp('Scroll Area', 'scroll-area', scrollAreaMd) },
-          { slug: 'separator', title: 'Separator', render: comp('Separator', 'separator', separatorMd) },
+          {
+            slug: "split",
+            title: "Split & Pane",
+            render: pattern("Split & Pane", "split", splitMd),
+          },
+          {
+            slug: "sidebar",
+            title: "Sidebar",
+            render: pattern("Sidebar", "sidebar", sidebarMd),
+          },
+          {
+            slug: "page",
+            title: "Page",
+            render: pattern("Page", "page", pageMd),
+          },
+          {
+            slug: "content",
+            title: "Content",
+            render: pattern("Content", "content", contentMd),
+          },
+          {
+            slug: "accordion",
+            title: "Accordion",
+            render: comp("Accordion", "accordion", accordionMd),
+          },
+          {
+            slug: "aspect-ratio",
+            title: "Aspect Ratio",
+            render: comp("Aspect Ratio", "aspect-ratio", aspectRatioMd),
+          },
+          { slug: "card", title: "Card", render: comp("Card", "card", cardMd) },
+          {
+            slug: "metric-card",
+            title: "Metric Card",
+            render: comp("Metric Card", "metric-card", metricCardMd),
+          },
+          {
+            slug: "collapsible",
+            title: "Collapsible",
+            render: comp("Collapsible", "collapsible", collapsibleMd),
+          },
+          {
+            slug: "scroll-area",
+            title: "Scroll Area",
+            render: comp("Scroll Area", "scroll-area", scrollAreaMd),
+          },
+          {
+            slug: "separator",
+            title: "Separator",
+            render: comp("Separator", "separator", separatorMd),
+          },
         ],
       },
       {
-        label: 'Actions',
+        label: "Actions",
+        icon: <lucideIcons.Zap className="size-4" />,
         pages: [
-          { slug: 'action-form', title: 'Action Form', render: pattern('Action Form', 'action-form', actionFormMd) },
-          { slug: 'action-form-card', title: 'Action Form Card', render: pattern('Action Form Card', 'action-form-card', actionFormCardMd) },
-          { slug: 'action-form-dialog', title: 'Action Form Dialog', render: pattern('Action Form Dialog', 'action-form-dialog', actionFormDialogMd) },
-          { slug: 'action-list', title: 'Action List', render: pattern('Action List', 'action-list', actionSearchMd) },
-          { slug: 'action-list-dialog', title: 'Action List Dialog', render: pattern('Action List Dialog', 'action-list-dialog', actionSearchDialogMd) },
-          { slug: 'action-trigger', title: 'Action Trigger', render: pattern('Action Trigger', 'action-trigger', actionTriggerMd) },
-          { slug: 'action-view', title: 'Action View', render: pattern('Action View', 'action-view', actionViewMd) },
+          {
+            slug: "action-form",
+            title: "Action Form",
+            render: pattern("Action Form", "action-form", actionFormMd),
+          },
+          {
+            slug: "action-form-card",
+            title: "Action Form Card",
+            render: pattern(
+              "Action Form Card",
+              "action-form-card",
+              actionFormCardMd,
+            ),
+          },
+          {
+            slug: "action-form-dialog",
+            title: "Action Form Dialog",
+            render: pattern(
+              "Action Form Dialog",
+              "action-form-dialog",
+              actionFormDialogMd,
+            ),
+          },
+          {
+            slug: "action-list",
+            title: "Action List",
+            render: pattern("Action List", "action-list", actionSearchMd),
+          },
+          {
+            slug: "action-list-dialog",
+            title: "Action List Dialog",
+            render: pattern(
+              "Action List Dialog",
+              "action-list-dialog",
+              actionSearchDialogMd,
+            ),
+          },
+          {
+            slug: "action-trigger",
+            title: "Action Trigger",
+            render: pattern(
+              "Action Trigger",
+              "action-trigger",
+              actionTriggerMd,
+            ),
+          },
+          {
+            slug: "action-view",
+            title: "Action View",
+            render: pattern("Action View", "action-view", actionViewMd),
+          },
         ],
       },
       {
-        label: 'IA',
+        label: "IA",
+        icon: <lucideIcons.Sparkles className="size-4" />,
         pages: [
-          { slug: 'ask', title: 'Ask', render: comp('Ask', 'ask', askMd) },
-          { slug: 'chat', title: 'Chat', render: comp('Chat', 'chat', chatMd) },
-          { slug: 'composer', title: 'Composer', render: comp('Composer', 'composer', composerMd) },
+          { slug: "ask", title: "Ask", render: comp("Ask", "ask", askMd) },
+          { slug: "chat", title: "Chat", render: comp("Chat", "chat", chatMd) },
+          {
+            slug: "composer",
+            title: "Composer",
+            render: comp("Composer", "composer", composerMd),
+          },
         ],
       },
       {
-        label: 'Formulário',
+        label: "Formulário",
+        icon: <lucideIcons.TextCursorInput className="size-4" />,
         pages: [
-          { slug: 'calendar', title: 'Calendar', render: comp('Calendar', 'calendar', calendarMd) },
-          { slug: 'checkbox', title: 'Checkbox', render: comp('Checkbox', 'checkbox', checkboxMd) },
-          { slug: 'field', title: 'Field', render: comp('Field', 'field', fieldMd) },
-          { slug: 'icon-picker', title: 'Icon Picker', render: comp('Icon Picker', 'icon-picker', iconPickerMd) },
-          { slug: 'input', title: 'Input', render: comp('Input', 'input', inputMd) },
-          { slug: 'input-group', title: 'Input Group', render: comp('Input Group', 'input-group', inputGroupMd) },
-          { slug: 'input-otp', title: 'Input OTP', render: comp('Input OTP', 'input-otp', inputOtpMd) },
-          { slug: 'label', title: 'Label', render: comp('Label', 'label', labelMd) },
-          { slug: 'radio-group', title: 'Radio Group', render: comp('Radio Group', 'radio-group', radioGroupMd) },
-          { slug: 'select', title: 'Select', render: comp('Select', 'select', selectMd) },
-          { slug: 'slider', title: 'Slider', render: comp('Slider', 'slider', sliderMd) },
-          { slug: 'switch', title: 'Switch', render: comp('Switch', 'switch', switchMd) },
-          { slug: 'textarea', title: 'Textarea', render: comp('Textarea', 'textarea', textareaMd) },
+          {
+            slug: "calendar",
+            title: "Calendar",
+            render: comp("Calendar", "calendar", calendarMd),
+          },
+          {
+            slug: "checkbox",
+            title: "Checkbox",
+            render: comp("Checkbox", "checkbox", checkboxMd),
+          },
+          {
+            slug: "field",
+            title: "Field",
+            render: comp("Field", "field", fieldMd),
+          },
+          {
+            slug: "icon-picker",
+            title: "Icon Picker",
+            render: comp("Icon Picker", "icon-picker", iconPickerMd),
+          },
+          {
+            slug: "input",
+            title: "Input",
+            render: comp("Input", "input", inputMd),
+          },
+          {
+            slug: "input-otp",
+            title: "Input OTP",
+            render: comp("Input OTP", "input-otp", inputOtpMd),
+          },
+          {
+            slug: "label",
+            title: "Label",
+            render: comp("Label", "label", labelMd),
+          },
+          {
+            slug: "radio-group",
+            title: "Radio Group",
+            render: comp("Radio Group", "radio-group", radioGroupMd),
+          },
+          {
+            slug: "select",
+            title: "Select",
+            render: comp("Select", "select", selectMd),
+          },
+          {
+            slug: "slider",
+            title: "Slider",
+            render: comp("Slider", "slider", sliderMd),
+          },
+          {
+            slug: "switch",
+            title: "Switch",
+            render: comp("Switch", "switch", switchMd),
+          },
+          {
+            slug: "textarea",
+            title: "Textarea",
+            render: comp("Textarea", "textarea", textareaMd),
+          },
         ],
       },
       {
-        label: 'Botões',
+        label: "Botões",
+        icon: <lucideIcons.MousePointerClick className="size-4" />,
         pages: [
-          { slug: 'button', title: 'Button', render: comp('Button', 'button', buttonMd) },
-          { slug: 'button-group', title: 'Button Group', render: comp('Button Group', 'button-group', buttonGroupMd) },
-          { slug: 'toggle', title: 'Toggle', render: comp('Toggle', 'toggle', toggleMd) },
-          { slug: 'toggle-group', title: 'Toggle Group', render: comp('Toggle Group', 'toggle-group', toggleGroupMd) },
+          {
+            slug: "button",
+            title: "Button",
+            render: comp("Button", "button", buttonMd),
+          },
+          {
+            slug: "toggle",
+            title: "Toggle",
+            render: comp("Toggle", "toggle", toggleMd),
+          },
         ],
       },
       {
-        label: 'Navegação',
+        label: "Navegação",
+        icon: <lucideIcons.Compass className="size-4" />,
         pages: [
-          { slug: 'breadcrumb', title: 'Breadcrumb', render: comp('Breadcrumb', 'breadcrumb', breadcrumbMd) },
-          { slug: 'command', title: 'Command', render: comp('Command', 'command', commandMd) },
-          { slug: 'pagination', title: 'Pagination', render: comp('Pagination', 'pagination', paginationMd) },
-          { slug: 'tabs', title: 'Tabs', render: comp('Tabs', 'tabs', tabsMd) },
+          {
+            slug: "breadcrumb",
+            title: "Breadcrumb",
+            render: comp("Breadcrumb", "breadcrumb", breadcrumbMd),
+          },
+          {
+            slug: "command",
+            title: "Command",
+            render: comp("Command", "command", commandMd),
+          },
+          {
+            slug: "pagination",
+            title: "Pagination",
+            render: comp("Pagination", "pagination", paginationMd),
+          },
+          { slug: "tabs", title: "Tabs", render: comp("Tabs", "tabs", tabsMd) },
         ],
       },
       {
-        label: 'Exibição',
+        label: "Exibição",
+        icon: <lucideIcons.Eye className="size-4" />,
         pages: [
-          { slug: 'avatar', title: 'Avatar', render: comp('Avatar', 'avatar', avatarMd) },
-          { slug: 'badge', title: 'Badge', render: comp('Badge', 'badge', badgeMd) },
-          { slug: 'dot', title: 'Dot', render: comp('Dot', 'dot', dotMd) },
-          { slug: 'dock', title: 'Dock', render: comp('Dock', 'dock', dockMd) },
-          { slug: 'carousel', title: 'Carousel', render: comp('Carousel', 'carousel', carouselMd) },
-          { slug: 'copyable', title: 'Copyable', render: comp('Copyable', 'copyable', copyableMd) },
-          { slug: 'detail', title: 'Detail', render: comp('Detail', 'detail', detailMd) },
-          { slug: 'dictionary-value', title: 'Dictionary Value', render: comp('Dictionary Value', 'dictionary-value', dictionaryValueMd) },
-          { slug: 'empty-value', title: 'Empty Value', render: comp('Empty Value', 'empty-value', emptyValueMd) },
-          { slug: 'item', title: 'Item', render: comp('Item', 'item', itemMd) },
-          { slug: 'kbd', title: 'Kbd', render: comp('Kbd', 'kbd', kbdMd) },
-          { slug: 'markdown', title: 'Markdown', render: comp('Markdown', 'markdown', markdownMd) },
-          { slug: 'table', title: 'Table', render: comp('Table', 'table', tableMd) },
-          { slug: 'truncate', title: 'Truncate', render: comp('Truncate', 'truncate', truncateMd) },
+          {
+            slug: "avatar",
+            title: "Avatar",
+            render: comp("Avatar", "avatar", avatarMd),
+          },
+          {
+            slug: "badge",
+            title: "Badge",
+            render: comp("Badge", "badge", badgeMd),
+          },
+          { slug: "dot", title: "Dot", render: comp("Dot", "dot", dotMd) },
+          { slug: "dock", title: "Dock", render: comp("Dock", "dock", dockMd) },
+          {
+            slug: "carousel",
+            title: "Carousel",
+            render: comp("Carousel", "carousel", carouselMd),
+          },
+          {
+            slug: "copyable",
+            title: "Copyable",
+            render: comp("Copyable", "copyable", copyableMd),
+          },
+          {
+            slug: "detail",
+            title: "Detail",
+            render: comp("Detail", "detail", detailMd),
+          },
+          {
+            slug: "dictionary-value",
+            title: "Dictionary Value",
+            render: comp(
+              "Dictionary Value",
+              "dictionary-value",
+              dictionaryValueMd,
+            ),
+          },
+          {
+            slug: "empty-value",
+            title: "Empty Value",
+            render: comp("Empty Value", "empty-value", emptyValueMd),
+          },
+          { slug: "item", title: "Item", render: comp("Item", "item", itemMd) },
+          { slug: "kbd", title: "Kbd", render: comp("Kbd", "kbd", kbdMd) },
+          {
+            slug: "markdown",
+            title: "Markdown",
+            render: comp("Markdown", "markdown", markdownMd),
+          },
+          {
+            slug: "table",
+            title: "Table",
+            render: comp("Table", "table", tableMd),
+          },
+          {
+            slug: "truncate",
+            title: "Truncate",
+            render: comp("Truncate", "truncate", truncateMd),
+          },
         ],
       },
       {
-        label: 'Feedback',
+        label: "Feedback",
+        icon: <lucideIcons.MessageCircleWarning className="size-4" />,
         pages: [
-          { slug: 'alert', title: 'Alert', render: comp('Alert', 'alert', alertMd) },
-          { slug: 'confirm', title: 'Dialog (imperativo)', render: comp('Dialog (imperativo)', 'confirm', confirmMd) },
-          { slug: 'data-state', title: 'Data State', render: comp('Data State', 'data-state', dataStateMd) },
-          { slug: 'empty', title: 'Empty', render: comp('Empty', 'empty', emptyMd) },
-          { slug: 'progress', title: 'Progress', render: comp('Progress', 'progress', progressMd) },
-          { slug: 'skeleton', title: 'Skeleton', render: comp('Skeleton', 'skeleton', skeletonMd) },
-          { slug: 'spinner', title: 'Spinner', render: comp('Spinner', 'spinner', spinnerMd) },
-          { slug: 'toast', title: 'Toast', render: comp('Toast', 'toast', toastMd) },
+          {
+            slug: "alert",
+            title: "Alert",
+            render: comp("Alert", "alert", alertMd),
+          },
+          {
+            slug: "data-state",
+            title: "Data State",
+            render: comp("Data State", "data-state", dataStateMd),
+          },
+          {
+            slug: "empty",
+            title: "Empty",
+            render: comp("Empty", "empty", emptyMd),
+          },
+          {
+            slug: "progress",
+            title: "Progress",
+            render: comp("Progress", "progress", progressMd),
+          },
+          {
+            slug: "skeleton",
+            title: "Skeleton",
+            render: comp("Skeleton", "skeleton", skeletonMd),
+          },
+          {
+            slug: "spinner",
+            title: "Spinner",
+            render: comp("Spinner", "spinner", spinnerMd),
+          },
+          {
+            slug: "toast",
+            title: "Toast",
+            render: comp("Toast", "toast", toastMd),
+          },
         ],
       },
       {
-        label: 'Sobreposição',
+        label: "Sobreposição",
+        icon: <lucideIcons.Layers className="size-4" />,
         pages: [
-          { slug: 'alert-dialog', title: 'Alert Dialog', render: comp('Alert Dialog', 'alert-dialog', alertDialogMd) },
-          { slug: 'dialog', title: 'Dialog', render: comp('Dialog', 'dialog', dialogMd) },
-          { slug: 'drawer', title: 'Drawer', render: comp('Drawer', 'drawer', drawerMd) },
-          { slug: 'menu', title: 'Menu', render: comp('Menu', 'menu', menuMd) },
-          { slug: 'popover', title: 'Popover', render: comp('Popover', 'popover', popoverMd) },
-          { slug: 'tooltip', title: 'Tooltip', render: comp('Tooltip', 'tooltip', tooltipMd) },
+          {
+            slug: "dialog",
+            title: "Dialog",
+            render: comp("Dialog", "dialog", dialogMd),
+          },
+          {
+            slug: "drawer",
+            title: "Drawer",
+            render: comp("Drawer", "drawer", drawerMd),
+          },
+          { slug: "menu", title: "Menu", render: comp("Menu", "menu", menuMd) },
+          {
+            slug: "popover",
+            title: "Popover",
+            render: comp("Popover", "popover", popoverMd),
+          },
+          {
+            slug: "tooltip",
+            title: "Tooltip",
+            render: comp("Tooltip", "tooltip", tooltipMd),
+          },
         ],
       },
     ],
   },
-]
+];
 
 /** O catálogo INTEIRO (compat): Maestro (lente) e `/__docs` mostram tudo numa nav só —
  *  inclusive o changelog, que no SITE é página do menu superior (fora destas seções);
@@ -417,7 +761,11 @@ export const DOC_SECTIONS: DocSection[] = [
       {
         pages: [
           ...PROTOCOL_SECTIONS[0]!.groups[0]!.pages,
-          { slug: 'changelog', title: 'Changelog', render: () => <OpusChangelog /> },
+          {
+            slug: "changelog",
+            title: "Changelog",
+            render: () => <OpusChangelog />,
+          },
         ],
       },
     ],
@@ -426,7 +774,10 @@ export const DOC_SECTIONS: DocSection[] = [
   // à parte — então tira a entrada-redirect 'ui' (o catálogo já entra via UI_SECTIONS).
   ...PROTOCOL_SECTIONS.slice(1).map((s) => ({
     ...s,
-    groups: s.groups.map((g) => ({ ...g, pages: g.pages.filter((p) => p.slug !== 'ui') })),
+    groups: s.groups.map((g) => ({
+      ...g,
+      pages: g.pages.filter((p) => p.slug !== "ui"),
+    })),
   })),
   ...UI_SECTIONS,
-]
+];