@zaip-ai/cli 6.3.0 → 7.5.0

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

@@ -0,0 +1,78 @@
+import { connect, detail, moveToTrash, restore } from "./api.js";
+import { action, button, el, section } from "./components.js";
+import { samplingLabel, scoreLabel } from "./model.js";
+
+export { reprocessInPlace as reprocessOutput } from "./reprocess-dialog.js";
+
+export function mutationError(error) {
+  return error.status === 409
+    ? `O item mudou. Atualize a coleção antes de repetir: ${error.message}`
+    : error.status === 403
+      ? `A sessão mudou. Reconecte antes de repetir: ${error.message}`
+      : error.message;
+}
+export async function trashOutput(id, control, status, onChanged) {
+  control.disabled = true;
+  try {
+    const current = await detail(id);
+    if (
+      !window.confirm(
+        `Mover “${current.summary.name}” (revisão ${current.revision}) para a lixeira? Todo o histórico será preservado e poderá ser restaurado.`,
+      )
+    )
+      return;
+    await connect();
+    await moveToTrash(current.summary);
+    await onChanged();
+    status.textContent = "Item movido para a lixeira. Histórico preservado.";
+  } catch (error) {
+    status.textContent = `Movimentação não confirmada: ${mutationError(error)}`;
+  } finally {
+    control.disabled = false;
+  }
+}
+export function trashCard(summary, status, onRestored) {
+  const card = section(summary.name, "trash-card");
+  card.dataset.trashId = summary.id;
+  card.append(
+    el(
+      "p",
+      "meta",
+      `${summary.host} · revisão ${summary.revision} · recibo da lixeira ${summary.trash_revision}`,
+    ),
+    el("p", "", `Movido em: ${summary.deleted_at}`),
+    el("p", "help", scoreLabel(summary)),
+    el("p", "help", samplingLabel(summary.sampling)),
+  );
+  const control = button("Restaurar referência", async () => {
+    if (control.disabled) return;
+    control.disabled = true;
+    try {
+      if (
+        !window.confirm(
+          `Restaurar “${summary.name}” com todas as ${summary.revision} revisões preservadas? Nenhuma nova extração será iniciada.`,
+        )
+      )
+        return;
+      await connect();
+      await restore(summary);
+      await onRestored(summary.id);
+      status.textContent = "Referência restaurada com seu histórico.";
+    } catch (error) {
+      status.textContent = `Restauração não confirmada: ${mutationError(error)}`;
+    } finally {
+      control.disabled = false;
+    }
+  });
+  control.dataset.action = "restore";
+  card.append(control);
+  return card;
+}
+export function collectionLinks(trashMode) {
+  const node = el("div", "collection-switch");
+  const active = action("Coleção", "/viewer/");
+  const trash = action("Lixeira", "/viewer/?collection=trash");
+  (trashMode ? trash : active).setAttribute("aria-current", "page");
+  node.append(active, trash);
+  return node;
+}

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

