{
  "name": "searchable-picker-modal",
  "kind": "block",
  "primary": "modal-ui",
  "page": "/apps/genui/app/a2ui-editor/a2ui-editor.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "text": "Insert component",
    "size": "sm"
  },
  "html": "<modal-ui\n      id=\"insert-modal\"\n      text=\"Insert component\"\n      size=\"sm\">\n      >\n      <section slot=\"body\">\n        <div data-insert>\n          <div data-insert-header>\n            <h3 style=\"margin: 0\">Insert component</h3>\n            <p id=\"insert-target\" data-note style=\"margin: 0; color: var(--a-fg-muted)\">Into: —</p>\n          </div>\n          <field-ui id=\"insert-slot-field\" label=\"Into slot\" hidden>\n            <select-ui id=\"insert-slot\"></select-ui>\n          </field-ui>\n          <input-ui id=\"insert-search\" placeholder=\"Search components…\" prefix=\"magnifying-glass\"></input-ui>\n          <div id=\"insert-list\" data-insert-list role=\"listbox\"></div>\n        </div>\n      </section>\n      <footer slot=\"footer\">\n        <button-ui data-insert-cancel text=\"Cancel\" variant=\"ghost\"></button-ui>\n      </footer>\n    </modal-ui>",
  "source": "apps/genui/app/a2ui-editor/a2ui-editor.contents.html",
  "metadata": {
    "domain": "overlay",
    "description": "Searchable picker modal — a small dialog that inserts an item: a heading, a context note showing the target, an optional 'into slot' select, a search input with a magnifying-glass prefix, a scrollable listbox of results, and a Cancel action. The command-palette style add / insert / pick-from-catalog overlay.",
    "keywords": [
      "searchable",
      "picker",
      "modal",
      "command",
      "palette",
      "insert",
      "add",
      "dialog",
      "overlay",
      "search",
      "input",
      "listbox",
      "catalog",
      "choose",
      "select",
      "component",
      "quick",
      "add",
      "filter",
      "results",
      "magnifying",
      "glass",
      "into",
      "slot",
      "picker",
      "popup",
      "chooser",
      "fuzzy",
      "search",
      "add",
      "item"
    ]
  },
  "captured_at": "2026-06-10T16:56:21.616Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "textContent": ">",
      "variant": "body"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "heading",
      "textContent": "Insert component"
    },
    {
      "id": "insert-target",
      "component": "Text",
      "variant": "body",
      "textContent": "Into: —",
      "data-note": ""
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-2",
        "insert-target"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "data-insert-header": "",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "insert-slot",
      "component": "ChoicePicker"
    },
    {
      "id": "insert-slot-field",
      "component": "Field",
      "label": "Into slot",
      "children": [
        "insert-slot"
      ]
    },
    {
      "id": "insert-search",
      "component": "Input",
      "placeholder": "Search components…",
      "prefix": "magnifying-glass"
    },
    {
      "id": "insert-list",
      "component": "Column",
      "data-insert-list": ""
    },
    {
      "id": "column",
      "component": "Column",
      "data-insert": "",
      "children": [
        "card",
        "insert-slot-field",
        "insert-search",
        "insert-list"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "slot": "body",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "text": "Cancel",
      "variant": "ghost",
      "data-insert-cancel": ""
    },
    {
      "id": "footer",
      "component": "Footer",
      "slot": "footer",
      "children": [
        "button"
      ]
    },
    {
      "id": "root",
      "component": "Modal",
      "size": "sm",
      "text": "Insert component",
      "children": [
        "text",
        "section",
        "footer"
      ]
    }
  ]
}