@adia-ai/a2ui-compose 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,86 @@
+# Changelog — @adia-ai/a2ui-compose
+
+Follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+Scope: generation engines (monolithic + zettel), LLM adapters,
+transpiler, evals. Retrieval + validation now ship as sibling
+packages (`@adia-ai/a2ui-retrieval`, `@adia-ai/a2ui-validator`) so
+non-compose consumers can depend on them without pulling the
+generator graph.
+
+## [Unreleased]
+
+_Nothing yet._
+
+---
+
+## [0.0.1] - 2026-04-24
+
+First public release. Framework-agnostic compose engine for the
+A2UI protocol: takes natural-language intents + a catalog and
+produces A2UI protocol messages. Two generation strategies ship
+behind a plug-in engine registry.
+
+### Included
+
+- **Monolithic engine** (`engine/generator.js`) — single-call
+  generator with `instant` / `pro` / `thinking` modes. Anthropic
+  and OpenAI LLM adapters included. Pattern-match-only `instant`
+  mode for deterministic output; `pro` + `thinking` call the LLM.
+- **Zettel engine** (`engines/zettel/`) — fragment-graph composition
+  strategy that assembles UI from reusable fragments + compositions
+  via a backlink graph. Framework-agnostic; driven by the same
+  intent-gate + domain-router as monolithic.
+- **Engine registry** (`engines/registry.js`) — plug-in API.
+  `registerEngine(name, fn)` + `pick(name)` dispatcher;
+  reserved names for built-ins.
+- **LLM bridge** (`llm/llm-bridge.js`) — unified interface over
+  Anthropic, OpenAI, and Gemini adapters. Streaming + non-streaming
+  calls; prompt-cache support for Anthropic.
+- **Transpiler** (`transpiler/transpiler.js`) — A2UI JSON → HTML
+  rendering; used by MCP tools and the visual-validate pipeline.
+- **Evals harness** (`evals/harness.mjs`) — V2 cross-engine eval
+  runner. Consumed by `eval-diff.mjs` in `@adia-ai/a2ui-mcp`.
+- **Index barrel** (`index.js`) — re-exports `generateUI`,
+  `generateUIStream`, `pick`, `listEngines`, `registerEngine`,
+  `unregisterEngine`, `ENGINES` for one-import consumer surface.
+
+### Dependencies
+
+- `@adia-ai/a2ui-utils` ^0.0.2 — A2UI runtime primitives.
+- `@adia-ai/a2ui-retrieval` ^0.0.1 — retrieval layer.
+- `@adia-ai/a2ui-validator` ^0.0.1 — validation layer.
+
+---
+
+## Pre-0.0.1 history
+
+### Changed
+- **A2UI runtime dependency relocated.** `retrieval/catalog.js`,
+  `transpiler/transpiler-maps.js`, and `validation/validator.js` now
+  import `registry` and `wiringRegistry` from the new published package
+  `@adia-ai/a2ui-utils` instead of `../../web-components/a2ui/`
+  (which no longer exists — the runtime moved out of web-components in
+  `@adia-ai/web-components@0.0.4`). The scoped import is resolved via
+  the workspace symlink in dev and the transitive dependency in
+  published installs.
+- `retrieval/anti-patterns.js` — `noInventedComponents` regex broadened from `/<([a-z]+-n)\b/` to `/<([a-z]+-(?:n|ui))\b/` so the check actually fires against the current `-ui` codebase. Allowlist aligned with canonical registry.
+- `transpiler/transpiler.js` and `transpiler/transpiler-maps.js` — stale `-n` tag references updated to `-ui` forms consistent with `packages/web-components/a2ui/registry.js`.
+- `retrieval/catalog.js`, `retrieval/synthetic-data.js`, `engines/monolithic/_shared.js` — internal tag references audited and aligned with the canonical registry.
+
+### Fixed
+- Stale internal-identifier references in comments + doc strings swept to the current naming.
+
+---
+
+## [0.1.0] — internal baseline (unreleased)
+
+Initial version at the time the monorepo was established. Contains:
+
+- **Monolithic engine** — single-call generator with instant / pro / thinking modes (Anthropic, OpenAI adapters).
+- **Zettel engine** — fragment-graph composition engine using leverage-ranked fragments from the training corpus.
+- **Retrieval layer** — keyword + concept-tag + component-signature scoring. Dialog recorder writes per-turn JSON to `logs/dialogs/`.
+- **Validator** — 15-check weighted schema validator; rejects `_fallback: true` surfaces as score 0.
+- **Prompt caching** — enabled on Anthropic calls as of 2026-04-19.
+
+Package name still uses the legacy `@adia-ai/a2ui-compose` scope pending rename (see root CHANGELOG for context).