@@ -0,0 +1,121 @@
+import { action, badge, button, designCode, el, section } from "./components.js";
+import { extractionState } from "./extraction-state.js";
+import { entryPath, statusLabel } from "./model.js";
+import { specimenSections } from "./specimens.js";
+import { accordion, compactPalette, compactScore, iconButton } from "./viewer-summary.js";
+export function renderDetail(
+  value,
+  { hero, panel, toolbar, current, viewRevision, historyMore, onReprocess, onTrash },
+) {
+  const summary = value.summary;
+  const copy = section(summary.name, "hero-copy");
+  copy.prepend(el("p", "kicker", "DESIGN.md OUTPUT"));
+  copy.prepend(designCode(summary));
+  copy.append(
+    el("p", "source-url", summary.request_url ?? summary.url ?? summary.source?.locator),
+    badge(summary.status),
+  );
+  if (value.revision !== value.revision_count)
+    copy.append(button("Voltar à revisão atual", current, "primary"));
+  const primaryActions = el("div", "page-actions detail-primary-actions");
+  if (summary.designMdUrl)
+    primaryActions.append(
+      action(
+        "DESIGN.md",
+        `${entryPath(summary.id, "design", value.revision)}&format=compact`,
+        true,
+      ),
+    );
+  if (["measured", "legacy"].includes(extractionState(value).state))
+    primaryActions.append(
+      action(
+        "Preview Render",
+        `/viewer/preview.html?id=${encodeURIComponent(summary.id)}&revision=${summary.revision}`,
+      ),
+    );
+  copy.append(primaryActions);
+  const actions = el("div", "page-actions detail-management");
+  if (onReprocess) {
+    const replay = iconButton("Reprocessar", "refresh", onReprocess);
+    replay.dataset.action = "reprocess";
+    replay.disabled =
+      summary.status === "collecting" || Boolean(summary.source && summary.source.type !== "url");
+    actions.append(replay);
+  } else
+    actions.append(
+      action("Gerar nova revisão", `/generate.html?id=${encodeURIComponent(summary.id)}`),
+    );
+  if (onTrash) {
+    const trash = iconButton("Mover para lixeira", "trash", onTrash);
+    trash.dataset.action = "trash";
+    trash.disabled = summary.status === "collecting";
+    actions.append(trash);
+  }
+  if (toolbar) toolbar.replaceChildren(actions);
+  else copy.prepend(actions);
+  if (!summary.replay_available)
+    copy.append(
+      el(
+        "p",
+        "help",
+        summary.replay_unavailable_reason ??
+          "URL exata não preservada. Forneça uma URL segura explicitamente para reprocessar.",
+      ),
+    );
+  const diagnostic = compactScore(value);
+  if (value.error) diagnostic.append(el("p", "error", `Falha / interrupção: ${value.error}`));
+  const screenshot = section("Captura da referência", "wide");
+  if (summary.visual?.screenshotUrl && summary.capabilities?.screenshot_verified === true) {
+    const img = el("img", "reference-image");
+    img.src = entryPath(summary.id, "screenshot", value.revision);
+    img.alt = `Captura PNG da referência ${summary.name}, revisão ${value.revision}`;
+    img.loading = "lazy";
+    img.addEventListener("error", () =>
+      img.replaceWith(el("p", "error", "Captura indisponível ou não verificada pelo servidor.")),
+    );
+    screenshot.append(
+      img,
+      el(
+        "p",
+        "help",
+        "PNG retido e verificado pelo servidor; captura da referência, sem preview HTML ativo.",
+      ),
+    );
+  } else screenshot.append(el("p", "muted", "Captura PNG verificada indisponível nesta revisão."));
+  const history = section("Revisões");
+  history.append(
+    el("p", "meta reference-id", `Referência: ${summary.id}`),
+    el(
+      "p",
+      "revision-label",
+      `Revisão ${value.revision} de ${value.revision_count}${value.revision === value.revision_count ? " · atual" : " · histórica"}`,
+    ),
+  );
+  const list = el("div", "history-list");
+  for (const revision of [...value.revisions].sort((a, b) => b.revision - a.revision)) {
+    const item = button(
+      `r${revision.revision} · ${statusLabel(revision.status)} · ${revision.updated_at}`,
+      () => viewRevision(revision.revision),
+      "history-item",
+    );
+    if (revision.revision === value.revision) item.setAttribute("aria-current", "true");
+    list.append(item);
+  }
+  history.append(
+    el("p", "meta", `${value.revisions.length} de ${value.revision_count} revisões carregadas`),
+    list,
+  );
+  if (value.revisions.length < value.revision_count)
+    history.append(button("Carregar revisões anteriores", historyMore));
+  const specimens =
+    extractionState(value).state === "measured" || value.visual_model?.status === "inferred"
+      ? specimenSections(value)
+      : [];
+  hero.replaceChildren(copy, diagnostic);
+  panel.replaceChildren(
+    ...(value.report?.status === "measured-evidence" ? [compactPalette(value)] : []),
+    ...(["failed", "collecting"].includes(extractionState(value).state) ? [] : [screenshot]),
+    ...specimens.map((node) => (node.tagName === "DETAILS" ? node : accordion(node))),
+    accordion(history),
+  );
+}

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

