{
  "name": "editor-toolbar-import-export",
  "kind": "block",
  "primary": "editor-toolbar",
  "page": "/apps/genui/app/a2ui-editor/a2ui-editor.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<editor-toolbar>\n        <span slot=\"icon\"><icon-ui name=\"brackets-curly\"></icon-ui></span>\n        <span slot=\"heading\">A2UI Editor</span>\n        <span slot=\"description\" id=\"doc-meta\">0 components</span>\n        <span slot=\"action\">\n          <button-ui id=\"import-btn\" icon=\"upload-simple\" text=\"Import\" variant=\"outline\" size=\"sm\"></button-ui>\n          <popover-ui id=\"export-popover\" placement=\"bottom-end\">\n            <button-ui slot=\"trigger\" id=\"export-btn\" icon=\"download-simple\" text=\"Export\" variant=\"outline\" size=\"sm\"></button-ui>\n            <div slot=\"content\" data-export-menu>\n              <button-ui data-export=\"json\" icon=\"file-code\" text=\"Download A2UI JSON\" variant=\"ghost\" size=\"sm\"></button-ui>\n              <button-ui data-export=\"copy\" icon=\"clipboard-text\" text=\"Copy JSON to clipboard\" variant=\"ghost\" size=\"sm\"></button-ui>\n              <button-ui data-export=\"html\" icon=\"code\" text=\"Copy rendered HTML\" variant=\"ghost\" size=\"sm\"></button-ui>\n              <divider-ui></divider-ui>\n              <button-ui data-export=\"share\" icon=\"share\" text=\"Copy share URL\" variant=\"ghost\" size=\"sm\"></button-ui>\n              <button-ui data-export=\"reset\" icon=\"arrow-counter-clockwise\" text=\"Reset to starter doc\" variant=\"ghost\" size=\"sm\"></button-ui>\n            </div>\n          </popover-ui>\n          <button-ui id=\"theme-toggle\" icon=\"moon\" variant=\"ghost\" size=\"sm\"></button-ui>\n        </span>\n      </editor-toolbar>",
  "source": "apps/genui/app/a2ui-editor/a2ui-editor.contents.html",
  "metadata": {
    "domain": "navigation",
    "description": "Editor toolbar with import / export — an app-editor top band carrying a title with icon and a live document-meta subtitle, plus a trailing action cluster: an Import button, an Export popover menu (download JSON, copy JSON, copy HTML, copy share URL, reset), and a theme toggle. The standard authoring-tool header bar.",
    "keywords": [
      "editor",
      "toolbar",
      "header",
      "import",
      "export",
      "popover",
      "menu",
      "download",
      "json",
      "copy",
      "clipboard",
      "share",
      "url",
      "reset",
      "theme",
      "toggle",
      "authoring",
      "tool",
      "top",
      "band",
      "title",
      "document",
      "meta",
      "actions",
      "toolbar",
      "bar",
      "app",
      "chrome",
      "editor",
      "header"
    ]
  },
  "captured_at": "2026-06-10T16:56:21.616Z",
  "template": [
    {
      "id": "brackets-curly",
      "component": "Icon",
      "name": "brackets-curly"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "brackets-curly"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "textContent": "A2UI Editor"
    },
    {
      "id": "doc-meta",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "0 components"
    },
    {
      "id": "import-btn",
      "component": "Button",
      "icon": "upload-simple",
      "size": "sm",
      "text": "Import",
      "variant": "outline"
    },
    {
      "id": "export-btn",
      "component": "Button",
      "slot": "trigger",
      "icon": "download-simple",
      "size": "sm",
      "text": "Export",
      "variant": "outline"
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "file-code",
      "size": "sm",
      "text": "Download A2UI JSON",
      "variant": "ghost",
      "data-export": "json"
    },
    {
      "id": "button-2",
      "component": "Button",
      "icon": "clipboard-text",
      "size": "sm",
      "text": "Copy JSON to clipboard",
      "variant": "ghost",
      "data-export": "copy"
    },
    {
      "id": "button-3",
      "component": "Button",
      "icon": "code",
      "size": "sm",
      "text": "Copy rendered HTML",
      "variant": "ghost",
      "data-export": "html"
    },
    {
      "id": "divider",
      "component": "Divider"
    },
    {
      "id": "button-4",
      "component": "Button",
      "icon": "share",
      "size": "sm",
      "text": "Copy share URL",
      "variant": "ghost",
      "data-export": "share"
    },
    {
      "id": "button-5",
      "component": "Button",
      "icon": "arrow-counter-clockwise",
      "size": "sm",
      "text": "Reset to starter doc",
      "variant": "ghost",
      "data-export": "reset"
    },
    {
      "id": "column",
      "component": "Column",
      "slot": "content",
      "data-export-menu": "",
      "children": [
        "button",
        "button-2",
        "button-3",
        "divider",
        "button-4",
        "button-5"
      ]
    },
    {
      "id": "export-popover",
      "component": "Popover",
      "placement": "bottom-end",
      "children": [
        "export-btn",
        "column"
      ]
    },
    {
      "id": "theme-toggle",
      "component": "Button",
      "icon": "moon",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "import-btn",
        "export-popover",
        "theme-toggle"
      ]
    },
    {
      "id": "root",
      "component": "EditorToolbar",
      "children": [
        "text",
        "text-2",
        "doc-meta",
        "text-3"
      ]
    }
  ]
}