@agent-native/core 0.80.9 → 0.80.10

package/corpus/templates/design/shared/design-source-capabilities.ts

@@ -0,0 +1,286 @@
+/**
+ * Source capability vocabulary for the Design Studio.
+ *
+ * Every source (inline, localhost, fusion) advertises an explicit capability
+ * set.  The UI gates controls on this — never on `sourceType` alone.  The
+ * agent reads the same map and never claims a write the source cannot perform.
+ *
+ * Relation to `source-mode.ts`:
+ * - `DesignBridgeOperation` ("select" | "resolveNodeToFile" | "readFile" |
+ *   "applyEdit" | "writeFile" | "captureSnapshot" | "captureState") describes
+ *   the low-level bridge RPC surface.
+ * - `DesignCapabilityName` below is the *higher-level* capability vocabulary
+ *   that UI panels and agent actions read.  Several capabilities build on one
+ *   or more bridge operations; others (e.g. `previewMotion`, `writeTokens`) are
+ *   implemented above the bridge layer and have no direct bridge op.
+ * - `DesignBridgeOperationStatus` ("available" | "planned" | "disabled") is
+ *   reused here as `CapabilityStatus`.
+ */
+
+import type { DesignBridgeOperationStatus } from "./source-mode";
+
+// ─── Capability name vocabulary ──────────────────────────────────────────────
+
+/**
+ * The full set of named capabilities a design source can advertise.
+ *
+ * - **readFile / writeFile / applyEdit** — low-level file I/O; bridge-backed.
+ * - **resolveNodeToFile** — resolve a DOM node → source file + span.
+ * - **previewPatch / diffPatch** — preview or diff a proposed source edit
+ *   without committing it.
+ * - **captureSnapshot / captureState** — snapshot the rendered iframe or
+ *   capture running-app route+data state.
+ * - **indexComponents** — static AST or runtime parse of React/TS components.
+ * - **indexTokens** — parse CSS vars / Tailwind config / theme JSON for tokens.
+ * - **writeTokens** — write token changes back to the real source files.
+ * - **previewMotion** — scrub/play keyframe animations without writing to DB.
+ * - **writeMotion** — commit a motion timeline (managed `<style>` block or
+ *   real CSS module, depending on tier).
+ * - **branch** — create/manage a Builder-hosted branch (fusion tier only).
+ * - **deployPreview** — deploy a branch preview URL.
+ * - **deploy** — merge/publish the branch to production.
+ */
+export const DESIGN_CAPABILITY_NAMES = [
+  "readFile",
+  "writeFile",
+  "applyEdit",
+  "resolveNodeToFile",
+  "previewPatch",
+  "diffPatch",
+  "captureSnapshot",
+  "captureState",
+  "indexComponents",
+  "indexTokens",
+  "writeTokens",
+  "previewMotion",
+  "writeMotion",
+  "branch",
+  "deployPreview",
+  "deploy",
+] as const;
+
+export type DesignCapabilityName = (typeof DESIGN_CAPABILITY_NAMES)[number];
+
+// ─── Status ───────────────────────────────────────────────────────────────────
+
+/**
+ * Mirrors `DesignBridgeOperationStatus` from `source-mode.ts` so callers can
+ * import a single type.
+ *
+ * - `available`   — the source can perform this operation right now.
+ * - `planned`     — the operation is understood but not yet hardened/enabled.
+ * - `unavailable` — not supported for this source type; show a migration CTA.
+ */
+export type CapabilityStatus = DesignBridgeOperationStatus | "unavailable";
+
+// ─── Per-capability entry ─────────────────────────────────────────────────────
+
+export interface DesignSourceCapabilityEntry {
+  status: CapabilityStatus;
+  /** Optional human-readable explanation surfaced in CTA / tooltip copy. */
+  reason?: string;
+}
+
+// ─── Full capability map ──────────────────────────────────────────────────────
+
+/**
+ * A map of every `DesignCapabilityName` to its status for a given source.
+ * Read by UI panels and server-side actions to decide whether to enable,
+ * preview-only, or show a migration CTA.
+ */
+export type DesignSourceCapabilities = Record<
+  DesignCapabilityName,
+  DesignSourceCapabilityEntry
+>;
+
+// ─── Helper ───────────────────────────────────────────────────────────────────
+
+/**
+ * Pure helper — returns `true` only when the named capability is `available`.
+ * All other statuses ("planned", "unavailable", "disabled") return `false`.
+ *
+ * Usage:
+ * ```ts
+ * if (hasCapability(caps, "writeTokens")) { ... }
+ * ```
+ */
+export function hasCapability(
+  caps: DesignSourceCapabilities,
+  name: DesignCapabilityName,
+): boolean {
+  return caps[name]?.status === "available";
+}
+
+// ─── Factory helpers ──────────────────────────────────────────────────────────
+
+/**
+ * Build a `DesignSourceCapabilityEntry` with status `available`.
+ * Convenience for constructing canonical capability maps.
+ */
+export function available(reason?: string): DesignSourceCapabilityEntry {
+  return { status: "available", ...(reason !== undefined ? { reason } : {}) };
+}
+
+/**
+ * Build a `DesignSourceCapabilityEntry` with status `planned`.
+ * Used for capabilities that are understood by the bridge but not yet hardened.
+ */
+export function planned(reason?: string): DesignSourceCapabilityEntry {
+  return { status: "planned", ...(reason !== undefined ? { reason } : {}) };
+}
+
+/**
+ * Build a `DesignSourceCapabilityEntry` with status `unavailable`.
+ * Used to signal a migration CTA to the UI.
+ */
+export function unavailable(reason?: string): DesignSourceCapabilityEntry {
+  return {
+    status: "unavailable",
+    ...(reason !== undefined ? { reason } : {}),
+  };
+}
+
+// ─── Well-known default maps per source tier ──────────────────────────────────
+
+/**
+ * Default capability map for **inline** (HTML/Alpine/SQL) designs.
+ *
+ * - CSS-var token edits and motion are available through the Tweaks loop and
+ *   the managed `<style data-agent-native-motion>` block respectively.
+ * - File-level write ops (`readFile`, `writeFile`, `applyEdit`) are `planned`
+ *   pending bridge write hardening.
+ * - Real-app-only capabilities (`indexComponents`, `writeTokens`, `branch`,
+ *   `deploy*`) are `unavailable` and trigger the "Make it real" CTA.
+ */
+export const INLINE_DEFAULT_CAPABILITIES: DesignSourceCapabilities = {
+  readFile: planned("Local file reads require bridge hardening"),
+  writeFile: planned("Local file writes require bridge hardening"),
+  applyEdit: planned("Source edits require bridge hardening"),
+  resolveNodeToFile: available(),
+  previewPatch: available(),
+  diffPatch: available(),
+  captureSnapshot: available(),
+  captureState: available(),
+  indexComponents: unavailable("Connect Builder to index real components"),
+  indexTokens: available(),
+  writeTokens: unavailable("Token source write-back requires a real app"),
+  previewMotion: available(),
+  writeMotion: available(),
+  branch: unavailable("Branching requires a connected Builder app"),
+  deployPreview: unavailable("Deploy previews require a connected Builder app"),
+  deploy: unavailable("Deploy requires a connected Builder app"),
+};
+
+/**
+ * Default capability map for **localhost** designs.
+ *
+ * Starts read-only / preview-only; write ops become `available` after bridge
+ * hardening.  Real-app features (`indexComponents`, `writeTokens`, etc.) are
+ * `planned` and light up once the bridge proves capability.
+ */
+export const LOCALHOST_DEFAULT_CAPABILITIES: DesignSourceCapabilities = {
+  readFile: planned("Local file reads require the next bridge hardening pass"),
+  writeFile: planned(
+    "Local file writes require the next bridge hardening pass",
+  ),
+  applyEdit: planned("Source edits require the next bridge hardening pass"),
+  resolveNodeToFile: available(),
+  previewPatch: available(),
+  diffPatch: available(),
+  captureSnapshot: available(),
+  captureState: available(),
+  indexComponents: planned("Component indexing lands with bridge hardening"),
+  indexTokens: available(),
+  writeTokens: planned("Token write-back lands with bridge hardening"),
+  previewMotion: available(),
+  writeMotion: available(),
+  branch: unavailable("Branching requires a connected Builder app"),
+  deployPreview: unavailable("Deploy previews require a connected Builder app"),
+  deploy: unavailable("Deploy requires a connected Builder app"),
+};
+
+/**
+ * Default capability map for a **fusion** (Builder-hosted) design where Builder
+ * is **not yet connected** (no credentials / no branch project configured).
+ *
+ * Preview-only: the canvas can render and snapshot the remote app but no
+ * real-app operations (`indexComponents`, `branch`, `deployPreview`, `deploy`,
+ * write ops) are available until Builder credentials are confirmed.
+ *
+ * Use `FUSION_CONNECTED_CAPABILITIES` once `resolveHasCompleteBuilderConnection`
+ * returns `true` and a branch project is configured.
+ */
+export const FUSION_DISCONNECTED_CAPABILITIES: DesignSourceCapabilities = {
+  readFile: planned("Connect Builder to enable file reads on fusion sources"),
+  writeFile: unavailable("Connect Builder to enable source writes"),
+  applyEdit: unavailable("Connect Builder to enable source edits"),
+  resolveNodeToFile: available(),
+  previewPatch: available(),
+  diffPatch: available(),
+  captureSnapshot: available(),
+  captureState: available(),
+  indexComponents: unavailable("Connect Builder to index real components"),
+  indexTokens: available(),
+  writeTokens: unavailable("Connect Builder to enable token write-back"),
+  previewMotion: available(),
+  writeMotion: planned(
+    "Motion write-back to real source requires bridge hardening",
+  ),
+  branch: unavailable("Connect Builder to create branches"),
+  deployPreview: unavailable("Connect Builder to deploy previews"),
+  deploy: unavailable("Connect Builder to deploy"),
+};
+
+/**
+ * Capability map for a **fusion** (Builder-hosted) design where Builder **is
+ * connected** (credentials present + branch project configured).
+ *
+ * Per DESIGN-STUDIO-PLAN.md §5:
+ * - `indexComponents`, `branch`, `deployPreview`, `deploy` are **available**.
+ * - Source writes (`writeFile`, `writeTokens`, `writeMotion` to real source)
+ *   remain **planned** until bridge hardening is complete.
+ * - `readFile`, `applyEdit`, `previewPatch`, `diffPatch`, `captureSnapshot`,
+ *   `captureState`, `indexTokens`, and `previewMotion` are **available**.
+ */
+export const FUSION_CONNECTED_CAPABILITIES: DesignSourceCapabilities = {
+  readFile: available(),
+  writeFile: planned(
+    "Source file writes remain planned until bridge hardening",
+  ),
+  applyEdit: planned("Source edits remain planned until bridge hardening"),
+  resolveNodeToFile: available(),
+  previewPatch: available(),
+  diffPatch: available(),
+  captureSnapshot: available(),
+  captureState: available(),
+  indexComponents: available(),
+  indexTokens: available(),
+  writeTokens: planned(
+    "Token write-back remains planned until bridge hardening",
+  ),
+  previewMotion: available(),
+  writeMotion: planned(
+    "Motion write-back to real source remains planned until bridge hardening",
+  ),
+  branch: available(),
+  deployPreview: available(),
+  deploy: available(),
+};
+
+/**
+ * Default capability map for **fusion** (Builder-hosted) designs.
+ *
+ * This is the **conservative default** for when connection status is unknown.
+ * It is equivalent to `FUSION_DISCONNECTED_CAPABILITIES` — preview-only with
+ * no real-app write operations available.
+ *
+ * Callers that know the Builder connection is active should use
+ * `FUSION_CONNECTED_CAPABILITIES` (or call `resolveFusionCapabilities(true)`
+ * from `capability-resolver.ts`) to get the fuller capability set.
+ *
+ * @deprecated Prefer `FUSION_DISCONNECTED_CAPABILITIES` or
+ *   `FUSION_CONNECTED_CAPABILITIES` for clarity.  This alias is kept for
+ *   backward compatibility with callers that import the default map.
+ */
+export const FUSION_DEFAULT_CAPABILITIES: DesignSourceCapabilities =
+  FUSION_DISCONNECTED_CAPABILITIES;

