@codyswann/lisa 3.45.9 → 3.46.0

package/plugins/lisa/rules/reference/design-value-binding.md

@@ -0,0 +1,204 @@
+# Design Value Binding — full contract
+
+The eager head is [eager/design-value-binding.md](../eager/design-value-binding.md). This body carries the axis vocabulary, the five block conditions in detail, the configuration schema, the comment grammar, and the escalation routing.
+
+## Why this exists separately from `design-source-of-truth`
+
+The two contracts ask different questions about the same file, and both have to be answered.
+
+| Contract | Question | Failure it catches |
+|---|---|---|
+| `design-source-of-truth` | Does this changed surface **declare where its design came from**? | UI invented straight into code, with no design behind it at all. |
+| `design-value-binding` (this) | Are the **values on it bound** to the design system? | A surface with a perfectly valid design-node reference that still paints a literal no variable backs. |
+
+The second failure is invisible to the first, and it is the more common one on a mature product. The design looks finished, the node reference is real, review sees a screenshot that matches — and the codebase has quietly acquired a number that will drift the next time the palette moves. Nothing else in Lisa governs it: every other design obligation is conditioned on a design artifact existing, and here one does.
+
+## The axes
+
+Six, fixed. Projects declare which of them are typed; they never invent a seventh, because the vocabulary has to mean the same thing in the config, the lint rule, and the intake gate.
+
+| Axis | Covers |
+|---|---|
+| `color` | fills, strokes, text colour, tints, shadow colour |
+| `spacing` | padding, margin, gap, layout offsets |
+| `typography` | family, size, weight, line height, letter spacing |
+| `radius` | corner radii |
+| `elevation` | shadow geometry and opacity, elevation levels |
+| `motion` | durations, delays, easing |
+
+## Regime detection
+
+**Derive the regime per-axis from what the design source actually publishes. Never ask a human, and never assume.**
+
+An axis is **typed** when the design source publishes a variable collection covering it, and **untyped** when it does not.
+
+### The obvious implementation does not work headlessly
+
+This is measured, not assumed, and it is load-bearing for everything below.
+
+| Route | Gives names? | Usable headlessly? |
+|---|---|---|
+| Variables REST (`/v1/files/:key/variables/local`) | yes | **no** — Enterprise-plan only. The read scope is not offered in the token scope picker on other plans, so no token change unlocks it. |
+| Design-tool MCP (`get_variable_defs`) | yes, every plan | **no** — browser OAuth. Cron, CI, and a subagent cannot perform it. |
+| `/v1/files/:key/nodes` | **no** — opaque `VariableID:106:15` | **yes**, on a plain personal access token |
+
+A gate built on either of the first two works in an interactive session and silently no-ops in cron and CI — a control that reports success while inert, which is the exact defect class this repository exists to remove.
+
+### The committed id map
+
+The id→name mapping is **static**. So it is resolved once, interactively, by `design-variable-ids.mjs`, committed to the repo, and `design-bindings-probe.mjs` runs headlessly against the access token alone forever after. An axis is typed when the committed map names at least one variable in its namespace (`space/`, `radius/`, `content/`, … — overridable through `design.tokens.namespaces`, because the namespace vocabulary belongs to the design system, not to Lisa).
+
+The generator joins MCP `{name: value}` against REST `{VariableID: value}` on the same nodes. Value alone is ambiguous wherever two variables share a value, so three signals separate them: **property kind** (a padding can only bind a spacing variable), the **light+dark signature** (same-valued variables in light mode diverge in dark — this is the signal that takes the map to complete), and **single occupancy** (a node containing exactly one tied id and exactly one tied name forces the pairing). A tie that survives all three is recorded as ambiguous, never resolved by taking the first candidate.
+
+### Staleness is self-detecting
+
+An id the committed map has never seen makes the probe **fail loudly**, naming the id and telling you to regenerate. It never silently resolves to the wrong variable. That property is the entire reason a committed map is safe to trust, and it is why an unknown id is a block rather than a warning.
+
+### Two API traps that silently under-report
+
+Both cost a real measurement, and both fail green rather than loudly, which is worse.
+
+1. **`rectangleCornerRadii` binds as an object keyed by corner constants** — `{RECTANGLE_TOP_LEFT_CORNER_RADIUS: {type,id}, …}`. It is neither an array nor itself a reference, so a reader handling only the scalar and array shapes reports **zero bound radii on a fully bound file**. Normalise all three shapes.
+2. **Figma omits zero-valued properties from the REST payload.** Boundness must be read from `boundVariables` directly, never inferred from a resolved value being present — otherwise a padding bound to a zero-valued spacing variable vanishes. Reading it correctly moved one measured frame from 55% to 82%.
+
+### Measure the subtree, not the enclosing screen
+
+A frame-level read counts the chrome behind a modal and over-reports. One measured work item scored 14 bound values at frame level and **zero** inside the modal subtree it actually had to build; applying this rule changed 5 of 11 real work-item verdicts. Probe the node you will build.
+
+### Why the lint rung takes the regime as configuration instead
+
+ESLint runs on source text with no network and no design-tool session, so `ui-standards/no-unbound-design-value` cannot read the map at all. It takes the typed axes as its `typedAxes` option, which mirrors `design.tokens.axes`, and reports nothing when that list is empty.
+
+The intake probe's regime is **observed**; the lint rule's is **declared**, and the declared list can go stale relative to the map. It is still the correct division — an over-firing lint rule is a disabled lint rule, and a rule that silently skipped an axis it could not verify would be worse than one that skips an axis nobody declared. Intake is the arm that sees the truth; lint is the arm that catches the same defect at authoring time on the axes the project has already committed to.
+
+## A design source is optional
+
+**This matters more than any other requirement in this contract.** Most projects have no designs at all. Detect and skip cleanly:
+
+| Condition | Outcome |
+|---|---|
+| `design.tokens.source` unset | **SKIPPED**, exit 0, reason printed |
+| No access token in the environment | **SKIPPED**, exit 0, reason printed |
+| No committed id map | **SKIPPED**, exit 0, with the command to create one |
+
+Never a silent pass, and never a block. A mandatory gate on an absent integration breaks every non-design project on upgrade, which is a worse outcome than any drift it would have caught.
+
+## Every failure names an owner
+
+Three failures, two owners. Conflating them sends the wrong person the wrong work.
+
+| Owner | Failure | Meaning | Action |
+|---|---|---|---|
+| **design** | Unbound values | The design paints literals where variables exist. | Block the work item with the exact bind-list, most frequent first. |
+| **us** | Unknown id | Our committed map is stale. The value IS bound. | Regenerate the map. Never the designer's problem. |
+| **us** | Ambiguous id | Two variables share a value; our map cannot say which. | Disambiguate with a dark-mode reference frame, or record the choice by hand. Still a failure — guessing is what the contract forbids. |
+
+## The threshold is 100%, and relaxing it is visible
+
+The default is the contract as written: any literal in a required axis fails. A `--min` flag exists so that a deliberate, reviewable policy decision can be made **on the command line where it is visible**, rather than by quietly softening the gate in code — which is the exact failure the gate was written to prevent.
+
+## The five block conditions
+
+Every one is a fact about the design, checkable the same way twice by two different agents.
+
+### 1. A named token does not exist
+
+The work item or frame names a variable — `surface/raised`, `space/gutter` — that the library does not publish. Do not substitute the nearest name and do not invent it.
+
+### 2. A value is hardcoded in the design file itself, in a typed axis
+
+The frame paints a literal where the axis has a variable collection. **This is the most important condition and the easiest to miss**, because nothing about the artifact looks wrong: the design is finished, the component renders, and the only symptom is that there is no variable to extract. An agent that treats "I can see the value" as "I have the value" will copy it and produce exactly the drift this contract exists to prevent.
+
+### 3. The component is not published
+
+It lives in a draft or local file, so there is no stable reference to build against. A component that may be renamed, restructured, or deleted without a version event is not a handoff artifact.
+
+### 4. A required state has no design
+
+The work item specifies disabled, error, loading, empty, or another state, and the component set has no variant for it. Do not invent the state; do not derive it by dimming the default.
+
+### 5. Two sources disagree
+
+The bound token resolves to one value and the frame renders another. **Never pick a side.** Either the binding is stale or the frame is overridden, and which one is correct is a design decision, not an implementation one.
+
+## The explicit non-block list
+
+This half is as load-bearing as the conditions. Without it the gate fires on everything, and a gate that fires on everything is turned off.
+
+- **Anything in an untyped axis.** Measure it. This is not a concession — it is the correct source of truth for that axis.
+- **One-off values that are not semantic.** An illustration's exact offset, a one-time hero crop. These were never going to be tokens.
+- **Anything where a token exists and is bound.** The happy path, which is most of the work.
+- **Aesthetic uncertainty.** If every value needed is bound and the agent merely finds the design ambiguous, unusual, or ugly, that is an opinion. Build it.
+
+The distinction the whole contract rests on: **block on *unbound*, never on *unsure*.** "I cannot tell what they meant" is a judgment call, and an agent asked to make it will block on everything or nothing depending on temperament. "The design does not bind a value I need" is objective.
+
+## Visual matching, precisely
+
+| Axis regime | What a screenshot is for | A mismatch means |
+|---|---|---|
+| typed | **verification** — build from the variable, then confirm | block condition 5 |
+| untyped | **derivation** — measure, then record | nothing; that is the workflow |
+
+The rule is never "do not look at pixels". It is **"do not derive a value from pixels when a binding exists."** In a typed axis the pixels are the check, not the source.
+
+## Derived-value recording
+
+Every value measured in an untyped axis is recorded on the work item, with its axis and where it was measured. This costs nothing at the time and produces something no design-system audit produces on its own: an inventory of what the token system is missing, **ranked by what people actually needed**, accumulated from real work rather than from a survey.
+
+## Configuration
+
+Read from `.lisa.config.json`, with `.lisa.config.local.json` overriding per key, exactly as `config-resolution` specifies.
+
+| Key | Required | Description |
+|---|---|---|
+| `design.tokens.source` | to run intake | The authoritative design source — the file key whose published variables define the regime. **Absent means SKIPPED, not blocked.** |
+| `design.tokens.idMap` | no | Path to the committed variable-id map. Defaults to `docs/design-system/figma-variable-ids.json`. |
+| `design.tokens.namespaces` | no | Axis → variable-name prefixes, deciding which axis a variable belongs to. The namespace vocabulary is the design system's, not Lisa's, so this overrides the defaults rather than extending them. |
+| `design.tokens.nameMap` | no | Variable name → repo token name. Identity-ish by default (`a/b` → `a-b`), because the mapping is project vocabulary. |
+| `design.tokens.axes` | no | Axes the project declares typed. Mirrors what the map publishes; consumed by the lint rung, which cannot read the map. Absent means the lint rule reports nothing. |
+| `design.escalation.assignee` | **yes** | Who a blocked item is assigned to. |
+| `design.escalation.label` | no | Additive marker applied alongside the `blocked` role. |
+
+**No person's name, handle, or identity appears in any Lisa artifact.** These are host configuration keys and nothing else. Lisa ships the key, the host supplies the value.
+
+### An unset assignee is itself a block
+
+If `design.escalation.assignee` is unset, intake blocks on that before anything else, and says so in those terms. This is not defensive pedantry: a blocked item assigned to nobody is an item nobody sees, which is operationally identical to having skipped the block entirely — except that it also consumed the work item. Guessing an assignee is worse still, because it routes a design question to whoever happened to be nearby.
+
+## Escalation routing
+
+Escalation goes through the vendor-neutral tracker abstraction (`lisa-tracker-write`, `lisa-tracker-sync`, `lisa-tracker-claim`), never a hardcoded label call. Per `config-resolution`, the `blocked` role resolves differently per vendor:
+
+- **Linear** — a native workflow **state**.
+- **GitHub** — a **label** (`status:blocked`), because GitHub Issues has no workflow-state field.
+- **JIRA** — a workflow **status**.
+
+`design.escalation.label` is an **additive marker**, applied alongside the `blocked` role, never instead of it — the same shape as the `human_needed` marker. A project that does not define it inherits nothing and the add is a no-op.
+
+Design blocks generally do warrant `human_needed` as well: a missing variable, an unpublished component, and a token/frame disagreement all require a person to make a design decision, and none of them self-heal on a retry.
+
+## The blocked comment
+
+Plain language, no engineering vocabulary, naming the specific missing artifact and what to do about it. The house standard is that a non-technical operator is the one standing at the gate.
+
+> The 'Raised card' component uses the colour #3A7BD5 directly rather than a colour variable. I need that colour published as a variable so the app and the design stay in sync — otherwise I'd be copying a number that changes without warning.
+
+Three things make that comment work, and all three are required:
+
+1. **It names the artifact** — the component, by the name it has in the design file, not a node id.
+2. **It names the specific value** — so the reader can find it without a hunt.
+3. **It says what to do and why it matters in consequences**, not in vocabulary. "Published as a variable" is an action; "unbound token reference in a typed axis" is a diagnosis nobody outside the factory can act on.
+
+Words that must not appear: token, binding, unbound, axis, typed, regime, variable *collection*, node id, AST, lint. They are all correct and all useless to the person being asked.
+
+## Interaction with host design-system rules
+
+Projects that carry their own design-system rules (`figma-design-system`, `design-system`, `use-the-design-library`, or an equivalent) keep them, and they stay authoritative. This contract never restates component hierarchy, token vocabulary, or reuse policy, and never overrides them. It asks one orthogonal question those rules do not: **is the value bound to what the design system publishes?**
+
+## Bootstrap and degradation
+
+Adoption never demands a retroactive backfill. Intake judges the work item in front of it, and the lint rung judges the code being written. Pre-existing unbound values are burndown — recorded, worked down, and increasingly visible through the derived-value inventory — not this work item's blocker.
+
+A project with a design source but no variable system at all is not exempt and not blocked: every axis is untyped, everything is measured, and every measurement is recorded. The resulting inventory is the honest record of what a variable system would need to cover, which is exactly the input the project needs before it builds one.
+
+A project with **no design source at all** is SKIPPED entirely — see "A design source is optional" above. That is not a weaker form of the same treatment; it is the correct answer, and getting it wrong breaks every project that has no designs.