{
  "name": "ListScreenHead",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ListScreenHead.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "contacts-list",
  "elName": "Contacts list &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">114 contacts &middot; 7 days new-contacts KPI</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#contacts-list",
  "hasLiveDemo": false,
  "description": "Header row for `<ListScreen>`. Two API surfaces:",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "ListScreenHead",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ListScreenHeadProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ListScreenHead } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Page title. Renders inside `<h2>` in `.list-screen-head-title`."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "Page subtitle. Renders inside `<p>` under the title. Optional."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-side slot — search inputs, buttons, KPI cards. Renders inside `.list-screen-head-actions`. Optional."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the entire structured layout. When provided, the title / description / actions props are ignored and `children` renders as the direct content of `.list-screen-head`. Use for fully bespoke header shapes (e.g. multi-row layouts the kit doesn't model)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "badge",
    "btn",
    "btn-primary",
    "list-screen-head",
    "list-screen-head-actions",
    "list-screen-head-title",
    "title"
  ],
  "examples": {
    "react": "// Prop API\n<ListScreenHead\n  title=\"Contacts\"\n  description=\"Capture and convert users who interact with your AI.\"\n  actions={\n    <>\n      <input type=\"search\" placeholder=\"Search…\" />\n      <button className=\"btn btn-primary\">+ Add Contact</button>\n    </>\n  }\n/>",
    "html": "<div class=\"list-screen-frame\"><div class=\"list-screen ct-list\" role=\"region\" aria-label=\"Contacts\">\n\n  <header class=\"list-screen-head\">\n    <div class=\"list-screen-head-title\">\n      <h2>Contacts</h2>\n      <p>Capture and convert users who interact with your AI. <em>Manage contacts in one place.</em><a href=\"#\">More on Contacts &rarr;</a></p>\n    </div>\n    <div class=\"list-screen-head-actions\">\n      <div class=\"ct-head-stack\">\n        <div class=\"ct-kpi-card\">\n          <div class=\"ct-kpi-head\">\n            <span>New Contacts</span>\n            <span class=\"ct-kpi-range\">Last 7 days <svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 4.5 3 3 3-3\"/></svg></span>\n          </div>\n          <div class=\"ct-kpi-value\">23 <span class=\"ct-kpi-delta\">&uarr; 18%</span></div>\n          <div class=\"ct-kpi-meta\">10 May &ndash; 17 May 2026 &middot; vs prior week</div>\n        </div>\n        <button type=\"button\" class=\"ct-add-contact\">\n          <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M7 2.5v9M2.5 7h9\"/></svg>\n          Add Contact\n        </button>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"list-screen-tabs\" role=\"tablist\">\n    <button type=\"button\" class=\"is-active\" role=\"tab\" aria-selected=\"true\">Contacts <span class=\"list-screen-tab-count\">114</span></button>\n    <button type=\"button\" role=\"tab\">Segments <span class=\"list-screen-tab-count\">3</span></button>\n  </div>\n\n  <div class=\"list-screen-toolbar\">\n    <label class=\"ct-search\">\n      <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"6\" cy=\"6\" r=\"3.5\"/><line x1=\"8.5\" y1=\"8.5\" x2=\"12\" y2=\"12\"/></svg>\n      <input type=\"search\" placeholder=\"Search by user name, email&hellip;\" />\n    </label>\n    <span class=\"ct-sync\">Synced right now</span>\n    <button type=\"button\" class=\"ct-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 7a5 5 0 1 1-1.5-3.5\"/><path d=\"M12 2v3h-3\"/></svg>Refresh</button>\n    <button type=\"button\" class=\"ct-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 1v8m0 0-3-3m3 3 3-3M2 11h10\"/></svg>Export</button>\n    <button type=\"button\" class=\"ct-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 3h12L9 8v4l-4-2V8z\"/></svg>Filters</button>\n    <button type=\"button\" class=\"ct-pill\" disabled>Add to segment</button>\n  </div>\n\n  <div class=\"tbl-wrap is-flush\">\n    <table class=\"tbl\">\n      <thead>\n        <tr>\n          <th class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select all\" /></th>\n          <th class=\"tbl-sort is-active\">Users <span class=\"tbl-tab-count\" style=\"margin-left:6px; font:500 11px/1 var(--f-mono); color:var(--fg-faint); background:var(--bg-warm); padding:2px 7px; border-radius:var(--r-pill);\">114</span><span class=\"tbl-sort-ic\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 15 6-6 6 6\"/></svg></span></th>\n          <th class=\"tbl-sort\">Sessions <span class=\"tbl-sort-ic\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></span></th>\n          <th>Conversion</th>\n          <th class=\"tbl-sort\">Last seen <span class=\"tbl-sort-ic\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></span></th>\n          <th>Segments</th>\n          <th class=\"tbl-right\"></th>\n        </tr>\n      </thead>\n      <tbody>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(15,128,98,0.14); color:#0F8062;\">NM</span>\n              <div>\n                <div class=\"tbl-name\">Nectar Mint</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">nectar.mint@example.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                  <span style=\"margin: 0 6px; color:var(--fg-faint);\">&middot;</span>\n                  <span class=\"ct-contact-meta\">+44 7700 900 142</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy phone\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>12</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Meeting booked</span></td>\n          <td><span class=\"mono tbl-mono\">2m ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-pink\"></span> Warm Leads</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(45,111,227,0.14); color:#2456B0;\">BC</span>\n              <div>\n                <div class=\"tbl-name\">Bessie Cooper</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">bessie@trailhaus.io</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>8</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Qualified</span></td>\n          <td><span class=\"mono tbl-mono\">3d ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-blue\"></span> Returning</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:#FEF3C7; color:#92400E;\">LA</span>\n              <div>\n                <div class=\"tbl-name\">Leslie Alexander</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">leslie.a@brookfield.com</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>17</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Demo booked</span></td>\n          <td><span class=\"mono tbl-mono\">5h ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-pink\"></span> Warm Leads</span><span class=\"badge\"><span class=\"dot dot-blue\"></span> Returning</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(193,52,73,0.14); color:#C13449;\">RR</span>\n              <div>\n                <div class=\"tbl-name\">Ronald Richards</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">ronald@kindred.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>14</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-grey\"></span> Not converted</span></td>\n          <td><span class=\"mono tbl-mono\">3d ago</span></td>\n          <td><span class=\"ct-segments-none\">&mdash;</span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(123,63,184,0.14); color:#7B3FB8;\">JW</span>\n              <div>\n                <div class=\"tbl-name\">Jenny Wilson</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">jenny.w@northpeak.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>6</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-blue\"></span> Pricing intent</span></td>\n          <td><span class=\"mono tbl-mono\">35m ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-pink\"></span> Warm Leads</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:var(--warm-2); color:var(--fg-soft);\" aria-label=\"Anonymous\">A</span>\n              <div>\n                <div class=\"ct-anon\">Anonymous A2891A</div>\n                <div class=\"ct-anon-sub\">first seen via web chat</div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>1</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-grey\"></span> Not converted</span></td>\n          <td><span class=\"mono tbl-mono\">2h ago</span></td>\n          <td><span class=\"ct-segments-none\">&mdash;</span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:#DCFCE7; color:#166534;\">JJ</span>\n              <div>\n                <div class=\"tbl-name\">Jacob Jones</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">jacob.jones@ridgepine.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>9</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Quote sent</span></td>\n          <td><span class=\"mono tbl-mono\">1d ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-blue\"></span> Returning</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:var(--warm-2); color:var(--fg-soft);\" aria-label=\"Anonymous\">A</span>\n              <div>\n                <div class=\"ct-anon\">Anonymous 5F541F</div>\n                <div class=\"ct-anon-sub\">first seen via SMS</div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>1</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-grey\"></span> Not converted</span></td>\n          <td><span class=\"mono tbl-mono\">18d ago</span></td>\n          <td><span class=\"ct-segments-none\">&mdash;</span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n      </tbody>\n    </table>\n  </div>\n\n  <footer class=\"list-screen-foot\">\n    <span>1&ndash;8 of 114</span>\n    <div class=\"ct-list-foot-pages\">\n      <button type=\"button\" disabled>&lsaquo;</button>\n      <button type=\"button\" class=\"is-active\">1</button>\n      <button type=\"button\">2</button>\n      <button type=\"button\">3</button>\n      <button type=\"button\">&hellip;</button>\n      <button type=\"button\">15</button>\n      <button type=\"button\">&rsaquo;</button>\n    </div>\n  </footer>\n\n</div></div>",
    "css": ".badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  white-space: nowrap;\n  padding: 3px 8px;\n  border-radius: var(--r-pill);\n  font: 500 11.5px/1.2 var(--f-body);\n  background: var(--hair-soft);\n  color: var(--fg);\n  border: 1px solid transparent;\n}\n\n.btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-primary {\n  /* `color: var(--on-accent)` (added in v1.19.0) is the canonical\n     \"text on --accent\" token. Falls back to `var(--paper)` for any\n     consumer on an older @magicblocksai/css that pre-dates the\n     `--on-accent` token. */\n  background: var(--accent); color: var(--on-accent, var(--paper));\n  box-shadow: var(--sh-pink);\n}\n\n.list-screen-head {\n  padding: var(--s-5) var(--s-6) var(--s-4);\n  display: flex; align-items: flex-start; gap: var(--s-4);\n  flex-wrap: wrap;\n}\n\n.list-screen-head-actions {\n  display: inline-flex; align-items: center; gap: var(--s-3);\n  flex-wrap: wrap;\n  margin-left: auto; /* pin actions (KPI + buttons) to the head's right edge, level with the toolbar + table */\n}\n\n.list-screen-head-title { flex: 1; min-width: 0; max-width: 620px; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}