synthesisui 0.16.430 → 0.16.432

package/dist/commands/import.js

@@ -3750,10 +3750,17 @@ async function mostrarInspecao(c, root, transcrito) {
             medidoEm: c.measured?.at ?? "",
             cli: c.ledger?.cli ?? "",
         },
+        /**
+         * OS TRÊS NÚMEROS DA ABERTURA, e os dois primeiros carregam o denominador para virarem
+         * BARRA. O terceiro não tem fatia possível - "quantos `var()` não resolvem" não é parte de
+         * nada -, então ele fica só número, e desenhar uma barra ali inventaria uma proporção.
+         */
         destaques: [
             {
                 numero: `${lidos} of ${total}`,
                 rotulo: "components came out with a blueprint",
+                parte: lidos,
+                de: total,
             },
             ...(pct === null
                 ? []
@@ -3761,6 +3768,8 @@ async function mostrarInspecao(c, root, transcrito) {
                     {
                         numero: `${pct}%`,
                         rotulo: `of ${decisoes} style decisions carry your vocabulary`,
+                        parte: valores?.interpreted ?? 0,
+                        de: decisoes,
                     },
                 ]),
             {

package/dist/report-html.js

@@ -1,3 +1,5 @@
+import { FAMILY_SEAM_PREFIX } from "./fonts.js";
+import { HALOGEN_TOKENS, HALOGEN_VERSION } from "./report-theme.js";
 import { semCor } from "./transcript.js";
 /**
  * O QUE O TERMINAL DIRIA, LIDO DE VOLTA COMO DOCUMENTO.
@@ -45,62 +47,221 @@ function escapar(s) {
 export function relatorioHtml(input) {
     const { cabecalho, destaques, secoes } = input;
     const quando = legivel(cabecalho.medidoEm);
+    /**
+     * O ÍNDICE DIZ O TAMANHO DE CADA CAPÍTULO, e é isso que o torna uma escolha em vez de uma lista.
+     * Dezesseis links iguais obrigam a entrar para descobrir o custo; com a contagem ao lado, quem
+     * está com pressa sabe onde não entrar.
+     */
     const indice = secoes
-        .map((s, i) => `<li><a href="#s${i}">${escapar(s.titulo)}</a></li>`)
-        .join("\n        ");
+        .map((s, i) => `<li><a href="#s${i}">${escapar(s.titulo)}</a><span>${s.linhas.filter((l) => l.trim()).length}</span></li>`)
+        .join("\n          ");
     const corpo = secoes
-        .map((s, i) => `      <section id="s${i}">
-        <h2>${escapar(s.titulo)}</h2>
-        <pre>${escapar(s.linhas.join("\n"))}</pre>
+        .map((s, i) => `      <section id="s${i}" class="chapter" style="--ordem:${Math.min(i, 12)}">
+        <h2><span>${escapar(s.titulo)}</span></h2>
+${desenharCorpo(s)}
       </section>`)
         .join("\n");
-    const numeros = destaques
-        .map((d) => `        <div class="stat">
-          <strong>${escapar(d.numero)}</strong>
-          <span>${escapar(d.rotulo)}</span>
-        </div>`)
-        .join("\n");
+    const numeros = destaques.map(cartaoDeNumero).join("\n");
     return `<!doctype html>
-<html lang="en">
+<html lang="en" data-scheme="light">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escapar(cabecalho.repo)} - read by SynthesisUI</title>
 <style>
-${estilo()}
+${HALOGEN_TOKENS}
+</style>
+<style>
+${layout()}
 </style>
 </head>
 <body>
-  <header>
-    <p class="kicker">Read by SynthesisUI</p>
-    <h1>${escapar(cabecalho.repo)}</h1>
-    <p class="meta">Read ${escapar(quando)} by CLI ${escapar(cabecalho.cli)} &middot; nothing left this machine</p>
+  <header class="bar">
+    <div class="bar-in">
+      <div class="bar-id">
+        <p class="kicker">Read by SynthesisUI</p>
+        <p class="bar-repo">${escapar(cabecalho.repo)}</p>
+      </div>
+      <p class="meta">${escapar(quando)} &middot; CLI ${escapar(cabecalho.cli)} &middot; nothing left this machine</p>
+    </div>
   </header>
 
-  <div class="wrap">
-    <div class="stats">
+  <main class="wrap">
+    <section class="hero chapter" style="--ordem:0">
+      <h1>${escapar(cabecalho.repo)}</h1>
+      <p class="lede">This is what your own code says about itself.</p>
+      <div class="stats">
 ${numeros}
-    </div>
+      </div>
+    </section>
 
-    <nav>
+    <nav class="chapter" style="--ordem:1">
       <p class="kicker">What is in here</p>
       <ol>
-        ${indice}
+          ${indice}
       </ol>
     </nav>
 
-    <main>
 ${corpo}
-    </main>
 
     <footer>
+      <p>Dressed by Halogen v${HALOGEN_VERSION}, a design system from the SynthesisUI gallery.</p>
       <p>This file lives in your project and was never sent anywhere. Re-run the command to refresh it.</p>
     </footer>
-  </div>
+  </main>
 </body>
 </html>
 `;
 }
+/**
+ * O NÚMERO COM A FATIA DESENHADA - e a barra só aparece quando existe denominador medido.
+ *
+ * `aria-hidden` na barra porque ela não diz nada que o número ao lado já não diga; um leitor de
+ * tela que a anunciasse leria a mesma informação duas vezes.
+ */
+function cartaoDeNumero(d) {
+    const temBarra = typeof d.parte === "number" && typeof d.de === "number" && d.de > 0;
+    const pct = temBarra
+        ? Math.max(0, Math.min(100, Math.round(((d.parte ?? 0) / (d.de ?? 1)) * 100)))
+        : 0;
+    return `        <div class="stat">
+          <strong>${escapar(d.numero)}</strong>
+          <span>${escapar(d.rotulo)}</span>${temBarra
+        ? `
+          <div class="bar-track" aria-hidden="true"><i style="--pct:${pct}%"></i></div>`
+        : ""}
+        </div>`;
+}
+/**
+ * COMO CADA CAPÍTULO É DESENHADO - e a decisão é sobre REPETIÇÃO, não sobre o assunto.
+ *
+ * Medido na página dele em 18/09: as 94 linhas com a mesma forma saíram em SEIS pedaços, porque o
+ * agrupamento só juntava linhas VIZINHAS e as frases de `mx-auto` caem no meio delas. Seis blocos
+ * de dez são a mesma parede com mais bordas.
+ *
+ * Agora a família é da SEÇÃO INTEIRA: irmãs distantes se encontram, e a ordem que sobrevive é a da
+ * primeira aparição - o texto continua sendo lido na ordem em que a esteira o escreveu.
+ *
+ * E O PRIMEIRO FATO DO CAPÍTULO SOBE: a linha de abertura, que é onde mora o número, deixa de ter
+ * o peso do detalhe monoespaçado e vira o CALLOUT que a pessoa lê antes de decidir se desce.
+ */
+function desenharCorpo(s) {
+    const { destaque, resto } = abertura(s.linhas);
+    const familias = agrupar(resto);
+    const corpo = familias
+        .map((f) => f.tipo === "tabela"
+        ? `        <details class="familia" open>
+          <summary><span>${escapar(f.rotulo)}</span> <b>${f.itens.length}</b></summary>
+          <ul class="grade">
+${f.itens.map((i) => `            <li>${escapar(i)}</li>`).join("\n")}
+          </ul>
+        </details>`
+        : `        <pre>${escapar(f.itens.join("\n"))}</pre>`)
+        .join("\n");
+    return destaque
+        ? `        <p class="callout">${escapar(destaque)}</p>\n${corpo}`
+        : corpo;
+}
+/**
+ * A ABERTURA DO CAPÍTULO - a primeira linha com conteúdo, e só quando ela CARREGA UM NÚMERO.
+ *
+ * É o número que faz a frase valer o destaque: "78 of 78 components came out with a blueprint" é
+ * um fato que decide se a pessoa lê o resto. Uma abertura sem número seria só a primeira linha
+ * promovida por ser a primeira, e aí o destaque deixaria de significar alguma coisa.
+ */
+function abertura(linhas) {
+    const i = linhas.findIndex((l) => l.trim());
+    if (i < 0)
+        return { destaque: null, resto: linhas };
+    const primeira = linhas[i].trim();
+    if (!/\d/.test(primeira) || primeira.length > 240)
+        return { destaque: null, resto: linhas };
+    /**
+     * E ELA NÃO PODE SER MEMBRO DE UMA FAMÍLIA. Um capítulo que abre com a primeira de noventa
+     * linhas iguais promoveria uma irmã qualquer a conclusão, e ainda tiraria uma da contagem -
+     * duas mentiras pelo preço de uma. O destaque é para o fato ÚNICO.
+     */
+    const f = forma(primeira);
+    const irmas = linhas.filter((l) => l.trim() && forma(l) === f).length;
+    if (irmas >= MINIMO_PARA_TABELA)
+        return { destaque: null, resto: linhas };
+    return { destaque: primeira, resto: linhas.slice(i + 1) };
+}
+const MINIMO_PARA_TABELA = 6;
+/**
+ * A FORMA DE UMA LINHA, sem ler o que ela diz: as palavras ficam, os nomes próprios viram `·`.
+ *
+ * É isso que faz `two parts named \`box\`` e `two parts named \`nav\`` caírem na mesma família sem
+ * ninguém escrever uma regra sobre partes - e é isso que faz a regra valer para a próxima classe de
+ * linha repetida, que ninguém ainda viu (`INV-GERAL-07`).
+ */
+function forma(linha) {
+    return linha
+        .trim()
+        .replace(/`[^`]*`/g, "·")
+        .replace(/\d+/g, "#")
+        .split(/\s+/)
+        .slice(0, 6)
+        .join(" ");
+}
+/**
+ * AGRUPA A SEÇÃO INTEIRA, e a ordem é a da PRIMEIRA APARIÇÃO de cada forma.
+ *
+ * Uma varredura só: cada linha entra no balde da forma dela, e os baldes saem na ordem em que
+ * nasceram. Quem tem irmãs suficientes vira família; quem não tem volta para a prosa, no lugar
+ * onde estava. O que a pessoa lê continua sendo o texto da esteira, na ordem da esteira.
+ */
+function agrupar(linhas) {
+    const contagem = new Map();
+    for (const l of linhas) {
+        if (!l.trim())
+            continue;
+        const f = forma(l);
+        contagem.set(f, (contagem.get(f) ?? 0) + 1);
+    }
+    const saida = [];
+    const familiaDe = new Map();
+    for (const l of linhas) {
+        const f = l.trim() ? forma(l) : "";
+        if (l.trim() && (contagem.get(f) ?? 0) >= MINIMO_PARA_TABELA) {
+            const existente = familiaDe.get(f);
+            if (existente) {
+                existente.itens.push(l.trim());
+                continue;
+            }
+            const nova = {
+                tipo: "tabela",
+                rotulo: rotuloDe(f),
+                itens: [l.trim()],
+            };
+            familiaDe.set(f, nova);
+            saida.push(nova);
+            continue;
+        }
+        empilharProsa(saida, l);
+    }
+    return saida.filter((f) => f.itens.some((l) => l.trim()));
+}
+function empilharProsa(saida, linha) {
+    const ultimo = saida[saida.length - 1];
+    if (ultimo && ultimo.tipo === "prosa")
+        ultimo.itens.push(linha);
+    else
+        saida.push({ tipo: "prosa", rotulo: "", itens: [linha] });
+}
+/**
+ * O RÓTULO DA FAMÍLIA - uma frase que se lê, e não a forma crua.
+ *
+ * `two parts named · - the second is ·` saía como `two parts named … - the 10`: reticência solta,
+ * minúscula, e sem dizer o que aquilo é. O rótulo agora é a parte ESTÁVEL da frase - o que todas as
+ * irmãs têm em comum - cortada no primeiro buraco e começando com maiúscula.
+ */
+function rotuloDe(f) {
+    const estavel = f.split("·")[0].replace(/#/g, "n").trim();
+    const limpo = estavel.replace(/[\s\-–—:,]+$/, "");
+    const frase = limpo || "Repeated lines";
+    return frase.charAt(0).toUpperCase() + frase.slice(1);
+}
 /** A data em palavras. Data ilegível some da frase em vez de imprimir `Invalid Date`. */
 function legivel(iso) {
     if (!iso || Number.isNaN(Date.parse(iso)))
@@ -112,94 +273,241 @@ function legivel(iso) {
     });
 }
 /**
- * A FOLHA, E ELA É INTEIRA DAQUI: nenhuma família remota, nenhum reset de terceiro. As famílias são
- * as genéricas do sistema de quem abrir, porque baixar uma fonte para desenhar um relatório sobre o
- * repositório de alguém contradiz o comando que não manda nada para lugar nenhum.
+ * O LAYOUT DESTA PÁGINA, e só ele: cor, raio e fonte vêm dos tokens do halogen logo acima.
+ *
+ * A BARRA É FIXA porque os três números são a razão de a página existir - e numa leitura de
+ * dezesseis capítulos eles somem na primeira rolagem, que é quando a pessoa mais precisa deles
+ * para saber o que está olhando.
+ *
+ * O MOVIMENTO CARREGA INFORMAÇÃO: cada capítulo entra de baixo, na ordem em que a esteira o
+ * escreveu, e o atraso é a posição dele. Ele para inteiro sob `prefers-reduced-motion` - uma
+ * página que desliza dezesseis vezes são dezesseis chances de passar mal.
  *
  * E ela imprime: `@media print` existe porque o navegador já exporta PDF, e um relatório que sai
  * torto no papel obriga a construir um gerador de PDF para resolver o que uma regra resolve.
  */
-function estilo() {
-    return `:root {
-  color-scheme: light dark;
-  --ink: #16161a;
-  --ink-soft: #55555f;
-  --line: #e4e4e9;
-  --paper: #ffffff;
-  --canvas: #f6f6f8;
-  --accent: #b4530a;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --ink: #edecea;
-    --ink-soft: #a0a0aa;
-    --line: #2a2a31;
-    --paper: #17171b;
-    --canvas: #0f0f12;
-    --accent: #e9a13b;
-  }
+function layout() {
+    /**
+     * A COSTURA DAS FAMÍLIAS VEM DA CONST, e não do literal: renomear o prefixo em `fonts.ts` tem
+     * que alcançar esta página também. Um literal solto aqui divergiria em silêncio, que é
+     * exatamente o que o portão de `fonts.spec.ts` existe para impedir.
+     */
+    const corpo = `var(${FAMILY_SEAM_PREFIX}body, ui-sans-serif, system-ui, sans-serif)`;
+    const mono = `var(${FAMILY_SEAM_PREFIX}mono, ui-monospace, monospace)`;
+    const display = `var(${FAMILY_SEAM_PREFIX}display, inherit)`;
+    return `body {
+  margin: 0;
+  background: var(--ds-color-semantic-canvas);
+  color: var(--ds-color-semantic-foreground);
+  font-family: ${corpo};
+  font-size: 15px;
+  line-height: 1.6;
 }
 * { box-sizing: border-box; }
-body {
-  margin: 0;
-  background: var(--canvas);
-  color: var(--ink);
-  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+.bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--ds-color-semantic-raised, var(--ds-color-semantic-surface));
+  border-bottom: 1px solid var(--ds-color-semantic-border);
 }
-header {
-  padding: 56px 24px 40px;
-  border-bottom: 1px solid var(--line);
-  background: var(--paper);
+.bar-in {
+  max-width: 920px;
+  margin-inline: auto;
+  padding: 11px 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  align-items: baseline;
+  justify-content: space-between;
 }
-.wrap, header > * { max-width: 900px; margin-inline: auto; }
-.wrap { padding: 0 24px 72px; }
+.bar-repo { margin: 2px 0 0; font-weight: 600; }
+.bar-id { min-width: 0; }
+
+.wrap { max-width: 920px; margin-inline: auto; padding: 0 24px 96px; }
+
 .kicker {
   margin: 0;
-  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: ${mono};
+  font-size: 11px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--accent);
+  color: var(--ds-color-semantic-accent);
+}
+.meta { margin: 0; color: var(--ds-color-semantic-muted); font-size: 13px; }
+
+.hero { padding: 56px 0 8px; }
+h1 {
+  margin: 10px 0 8px;
+  font-family: ${display};
+  font-size: 40px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
 }
-h1 { margin: 12px 0 8px; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; }
-.meta { margin: 0; color: var(--ink-soft); font-size: 14px; }
+.lede { margin: 0 0 28px; color: var(--ds-color-semantic-muted); font-size: 17px; }
+
 .stats {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  margin: -28px 0 40px;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
 }
 .stat {
-  background: var(--paper);
-  border: 1px solid var(--line);
-  border-radius: 14px;
+  background: var(--ds-color-semantic-surface);
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 14px);
   padding: 18px 20px;
 }
-.stat strong { display: block; font-size: 26px; letter-spacing: -0.02em; }
-.stat span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 13px; }
-nav { margin-bottom: 40px; }
-nav ol { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); }
-nav li { margin: 3px 0; }
-nav a { color: inherit; }
-nav a:hover { color: var(--accent); }
-section {
-  background: var(--paper);
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 22px 24px;
-  margin-bottom: 16px;
-}
-h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: -0.01em; }
+.stat strong { display: block; font-size: 28px; letter-spacing: -0.02em; }
+.stat span { display: block; margin-top: 4px; color: var(--ds-color-semantic-muted); font-size: 13px; }
+.bar-track {
+  margin-top: 14px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--ds-color-semantic-overlay, var(--ds-color-semantic-border));
+  overflow: hidden;
+}
+.bar-track i {
+  display: block;
+  height: 100%;
+  width: var(--pct);
+  border-radius: inherit;
+  background: var(--ds-color-semantic-accent);
+  animation: crescer 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+nav { margin: 44px 0 8px; }
+nav ol {
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: capitulo;
+  color: var(--ds-color-semantic-muted);
+  display: grid;
+  gap: 1px;
+}
+nav li {
+  counter-increment: capitulo;
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 7px 10px;
+  border-radius: var(--ds-radius-sm, 8px);
+}
+nav li:hover { background: var(--ds-color-semantic-surface); }
+nav li::before {
+  content: counter(capitulo);
+  min-width: 18px;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ds-color-semantic-faint);
+}
+nav a { color: inherit; text-decoration: none; }
+nav li:hover a { color: var(--ds-color-semantic-accent); }
+/* A regua que sobra entre o nome e a contagem - sem ela os numeros flutuam soltos. */
+nav a::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+}
+nav li > span {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ds-color-semantic-faint);
+}
+
+section.chapter {
+  background: var(--ds-color-semantic-surface);
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 14px);
+  padding: 24px 26px;
+  margin-top: 16px;
+  scroll-margin-top: 84px;
+}
+.hero, nav { background: none; border: 0; padding-inline: 0; }
+/* O TITULO DO CAPITULO SEGURA O TOPO ENQUANTO O CAPITULO PASSA - e e assim que a pessoa sempre
+   sabe o que esta lendo, sem uma linha de script. Um capitulo de cem linhas rolava ate o fim sem
+   nada na tela dizendo de qual dos dezesseis ele era. O deslocamento e a altura da barra: eles se
+   encostam em vez de se sobrepor, e o segundo empurra o primeiro so quando chega a vez dele. */
+h2 {
+  position: sticky;
+  top: 60px;
+  z-index: 5;
+  margin: -24px -26px 14px;
+  padding: 14px 26px 12px;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+  background: var(--ds-color-semantic-surface);
+  border-bottom: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 14px) var(--ds-radius-lg, 14px) 0 0;
+}
+h2 span { display: block; }
+
+/* O PRIMEIRO FATO DO CAPITULO, no peso de quem decide se vale descer. Ele e prosa, nao codigo -
+   entao sai do monoespacado e ganha a regua da esquerda, que e a unica marca do documento que diz
+   isto aqui e a conclusao, o resto e a evidencia. */
+.callout {
+  margin: 0 0 16px;
+  padding: 2px 0 2px 16px;
+  border-left: 2px solid var(--ds-color-semantic-accent);
+  font-size: 15.5px;
+  line-height: 1.55;
+  color: var(--ds-color-semantic-foreground);
+}
+
 pre {
-  margin: 0;
+  margin: 0 0 12px;
   white-space: pre-wrap;
   word-break: break-word;
-  font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--ink-soft);
+  font-family: ${mono};
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--ds-color-semantic-muted);
+}
+
+.familia {
+  margin: 0 0 12px;
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-md, 10px);
+  padding: 10px 14px;
+  background: var(--ds-color-semantic-canvas);
 }
-footer { margin-top: 40px; color: var(--ink-soft); font-size: 13px; }
+.familia summary {
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ds-color-semantic-muted);
+}
+.familia summary b {
+  color: var(--ds-color-semantic-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.grade {
+  list-style: none;
+  margin: 12px 0 4px;
+  padding: 0;
+  display: grid;
+  gap: 4px 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  font-family: ${mono};
+  font-size: 12px;
+  color: var(--ds-color-semantic-muted);
+}
+
+footer { margin-top: 40px; color: var(--ds-color-semantic-muted); font-size: 13px; }
+
+@keyframes crescer { from { width: 0; } }
+@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
+.chapter { animation: entrar 620ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--ordem, 0) * 55ms); }
+
+@media (prefers-reduced-motion: reduce) {
+  .chapter, .bar-track i { animation: none; }
+}
+
 @media print {
-  body { background: #fff; }
-  .stat, section { break-inside: avoid; border-color: #ddd; }
+  .bar { position: static; }
   nav { display: none; }
+  .stat, section.chapter { break-inside: avoid; }
+  .familia { break-inside: auto; }
 }`;
 }

package/dist/report-theme.js

@@ -0,0 +1,610 @@
+/**
+ * O HALOGEN, EMBUTIDO NO PACOTE - os VALORES dele, nunca o marcador dele.
+ *
+ * O QUE O CLIENTE GANHA: o relatório do `inspect` é desenhado por um design system de verdade, o
+ * mesmo que qualquer pessoa instala da galeria. A primeira coisa que ela vê do produto já é o
+ * produto funcionando, e não uma folha que alguém escreveu à mão para a ocasião.
+ *
+ * O ESCOPO FOI REESCRITO PARA A RAIZ, e isto é `INV-GERAL-13`: nada nosso é pedido, escrito ou
+ * sugerido dentro da árvore dele. O `tokens.css` publicado vive sob o escopo do sistema porque
+ * ele foi feito para ser INSTALADO num app; aqui ele veste um documento nosso, então as
+ * declarações passam a morar em `:root` e nenhum atributo nosso aparece no repositório de
+ * ninguém. O que atravessa é a cor, o raio e a tipografia - que é tudo o que uma página precisa.
+ *
+ * POR QUE DENTRO DO PACOTE: `inspect` não faz uma única chamada de rede, e isso é contrato
+ * (`INV-INSPECT-01`, com spec que conta os `fetch`). Buscar o CSS na hora de gerar quebraria o
+ * comando exatamente para quem tem menos motivo para confiar nele - alguém que acabou de apontar
+ * a ferramenta para o próprio repositório. Então ele vem junto, medido e congelado.
+ *
+ * COMO ATUALIZAR, quando o halogen publicar uma versão nova: baixe
+ * `https://www.synthesisui.com/api/registry/ds/halogen`, pegue `artifacts["tokens.css"]` e
+ * reescreva o escopo para a raiz como acima. É uma cópia deliberada, não uma dependência
+ * esquecida - e por isso a versão viaja ao lado, dita na própria página.
+ *
+ * O ESQUEMA: a raiz sozinha é ESCURA; `:root[data-scheme="light"]` é a clara. O relatório abre em
+ * claro por decisão dele (18/09), e o escuro continua ali para quem trocar o atributo.
+ */
+/** A versão do halogen que estas folhas descrevem - dita na página, para a divergência ser vista. */
+export const HALOGEN_VERSION = 18;
+/** `tokens.css` do halogen, com o escopo reescrito para a raiz e nada mais tocado. */
+export const HALOGEN_TOKENS = String.raw `/* 39 more tokens of this system are not emitted here: nothing in it references them. They stay in the system and arrive the moment a recipe, a utility or a component asks. */
+
+:root {
+  --ds-color-moss-400: #4f9d76;
+  --ds-color-moss-500: #3f8a66;
+  --ds-color-rose-400: #e0576a;
+  --ds-color-rose-500: #cf3f54;
+  --ds-color-veil-500: #05070ab3;
+  --ds-color-amber-400: #c9973f;
+  --ds-color-amber-500: #b3842f;
+  --ds-color-blush-400: #f79ce0;
+  --ds-color-slate-50: #ffffff;
+  --ds-color-slate-100: #f7f8f8;
+  --ds-color-slate-200: #e2e4e7;
+  --ds-color-slate-300: #d0d6e0;
+  --ds-color-slate-400: #8a8f98;
+  --ds-color-slate-500: #62666d;
+  --ds-color-slate-600: #383b3f;
+  --ds-color-slate-700: #23252a;
+  --ds-color-slate-800: #18191c;
+  --ds-color-slate-900: #0f1011;
+  --ds-color-slate-950: #08090a;
+  --ds-color-indigo-300: #a5b4ff;
+  --ds-color-indigo-400: #7c8cff;
+  --ds-color-indigo-500: #5b6cff;
+  --ds-color-semantic-info: var(--ds-color-indigo-400);
+  --ds-color-semantic-faint: var(--ds-color-slate-500);
+  --ds-color-semantic-muted: var(--ds-color-slate-400);
+  --ds-color-semantic-scrim: var(--ds-color-veil-500);
+  --ds-color-semantic-accent: var(--ds-color-blush-400);
+  --ds-color-semantic-border: var(--ds-color-slate-700);
+  --ds-color-semantic-canvas: var(--ds-color-slate-950);
+  --ds-color-semantic-danger: var(--ds-color-rose-400);
+  --ds-color-semantic-raised: var(--ds-color-slate-800);
+  --ds-color-semantic-overlay: var(--ds-color-slate-700);
+  --ds-color-semantic-primary: var(--ds-color-indigo-500);
+  --ds-color-semantic-success: var(--ds-color-moss-400);
+  --ds-color-semantic-surface: var(--ds-color-slate-900);
+  --ds-color-semantic-warning: var(--ds-color-amber-400);
+  --ds-color-semantic-foreground: var(--ds-color-slate-100);
+  --ds-color-series-1: var(--ds-color-indigo-500);
+  --ds-color-series-2: var(--ds-color-amber-500);
+  --ds-color-series-3: var(--ds-color-moss-500);
+  --ds-color-series-4: var(--ds-color-rose-500);
+  --ds-color-series-5: var(--ds-color-blush-400);
+  --ds-color-series-6: var(--ds-color-indigo-300);
+  --ds-color-series-7: var(--ds-color-moss-400);
+  --ds-color-series-8: var(--ds-color-rose-400);
+  --ds-radius-lg: 12px;
+  --ds-radius-md: 8px;
+  --ds-radius-sm: 6px;
+  --ds-radius-xs: 2px;
+  --ds-radius-full: 9999px;
+  --ds-shadow-md: 0 8px 24px #00000080;
+  --ds-shadow-sm: 0 2px 4px #00000066;
+  --ds-shadow-glow: 0 0 24px -6px #5b6cffaa;
+  --ds-shadow-ring: 0 0 0 1px #23252a inset;
+  --ds-spacing-lg: 2rem;
+  --ds-spacing-md: 1.5rem;
+  --ds-spacing-sm: 1rem;
+  --ds-spacing-xl: 3rem;
+  --ds-spacing-xs: 0.75rem;
+  --ds-spacing-2xl: 4rem;
+  --ds-spacing-2xs: 0.5rem;
+  --ds-spacing-3xl: 6rem;
+  --ds-spacing-3xs: 0.25rem;
+  --ds-typography-scale-lg-font-size: 1.25rem;
+  --ds-typography-scale-lg-line-height: 1.4;
+  --ds-typography-scale-sm-font-size: 0.875rem;
+  --ds-typography-scale-sm-line-height: 1.5;
+  --ds-typography-scale-xl-font-size: 1.5rem;
+  --ds-typography-scale-xl-line-height: 1.3;
+  --ds-typography-scale-xl-letter-spacing: -0.01em;
+  --ds-typography-scale-xs-font-size: 0.75rem;
+  --ds-typography-scale-xs-line-height: 1rem;
+  --ds-typography-scale-2xl-font-size: 2rem;
+  --ds-typography-scale-2xl-line-height: 1.2;
+  --ds-typography-scale-2xl-letter-spacing: -0.02em;
+  --ds-typography-scale-base-font-size: 1rem;
+  --ds-typography-scale-base-line-height: 1.6;
+  --ds-typography-scale-display-font-size: 4rem;
+  --ds-typography-scale-display-line-height: 1.05;
+  --ds-typography-scale-display-letter-spacing: -0.03em;
+  --ds-typography-weights-medium: 510;
+  --ds-typography-weights-regular: 400;
+  --ds-typography-weights-semibold: 590;
+  --ds-typography-families-body: "Inter Variable", sans-serif;
+  --ds-typography-families-mono: "Berkeley Mono", monospace;
+  --ds-typography-families-display: "Inter Variable", sans-serif;
+  --ds-motion-durations-base: 200ms;
+  --ds-motion-durations-fast: 120ms;
+  --ds-motion-durations-slow: 320ms;
+  --ds-motion-durations-ambient: 3.5s;
+  --ds-motion-easings-out: ease-out;
+  --ds-motion-easings-swift: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ds-motion-easings-standard: ease;
+  --color-info: var(--ds-color-semantic-info);
+  --color-faint: var(--ds-color-semantic-faint);
+  --color-muted: var(--ds-color-semantic-muted);
+  --color-scrim: var(--ds-color-semantic-scrim);
+  --color-accent: var(--ds-color-semantic-accent);
+  --color-border: var(--ds-color-semantic-border);
+  --color-canvas: var(--ds-color-semantic-canvas);
+  --color-danger: var(--ds-color-semantic-danger);
+  --color-raised: var(--ds-color-semantic-raised);
+  --color-overlay: var(--ds-color-semantic-overlay);
+  --color-primary: var(--ds-color-semantic-primary);
+  --color-success: var(--ds-color-semantic-success);
+  --color-surface: var(--ds-color-semantic-surface);
+  --color-warning: var(--ds-color-semantic-warning);
+  --color-foreground: var(--ds-color-semantic-foreground);
+  --color-series-1: var(--ds-color-series-1);
+  --color-series-2: var(--ds-color-series-2);
+  --color-series-3: var(--ds-color-series-3);
+  --color-series-4: var(--ds-color-series-4);
+  --color-series-5: var(--ds-color-series-5);
+  --color-series-6: var(--ds-color-series-6);
+  --color-series-7: var(--ds-color-series-7);
+  --color-series-8: var(--ds-color-series-8);
+  --spacing-lg: var(--ds-spacing-lg);
+  --spacing-md: var(--ds-spacing-md);
+  --spacing-sm: var(--ds-spacing-sm);
+  --spacing-xl: var(--ds-spacing-xl);
+  --spacing-xs: var(--ds-spacing-xs);
+  --spacing-2xl: var(--ds-spacing-2xl);
+  --spacing-2xs: var(--ds-spacing-2xs);
+  --spacing-3xl: var(--ds-spacing-3xl);
+  --spacing-3xs: var(--ds-spacing-3xs);
+  --radius-lg: var(--ds-radius-lg);
+  --radius-md: var(--ds-radius-md);
+  --radius-sm: var(--ds-radius-sm);
+  --radius-xs: var(--ds-radius-xs);
+  --radius-full: var(--ds-radius-full);
+  --shadow-md: var(--ds-shadow-md);
+  --shadow-sm: var(--ds-shadow-sm);
+  --shadow-glow: var(--ds-shadow-glow);
+  --shadow-ring: var(--ds-shadow-ring);
+  --font-body: var(--ds-typography-families-body);
+  --font-mono: var(--ds-typography-families-mono);
+  --font-display: var(--ds-typography-families-display);
+  --font-weight-medium: var(--ds-typography-weights-medium);
+  --font-weight-regular: var(--ds-typography-weights-regular);
+  --font-weight-semibold: var(--ds-typography-weights-semibold);
+  --ease-out: var(--ds-motion-easings-out);
+  --ease-swift: var(--ds-motion-easings-swift);
+  --ease-standard: var(--ds-motion-easings-standard);
+  --text-lg: var(--ds-typography-scale-lg-font-size);
+  --text-lg--line-height: var(--ds-typography-scale-lg-line-height);
+  --text-sm: var(--ds-typography-scale-sm-font-size);
+  --text-sm--line-height: var(--ds-typography-scale-sm-line-height);
+  --text-xl: var(--ds-typography-scale-xl-font-size);
+  --text-xl--line-height: var(--ds-typography-scale-xl-line-height);
+  --text-xl--letter-spacing: var(--ds-typography-scale-xl-letter-spacing);
+  --text-xs: var(--ds-typography-scale-xs-font-size);
+  --text-xs--line-height: var(--ds-typography-scale-xs-line-height);
+  --text-2xl: var(--ds-typography-scale-2xl-font-size);
+  --text-2xl--line-height: var(--ds-typography-scale-2xl-line-height);
+  --text-2xl--letter-spacing: var(--ds-typography-scale-2xl-letter-spacing);
+  --text-base: var(--ds-typography-scale-base-font-size);
+  --text-base--line-height: var(--ds-typography-scale-base-line-height);
+  --text-display: var(--ds-typography-scale-display-font-size);
+  --text-display--line-height: var(--ds-typography-scale-display-line-height);
+  --text-display--letter-spacing: var(--ds-typography-scale-display-letter-spacing);
+}
+
+@layer base {
+  :root {
+    color: var(--ds-color-semantic-foreground);
+    font-family: var(--ds-typography-families-body);
+  }
+}
+
+:root[data-scheme="light"] {
+  --ds-color-semantic-faint: var(--ds-color-slate-500);
+  --ds-color-semantic-muted: var(--ds-color-slate-600);
+  --ds-color-semantic-border: var(--ds-color-slate-300);
+  --ds-color-semantic-canvas: var(--ds-color-slate-100);
+  --ds-color-semantic-raised: var(--ds-color-slate-50);
+  --ds-color-semantic-overlay: var(--ds-color-slate-200);
+  --ds-color-semantic-surface: var(--ds-color-slate-50);
+  --ds-color-semantic-foreground: var(--ds-color-slate-900);
+}
+
+:root[data-theme="light"] {
+  --ds-color-semantic-faint: var(--ds-color-slate-500);
+  --ds-color-semantic-muted: var(--ds-color-slate-600);
+  --ds-color-semantic-border: var(--ds-color-slate-300);
+  --ds-color-semantic-canvas: var(--ds-color-slate-100);
+  --ds-color-semantic-raised: var(--ds-color-slate-50);
+  --ds-color-semantic-overlay: var(--ds-color-slate-200);
+  --ds-color-semantic-surface: var(--ds-color-slate-50);
+  --ds-color-semantic-foreground: var(--ds-color-slate-900);
+}
+
+@layer base {
+  :root :is(a[href], button, summary, [role="button"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="switch"], [role="option"], [tabindex]:not([tabindex="-1"])):focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--ds-color-semantic-primary);
+    outline-offset: 2px;
+  }
+}
+
+@layer base {
+  :root .ds-avatar { flex-shrink: 0; }
+}
+
+@layer base {
+  @media (prefers-reduced-motion: reduce) {
+    :root *, :root *::before, :root *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}
+
+@keyframes ds-halogen-rise {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+
+@keyframes ds-halogen-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ds-halogen-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes ds-halogen-pulse {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ds-halogen-sheen {
+  to {
+    transform: translateX(120%);
+  }
+  from {
+    transform: translateX(-120%);
+  }
+}
+
+@keyframes ds-halogen-expand {
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+}
+
+@keyframes ds-halogen-slide-in {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+@layer base {
+  :root {
+    --animate-rise: ds-halogen-rise var(--ds-motion-durations-base, 200ms) var(--ds-motion-easings-standard, ease) both;
+    --animate-blink: ds-halogen-blink var(--ds-motion-durations-slow, 400ms) var(--ds-motion-easings-standard, ease);
+    --animate-float: ds-halogen-float var(--ds-motion-durations-ambient, 2s) var(--ds-motion-easings-gentle, ease-in-out) infinite;
+    --animate-pulse: ds-halogen-pulse var(--ds-motion-durations-ambient, 2s) var(--ds-motion-easings-gentle, ease-in-out) infinite;
+    --animate-sheen: ds-halogen-sheen var(--ds-motion-durations-ambient, 2s) var(--ds-motion-easings-gentle, ease-in-out) infinite;
+    --animate-expand: ds-halogen-expand var(--ds-motion-durations-base, 200ms) var(--ds-motion-easings-standard, ease) both;
+    --animate-slide-in: ds-halogen-slide-in var(--ds-motion-durations-base, 200ms) var(--ds-motion-easings-standard, ease) both;
+  }
+}
+
+@layer components {
+:root .ds-card {
+  padding: var(--ds-spacing-md);
+  box-shadow: var(--ds-shadow-ring);
+  transition: box-shadow var(--ds-motion-durations-base) var(--ds-motion-easings-swift);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-semantic-surface);
+  color: inherit;
+}
+
+:root .ds-card[data-padding="none"] {
+  padding: 0;
+}
+
+:root .ds-card[data-emphasis="elevated"] {
+  box-shadow: var(--ds-shadow-md);
+  background-color: var(--ds-color-semantic-raised);
+}
+
+:root .ds-card:hover {
+  box-shadow: var(--ds-shadow-ring), var(--ds-shadow-md);
+}
+
+:root .ds-card[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-card[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-card[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-badge {
+  gap: var(--ds-spacing-3xs);
+  display: inline-flex;
+  padding: var(--ds-spacing-3xs) var(--ds-spacing-2xs);
+  font-size: var(--ds-typography-scale-xs-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-mono);
+  line-height: var(--ds-typography-scale-xs-line-height);
+  border-radius: var(--ds-radius-sm);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: inherit;
+}
+
+:root .ds-badge[data-intent="info"] {
+  color: var(--ds-color-semantic-info);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="accent"] {
+  color: var(--ds-color-semantic-accent);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="danger"] {
+  color: var(--ds-color-semantic-danger);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="neutral"] {
+  color: var(--ds-color-semantic-muted);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="success"] {
+  color: var(--ds-color-semantic-success);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="warning"] {
+  color: var(--ds-color-semantic-warning);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-input {
+  color: var(--ds-color-semantic-foreground);
+  width: 100%;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  box-shadow: var(--ds-shadow-ring);
+  font-family: var(--ds-typography-families-body);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  transition: box-shadow var(--ds-motion-durations-fast) var(--ds-motion-easings-swift);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-color-semantic-canvas);
+}
+
+:root .ds-input:focus-visible {
+  box-shadow: var(--ds-shadow-glow);
+}
+
+:root .ds-input[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-input[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-input[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-avatar {
+  color: var(--ds-color-semantic-foreground);
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  font-size: var(--ds-typography-scale-sm-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-body);
+  font-weight: var(--ds-typography-weights-medium);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  border-radius: var(--ds-radius-full);
+  justify-content: center;
+  background-color: var(--ds-color-semantic-overlay);
+}
+
+:root .ds-avatar[data-size="lg"] {
+  width: 56px;
+  height: 56px;
+  font-size: var(--ds-typography-scale-lg-font-size);
+  line-height: var(--ds-typography-scale-lg-line-height);
+}
+
+:root .ds-avatar[data-size="md"] {
+  width: 40px;
+  height: 40px;
+}
+
+:root .ds-avatar[data-size="sm"] {
+  width: 28px;
+  height: 28px;
+}
+
+:root .ds-button {
+  gap: var(--ds-spacing-2xs);
+  display: inline-flex;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-sm);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-body);
+  font-weight: var(--ds-typography-weights-medium);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  transition: all var(--ds-motion-durations-fast) var(--ds-motion-easings-swift);
+  border-radius: var(--ds-radius-md);
+  justify-content: center;
+  color: inherit;
+}
+
+:root .ds-button[data-intent="ghost"] {
+  color: var(--ds-color-semantic-muted);
+}
+
+:root .ds-button[data-intent="primary"] {
+  color: var(--ds-color-semantic-canvas);
+  box-shadow: var(--ds-shadow-glow);
+  background-color: var(--ds-color-semantic-primary);
+}
+
+:root .ds-button[data-intent="secondary"] {
+  color: var(--ds-color-semantic-foreground);
+  box-shadow: var(--ds-shadow-ring);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-button:hover {
+  filter: brightness(1.12);
+}
+
+:root .ds-button:active {
+  transform: translateY(1px);
+}
+
+:root .ds-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-button[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-button:focus-visible {
+  outline: 2px solid var(--ds-color-semantic-primary);
+  outline-offset: 2px;
+}
+
+:root .ds-select {
+  gap: var(--ds-spacing-2xs);
+  color: var(--ds-color-semantic-foreground);
+  border: 1px solid var(--ds-color-semantic-border);
+  display: inline-flex;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-body);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  transition: border-color var(--ds-motion-durations-fast) var(--ds-motion-easings-standard);
+  border-radius: var(--ds-radius-md);
+  justify-content: space-between;
+  background-color: var(--ds-color-semantic-surface);
+}
+
+:root .ds-select:focus-visible {
+  border-color: var(--ds-color-semantic-primary);
+}
+
+:root .ds-select[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-select[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-select[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-command-bar {
+  gap: var(--ds-spacing-2xs);
+  color: var(--ds-color-semantic-muted);
+  width: 100%;
+  border: 1px solid var(--ds-color-semantic-border);
+  display: flex;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-sm);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  box-shadow: var(--ds-shadow-ring);
+  align-items: center;
+  font-family: var(--ds-typography-families-mono);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-color-semantic-surface);
+}
+
+:root .ds-command-bar:focus-visible {
+  box-shadow: var(--ds-shadow-glow);
+}
+
+:root .ds-command-bar[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-command-bar[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-command-bar[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.430",
+  "version": "0.16.432",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {