{
  "name": "playground-construct-canvas",
  "kind": "block",
  "primary": "editor-canvas",
  "page": "/apps/construct-canvas/app/construct-canvas.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<editor-canvas>\n          <div id=\"canvas-host\" role=\"application\" aria-label=\"Construct canvas — drag, zoom, and connect cards\" tabindex=\"0\">\n            <!-- canvas-projection mounts a #cc-pan-frame > <noodles-ui> in here -->\n          </div>\n          <!-- Floating zoom + pan controls (graph-editor convention: bottom-right).\n           toolbar-ui owns the flex/border/bg/role chrome; the .cc-zoom-controls\n           class only adds floating positioning + backdrop-blur on top. -->\n          <toolbar-ui class=\"cc-zoom-controls\" bordered aria-label=\"Canvas zoom\">\n            <button-ui\n              id=\"zoom-out\"\n              icon=\"minus\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Zoom out\"\n              title=\"Zoom out (-)\"\n              data-hotkey=\"-\"\n              data-hotkey-global\n            ></button-ui>\n            <span id=\"zoom-label\" aria-live=\"polite\">100%</span>\n            <button-ui id=\"zoom-in\" icon=\"plus\" variant=\"ghost\" size=\"sm\" aria-label=\"Zoom in\" title=\"Zoom in (+)\"></button-ui>\n            <divider-ui vertical style=\"height: 16px\"></divider-ui>\n            <button-ui\n              id=\"zoom-fit\"\n              icon=\"frame-corners\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Fit to content\"\n              title=\"Fit to content (1)\"\n              data-hotkey=\"1\"\n              data-hotkey-global\n            ></button-ui>\n            <button-ui\n              id=\"zoom-reset\"\n              icon=\"circle\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Reset to 100%\"\n              title=\"Reset to 100% (0)\"\n              data-hotkey=\"0\"\n              data-hotkey-global\n            ></button-ui>\n            <divider-ui vertical style=\"height: 16px\"></divider-ui>\n            <button-ui\n              id=\"auto-arrange-btn\"\n              icon=\"layout\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Auto-arrange\"\n              title=\"Auto-arrange (L)\"\n              data-hotkey=\"l\"\n              data-hotkey-global\n            ></button-ui>\n          </toolbar-ui>\n      </editor-canvas>",
  "source": "apps/construct-canvas/app/construct-canvas.contents.html",
  "metadata": {
    "domain": "agent",
    "description": "Construct canvas playground — visual agent canvas editor with inspector panel.",
    "keywords": [
      "playground",
      "canvas",
      "construct",
      "agent",
      "inspector",
      "visual",
      "editor"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "canvas-host",
      "component": "Column"
    },
    {
      "id": "zoom-out",
      "component": "Button",
      "aria-label": "Zoom out",
      "icon": "minus",
      "size": "sm",
      "variant": "ghost",
      "data-hotkey": "-",
      "data-hotkey-global": ""
    },
    {
      "id": "zoom-label",
      "component": "Text",
      "variant": "body",
      "textContent": "100%"
    },
    {
      "id": "zoom-in",
      "component": "Button",
      "aria-label": "Zoom in",
      "icon": "plus",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "divider",
      "component": "Divider",
      "vertical": true
    },
    {
      "id": "zoom-fit",
      "component": "Button",
      "aria-label": "Fit to content",
      "icon": "frame-corners",
      "size": "sm",
      "variant": "ghost",
      "data-hotkey": "1",
      "data-hotkey-global": ""
    },
    {
      "id": "zoom-reset",
      "component": "Button",
      "aria-label": "Reset to 100%",
      "icon": "circle",
      "size": "sm",
      "variant": "ghost",
      "data-hotkey": "0",
      "data-hotkey-global": ""
    },
    {
      "id": "divider-2",
      "component": "Divider",
      "vertical": true
    },
    {
      "id": "auto-arrange-btn",
      "component": "Button",
      "aria-label": "Auto-arrange",
      "icon": "layout",
      "size": "sm",
      "variant": "ghost",
      "data-hotkey": "l",
      "data-hotkey-global": ""
    },
    {
      "id": "canvas-zoom",
      "component": "Toolbar",
      "bordered": true,
      "children": [
        "zoom-out",
        "zoom-label",
        "zoom-in",
        "divider",
        "zoom-fit",
        "zoom-reset",
        "divider-2",
        "auto-arrange-btn"
      ]
    },
    {
      "id": "root",
      "component": "EditorCanvas",
      "children": [
        "canvas-host",
        "canvas-zoom"
      ]
    }
  ]
}