@zaip-ai/cli 6.3.0 → 7.5.0

package/templates/.agents/design/design-system-maker/frontend/shared/report-view.js

@@ -0,0 +1,267 @@
+import { action, el, section } from "./components.js";
+import { extractionState } from "./extraction-state.js";
+import { absentReport } from "./failure-view.js";
+import { entryPath, samplingLabel, scoreLabel } from "./model.js";
+
+const metricNames = {
+  "category-coverage": "Categorias com evidência",
+  "declaration-sampling": "Declarações CSS retidas",
+  "color-resolution": "Cores resolvidas",
+  "declared-token-reuse": "Reuso de valores declarados",
+};
+export function provenanceDetails(row) {
+  const node = el("details", "evidence-details");
+  node.append(el("summary", "", "Fonte e evidências"));
+  const values = el("dl", "evidence-list");
+  for (const [label, value] of [
+    ["Evidências", row.evidence?.join(", ")],
+    ["Valor declarado", row.declared_value],
+    ["Classificação", row.kind],
+    ["Método", row.method ?? row.provenance?.method],
+    ["URL da fonte", row.provenance?.url ?? row.url],
+    ["Arquivo/referência local", row.provenance?.locator],
+    ["Seletor", row.provenance?.selector ?? row.selector],
+    ["SHA-256", row.provenance?.source_hash ?? row.hash],
+    ["Observado em", row.provenance?.observed_at ?? row.observed_at],
+  ]) {
+    if (value == null) continue;
+    values.append(el("dt", "", label), el("dd", "", value));
+  }
+  node.append(values);
+  return node;
+}
+export function table(caption, headings, rows) {
+  const wrap = el("div", "report-table-wrap");
+  wrap.tabIndex = 0;
+  wrap.setAttribute("role", "region");
+  wrap.setAttribute("aria-label", caption);
+  const node = el("table", "report-table");
+  node.append(el("caption", "", caption));
+  const header = el("tr");
+  for (const heading of headings) {
+    const cell = el("th", "", heading);
+    cell.setAttribute("scope", "col");
+    header.append(cell);
+  }
+  const thead = el("thead");
+  thead.append(header);
+  const tbody = el("tbody");
+  for (const row of rows) {
+    const tr = el("tr");
+    for (const value of row) {
+      const cell = el("td");
+      cell.append(
+        typeof value === "object" && value !== null
+          ? value
+          : el("span", "", value ?? "Não registrado"),
+      );
+      tr.append(cell);
+    }
+    tbody.append(tr);
+  }
+  node.append(thead, tbody);
+  wrap.append(node);
+  return wrap;
+}
+function category(title, values) {
+  const node = section(title, "wide report-section");
+  node.append(
+    values.length
+      ? table(
+          title,
+          ["Propriedade", "Valor", "Ocorrências", "Proveniência"],
+          values.map((row) => [row.property, row.value, row.occurrences, provenanceDetails(row)]),
+        )
+      : el("p", "muted", "Nenhuma declaração desta categoria foi retida na amostra."),
+  );
+  return node;
+}
+export function reportSections(report, summary, context = { report, summary }) {
+  if (report?.status !== "measured-evidence") {
+    return [absentReport(context)];
+  }
+  const coverage = section("Cobertura da extração", "wide report-section");
+  coverage.dataset.reportSection = "coverage";
+  coverage.append(
+    el("p", "coverage-score", `${report.score}/100`),
+    el("p", "meta", `Método: ${report.method_version}`),
+    el("p", "", samplingLabel(report.sampling)),
+    el(
+      "p",
+      "help",
+      "Score de evidências extraídas. Não avalia qualidade visual, fidelidade, LLM ou acessibilidade. Consulte o método, as fontes e os limites registrados nesta revisão.",
+    ),
+  );
+  coverage.append(
+    table(
+      "Fórmula e evidências da cobertura",
+      ["Métrica", "Numerador / denominador", "Razão", "Peso", "Explicação"],
+      report.metrics.map((metric) => [
+        metricNames[metric.id] ?? metric.id,
+        `${metric.numerator} / ${metric.denominator}`,
+        metric.ratio,
+        metric.weight,
+        metric.explanation,
+      ]),
+    ),
+  );
+  coverage.append(
+    el(
+      "p",
+      "formula",
+      `Score persistido = arredondar(${report.metrics.map((metric) => `${metric.weight} × ${metric.ratio}`).join(" + ")}) = ${report.score}. Denominador zero tem razão 0 e lacuna explícita.`,
+    ),
+  );
+  const exports = el("div", "page-actions");
+  exports.append(
+    action(
+      "Exportar relatório Markdown",
+      entryPath(summary.id, "report-markdown", summary.revision),
+    ),
+    action("Exportar relatório JSON", entryPath(summary.id, "report", summary.revision)),
+  );
+  coverage.append(exports);
+  const colors = section(`Paleta completa · ${report.colors.length} cores`, "wide report-section");
+  colors.dataset.reportSection = "colors";
+  const grid = el("div", "report-color-grid");
+  for (const row of report.colors) {
+    const chip = el("article", "color-candidate report-color");
+    chip.dataset.reportColor = row.value;
+    const dot = el("span", "color-dot");
+    dot.setAttribute("aria-hidden", "true");
+    if (/^#(?:[a-f\d]{3}|[a-f\d]{4}|[a-f\d]{6}|[a-f\d]{8})$/i.test(row.value))
+      dot.style.backgroundColor = row.value;
+    chip.append(
+      dot,
+      el("code", "", row.value),
+      el("p", "meta", `${row.property} · ${row.occurrences} ocorrências`),
+      el("p", "help", "Inferida de CSS declarado"),
+      provenanceDetails(row),
+    );
+    grid.append(chip);
+  }
+  colors.append(
+    grid,
+    el(
+      "p",
+      "help",
+      "Todas as cores do relatório retido, incluindo valores RGB/HSL/var normalizados. Não representam estilo computado ou promoção de tokens centrais.",
+    ),
+  );
+  const components = section("Elementos HTML e candidatos de interface", "wide report-section");
+  components.dataset.reportSection = "elements";
+  components.append(
+    el("p", "inventory-count", `${report.element_count} ELEMENTOS HTML`),
+    el(
+      "p",
+      "help",
+      `Inclui cabeçalho e metadados HTML. ${report.components.length} grupos candidatos estáticos; não são componentes reutilizáveis comprovados.`,
+    ),
+  );
+  components.append(
+    table(
+      "Candidatos declarados de interface",
+      ["Tag / papel", "Seletor", "Texto", "Ocorrências", "Fonte"],
+      report.components.map((row) => [
+        `${row.tag}${row.role ? ` / ${row.role}` : ""}`,
+        row.selector,
+        row.text,
+        row.occurrences,
+        provenanceDetails(row),
+      ]),
+    ),
+  );
+  const resources = section("Recursos recebidos", "wide report-section");
+  resources.append(
+    table(
+      "Recursos recebidos e horários observados",
+      ["Tipo", "URL", "Bytes", "Observado em", "Proveniência"],
+      report.resources.map((row) => [
+        row.kind,
+        row.url,
+        row.bytes,
+        row.observed_at,
+        provenanceDetails(row),
+      ]),
+    ),
+    el(
+      "p",
+      "help",
+      "URLs e hashes identificam fontes recebidas; os arquivos remotos brutos não foram preservados.",
+    ),
+  );
+  if (report.sampling.sources?.length)
+    resources.append(
+      table(
+        "Amostragem por fonte CSS antes do limite global",
+        ["Fonte", "Total", "Retidas", "Omitidas"],
+        report.sampling.sources.map((row) => [
+          row.source_url ?? row.url,
+          row.total,
+          row.sampled,
+          row.truncated,
+        ]),
+      ),
+    );
+  const gaps = section("Lacunas e limites", "wide report-section");
+  const list = el("ul", "report-gaps");
+  for (const value of [...report.gaps, ...(report.limitations ?? [])])
+    list.append(el("li", "", value));
+  gaps.append(list);
+  return [
+    coverage,
+    colors,
+    category("Tipografia declarada", report.typography),
+    category("Espaçamentos declarados", report.spacing),
+    category("Raios declarados", report.radii),
+    components,
+    resources,
+    gaps,
+  ];
+}
+export function reportDiagnostic(report, summary, context = { report, summary }, link = true) {
+  const state = extractionState(context);
+  const node = section(
+    state.state === "failed" ? state.title : "Diagnóstico da extração",
+    "diagnostic",
+  );
+  if (["failed", "collecting"].includes(state.state)) {
+    node.append(el("p", "", state.message));
+    return node;
+  }
+  node.append(
+    el("p", "coverage-label", scoreLabel(report)),
+    el("p", "", samplingLabel(report?.sampling ?? summary.sampling)),
+    el(
+      "p",
+      "muted",
+      "Cobertura de evidências extraídas; qualidade visual não avaliada. As fontes e lacunas estão no relatório abaixo.",
+    ),
+  );
+  if (report?.status === "measured-evidence") {
+    const bars = el("div", "diagnostic-bars");
+    for (const metric of report.metrics) {
+      const row = el("div", "diagnostic-metric");
+      const track = el("div", "diagnostic-track");
+      const fill = el("span", "diagnostic-fill");
+      if (Number.isFinite(metric.ratio))
+        fill.style.width = `${Math.max(0, Math.min(1, metric.ratio)) * 100}%`;
+      track.append(fill);
+      row.append(
+        el("span", "", metricNames[metric.id] ?? metric.id),
+        track,
+        el("code", "", `${metric.numerator}/${metric.denominator}`),
+      );
+      bars.append(row);
+    }
+    node.append(bars);
+    if (link)
+      node.append(
+        action(
+          "Abrir diagnóstico",
+          `/viewer/diagnostic.html?id=${encodeURIComponent(summary.id)}&revision=${summary.revision}`,
+        ),
+      );
+  }
+  return node;
+}

package/templates/.agents/design/design-system-maker/frontend/shared/reprocess-dialog.js

@@ -0,0 +1,192 @@
+import { connect, detail, job, reprocess } from "./api.js";
+import { action, button, el } from "./components.js";
+import { jobText } from "./job-view.js";
+import { viewerPath } from "./model.js";
+
+let active = null;
+
+// Dismissing a running dialog hides progress; it never submits a second job or cancels the server.
+export async function reprocessInPlace(id, control, status, onCompleted, dependencies = {}) {
+  const services = {
+    connect,
+    detail,
+    job,
+    reprocess,
+    schedule: (...args) => setTimeout(...args),
+    cancelDelay: (id) => clearTimeout(id),
+    parent: document.body,
+    ...dependencies,
+  };
+  if (active) {
+    if (!active.open) active.showModal();
+    return;
+  }
+  const dialog = el("dialog", "reprocess-dialog");
+  active = dialog;
+  const heading = el("h2", "", "Reprocessando referência");
+  heading.id = "reprocessTitle";
+  const message = el("p", "", "Preparando reprocessamento…");
+  message.id = "reprocessMessage";
+  message.setAttribute("role", "status");
+  message.setAttribute("aria-live", "polite");
+  const spinner = el("span", "job-spinner");
+  spinner.setAttribute("aria-hidden", "true");
+  const hint = el(
+    "p",
+    "help",
+    "Ao concluir, esta janela fecha e a nova revisão aparece automaticamente.",
+  );
+  const browserAction = el("p", "help");
+  const actions = el("div", "page-actions");
+  const close = button("Ocultar progresso", () => dialog.close());
+  const retry = button("Retomar acompanhamento", () => resume?.());
+  retry.hidden = true;
+  actions.append(retry, close);
+  dialog.append(heading, spinner, message, browserAction, hint, actions);
+  dialog.setAttribute("aria-labelledby", heading.id);
+  hint.id = "reprocessHint";
+  dialog.setAttribute("aria-describedby", hint.id);
+  services.parent.append(dialog);
+  dialog.showModal();
+  control.disabled = true;
+  control.classList.add("is-working");
+  const controller = new AbortController();
+  let timer,
+    resume,
+    jobId,
+    revision,
+    terminal = false,
+    paused = false,
+    disposed = false;
+  const setMessage = (text) => {
+    message.textContent = text;
+    status.textContent = text;
+  };
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    services.cancelDelay(timer);
+    controller.abort();
+    window.removeEventListener("pagehide", cleanup);
+    services.signal?.removeEventListener("abort", cleanup);
+    dialog.remove();
+    active = null;
+    control.disabled = false;
+    control.classList.remove("is-working");
+    if (control.isConnected) control.focus();
+    else document.querySelector("#viewerMain")?.focus();
+  };
+  window.addEventListener("pagehide", cleanup, { once: true });
+  services.signal?.addEventListener("abort", cleanup, { once: true });
+  if (services.signal?.aborted) {
+    cleanup();
+    return;
+  }
+  dialog.addEventListener("close", () => {
+    if (terminal || paused) cleanup();
+    else status.textContent = "Reprocessamento em andamento. A página será atualizada ao concluir.";
+  });
+  const fail = (text) => {
+    terminal = true;
+    heading.textContent = "Reprocessamento não concluído";
+    spinner.hidden = true;
+    hint.textContent = "Confira a mensagem antes de iniciar outra tentativa.";
+    close.textContent = "Fechar";
+    setMessage(text);
+    if (!dialog.open) cleanup();
+  };
+  const pause = (text, callback, label = "Retomar acompanhamento") => {
+    paused = true;
+    spinner.hidden = true;
+    retry.hidden = false;
+    retry.textContent = label;
+    resume = () => {
+      if (!paused || disposed) return;
+      paused = false;
+      retry.hidden = true;
+      spinner.hidden = false;
+      callback();
+    };
+    setMessage(text);
+    close.textContent = "Fechar";
+    if (!dialog.open) cleanup();
+  };
+  const complete = async (value) => {
+    if (disposed) return;
+    setMessage("Reprocessamento concluído. Atualizando a página…");
+    try {
+      await onCompleted(value);
+      if (disposed) return;
+      status.textContent = "Reprocessamento concluído. Nova revisão carregada.";
+      cleanup();
+    } catch (error) {
+      if (!disposed)
+        pause(
+          `A revisão foi gerada, mas a página não foi atualizada: ${error.message}`,
+          () => complete(value),
+          "Atualizar página",
+        );
+    }
+  };
+  const poll = async () => {
+    if (disposed) return;
+    try {
+      const value = await services.job(jobId, controller.signal);
+      if (disposed) return;
+      setMessage(jobText(value));
+      browserAction.textContent = value.browser?.action ?? "";
+      if (["queued", "running"].includes(value.status)) {
+        timer = services.schedule(poll, 1000);
+      } else if (value.status === "completed") {
+        if (
+          value.entry_id !== id ||
+          !Number.isInteger(value.result_revision) ||
+          value.result_revision <= revision
+        )
+          throw new Error("Resultado sem uma nova revisão confirmada para esta referência.");
+        await complete(value);
+      } else if (value.status === "failed") {
+        fail(jobText(value));
+        if (!disposed)
+          actions.prepend(action("Ver tentativa", viewerPath(id, value.result_revision ?? null)));
+      } else throw new Error("Estado da operação não reconhecido.");
+    } catch (error) {
+      if (!disposed && error.name !== "AbortError")
+        pause(
+          `Acompanhamento interrompido: ${error.message}. A operação pode continuar no servidor.`,
+          poll,
+        );
+    }
+  };
+  try {
+    await services.connect();
+    if (disposed) return;
+    const current = await services.detail(id, null, 0, controller.signal);
+    if (disposed) return;
+    revision = current.revision;
+    heading.textContent = `Reprocessando ${current.summary.name}`;
+    if (!current.summary.replay_available || !current.summary.request_url) {
+      fail(
+        current.summary.replay_unavailable_reason ??
+          "URL exata indisponível. Informe o endereço para reprocessar.",
+      );
+      if (!disposed)
+        actions.prepend(action("Informar URL", `/generate.html?id=${encodeURIComponent(id)}`));
+      return;
+    }
+    setMessage("Iniciando nova revisão…");
+    const accepted = await services.reprocess(id, revision);
+    if (disposed) return;
+    jobId = accepted.jobId;
+    await poll();
+  } catch (error) {
+    if (disposed || error.name === "AbortError") return;
+    fail(
+      error.status === 409
+        ? `O item mudou. Atualize a página antes de repetir: ${error.message}`
+        : error.status === 403
+          ? `A sessão mudou. Reconecte antes de repetir: ${error.message}`
+          : `Reprocessamento não confirmado: ${error.message}. Se o envio foi interrompido, consulte a revisão atual antes de repetir.`,
+    );
+  }
+}

