{
  "entrypoint": "@nvidia-elements/forms/examples/visualization.examples.json",
  "items": [
    {
      "id": "forms-examples-visualization-canvas-particles",
      "name": "CanvasParticles",
      "template": "<section nve-layout=\"row gap:lg pad:lg align:center\">\n  <form nve-layout=\"column gap:lg pad:lg\">\n    <nve-color>\n      <label>Color</label>\n      <input type=\"color\" name=\"color\" value=\"#26ab40\" />\n    </nve-color>\n    <nve-radio-group>\n      <label>Shape</label>\n      <nve-radio>\n        <label>Circle</label>\n        <input type=\"radio\" name=\"shape\" value=\"circle\" checked />\n      </nve-radio>\n      <nve-radio>\n        <label>Square</label>\n        <input type=\"radio\" name=\"shape\" value=\"square\" />\n      </nve-radio>\n    </nve-radio-group>\n    <nve-range>\n      <label>Scale</label>\n      <input type=\"range\" name=\"scale\" value=\"20\" min=\"5\" max=\"100\" />\n    </nve-range>\n    <nve-range>\n      <label>Particle Count</label>\n      <input type=\"range\" name=\"particleCount\" value=\"100\" min=\"1\" max=\"10000\" />\n    </nve-range>\n  </form>\n  <nve-divider orientation=\"vertical\"></nve-divider>\n  <ui-entity-draw\n    name=\"draw\"\n    value='{\"color\": \"#26ab40\", \"shape\": \"circle\", \"scale\": 20, \"particleCount\": 100}'\n  ></ui-entity-draw>\n</section>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const draw = document.querySelector(\"ui-entity-draw\");\n  form.addEventListener(\"input\", (e) => {\n    draw.value = {\n      color: form.elements.color.value,\n      shape: form.elements.shape.value,\n      scale: form.elements.scale.valueAsNumber,\n      particleCount: form.elements.particleCount.valueAsNumber,\n    };\n  });\n</script>\n",
      "summary": "Animated canvas visualization driven by form controls for color, shape, scale, and particle count.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-examples-visualization-styles",
      "name": "styles",
      "template": ":host { display: block; } form { background: var(--nve-sys-layer-container-background); display: flex; flex-direction:\ncolumn; gap: 6px; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1); } label { display:\nflex; align-items: center; line-height: 1; gap: 0.5rem; } input { margin: 4px 0; } pre { background: color-mix(in oklab,\nvar(--nve-sys-layer-container-background) 100%, var(--nve-sys-text-muted-color) 7%); padding: 12px; margin: 0; }\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}