package/corpus/templates/design/shared/design-state.ts

@@ -0,0 +1,112 @@
+/**
+ * Design state, breakpoint, and capture types for the Design Studio
+ * states/responsive panel (§6.4 + §4.3).
+ *
+ * States and breakpoints are orthogonal axes: any state can be viewed at any
+ * breakpoint. Both persist in application state and are agent-visible via
+ * `view-screen`.
+ */
+
+// ---------------------------------------------------------------------------
+// Breakpoints
+// ---------------------------------------------------------------------------
+
+/**
+ * Tailwind responsive prefix for a breakpoint frame.
+ * `"base"` maps to unprefixed classes (the mobile-first default).
+ */
+export type TailwindBreakpointPrefix =
+  | "base"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl";
+
+export interface BreakpointDefinition {
+  id: string;
+  /** Human-readable label shown in the canvas header (e.g. "Mobile", "Tablet"). */
+  label: string;
+  /** Frame width in pixels (e.g. 390, 768, 1280). */
+  widthPx: number;
+  /**
+   * The Tailwind responsive prefix this frame is the edit scope for.
+   * Editing a layer in this frame writes classes with this prefix
+   * (or unprefixed classes when `"base"`).
+   */
+  prefix: TailwindBreakpointPrefix;
+}
+
+/**
+ * The ordered set of breakpoint frames rendered side-by-side for a screen.
+ * Frames are ordered Mobile → Tablet → Desktop (left to right).
+ */
+export interface BreakpointSet {
+  id: string;
+  /** The breakpoints in display order. */
+  breakpoints: BreakpointDefinition[];
+}
+
+// ---------------------------------------------------------------------------
+// Design states
+// ---------------------------------------------------------------------------
+
+export const DESIGN_STATE_KINDS = ["state", "fixture", "capture"] as const;
+
+export type DesignStateKind = (typeof DESIGN_STATE_KINDS)[number];
+
+export const DESIGN_STATE_BREAKPOINTS = [
+  "auto",
+  "desktop",
+  "tablet",
+  "mobile",
+] as const;
+
+export type DesignStateBreakpoint = (typeof DESIGN_STATE_BREAKPOINTS)[number];
+
+/**
+ * A named design state, data fixture, or live capture scoped to a design.
+ *
+ * - `"state"` — an alternate DOM/Alpine `x-data` snapshot (e.g. logged-out,
+ *   empty, loading, error).
+ * - `"fixture"` — a real-app data fixture with route + props seeded from
+ *   `fixtureData`.
+ * - `"capture"` — a live capture of the running app's route + data taken via
+ *   the bridge `captureState` operation.
+ */
+export interface DesignState {
+  id: string;
+  designId: string;
+  /**
+   * Opaque source reference (fileId for inline, routeId for localhost/fusion).
+   * `null` when scoped to the entire design.
+   */
+  sourceRef: string | null;
+  name: string;
+  kind: DesignStateKind;
+  /**
+   * Which breakpoint context this state was captured or is intended for.
+   * `"auto"` means it applies at all breakpoints.
+   */
+  breakpoint: DesignStateBreakpoint;
+  /** App route path at the time of capture or fixture definition (e.g. "/dashboard"). */
+  route?: string;
+  /**
+   * Structured fixture data (props, query params, mock API responses) for
+   * `"fixture"` and `"capture"` states. Real-app only; `null` for inline states.
+   */
+  fixtureData: Record<string, unknown> | null;
+  /**
+   * Serialised DOM/Alpine snapshot for `"state"` and `"capture"` states.
+   * For inline designs this is the alternate `x-data` / HTML payload.
+   * For real apps this is the captured component tree or route data.
+   */
+  captureData: Record<string, unknown> | null;
+  /**
+   * Reference to the preview snapshot (image URL or snapshotRef id) produced
+   * when this state was captured.
+   */
+  previewRef: string | null;
+  createdAt: string;
+  updatedAt: string;
+}

