Product configurator

{  "$schema": "https://visualspec.dev/schema/1.0/schema.json",  "visualSpec": "1.0",  "metadata": {    "title": "Product configurator",    "language": "en",    "status": "approved"  },  "profiles": [    "ui",    "3d"  ],  "tokens": {    "color.glaze": {      "type": "color",      "value": "#d9ed94"    }  },  "components": [    {      "id": "component.swatch",      "kind": "input.radio",      "name": "Glaze",      "appearance": {        "fill": "{color.glaze}",        "radius": 999      },      "accessibility": {        "role": "radio",        "name": {          "source": "literal",          "value": "Glaze"        }      }    }  ],  "entities": [    {      "id": "entity.cup",      "kind": "object.product",      "name": "Configurable cup"    }  ],  "materials": [    {      "id": "material.glaze",      "model": "pbr-metallic-roughness",      "baseColor": "{color.glaze}",      "roughness": 0.2,      "metalness": 0    }  ],  "lights": [    {      "id": "light.key",      "type": "directional",      "role": "key",      "color": "#fff4e5",      "intensity": 1    }  ],  "threeD": {    "sceneRefs": [      "scene.stage"    ],    "meshes": [      {        "id": "mesh.cup",        "geometry": {          "type": "cylinder"        },        "materialRefs": [          "material.glaze"        ]      }    ]  },  "semantics": [    {      "id": "sem.swatch",      "role": "radio",      "name": {        "source": "literal",        "value": "Glaze"      },      "nodeRef": "node.swatch",      "componentRef": "component.swatch"    }  ],  "scenes": [    {      "id": "scene.stage",      "kind": "3d",      "lightRefs": [        "light.key"      ],      "nodes": [        {          "id": "node.cup",          "kind": "mesh",          "entityRef": "entity.cup",          "materialRef": "material.glaze"        }      ]    },    {      "id": "scene.controls",      "kind": "2d",      "viewport": {        "width": 360,        "height": 88      },      "background": "#f7f8f3",      "layout": {        "type": "row",        "padding": 16,        "align": "center",        "gap": 12      },      "nodes": [        {          "id": "node.swatch",          "kind": "component",          "componentRef": "component.swatch",          "text": "Glaze"        }      ]    }  ]}