@@ -0,0 +1,91 @@
+import { action, button, el, section } from "./components.js";
+import { extractionState } from "./extraction-state.js";
+import { paletteView } from "./palette-view.js";
+import { reportDiagnostic } from "./report-view.js";
+
+export function accordion(content) {
+  const node = el("details", "panel wide detail-accordion");
+  const heading = content.querySelector("h3");
+  node.append(el("summary", "", heading?.textContent ?? "Mais informações"));
+  heading?.remove();
+  content.classList.remove("panel", "wide");
+  node.append(content);
+  return node;
+}
+
+export function iconButton(label, icon, handler) {
+  const node = button("", handler, "action management-action");
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.8");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute(
+    "d",
+    icon === "trash"
+      ? "M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"
+      : "M20 7v5h-5M4 17v-5h5M5.3 8a7 7 0 0 1 11.5-3L20 12M4 12l3.2 7A7 7 0 0 0 18.7 16",
+  );
+  svg.append(path);
+  node.append(svg, el("span", "", label));
+  return node;
+}
+
+export function compactScore(value) {
+  const report = value.report;
+  if (extractionState(value).state !== "measured")
+    return reportDiagnostic(report, value.summary, value, false);
+  const assessment = value.design_score;
+  const node = section("Design Score", "diagnostic detail-score");
+  const score = el("div", "detail-score-value");
+  score.append(
+    el("b", "design-grade-disc", assessment?.grade ?? "—"),
+    el("strong", "", assessment?.overall ?? "—"),
+    el("span", "", "/100"),
+  );
+  score.setAttribute(
+    "aria-label",
+    `Design Score: ${assessment?.grade ?? "indisponível"} ${assessment?.overall ?? ""}`,
+  );
+  node.append(score);
+  const bars = el("div", "design-category-bars");
+  for (const category of assessment?.categories ?? []) {
+    const row = el("div", "design-category-bar");
+    const track = el("span", "design-bar-track");
+    const fill = el("span", "diagnostic-fill");
+    fill.style.width = `${category.score ?? 0}%`;
+    track.append(fill);
+    row.title = `${category.value}. ${category.explanation}`;
+    row.append(
+      el("span", "", category.label),
+      track,
+      el(
+        "span",
+        "design-category-result",
+        category.score == null ? "N/A" : `${category.grade} ${category.score}`,
+      ),
+    );
+    bars.append(row);
+  }
+  node.append(
+    bars,
+    el(
+      "p",
+      "help",
+      `${assessment?.evaluated_categories ?? 0}/7 categorias avaliadas · heurística do sistema extraído. Contraste limitado aos pares disponíveis; fidelidade visual não medida.`,
+    ),
+  );
+  node.append(
+    action(
+      "Abrir Diagnóstico Completo",
+      `/viewer/diagnostic.html?id=${encodeURIComponent(value.summary.id)}&revision=${value.revision}`,
+    ),
+  );
+  return node;
+}
+
+export function compactPalette(value) {
+  return paletteView(value);
+}

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