package/corpus/templates/design/shared/design-surface-index.ts

@@ -0,0 +1,258 @@
+/**
+ * Design Surface Index — normalized read-model types.
+ *
+ * A lazy, queryable surface that UI panels and agent actions read to understand
+ * what is present in a design: source metadata, selectable nodes, components,
+ * tokens, motion timelines, design states, and accessibility review results.
+ *
+ * **Types only — no DB, no runtime code.**  The index is grown lazily from the
+ * existing `code-layer.ts` projection and per-feature needs.  A persistent
+ * cache table (`design_surface_indexes`) is added only when re-parsing proves
+ * to be a real performance problem.
+ *
+ * See `DESIGN-STUDIO-PLAN.md` §4.2 for rationale.
+ */
+
+import type { CodeLayerNode } from "./code-layer";
+import type { DesignCapabilityName } from "./design-source-capabilities";
+import type { DesignSourceType } from "./source-mode";
+
+// ─── Source metadata ──────────────────────────────────────────────────────────
+
+/** Lightweight description of the source backing this index snapshot. */
+export interface DesignSurfaceSourceMeta {
+  sourceType: DesignSourceType;
+  /** design_files.id for inline; route id or artboard id for real-app sources. */
+  sourceRef: string;
+  /**
+   * Hash of the source content at index time (file content hash for inline;
+   * git ref or build hash for real-app sources).  Used to detect staleness.
+   */
+  contentHash?: string;
+  /** ISO-8601 timestamp when this index snapshot was built. */
+  indexedAt: string;
+  /** The capabilities that were `available` when this snapshot was taken. */
+  availableCapabilities: DesignCapabilityName[];
+}
+
+// ─── Node summary ─────────────────────────────────────────────────────────────
+
+/**
+ * A lightweight node summary derived from `CodeLayerNode`.  The full
+ * `CodeLayerProjection` is the authoritative source; this slice carries what
+ * panel headers and the agent's `view-screen` response need at a glance.
+ */
+export interface DesignSurfaceNode {
+  /** Stable `data-agent-native-node-id` value. */
+  nodeId: string;
+  /** Resolved human-readable layer name. */
+  layerName: string;
+  tag: string;
+  selector: string;
+  parentNodeId?: string;
+  childNodeIds: string[];
+  /** Whether this node is currently the edit-scope selection. */
+  selected?: boolean;
+}
+
+// ─── Component entries ────────────────────────────────────────────────────────
+
+/**
+ * Kind of component: an annotated Alpine region or a fully-indexed real
+ * React/TS component.
+ */
+export type DesignComponentKind = "alpine-annotation" | "react-component";
+
+export interface DesignSurfaceComponentProp {
+  name: string;
+  type: string;
+  required: boolean;
+  defaultValue?: unknown;
+  /** When sourced from `cva` or `tailwind-variants`, the allowed variant keys. */
+  enumValues?: string[];
+}
+
+export interface DesignSurfaceComponent {
+  /** Stable component id (matches `component_index.id` when persisted). */
+  componentId: string;
+  kind: DesignComponentKind;
+  name: string;
+  /** Source file path relative to the project root (real-app only). */
+  filePath?: string;
+  /** Named export identifier in the source file (real-app only). */
+  exportName?: string;
+  props?: DesignSurfaceComponentProp[];
+  /** Variant names from `cva` / `tailwind-variants` (real-app only). */
+  variants?: Record<string, string[]>;
+  /** `data-agent-native-node-id` values of DOM instances of this component. */
+  instanceNodeIds: string[];
+}
+
+// ─── Token entries ────────────────────────────────────────────────────────────
+
+export type DesignTokenKind =
+  | "color"
+  | "typography"
+  | "spacing"
+  | "radius"
+  | "shadow"
+  | "motion"
+  | "other";
+
+export interface DesignSurfaceToken {
+  /** Stable token id — typically the CSS custom-property name, e.g. `--color-primary`. */
+  tokenId: string;
+  kind: DesignTokenKind;
+  /** Friendly display label, e.g. "Primary". */
+  label: string;
+  /** CSS custom-property name, e.g. `--color-primary`. */
+  cssVar: string;
+  /** Resolved value at index time, e.g. `#3b82f6`. */
+  resolvedValue: string;
+  /**
+   * Source file where this token is defined (real-app only; `globals.css`,
+   * `tailwind.config.ts`, etc.).
+   */
+  sourceFile?: string;
+}
+
+// ─── Motion timeline summary ──────────────────────────────────────────────────
+
+export interface DesignSurfaceMotionTrack {
+  /** `data-agent-native-node-id` of the animated element. */
+  targetNodeId: string;
+  /** CSS property being animated, e.g. `opacity`, `transform`. */
+  property: string;
+  keyframeCount: number;
+}
+
+export interface DesignSurfaceMotionTimeline {
+  /** Matches `motion_timeline.id` when persisted. */
+  timelineId: string;
+  /** `motion_timeline.source_ref` — the file or screen this timeline targets. */
+  sourceRef: string;
+  durationMs: number;
+  tracks: DesignSurfaceMotionTrack[];
+  /** SHA of the compiled CSS, used to detect drift from the JSON tracks. */
+  compiledHash?: string;
+}
+
+// ─── Design state / capture entries ──────────────────────────────────────────
+
+export type DesignStateKind = "state" | "fixture" | "capture";
+
+export type DesignBreakpoint = "auto" | "desktop" | "tablet" | "mobile";
+
+export interface DesignSurfaceState {
+  /** Matches `design_state.id` when persisted. */
+  stateId: string;
+  kind: DesignStateKind;
+  name: string;
+  breakpoint: DesignBreakpoint;
+  /** Route path snapped for this state (real-app captures only). */
+  route?: string;
+  /** Whether fixture/capture data is present. */
+  hasData: boolean;
+  /** URL of a preview screenshot, if captured. */
+  previewRef?: string;
+}
+
+// ─── Accessibility / review summary ──────────────────────────────────────────
+
+export type DesignReviewFindingSeverity = "error" | "warning" | "info";
+
+export type DesignReviewFindingKind =
+  | "contrast"
+  | "tap-target"
+  | "focus-visibility"
+  | "missing-alt"
+  | "missing-label"
+  | "missing-role"
+  | "reduced-motion"
+  | "other";
+
+export interface DesignReviewFinding {
+  findingId: string;
+  severity: DesignReviewFindingSeverity;
+  kind: DesignReviewFindingKind;
+  message: string;
+  /** `data-agent-native-node-id` of the affected element, when resolvable. */
+  nodeId?: string;
+  /** CSS selector fallback when `nodeId` is unavailable. */
+  selector?: string;
+  /** Whether a `apply-a11y-fix` action is available (real-app only). */
+  fixAvailable: boolean;
+}
+
+export interface DesignSurfaceReview {
+  /**
+   * Matches `design_review_snapshot.id` when persisted.  `null` means the
+   * review has not been run yet for this index snapshot.
+   */
+  snapshotId: string | null;
+  /**
+   * ISO-8601 timestamp of the last audit run, or `null` if not yet run.
+   */
+  auditedAt: string | null;
+  findings: DesignReviewFinding[];
+  /** `design_versions.id` used as the base for the visual diff. */
+  baseVersionId?: string;
+  /** `design_versions.id` used as the compare target for the visual diff. */
+  compareVersionId?: string;
+}
+
+// ─── Top-level index ──────────────────────────────────────────────────────────
+
+/**
+ * The normalized, queryable read-model for a single design source/screen.
+ *
+ * Both UI panels and agent actions read from this shape.  Each section is
+ * optional so callers can build the index lazily — a panel that only needs
+ * tokens doesn't have to wait for component indexing to finish.
+ */
+export interface DesignSurfaceIndex {
+  /** Version sentinel — increment when the shape changes in a breaking way. */
+  version: 1;
+
+  /** Metadata about the source and when this snapshot was built. */
+  source: DesignSurfaceSourceMeta;
+
+  /**
+   * Flat node list derived from the `CodeLayerProjection`.  Keyed by `nodeId`
+   * for O(1) lookup from UI selection events.
+   */
+  nodes?: Record<string, DesignSurfaceNode>;
+
+  /**
+   * Component entries found in this source.
+   * - Alpine designs: `alpine-annotation` entries from `data-agent-native-component`.
+   * - Real apps: `react-component` entries from the component index action.
+   */
+  components?: DesignSurfaceComponent[];
+
+  /**
+   * Design token entries parsed from CSS vars / Tailwind config / theme JSON.
+   * Available for both inline and real-app sources.
+   */
+  tokens?: DesignSurfaceToken[];
+
+  /**
+   * Motion timelines keyed by `timelineId`.  Both tiers support the managed
+   * `<style data-agent-native-motion>` block; real apps additionally support
+   * CSS module write-back.
+   */
+  motion?: Record<string, DesignSurfaceMotionTimeline>;
+
+  /**
+   * Design states, fixtures, and real-app captures.
+   * Breakpoints and states are orthogonal axes — any state can be viewed at
+   * any breakpoint.
+   */
+  states?: DesignSurfaceState[];
+
+  /**
+   * Most-recent accessibility audit results, or `null` if `run-design-audit`
+   * has not been called yet.
+   */
+  review?: DesignSurfaceReview;
+}