package/templates/.agents/design/design-system-maker/frontend/shared/specimens.js

@@ -0,0 +1,231 @@
+import { button, el, section, siteIcon } from "./components.js";
+import { captureCoverageLabel, colorRoleLabels, paletteEvidence } from "./palette-evidence.js";
+import { provenanceDetails } from "./report-view.js";
+import { componentStyles, previewModel, safeFont, safeLength } from "./visual-model.js";
+
+function sampleCard(title) {
+  const node = el("article", "ds-demo-card");
+  node.append(el("h4", "", title));
+  return node;
+}
+function sampleButton(text, variant, handler) {
+  const node = button(text, handler ?? (() => {}), `ds-demo-button ds-demo-${variant}`);
+  node.dataset.specimen = `button-${variant}`;
+  return node;
+}
+function applyDescriptor(node, descriptors, pattern) {
+  const row = descriptors.find((item) => pattern.test(`${item.tag ?? ""} ${item.selector ?? ""}`));
+  if (!row) return;
+  for (const [property, scalar] of Object.entries(componentStyles(row)))
+    node.style[property] = scalar;
+  node.dataset.descriptor = row.selector ?? row.tag;
+}
+export function specimenSections(value, { separateScales = false } = {}) {
+  const model = previewModel(value);
+  if (!model.available) {
+    const empty = section("Preview visual indisponível", "wide");
+    empty.append(el("p", "", model.unknown.join(" ")));
+    return [empty];
+  }
+  const summary = value.summary ?? value;
+  const descriptors = model.raw.components ?? [];
+  const practical = section("Resumo prático", "wide ds-specimens");
+  practical.dataset.specimenSection = "components";
+  practical.append(el("p", "help", "Preview dos tokens extraídos · controles de demonstração."));
+  const missingRoles = paletteEvidence(value).missingRoles;
+  practical.append(el("p", "help", captureCoverageLabel(value)));
+  if (missingRoles.length)
+    practical.append(
+      el(
+        "p",
+        "help",
+        `Papéis sem suporte: ${missingRoles.map((name) => colorRoleLabels[name]).join(", ")}. O preview usa fallback local neutro nesses papéis.`,
+      ),
+    );
+  const grid = el("div", "ds-specimen-grid");
+  const buttons = sampleCard("Botões · primary / secondary / ghost");
+  const group = el("div", "ds-demo-actions");
+  const feedback = el("p", "help", "Experimente os controles.");
+  feedback.setAttribute("role", "status");
+  for (const [label, variant] of [
+    ["Primário", "primary"],
+    ["Secundário", "secondary"],
+    ["Ghost", "ghost"],
+  ]) {
+    const node = sampleButton(label, variant, () => {
+      feedback.textContent = `${label} acionado apenas nesta demonstração.`;
+    });
+    applyDescriptor(
+      node,
+      descriptors,
+      variant === "primary"
+        ? /button-primary|(^|\s)button(\s|$)/i
+        : new RegExp(`button-${variant}`, "i"),
+    );
+    group.append(node);
+  }
+  const disabled = sampleButton("Desabilitado", "primary");
+  disabled.disabled = true;
+  group.append(disabled);
+  buttons.append(group, feedback);
+  const form = sampleCard("Inputs e dropdown");
+  const label = el("label", "", "Nome de exemplo");
+  const input = el("input", "ds-demo-input");
+  input.type = "text";
+  input.id = `specimen-name-${summary.id}`;
+  label.htmlFor = input.id;
+  input.placeholder = "Digite para testar o campo";
+  input.dataset.specimen = "input";
+  const selectLabel = el("label", "", "Plano da demonstração");
+  const select = el("select", "ds-demo-select");
+  select.id = `specimen-select-${summary.id}`;
+  selectLabel.htmlFor = select.id;
+  select.dataset.specimen = "select";
+  for (const [key, text] of [
+    ["main", "Plano principal"],
+    ["secondary", "Plano secundário"],
+    ["enterprise", "Plano enterprise"],
+  ]) {
+    const option = el("option", "", text);
+    option.value = key;
+    select.append(option);
+  }
+  applyDescriptor(input, descriptors, /(^|\s)input|input-text/i);
+  applyDescriptor(select, descriptors, /(^|\s)select|dropdown/i);
+  const selected = el("p", "help", "Plano principal selecionado.");
+  selected.setAttribute("role", "status");
+  select.addEventListener("change", () => {
+    selected.textContent = `${select.options[select.selectedIndex].text} selecionado apenas nesta demonstração.`;
+  });
+  form.append(label, input, selectLabel, select, selected);
+  const card = sampleCard("Cards e badges");
+  const sample = el("div", "ds-demo-surface");
+  sample.dataset.specimen = "card";
+  applyDescriptor(sample, descriptors, /card|(^|\s)article/i);
+  const badge = el("span", "ds-demo-badge", "Badge");
+  badge.dataset.specimen = "badge";
+  applyDescriptor(badge, descriptors, /badge/i);
+  sample.append(
+    siteIcon(summary),
+    el("strong", "", summary.name),
+    el("p", "", "Superfície, borda, raio e sombra aplicados ao exemplo."),
+    badge,
+  );
+  card.append(sample);
+  const surfaces = sampleCard("Fundos e navegação");
+  const nav = el("nav", "ds-demo-nav");
+  nav.setAttribute("aria-label", "Navegação da demonstração");
+  nav.dataset.specimen = "nav";
+  applyDescriptor(nav, descriptors, /(^|\s)nav|header/i);
+  nav.append(
+    el("strong", "", "Menu"),
+    sampleButton("Início", "ghost"),
+    sampleButton("Sobre", "ghost"),
+  );
+  const panel = el("div", "ds-demo-surface", "Surface · conteúdo de demonstração");
+  const accent = el(
+    "div",
+    "ds-demo-accent",
+    model.fallback.includes("accent") ? "Destaque · fallback local" : "Destaque · token inferido",
+  );
+  surfaces.append(nav, panel, accent);
+  grid.append(buttons, form, card, surfaces);
+  practical.append(grid);
+  const fonts = section("Tipografia · Aa por escala", "wide ds-specimens");
+  fonts.dataset.specimenSection = "typography";
+  fonts.append(
+    el(
+      "p",
+      "help",
+      `Corpo: ${model.raw.tokens.typography.body_family?.value ?? "não inferido"} · Heading: ${model.raw.tokens.typography.heading_family?.value ?? "não inferido"}`,
+    ),
+  );
+  const typeRows = (value.report?.typography ?? [])
+    .filter(
+      (row) =>
+        row.kind === "inferred" &&
+        /font-size/.test(row.property) &&
+        safeLength(row.value, 96) &&
+        Number.parseFloat(row.value) > 0,
+    )
+    .slice(0, 24);
+  const headingSize =
+    [...typeRows].sort(
+      (a, b) =>
+        Number.parseFloat(b.value) * (/rem|em/.test(b.value) ? 16 : 1) -
+        Number.parseFloat(a.value) * (/rem|em/.test(a.value) ? 16 : 1),
+    )[0]?.value ?? "40px";
+  for (const [name, family, size, evidence] of [
+    [
+      typeRows.length ? "Heading · escala declarada" : "Heading · escala de demonstração",
+      model.heading,
+      headingSize,
+      model.raw.tokens.typography.heading_family,
+    ],
+    [
+      "Corpo",
+      model.family,
+      model.properties["--ds-font-size"],
+      model.raw.tokens.typography.body_family,
+    ],
+    ...typeRows.map((row) => [row.property, model.family, row.value, row]),
+  ]) {
+    const row = el("div", "ds-type-row");
+    const sample = el("strong", "", "Aa · O próximo capítulo");
+    sample.style.fontFamily = safeFont(family) ?? "system-ui, sans-serif";
+    sample.style.fontSize = safeLength(size, 96) ?? "24px";
+    row.append(el("span", "", name), sample, el("code", "", `${size} · ${family}`));
+    if (evidence) row.append(provenanceDetails(evidence));
+    fonts.append(row);
+  }
+  const scales = section("Espaçamentos, raios e sombras", "wide ds-specimens");
+  const scaleSections = separateScales ? [] : [scales];
+  scales.dataset.specimenSection = "scales";
+  for (const [title, rows, kind] of [
+    ["Espaçamentos", model.spacing, "spacing"],
+    ["Raios", model.radii, "radius"],
+    ["Sombras", model.shadows, "shadow"],
+  ]) {
+    const scaleSection = separateScales ? section(title, "wide ds-specimens") : scales;
+    if (separateScales) scaleSections.push(scaleSection);
+    else scales.append(el("h4", "", title));
+    const list = el("div", "ds-scale-grid");
+    if (!rows.length)
+      list.append(el("p", "help", "Nenhum valor escalar seguro inferido nesta categoria."));
+    for (const row of rows) {
+      const item = el("article", "ds-scale-card");
+      const sample = el("div", `ds-scale-sample ds-scale-${kind}`);
+      sample.dataset.specimen = kind;
+      if (kind === "spacing") {
+        sample.style.padding = row.applied;
+        sample.append(el("span", "ds-spacing-core", ""));
+      }
+      if (kind === "radius") sample.style.borderRadius = row.applied;
+      if (kind === "shadow") sample.style.boxShadow = row.applied;
+      item.append(sample, el("code", "", `${row.property}: ${row.value}`), provenanceDetails(row));
+      list.append(item);
+    }
+    scaleSection.append(list);
+  }
+  const notes = el("details", "panel wide ds-method");
+  notes.dataset.specimenSection = "limitations";
+  notes.append(el("summary", "", "Método e limites"));
+  const gaps = el("ul");
+  for (const note of [
+    model.raw.theme?.basis === "browser-computed-style"
+      ? "Estilos calculados no viewport capturado; papéis dos componentes são demonstrações inferidas."
+      : "Modelo inferido de declarações; tema ativo e cascata não calculados.",
+    "Fontes declaradas usam fallback local quando seus arquivos não estão instalados. Não há download de font-face remoto.",
+    "Motion, stack da origem e auditoria completa de contraste não foram exercitados neste preview.",
+    ...model.unknown,
+    ...(model.raw.limitations ?? []),
+    ...(model.fallback.length
+      ? [
+          `Fallbacks locais de demonstração: ${model.fallback.join(", ")}. Não são valores observados da origem.`,
+        ]
+      : []),
+  ])
+    gaps.append(el("li", "", note));
+  notes.append(gaps);
+  return [practical, fonts, ...scaleSections, notes];
+}