Anatomy & parts

The part treeGeneratedCurated#

Anatomy is a nested tree of named parts (Record<partName, Part>) — contracts are authored and reviewed by humans, and a tree reads like the component. A root part is mandatory. Part names are unique per contract. Every styling decision lives here as a token binding; there is no handwritten style layer to drift.

A part is structural by default (a frame on the canvas, an element in code, containing parts), or it plays one of the roles on this and the following pages: text content, icon, meter, shape, slot / component ref / repeat template.

StructureCurated#

Composition rules enforced at build time: part names unique per contract, a mandatory root, cycles and unknown contract references fail the build, and sync scripts emit in dependency order. A duplicate anatomy part name is refused by name.

{
  "anatomy": {
    "root": {
      "parts": {
        "body": {
          "layout": {
            "direction": "column",
            "grow": true
          },
          "tokens": {
            "gap": "{space.inset-y.sm}"
          },
          "parts": {
            "title": {
              "element": "div",
              "content": {
                "prop": "title"
              },
              "tokens": {
                "font-family": "{font.control.family}",
                "font-size": "{font.control.size.md}",
                "font-weight": "{font.title.weight}"
              }
            },
            "descriptionText": {
              "element": "div",
              "content": {
                "prop": "description"
              },
              "tokens": {
                "font-family": "{font.control.family}",
                "font-size": "{font.control.size.sm}"
              }
            }
          }
        }
      }
    }
  }
}

Text: content & literal textGeneratedCurated#

content: { prop } binds a part’s text to a declared text prop — {title} in the part’s element on the code side, a text node linked to the text property on the canvas. text is static literal text (a page number, an ellipsis) — the same on both surfaces, bound to nothing.

Refusals: Each of these fails the build by name — the generator refuses, it never papers over (source: core/emit-react.ts validateContract, exercised by the C2 eval family).

• content.prop must name a declared text prop (checked against the prop’s code binding name)

{
  "anatomy": {
    "root": {
      "parts": {
        "body": {
          "parts": {
            "title": {
              "element": "div",
              "content": {
                "prop": "title"
              },
              "tokens": {
                "font-family": "{font.control.family}",
                "font-size": "{font.control.size.md}",
                "font-weight": "{font.title.weight}"
              }
            }
          }
        }
      }
    }
  }
}

Text by propGeneratedCurated#

textByProp: { prop, map } — static text selected by an enum value. When a drawn text node’s characters vary as a pure function of one enum axis, the deviating values ride a lookup keyed on that prop’s canonical values — the tokensByProp discipline applied to characters. Requires a base text (the default value’s text); a value absent from the map renders the base. Field cases: the Untitled UI Slider’s value labels ("25%"/"50%"/"75%" keyed on leftControl/rightControl), ProgressBar’s percentage text, SocialButton’s “Sign in with …”.

Refusals: Each of these fails the build by name — the generator refuses, it never papers over (source: core/emit-react.ts validateContract, exercised by the C2 eval family).

• textByProp without a base text
• an unknown driving prop; a map key outside its canonical values

{
  "element": "span",
  "text": "25%",
  "textByProp": {
    "prop": "leftControl",
    "map": {
      "25": "25%",
      "50": "50%",
      "75": "75%"
    }
  }
}

Icon partsGeneratedCurated#

icon: { asset, size? } renders assets/icons/<asset>.svg inline on the code side and as a vector on the canvas. '{prop}' substitutes an enum prop — icon-by-status. Icons are always decorative (aria-hidden).

Refusals: Each of these fails the build by name — the generator refuses, it never papers over (source: core/emit-react.ts validateContract, exercised by the C2 eval family).

• an icon asset that does not exist on disk — needs icon asset "assets/icons/….svg" which does not exist

{
  "anatomy": {
    "root": {
      "parts": {
        "statusIcon": {
          "description": "Leading icon, selected by status. Decorative — hidden from assistive tech.",
          "icon": {
            "asset": "{status}"
          }
        }
      }
    }
  }
}

AttributesGeneratedCurated#

attrs sets HTML/ARIA attributes on the part’s element — literal strings or '{prop}' references (refused when the prop doesn’t exist). Code-side surface; the canvas ignores it. A real <input type="checkbox|radio"> declared this way is recognized as a native checkable control: code surfaces render it as the focusable control (checked state is DOM state, never ARIA), and the canvas draws nothing for it — semantics don’t draw.

{
  "anatomy": {
    "root": {
      "parts": {
        "box": {
          "parts": {
            "input": {
              "description": "The real checkable control — a native input. Checked and indeterminate are DOM state (checked + el.indeterminate), never ARIA attributes; the wrapping label gives implicit association. Canvas: not drawn (semantics don't draw).",
              "element": "input",
              "attrs": {
                "type": "checkbox"
              }
            }
          }
        }
      }
    }
  }
}

Meter partsGeneratedCurated#

meter: { valueProp, maxProp } — progress fill: width = value/max as a percentage of the parent track. Code computes live; the canvas renders the defaults’ fraction — its honest static state. The same discipline repeats across the spec: where a surface cannot run a live computation, it renders the declared sample and says so.

{
  "anatomy": {
    "root": {
      "parts": {
        "track": {
          "layout": {
            "direction": "row",
            "align": "center"
          },
          "tokens": {
            "width": "{size.progress.width}",
            "height": "{size.progress.height}",
            "background-color": "{color.progress.track}",
            "border-radius": "{radius.100}"
          },
          "parts": {
            "fill": {
              "meter": {
                "valueProp": "value",
                "maxProp": "max"
              },
              "tokens": {
                "height": "{size.progress.height}",
                "background-color": "{color.progress.{variant}}",
                "border-radius": "{radius.100}"
              }
            }
          }
        }
      }
    }
  }
}