{
  "name": "playground-app-shell",
  "kind": "block",
  "primary": "admin-shell",
  "page": "/playgrounds/admin-shell/app/admin-shell.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "mode": "rounded borderless"
  },
  "html": "<admin-shell mode=\"rounded borderless\">\n      <!-- ═══════════════ LEFT SIDEBAR ═══════════════ -->\n      <admin-sidebar slot=\"leading\" resizable collapsible>\n        <admin-topbar slot=\"header\">\n          <select-ui id=\"workspace-select\" avatar=\"/icons/agent-ui-light.svg\" value=\"adia-ui\" variant=\"ghost\" style=\"flex: 1\"></select-ui>\n        </admin-topbar>\n\n        <section-ui>\n          <nav-ui id=\"nav\">\n            <nav-item-ui data-command-trigger icon=\"magnifying-glass\" text=\"Search\" value=\"search\">\n              <span slot=\"icon\"><icon-ui name=\"magnifying-glass\"></icon-ui></span>\n              <span slot=\"text\">Search</span>\n              <kbd slot=\"trailing\">⌘K</kbd>\n            </nav-item-ui>\n            <hr data-nav-divider />\n            <nav-group-ui icon=\"house\" text=\"Home\" open>\n              <nav-item-ui text=\"Dashboard\" value=\"dashboard\" selected></nav-item-ui>\n              <nav-item-ui text=\"Analytics\" value=\"analytics\"></nav-item-ui>\n              <nav-item-ui text=\"Reports\" value=\"reports\"></nav-item-ui>\n            </nav-group-ui>\n            <nav-group-ui icon=\"gear\" text=\"Settings\">\n              <nav-item-ui text=\"General\" value=\"general\"></nav-item-ui>\n              <nav-item-ui text=\"Team\" value=\"team\"></nav-item-ui>\n              <nav-item-ui text=\"Billing\" value=\"billing\"></nav-item-ui>\n            </nav-group-ui>\n          </nav-ui>\n        </section-ui>\n\n        <admin-statusbar slot=\"footer\">\n          <select-ui id=\"user-select\" avatar=\"https://i.pravatar.cc/32?u=demo\" value=\"demo\" variant=\"ghost\" style=\"flex: 1\"></select-ui>\n        </admin-statusbar>\n        <div data-resize></div>\n      </admin-sidebar>\n\n      <!-- ═══════════════ MAIN ═══════════════ -->\n      <admin-content>\n        <admin-topbar>\n          <button-ui data-sidebar-toggle=\"leading\" icon=\"sidebar\" title=\"Toggle navigation sidebar\" variant=\"ghost\" size=\"sm\"></button-ui>\n          <breadcrumb-ui>\n            <a href=\"#\">AdiaUI</a>\n            <span>Dashboard</span>\n          </breadcrumb-ui>\n          <span slot=\"action\" size=\"sm\">\n            <popover-ui id=\"theme-popover\" placement=\"bottom-end\">\n              <button-ui icon=\"palette\" title=\"Choose theme\" variant=\"ghost\" size=\"sm\" slot=\"trigger\"></button-ui>\n              <theme-panel slot=\"content\" parametric presets scheme-toggle></theme-panel>\n            </popover-ui>\n          </span>\n        </admin-topbar>\n\n        <admin-scroll>\n          <aside id=\"subnav-rail\" data-subnav>\n            <nav-ui variant=\"section\" id=\"subnav\" heading=\"Dashboard\">\n              <nav-item-ui text=\"Overview\" value=\"overview\" selected></nav-item-ui>\n              <nav-item-ui text=\"Activity\" value=\"activity\"></nav-item-ui>\n              <nav-item-ui text=\"Revenue\" value=\"revenue\"></nav-item-ui>\n              <nav-item-ui text=\"Traffic\" value=\"traffic\"></nav-item-ui>\n            </nav-ui>\n          </aside>\n\n          <admin-page>\n            <admin-page-header>\n              <header>\n                <div>\n                  <h1>Dashboard</h1>\n                  <div data-actions>\n                    <button-ui text=\"Export\" variant=\"outline\" size=\"sm\"></button-ui>\n                  </div>\n                </div>\n                <p>App Shell pattern demo — resize the sidebar, collapse it, toggle theme, or press ⌘K to open the command palette.</p>\n              </header>\n            </admin-page-header>\n            <admin-page-body>\n              <section>\n                <p style=\"color: var(--a-fg-muted)\">\n                  This standalone page mirrors the shape of the main AdiaUI docs shell: leading sidebar with app-nav, topbar with breadcrumb + theme popover +\n                  command trigger, main content area with an optional subnav rail, and a bottom footer.\n                </p>\n              </section>\n            </admin-page-body>\n          </admin-page>\n        </admin-scroll>\n\n        <admin-statusbar>\n          <span slot=\"heading\">AdiaUI App Shell</span>\n          <span slot=\"description\">Playground demo</span>\n          <span slot=\"action\" size=\"sm\">v0.1.0</span>\n        </admin-statusbar>\n      </admin-content>\n\n      <!-- ═══════════════ COMMAND PALETTE ═══════════════ -->\n      <admin-command>\n        <command-ui id=\"cmd\" placeholder=\"Search pages...\"></command-ui>\n      </admin-command>\n    </admin-shell>",
  "source": "playgrounds/admin-shell/app/admin-shell.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Admin shell playground — full admin-shell demo with sidebar nav, topbar, and content area.",
    "keywords": [
      "playground",
      "admin",
      "shell",
      "layout",
      "demo",
      "sidebar",
      "nav",
      "topbar"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "workspace-select",
      "component": "ChoicePicker",
      "avatar": "/icons/agent-ui-light.svg",
      "value": "adia-ui",
      "variant": "ghost"
    },
    {
      "id": "admin-topbar",
      "component": "AdminTopbar",
      "slot": "header",
      "children": [
        "workspace-select"
      ]
    },
    {
      "id": "magnifying-glass",
      "component": "Icon",
      "name": "magnifying-glass"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "magnifying-glass"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "text",
      "textContent": "Search"
    },
    {
      "id": "kbd",
      "component": "Kbd",
      "slot": "trailing",
      "textContent": "⌘K"
    },
    {
      "id": "nav-item",
      "component": "NavItem",
      "icon": "magnifying-glass",
      "text": "Search",
      "value": "search",
      "data-command-trigger": "",
      "children": [
        "text",
        "text-2",
        "kbd"
      ]
    },
    {
      "id": "divider",
      "component": "Divider",
      "data-nav-divider": ""
    },
    {
      "id": "nav-item-2",
      "component": "NavItem",
      "selected": true,
      "text": "Dashboard",
      "value": "dashboard"
    },
    {
      "id": "nav-item-3",
      "component": "NavItem",
      "text": "Analytics",
      "value": "analytics"
    },
    {
      "id": "nav-item-4",
      "component": "NavItem",
      "text": "Reports",
      "value": "reports"
    },
    {
      "id": "nav-group",
      "component": "NavGroup",
      "icon": "house",
      "open": true,
      "text": "Home",
      "children": [
        "nav-item-2",
        "nav-item-3",
        "nav-item-4"
      ]
    },
    {
      "id": "nav-item-5",
      "component": "NavItem",
      "text": "General",
      "value": "general"
    },
    {
      "id": "nav-item-6",
      "component": "NavItem",
      "text": "Team",
      "value": "team"
    },
    {
      "id": "nav-item-7",
      "component": "NavItem",
      "text": "Billing",
      "value": "billing"
    },
    {
      "id": "nav-group-2",
      "component": "NavGroup",
      "icon": "gear",
      "text": "Settings",
      "children": [
        "nav-item-5",
        "nav-item-6",
        "nav-item-7"
      ]
    },
    {
      "id": "nav",
      "component": "Nav",
      "children": [
        "nav-item",
        "divider",
        "nav-group",
        "nav-group-2"
      ]
    },
    {
      "id": "user-select",
      "component": "ChoicePicker",
      "avatar": "https://i.pravatar.cc/32?u=demo",
      "value": "demo",
      "variant": "ghost"
    },
    {
      "id": "admin-statusbar",
      "component": "AdminStatusbar",
      "slot": "footer",
      "children": [
        "user-select"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "data-resize": ""
    },
    {
      "id": "sidebar",
      "component": "Sidebar",
      "slot": "leading",
      "collapsible": true,
      "resizable": true,
      "children": [
        "admin-topbar",
        "nav",
        "admin-statusbar",
        "column-2"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "sidebar",
      "size": "sm",
      "variant": "ghost",
      "data-sidebar-toggle": "leading"
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "AdiaUI",
      "variant": "body"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "#",
      "text": "AdiaUI",
      "children": [
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "textContent": "Dashboard"
    },
    {
      "id": "breadcrumb",
      "component": "Breadcrumb",
      "children": [
        "link",
        "text-4"
      ]
    },
    {
      "id": "button-2",
      "component": "Button",
      "slot": "trigger",
      "icon": "palette",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "theme-panel",
      "component": "ThemePanel",
      "slot": "content",
      "parametric": true,
      "presets": true,
      "scheme-toggle": true
    },
    {
      "id": "theme-popover",
      "component": "Popover",
      "placement": "bottom-end",
      "children": [
        "button-2",
        "theme-panel"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "size": "sm",
      "children": [
        "theme-popover"
      ]
    },
    {
      "id": "admin-topbar-2",
      "component": "AdminTopbar",
      "children": [
        "button",
        "breadcrumb",
        "text-5"
      ]
    },
    {
      "id": "nav-item-8",
      "component": "NavItem",
      "selected": true,
      "text": "Overview",
      "value": "overview"
    },
    {
      "id": "nav-item-9",
      "component": "NavItem",
      "text": "Activity",
      "value": "activity"
    },
    {
      "id": "nav-item-10",
      "component": "NavItem",
      "text": "Revenue",
      "value": "revenue"
    },
    {
      "id": "nav-item-11",
      "component": "NavItem",
      "text": "Traffic",
      "value": "traffic"
    },
    {
      "id": "subnav",
      "component": "Nav",
      "heading": "Dashboard",
      "variant": "section",
      "children": [
        "nav-item-8",
        "nav-item-9",
        "nav-item-10",
        "nav-item-11"
      ]
    },
    {
      "id": "subnav-rail",
      "component": "Sidebar",
      "data-subnav": "",
      "children": [
        "subnav"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "display",
      "textContent": "Dashboard"
    },
    {
      "id": "button-3",
      "component": "Button",
      "size": "sm",
      "text": "Export",
      "variant": "outline"
    },
    {
      "id": "column-3",
      "component": "Column",
      "data-actions": "",
      "children": [
        "button-3"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "text-6",
        "column-3"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "body",
      "textContent": "App Shell pattern demo — resize the sidebar, collapse it, toggle theme, or press ⌘K to open the command palette."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "card",
        "text-7"
      ]
    },
    {
      "id": "admin-page-header",
      "component": "AdminPageHeader",
      "children": [
        "header"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "variant": "body",
      "textContent": "This standalone page mirrors the shape of the main AdiaUI docs shell: leading sidebar with app-nav, topbar with breadcrumb + theme popover + command trigger, main content area with an optional subnav rail, and a bottom footer."
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "text-8"
      ]
    },
    {
      "id": "admin-page-body",
      "component": "AdminPageBody",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "admin-page",
      "component": "AdminPage",
      "children": [
        "admin-page-header",
        "admin-page-body"
      ]
    },
    {
      "id": "admin-scroll",
      "component": "AdminScroll",
      "children": [
        "subnav-rail",
        "admin-page"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "textContent": "AdiaUI App Shell"
    },
    {
      "id": "text-10",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Playground demo"
    },
    {
      "id": "text-11",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "size": "sm",
      "textContent": "v0.1.0"
    },
    {
      "id": "admin-statusbar-2",
      "component": "AdminStatusbar",
      "children": [
        "text-9",
        "text-10",
        "text-11"
      ]
    },
    {
      "id": "admin-content",
      "component": "AdminContent",
      "children": [
        "admin-topbar-2",
        "admin-scroll",
        "admin-statusbar-2"
      ]
    },
    {
      "id": "cmd",
      "component": "Command",
      "placeholder": "Search pages..."
    },
    {
      "id": "admin-command",
      "component": "AdminCommand",
      "children": [
        "cmd"
      ]
    },
    {
      "id": "root",
      "component": "AdminShell",
      "children": [
        "sidebar",
        "admin-content",
        "admin-command"
      ]
    }
  ]
}