@@ -0,0 +1,255 @@
+// Render only bounded scalar descriptors. Never accept a stylesheet or source HTML.
+const colorPattern = /^#(?:[a-f\d]{3}|[a-f\d]{6}|[a-f\d]{8})$/i;
+const lengthPattern = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em)?$/;
+export function safeColor(value) {
+  return typeof value === "string" && colorPattern.test(value.trim()) ? value.trim() : null;
+}
+export function safeLength(value, maximum = 256, negative = false) {
+  if (typeof value !== "string" || !lengthPattern.test(value.trim())) return null;
+  const number = Number.parseFloat(value);
+  const bound = /rem|em/.test(value) ? maximum / 16 : maximum;
+  if (!Number.isFinite(number) || number > bound || number < (negative ? -bound : 0)) return null;
+  if (number !== 0 && !/px|rem|em/.test(value)) return null;
+  return value.trim();
+}
+export function safeSpacing(value) {
+  if (typeof value !== "string") return null;
+  const parts = value.trim().split(/\s+/);
+  return parts.length <= 4 && parts.every((part) => safeLength(part, 96)) ? parts.join(" ") : null;
+}
+export function safeFont(value) {
+  if (typeof value !== "string" || value.length > 256) return null;
+  const families = value.split(",").map((part) => part.trim().replace(/^(['"])(.*)\1$/, "$2"));
+  if (
+    families.length > 12 ||
+    families.some((name) => !/^-?[\p{L}\p{N}][\p{L}\p{N} -]{0,63}$/u.test(name))
+  )
+    return null;
+  return families
+    .map((name) =>
+      /^(serif|sans-serif|monospace|system-ui|ui-serif|ui-sans-serif|ui-monospace)$/i.test(name)
+        ? name
+        : `"${name}"`,
+    )
+    .join(", ");
+}
+export function safeShadow(value) {
+  if (value === "none") return value;
+  if (typeof value !== "string" || value.length > 320) return null;
+  // Colors must already be normalized. No functions, URLs, variables or multiple arbitrary declarations.
+  const shadows = value.split(",");
+  if (shadows.length > 3) return null;
+  for (const shadow of shadows) {
+    const parts = shadow
+      .trim()
+      .split(/\s+/)
+      .filter((part) => part !== "inset");
+    if (parts.length < 3 || parts.length > 5 || !safeColor(parts.at(-1))) return null;
+    if (!parts.slice(0, -1).every((part, index) => safeLength(part, 128, index !== 2))) return null;
+  }
+  return value.trim();
+}
+function tokenValue(token, validator) {
+  return token?.kind === "inferred" ? validator(token.value) : null;
+}
+function numeric(value, min, max) {
+  return typeof value === "string" &&
+    /^(?:\d+(?:\.\d+)?|\.\d+)$/.test(value) &&
+    Number(value) >= min &&
+    Number(value) <= max
+    ? value
+    : null;
+}
+const defaults = {
+  background: "#ffffff",
+  foreground: "#111827",
+  primary: "#171717",
+  primary_foreground: "#ffffff",
+  secondary: "#f5f5f5",
+  muted: "#525252",
+  accent: "#171717",
+  border: "#d4d4d4",
+  card: "#ffffff",
+  card_foreground: "#111827",
+};
+function luminance(color) {
+  const hex =
+    color.length === 4
+      ? [...color.slice(1)].map((part) => part + part).join("")
+      : color.slice(1, 7);
+  const channels = [0, 2, 4]
+    .map((index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255)
+    .map((v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+  return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+}
+export function previewModel(value) {
+  const raw = value?.visual_model ?? value?.summary?.visual_model;
+  if (
+    raw?.schema_version !== 1 ||
+    raw.method !== "declared-semantic-v1" ||
+    raw.status !== "inferred"
+  )
+    return {
+      available: false,
+      unknown: raw?.unknown ?? ["Modelo visual normalizado indisponível nesta revisão."],
+      raw,
+    };
+  const fallback = [];
+  const colors = {};
+  for (const [name, defaultValue] of Object.entries(defaults)) {
+    colors[name] = tokenValue(raw.tokens?.colors?.[name], safeColor);
+    if (!colors[name]) {
+      colors[name] = defaultValue;
+      fallback.push(name);
+    }
+  }
+  if (fallback.includes("foreground"))
+    colors.foreground = luminance(colors.background) > 0.3 ? "#111111" : "#ffffff";
+  const dark = luminance(colors.background) < 0.25;
+  // Missing semantic roles keep neutral local defaults; never promote text or a CSS candidate to brand color.
+  if (fallback.includes("card")) colors.card = colors.background;
+  if (fallback.includes("secondary")) colors.secondary = dark ? "#262626" : "#f5f5f5";
+  if (fallback.includes("border")) colors.border = dark ? "#404040" : "#d4d4d4";
+  if (fallback.includes("card_foreground"))
+    colors.card_foreground = luminance(colors.card) > 0.3 ? "#111111" : "#ffffff";
+  if (fallback.includes("muted")) colors.muted = colors.card_foreground;
+  if (fallback.includes("primary_foreground"))
+    colors.primary_foreground = luminance(colors.primary) > 0.3 ? "#111111" : "#ffffff";
+  const typography = raw.tokens?.typography ?? {};
+  const family = tokenValue(typography.body_family, safeFont) ?? "system-ui, sans-serif";
+  const heading = tokenValue(typography.heading_family, safeFont) ?? family;
+  const sizeValue = tokenValue(typography.size, (v) => safeLength(v, 32));
+  const sizePixels = sizeValue
+    ? Number.parseFloat(sizeValue) * (/rem|em/.test(sizeValue) ? 16 : 1)
+    : 0;
+  const size = sizePixels >= 12 ? sizeValue : "16px";
+  if (sizePixels < 12) fallback.push("size (mínimo legível do shell)");
+  const weight = tokenValue(typography.weight, (v) => numeric(v, 100, 900)) ?? "400";
+  const lineValue = tokenValue(
+    typography.line_height,
+    (v) => numeric(v, 1, 2.5) ?? safeLength(v, 64),
+  );
+  const lineRatio = lineValue
+    ? /px|rem|em/.test(lineValue)
+      ? (Number.parseFloat(lineValue) * (/rem|em/.test(lineValue) ? 16 : 1)) /
+        (sizePixels >= 12 ? sizePixels : 16)
+      : Number(lineValue)
+    : 0;
+  const line = lineRatio >= 1 && lineRatio <= 2.5 ? String(lineRatio) : "1.5";
+  if (lineRatio < 1 || lineRatio > 2.5) fallback.push("line_height (mínimo legível do shell)");
+  const tracking = tokenValue(typography.letter_spacing, (v) => safeLength(v, 4, true)) ?? "0";
+  for (const key of [
+    "body_family",
+    "heading_family",
+    "size",
+    "weight",
+    "line_height",
+    "letter_spacing",
+  ])
+    if (!typography[key]) fallback.push(key);
+  const rows = (key, validator) =>
+    (raw.tokens?.[key] ?? [])
+      .slice(0, 32)
+      .map((row) => ({ ...row, applied: tokenValue(row, validator) }))
+      .filter((row) => row.applied);
+  const spacing = rows("spacing", safeSpacing);
+  const radii = rows("radii", (v) => safeLength(v, 9999));
+  const shadows = rows("shadows", safeShadow);
+  const captured = raw.theme?.basis === "browser-computed-style";
+  const panelRadius =
+    radii.find(
+      (row) => Number.parseFloat(row.applied) * (/rem|em/.test(row.applied) ? 16 : 1) <= 32,
+    )?.applied ?? "16px";
+  const controlRadius = tokenValue(
+    raw.components?.find((row) => row.selector === "button-primary")?.tokens?.radius,
+    (v) => safeLength(v, 9999),
+  );
+  const control = raw.components?.find((row) => row.selector === "button-primary")?.tokens;
+  const properties = {};
+  for (const [key, color] of Object.entries(colors))
+    properties[`--ds-${key.replaceAll("_", "-")}`] = color;
+  Object.assign(properties, {
+    "--ds-secondary-foreground": luminance(colors.secondary) > 0.3 ? "#111111" : "#ffffff",
+    "--ds-font": `${family}, system-ui, sans-serif`,
+    "--ds-heading-font": `${heading}, system-ui, sans-serif`,
+    "--ds-font-size": size,
+    "--ds-font-weight": weight,
+    "--ds-line": line,
+    "--ds-track": tracking,
+    "--ds-radius": panelRadius,
+    "--ds-control-radius": controlRadius ?? panelRadius,
+    "--ds-control-font": tokenValue(control?.font_family, safeFont) ?? family,
+    "--ds-control-weight": tokenValue(control?.font_weight, (v) => numeric(v, 100, 900)) ?? weight,
+    "--ds-space": spacing.find((row) => /padding|gap/.test(row.property))?.applied ?? "16px",
+    "--ds-shadow": captured ? "none" : (shadows[0]?.applied ?? "none"),
+  });
+  return {
+    available: true,
+    raw,
+    colors,
+    properties,
+    spacing,
+    radii,
+    shadows,
+    family,
+    heading,
+    fallback,
+    unknown: raw.unknown ?? [],
+    dark: luminance(colors.background) < 0.25,
+  };
+}
+export function applyVisualModel(target, value) {
+  const model = previewModel(value);
+  for (const name of [
+    "background",
+    "foreground",
+    "primary",
+    "primary-foreground",
+    "secondary",
+    "secondary-foreground",
+    "muted",
+    "accent",
+    "border",
+    "card",
+    "card-foreground",
+    "font",
+    "heading-font",
+    "font-size",
+    "font-weight",
+    "line",
+    "track",
+    "radius",
+    "control-radius",
+    "control-font",
+    "control-weight",
+    "space",
+    "shadow",
+  ])
+    target.style.removeProperty(`--ds-${name}`);
+  target.classList.toggle("ds-applied", model.available);
+  if (model.available) {
+    for (const [name, scalar] of Object.entries(model.properties))
+      target.style.setProperty(name, scalar);
+    target.dataset.dsTheme = model.dark ? "dark" : "light";
+  } else delete target.dataset.dsTheme;
+  return model;
+}
+export function componentStyles(descriptor) {
+  const tokens = descriptor?.tokens ?? {};
+  const result = {};
+  for (const [name, css, validator] of [
+    ["background", "backgroundColor", safeColor],
+    ["foreground", "color", safeColor],
+    ["border", "borderColor", safeColor],
+    ["radius", "borderRadius", (v) => safeLength(v, 9999)],
+    ["padding", "padding", safeSpacing],
+    ["font_family", "fontFamily", safeFont],
+    ["font_size", "fontSize", (v) => safeLength(v, 64)],
+    ["font_weight", "fontWeight", (v) => numeric(v, 100, 900)],
+    ["shadow", "boxShadow", safeShadow],
+  ]) {
+    const normalized = tokenValue(tokens[name], validator);
+    if (normalized) result[css] = normalized;
+  }
+  return result;
+}

package/templates/.agents/design/design-system-maker/frontend/styles/advanced.css

@@ -0,0 +1,128 @@
+.advanced-main {
+  width: min(1040px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 48px 0;
+}
+.advanced-brand {
+  color: var(--maker-text);
+  font-size: 22px;
+  font-weight: 700;
+}
+.advanced-hero {
+  display: grid;
+  gap: 20px;
+  margin-bottom: 36px;
+}
+.advanced-hero h1 {
+  font-size: clamp(36px, 5vw, 56px);
+  letter-spacing: -0.04em;
+}
+.advanced-hero > p {
+  max-width: 76ch;
+}
+.advanced-connection {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  padding: 18px;
+  border: 1px solid var(--maker-border);
+  border-radius: 12px;
+}
+.advanced-section {
+  padding: 28px;
+  margin-bottom: 20px;
+  background: var(--maker-surface);
+  border: 1px solid var(--maker-border);
+  border-radius: 20px;
+}
+.advanced-section h2 {
+  font-size: 26px;
+  margin-bottom: 16px;
+}
+.advanced-section p {
+  margin: 12px 0;
+}
+.advanced-section label {
+  margin-top: 20px;
+}
+#designCode {
+  max-width: 180px;
+}
+.example-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 24px 0 12px;
+}
+.example-heading h3 {
+  font-size: 18px;
+}
+.example-heading button {
+  flex-shrink: 0;
+}
+.advanced-code {
+  margin: 0;
+  padding: 20px;
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--maker-bg);
+  border: 1px solid var(--maker-border);
+  border-radius: 12px;
+}
+.advanced-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.advanced-table td,
+.advanced-table th {
+  padding: 14px 10px;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--maker-border);
+  overflow-wrap: anywhere;
+}
+.advanced-table td:first-child {
+  width: 45%;
+}
+.advanced-section code,
+#apiOrigin {
+  overflow-wrap: anywhere;
+}
+.advanced-disclosure summary {
+  font-size: 20px;
+  font-weight: 650;
+  cursor: pointer;
+}
+.advanced-disclosure li {
+  line-height: 1.7;
+  margin: 12px 0;
+}
+#copyStatus {
+  position: sticky;
+  bottom: 16px;
+  background: var(--maker-elevated);
+  border-radius: 12px;
+}
+#copyStatus:not(:empty) {
+  padding: 12px 18px;
+  border: 1px solid var(--maker-border);
+}
+@media (max-width: 560px) {
+  .advanced-main {
+    width: calc(100% - 24px);
+    padding: 28px 0;
+  }
+  .advanced-section {
+    padding: 18px;
+  }
+  .example-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .advanced-table table {
+    table-layout: fixed;
+  }
+}