package/README.md

@@ -0,0 +1,181 @@
+# @adia-ai/a2ui-compose
+
+Framework-agnostic UI generation engine. Takes a natural-language intent +
+an A2UI component catalog and produces a tree of A2UI protocol messages
+ready for a renderer.
+
+> This package is pipeline runtime only. UI components live in
+> [`@adia-ai/web-components`](../web-components); the A2UI runtime (renderer,
+> registry, streams, wiring) in [`@adia-ai/a2ui-utils`](../a2ui/utils);
+> the pattern corpus in [`@adia-ai/a2ui-corpus`](../corpus);
+> the MCP server in [`@adia-ai/a2ui-mcp`](../mcp).
+>
+> Note: this package still lives under the legacy `@adiahealth` scope in its
+> own `package.json` name. The `@adia-ai` scope is the public npm scope
+> (only `@adia-ai/web-components` and `@adia-ai/a2ui-utils` are currently
+> published).
+
+## What it does
+
+```
+intent  ─▶  classify  ─▶  retrieve  ─▶  compose / adapt  ─▶  validate  ─▶  A2UI
+           (concepts)    (patterns)     (engine-specific)     (score ≥70)    JSON
+```
+
+One entry point, two generation strategies, pluggable LLM back-end.
+
+```javascript
+import { generateUI } from '@adia-ai/a2ui-compose/engine';
+
+const result = await generateUI({
+  intent: 'login form with email, password, and remember-me',
+  engine: 'zettel',        // 'monolithic' | 'zettel'
+  mode:   'pro',           // monolithic only: instant | pro | thinking
+  model:  'claude-sonnet-4-7',
+});
+
+// result.components   — A2UI message array
+// result.validation   — { score, checks, warnings }
+// result.debug        — pattern matches, LLM prompt, token usage, …
+```
+
+## Layout
+
+```
+gen-ui/
+├── engine/
+│   └── generator.js        generateUI() — the one public entry point
+│
+├── engines/                pluggable strategies via registerEngine()
+│   ├── registry.js         engine selector + reserved-name guard
+│   ├── monolithic/         pattern-match + LLM-adapt (3 modes)
+│   │   ├── generate-instant.js   no LLM — pattern-match only
+│   │   ├── generate-pro.js       pattern + LLM adaptation, non-streaming
+│   │   └── generate-thinking.js  streaming LLM + repair loop
+│   └── zettel/             fragment-graph composition
+│       ├── generator-adapter.js  entry point
+│       ├── composer.js           assembles fragments → compositions
+│       └── session.js            multi-turn state
+│
+├── retrieval/
+│   ├── catalog.js          loads component schemas from sibling .a2ui.json
+│   ├── pattern-library.js  keyword-ranked pattern search (corpus + embeddings)
+│   ├── fragments.js        atomic-shape lookup for zettel
+│   ├── anti-patterns.js    catalog of canonical anti-patterns
+│   └── feedback-store.js   accumulates user feedback → disk
+│
+├── llm/
+│   ├── llm-bridge.js       unified adapter (Anthropic / OpenAI / Gemini)
+│   ├── env.js              Vite + Node env-var routing
+│   └── prompts/            system prompts per engine mode
+│
+├── validation/
+│   └── validator.js        15-check A2UI validator, weighted 0–100 score
+│
+├── intelligence/           intent classification + concept extraction
+│   ├── classifier.js
+│   ├── concepts.js
+│   └── steelman.js
+│
+└── evals/
+    └── harness.mjs         held-out intent benchmark runner
+```
+
+## Engines
+
+**Monolithic** — pattern-match against full-canvas templates, optionally
+adapt via LLM. Three modes:
+
+| Mode       | LLM? | Speed  | Use for                                         |
+|------------|------|--------|-------------------------------------------------|
+| `instant`  | no   | <50ms  | High-confidence intents with exact pattern hit  |
+| `pro`      | yes  | ~2s    | Most requests — adapt a template to the intent  |
+| `thinking` | yes  | ~5s    | Complex requests; streams + runs a repair loop  |
+
+**Zettel** — fragment-graph composition. Retrieves atomic fragments
+(form-field, card-header, action-row, …) by keyword + concept-tag overlap
+and assembles them into compositions. Verbatim retrieval above a threshold
+(score ≥ 40); LLM synthesis from fragments below. Preserves session state
+across multi-turn iterations.
+
+```javascript
+import { registerEngine } from '@adia-ai/a2ui-compose/engines/registry';
+
+registerEngine('my-engine', async (ctx) => {
+  // ctx: intent, catalog, patterns, concepts, session, llm, …
+  return { components: [...], validation: {...}, debug: {...} };
+});
+```
+
+Reserved names: `monolithic`, `monolithic-*`, `zettel`, `mcp`.
+
+## Validation
+
+Every generated output runs through `validation/validator.js` — 15 weighted
+checks covering structural validity, card/grid conventions, intent
+alignment (F1), and anti-patterns. Result:
+
+```javascript
+{
+  score: 92,                    // 0-100
+  passed: true,                 // score ≥ 70
+  checks: [
+    { id: 'structure',   ok: true,  weight: 10 },
+    { id: 'intent-f1',   ok: true,  weight: 8, value: 0.84 },
+    { id: 'card-grid',   ok: true,  weight: 6 },
+    { id: 'anti-pattern', ok: false, weight: 4, hit: 'chart-legend' },
+    …
+  ]
+}
+```
+
+`_fallback` surfaces score 0 by design — ensure the engine returns real
+output, not a safety net.
+
+## LLM bridge
+
+Multi-provider adapter with a common interface:
+
+```javascript
+import { getAdapter } from '@adia-ai/a2ui-compose/llm';
+
+const adapter = getAdapter('anthropic');     // or 'openai', 'gemini'
+const stream = await adapter.streamChat({ model, messages, tools });
+```
+
+Env-var routing via `llm/env.js` — works under Node (`process.env`) and
+Vite (`import.meta.env`). Browser calls proxy through `server.js` at the
+repo root (holds API keys); Node calls go direct.
+
+## Evals
+
+```bash
+npm run evals              # held-out intent benchmark
+npm run eval:diff -- --engine zettel    # diff against baseline
+```
+
+The held-out fixture lives in `gen-ui-training/evals/held-out.jsonl`.
+Regression thresholds the pipeline must hold:
+
+- Zettel coverage **100%**, avgScore **≥ 88**, MRR **≥ 0.94**
+- Monolithic coverage **100%**, avgScore **≥ 95**
+- Fragment reuse ratio **≥ 29.9%** (167 refs / 559 nodes)
+
+Full gate sweep: see `AGENTS.md` at repo root, or run `/verification-sweep`.
+
+## Gotchas
+
+- **Component catalog is read-only.** `.a2ui.json` sidecars in
+  `web-components/components/*/` are build outputs; edit the sibling YAML
+  instead.
+- **Zettel loading is lazy.** The corpus is only parsed on first zettel
+  call — avoids Node `fs`/`path` imports reaching the browser bundle.
+- **Validator score ≥ 70 is required** for downstream consumers to trust
+  the output. Below that, callers should treat the tree as advisory.
+- **Engine name reservations** are enforced at registration time —
+  `registerEngine('zettel-v2', …)` passes; `registerEngine('zettel', …)`
+  throws.
+
+## License
+
+MIT

