{
  "name": "SavedViewsRail",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SavedViewsRail.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "saved-views-rail",
  "elName": "SavedViewsRail",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#saved-views-rail",
  "hasLiveDemo": false,
  "description": "Named query views rail — labeled rows with optional counts, icons, group\nheaders, and starring. Backs the Sessions left-rail saved views (All /\nFavorites / Goal Conversions / Principles Fixed / Missing Knowledge /\nNegative Sentiment) and the Dashboard Latest-Sessions saved-view tabs.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SavedViewsRail",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SavedViewsRailProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SavedView",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SavedViewsRail } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "views",
      "optional": false,
      "type": "SavedView[]",
      "doc": "Available views."
    },
    {
      "name": "value",
      "optional": true,
      "type": "string | null",
      "doc": "Controlled selected id."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string | null",
      "doc": "Uncontrolled initial selected id."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(id: string) => void",
      "doc": "Fires when the selected view changes."
    },
    {
      "name": "onStarToggle",
      "optional": true,
      "type": "(id: string, starred: boolean) => void",
      "doc": "Fires when a view's star is toggled."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Top-level rail title."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot on the title row — typically a \"+ New\" button."
    },
    {
      "name": "compact",
      "optional": true,
      "type": "boolean",
      "doc": "Render compact (smaller padding, no descriptions). Default `false`."
    }
  ],
  "classesUsed": [
    "page",
    "saved-views-rail",
    "saved-views-rail-button",
    "saved-views-rail-count",
    "saved-views-rail-group",
    "saved-views-rail-group-name",
    "saved-views-rail-head",
    "saved-views-rail-icon",
    "saved-views-rail-item",
    "saved-views-rail-label",
    "saved-views-rail-meta",
    "saved-views-rail-star",
    "saved-views-rail-title",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"saved-views-rail-demo\">\n  <div class=\"saved-views-rail\" role=\"navigation\">\n    <div class=\"saved-views-rail-head\">\n      <div class=\"saved-views-rail-title\">Sessions</div>\n      <div class=\"saved-views-rail-meta\"><button type=\"button\" class=\"btn btn-ghost\">+ New</button></div>\n    </div>\n    <div class=\"saved-views-rail-group\">\n      <div class=\"saved-views-rail-item is-on\">\n        <button type=\"button\" class=\"saved-views-rail-button\" aria-current=\"page\">\n          <span class=\"saved-views-rail-label\">All sessions</span>\n          <span class=\"saved-views-rail-count\">158</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"saved-views-rail-group\">\n      <div class=\"saved-views-rail-group-name\">Saved</div>\n      <div class=\"saved-views-rail-item\">\n        <button type=\"button\" class=\"saved-views-rail-button\">\n          <span class=\"saved-views-rail-label\">Favorites</span>\n          <span class=\"saved-views-rail-count\">4</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"saved-views-rail-group\">\n      <div class=\"saved-views-rail-group-name\">Built-in</div>\n      <div class=\"saved-views-rail-item\">\n        <button type=\"button\" class=\"saved-views-rail-button\">\n          <span class=\"saved-views-rail-label\">Goal conversions</span>\n          <span class=\"saved-views-rail-count\">22</span>\n        </button>\n      </div>\n      <div class=\"saved-views-rail-item\">\n        <button type=\"button\" class=\"saved-views-rail-button\">\n          <span class=\"saved-views-rail-label\">Negative sentiment</span>\n          <span class=\"saved-views-rail-count\">9</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>",
    "css": ".page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}\n\n.saved-views-rail { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.saved-views-rail-button {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  text-align: left;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--s-2);\n  padding: 6px 10px;\n  color: var(--fg);\n  font: 400 13px/1.3 var(--f-body);\n  cursor: pointer;\n  border-radius: var(--r-sm);\n  width: 100%;\n}\n\n.saved-views-rail-count {\n  font: 500 11.5px/1 var(--f-mono);\n  color: var(--fg-faint);\n  font-variant-numeric: tabular-nums;\n  padding-left: 4px;\n}\n\n.saved-views-rail-group { display: flex; flex-direction: column; gap: 2px; }\n\n.saved-views-rail-group-name {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  padding: var(--s-1) var(--s-2);\n}\n\n.saved-views-rail-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-2);\n  padding: 0 var(--s-2);\n}\n\n.saved-views-rail-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: var(--fg-soft);\n}\n\n.saved-views-rail-item {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n  border-radius: var(--r-sm);\n}\n\n.saved-views-rail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.saved-views-rail-meta { display: inline-flex; align-items: center; gap: var(--s-1); }\n\n.saved-views-rail-star {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 28px; height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-faint);\n  cursor: pointer;\n  border-radius: var(--r-xs);\n}\n\n.saved-views-rail-title {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}