package/engine/artifacts.js

@@ -0,0 +1,262 @@
+/**
+ * ArtifactStore — In-memory artifact storage for pipeline executions.
+ *
+ * Stores A2UI message sequences keyed by executionId, with multi-turn
+ * history (iterations). Each turn records the messages, optional HTML
+ * render, a human-readable summary, and the intent that produced it.
+ *
+ * Drift detection: measures structural divergence between turns to flag
+ * scope creep in iterative generation sessions.
+ */
+
+export class ArtifactStore {
+  #artifacts = new Map(); // executionId → { turns: [], metadata }
+
+  /**
+   * Record a turn (iteration) for an execution.
+   *
+   * @param {string} executionId
+   * @param {object} opts
+   * @param {object[]} opts.messages — A2UI message sequence
+   * @param {string} [opts.html] — Optional rendered HTML snapshot
+   * @param {string} [opts.summary] — Human-readable description
+   * @param {object} [opts.validation] — Validation result from validateSchema
+   * @param {string} [opts.intent] — The user intent for this turn
+   */
+  record(executionId, { messages, html = null, summary = '', validation = null, intent = '', analysis = null }) {
+    let artifact = this.#artifacts.get(executionId);
+    if (!artifact) {
+      artifact = {
+        executionId,
+        turns: [],
+        metadata: {
+          created: Date.now(),
+          updated: Date.now(),
+          originalIntent: intent || summary || '',
+          // Stash the first turn's analyzer output so iteration turns can
+          // recover the original brief's concepts/entities/components for
+          // canvas-aware downstream decisions (e.g. suggestion generation,
+          // drift detection). Iteration turns skip the analyzer, so this is
+          // the only durable handle on what the user originally asked for.
+          originalAnalysis: analysis || null,
+        },
+      };
+      this.#artifacts.set(executionId, artifact);
+    }
+
+    // Extract structural snapshot for drift tracking
+    const components = messages?.flatMap(m => m.components || []) || [];
+    const snapshot = _buildStructuralSnapshot(components);
+
+    artifact.turns.push({
+      turn: artifact.turns.length,
+      messages,
+      html,
+      summary,
+      validation,
+      intent: intent || summary || '',
+      snapshot,
+      timestamp: Date.now(),
+    });
+
+    artifact.metadata.updated = Date.now();
+  }
+
+  /**
+   * Get a specific turn for an execution.
+   *
+   * @param {string} executionId
+   * @param {number} [turn=-1] — Turn index (negative counts from end; -1 = latest)
+   * @returns {object|null}
+   */
+  get(executionId, turn = -1) {
+    const artifact = this.#artifacts.get(executionId);
+    if (!artifact || artifact.turns.length === 0) return null;
+
+    const idx = turn < 0 ? artifact.turns.length + turn : turn;
+    return artifact.turns[idx] ?? null;
+  }
+
+  /**
+   * Get all turns for an execution.
+   *
+   * @param {string} executionId
+   * @returns {object[]|null}
+   */
+  getAll(executionId) {
+    const artifact = this.#artifacts.get(executionId);
+    if (!artifact) return null;
+    return [...artifact.turns];
+  }
+
+  /**
+   * Get the original (first turn) prompt analyzer output for an execution.
+   * Used by iteration turns that need to recover the original concepts /
+   * implied components / steelman to drive canvas-aware decisions.
+   * @param {string} executionId
+   * @returns {object|null}
+   */
+  getOriginalAnalysis(executionId) {
+    const artifact = this.#artifacts.get(executionId);
+    return artifact?.metadata?.originalAnalysis || null;
+  }
+
+  /**
+   * Get the original (first turn) intent for an execution.
+   * @param {string} executionId
+   * @returns {string|null}
+   */
+  getOriginalIntent(executionId) {
+    const artifact = this.#artifacts.get(executionId);
+    return artifact?.metadata?.originalIntent || null;
+  }
+
+  /**
+   * Compute drift metrics between the first turn and the latest turn.
+   *
+   * Returns null if there are fewer than 2 turns.
+   *
+   * @param {string} executionId
+   * @returns {{ componentGrowth: number, sectionGrowth: number, newSections: string[], driftScore: number, turnCount: number, warning: string|null }|null}
+   */
+  getDriftMetrics(executionId) {
+    const artifact = this.#artifacts.get(executionId);
+    if (!artifact || artifact.turns.length < 2) return null;
+
+    const first = artifact.turns[0].snapshot;
+    const latest = artifact.turns[artifact.turns.length - 1].snapshot;
+    if (!first || !latest) return null;
+
+    // Component count growth ratio
+    const componentGrowth = first.componentCount > 0
+      ? latest.componentCount / first.componentCount
+      : latest.componentCount;
+
+    // Section count growth ratio
+    const sectionGrowth = first.sectionCount > 0
+      ? latest.sectionCount / first.sectionCount
+      : latest.sectionCount;
+
+    // New sections added since turn 0
+    const originalSections = new Set(first.sectionNames);
+    const newSections = latest.sectionNames.filter(s => !originalSections.has(s));
+
+    // Component type diversity change
+    const originalTypes = new Set(first.componentTypes);
+    const newTypes = latest.componentTypes.filter(t => !originalTypes.has(t));
+
+    // Drift score: 0 = no drift, 1 = extreme drift
+    // Weighted: 40% component growth, 30% section growth, 30% new sections
+    const growthFactor = Math.min(componentGrowth / 3, 1); // 3x = max
+    const sectionFactor = Math.min(sectionGrowth / 3, 1);
+    const newSectionFactor = Math.min(newSections.length / 4, 1); // 4+ new = max
+    const driftScore = Math.round((growthFactor * 0.4 + sectionFactor * 0.3 + newSectionFactor * 0.3) * 100) / 100;
+
+    // Warning thresholds
+    let warning = null;
+    if (driftScore >= 0.7) {
+      warning = `High canvas drift detected (score: ${driftScore}). Canvas grew from ${first.componentCount} to ${latest.componentCount} components across ${artifact.turns.length} turns. ${newSections.length} new sections added: ${newSections.join(', ')}. Consider confirming with user that this matches original intent: "${artifact.metadata.originalIntent}"`;
+    } else if (driftScore >= 0.4) {
+      warning = `Moderate canvas drift (score: ${driftScore}). Canvas: ${first.componentCount} → ${latest.componentCount} components. ${newSections.length} new sections added.`;
+    }
+
+    return {
+      componentGrowth: Math.round(componentGrowth * 100) / 100,
+      sectionGrowth: Math.round(sectionGrowth * 100) / 100,
+      newSections,
+      newTypes,
+      driftScore,
+      turnCount: artifact.turns.length,
+      originalIntent: artifact.metadata.originalIntent,
+      warning,
+    };
+  }
+
+  /**
+   * List all execution summaries.
+   *
+   * @returns {object[]}
+   */
+  list() {
+    const results = [];
+    for (const [id, artifact] of this.#artifacts) {
+      const latest = artifact.turns[artifact.turns.length - 1];
+      results.push({
+        executionId: id,
+        turnCount: artifact.turns.length,
+        latestSummary: latest?.summary ?? '',
+        latestScore: latest?.validation?.score ?? null,
+        originalIntent: artifact.metadata.originalIntent ?? '',
+        created: artifact.metadata.created,
+        updated: artifact.metadata.updated,
+      });
+    }
+    return results;
+  }
+
+  /**
+   * Delete an execution's artifacts.
+   *
+   * @param {string} executionId
+   * @returns {boolean} — true if deleted
+   */
+  delete(executionId) {
+    return this.#artifacts.delete(executionId);
+  }
+
+  /**
+   * Clear all artifacts.
+   */
+  clear() {
+    this.#artifacts.clear();
+  }
+
+  /** Number of stored executions */
+  get size() {
+    return this.#artifacts.size;
+  }
+}
+
+/**
+ * Build a structural snapshot of the canvas for drift comparison.
+ * Extracts component count, section names, component types —
+ * the metrics that indicate structural changes.
+ *
+ * @param {object[]} components — flat A2UI component array
+ * @returns {{ componentCount: number, sectionCount: number, sectionNames: string[], componentTypes: string[] }}
+ */
+function _buildStructuralSnapshot(components) {
+  if (!components || components.length === 0) {
+    return { componentCount: 0, sectionCount: 0, sectionNames: [], componentTypes: [] };
+  }
+
+  const sectionNames = [];
+  for (const c of components) {
+    if (c.component === 'Card') {
+      // Find the title of this Card section
+      const headerChild = components.find(
+        h => h.parentId === c.id && (h.component === 'Header' || h.component === 'CardHeader')
+      );
+      if (headerChild) {
+        const titleChild = components.find(
+          t => t.parentId === headerChild.id && t.component === 'Text'
+        );
+        sectionNames.push(titleChild?.text || titleChild?.children || headerChild.title || c.id);
+      } else {
+        sectionNames.push(c.id);
+      }
+    }
+  }
+
+  const typeSet = new Set();
+  for (const c of components) {
+    if (c.component) typeSet.add(c.component);
+  }
+
+  return {
+    componentCount: components.length,
+    sectionCount: sectionNames.length,
+    sectionNames,
+    componentTypes: [...typeSet].sort(),
+  };
+}

package/engine/constitution.md

@@ -0,0 +1,78 @@
+# AdiaUI Generation Constitution
+
+Rules the generator MUST satisfy. Used by the RLAIF critique-revise stage
+to evaluate and improve generated output. Each rule maps to a validator check.
+
+---
+
+## Card Content Model
+
+- Every `Card` MUST have at least one of: `Header`, `Section`, `Footer`.
+- `Section` content MUST be wrapped in a `Column` component, not placed directly.
+- Headings (`h1`-`h6`) belong in `Header`, not `Section`.
+- Action buttons belong in `Footer`, not `Section` or `Header` (unless using `slot="action"`).
+- `Header` supports 4 slots: `slot="icon"` (leading), `slot="heading"` (title), `slot="description"` (subtitle), `slot="action"` (trailing badge/button).
+
+## Typography & Variant System
+
+- Use semantic HTML elements with `variant` attribute: `<h1 variant="title">`, `<h3 variant="section">`, `<p variant="body">`.
+- Never use `data-heading` — use `variant` instead.
+- Text hierarchy: display > title > heading > section > subsection > body > deck > caption > kicker > label.
+- Use `color="subtle"` or `color="muted"` for secondary text, not inline styles.
+
+## Layout Primitives
+
+- `Column` (col-ui): vertical stack. Use numeric `gap` values: `gap="2"`, `gap="4"`, `gap="6"`.
+- `Row` (row-ui): horizontal. Use `gap`, `justify`, `align` attributes.
+- `Grid` (grid-ui): CSS grid. Use `columns="2|3|4"`.
+- Never use named gaps (`gap="sm"`, `gap="md"`, `gap="lg"`) — always numeric.
+- Never use inline `style` attributes for layout.
+- Never use CSS class names.
+
+## Component Types
+
+- Use `Input` for text inputs (not `TextField` or `TextInput`).
+- Use `CheckBox` for checkboxes (not `Checkbox`).
+- Use `Select` for dropdowns (not `ChoicePicker`).
+- Use `Toggle` for switch controls.
+- Use `Button` with `variant="primary"` for main CTA, `variant="outline"` for secondary.
+- Button text via `text` prop, icon via `icon` prop (Phosphor icon name).
+
+## Flat Adjacency Protocol
+
+- Every component has a unique `id`.
+- Root component MUST have `id: "root"`.
+- Children referenced by ID array: `children: ["child-1", "child-2"]`.
+- IDs should be short and descriptive: `"hdr"`, `"email-field"`, `"submit-btn"`.
+- No circular references.
+- No orphaned components (every non-root must be referenced by a parent).
+
+## Anti-Patterns (DO NOT)
+
+1. **No bare divs** — never use `<div>` or HTML-only elements. Use AdiaUI components.
+2. **No flat adjacency violations** — every Text inside Section must be inside a Column wrapper.
+3. **No heading hierarchy skips** — don't jump from h1 to h3.
+4. **No duplicate IDs** — every component must have a unique ID.
+5. **No content directly in Tab** — Tab is a button strip item, not a content container.
+6. **No invented components** — only use types registered in the A2UI registry.
+7. **No slot on containers** — `slot="heading"` goes on the heading element, not on Header.
+8. **No inline styles** — use component props and tokens, not `style="..."`.
+
+## Prose & Content Context
+
+- For marketing/content pages, wrap in `<section prose>` to shift to content-optimized typography.
+- Centered page headers use: `<header align="center" size="lg">` → `<col-ui gap="4">` → kicker/display/deck.
+- Use `nomargin` on typography elements inside cards to prevent double-spacing.
+
+## Icon Names
+
+- Use Phosphor icon names: `arrow-right`, `check-circle`, `warning-circle`, etc.
+- Brand icons need `-logo` suffix: `google-logo`, `github-logo`, `twitter-logo`.
+- Common aliases are resolved automatically: `send`→`paper-plane-right`, `settings`→`gear`, `mail`→`envelope`.
+
+## Accessibility
+
+- Interactive elements must have `aria-label` if no visible text.
+- Icon-only buttons must have `aria-label`.
+- Images must have `alt` text.
+- Form inputs must have `label` prop.