{ "name": "VersionSwitcher", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/VersionSwitcher.tsx", "chapterTag": "18 Agent Builder", "chapter": "18-agent-builder.html", "sectionId": "version-switcher", "elName": "VersionSwitcher", "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#version-switcher", "hasLiveDemo": false, "description": "Version-switcher dropdown — clicked label opens a menu of prior versions\nwith timestamps and optional status pills. Used for Agents, Personas, and\nTasks (the platform's three versioned entities).", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "VersionSwitcher", "isPrincipal": true, "isType": false }, { "name": "VersionSwitcherProps", "isPrincipal": false, "isType": true }, { "name": "VersionEntry", "isPrincipal": false, "isType": true } ], "importStatement": "import { VersionSwitcher } from \"@magicblocksai/ui\";", "props": [ { "name": "versions", "optional": false, "type": "VersionEntry[]", "doc": "Available versions, newest-first." }, { "name": "value", "optional": true, "type": "string", "doc": "Controlled selected id." }, { "name": "defaultValue", "optional": true, "type": "string", "doc": "Uncontrolled initial selected id." }, { "name": "onValueChange", "optional": true, "type": "(id: string) => void", "doc": "Fires when the user picks a different version." }, { "name": "onCreateVersion", "optional": true, "type": "() => void", "doc": "Optional \"+ Create version\" callback — shown as a footer item." }, { "name": "createLabel", "optional": true, "type": "ReactNode", "doc": "Create label. Default `\"+ Create new version\"`." }, { "name": "onCompare", "optional": true, "type": "() => void", "doc": "Optional \"Compare\" callback — shown as a secondary footer item." }, { "name": "compareLabel", "optional": true, "type": "ReactNode", "doc": "Compare label. Default `\"Compare versions\"`." }, { "name": "compact", "optional": true, "type": "boolean", "doc": "Render the trigger compactly." }, { "name": "disabled", "optional": true, "type": "boolean", "doc": "Disable the trigger." } ], "classesUsed": [ "menu", "version-switcher", "version-switcher-action", "version-switcher-caret", "version-switcher-item", "version-switcher-item-caption", "version-switcher-item-foot", "version-switcher-item-head", "version-switcher-item-label", "version-switcher-item-status", "version-switcher-item-timestamp", "version-switcher-menu", "version-switcher-menu-footer", "version-switcher-menu-list", "version-switcher-trigger", "version-switcher-trigger-label", "version-switcher-trigger-status" ], "examples": { "react": null, "html": "
\n
\n \n
\n
\n \n \n \n \n
\n
\n \n \n
\n
\n
\n
", "css": ".menu {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-2);\n display: flex; flex-direction: column; gap: 2px;\n box-shadow: var(--sh-3);\n min-width: 260px;\n}\n\n.version-switcher { position: relative; display: inline-block; }\n\n.version-switcher-action {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 6px 10px;\n border-radius: var(--r-xs);\n font: 500 12.5px/1 var(--f-body);\n color: var(--fg);\n cursor: pointer;\n /* Size to content — the labels (\"Compare versions\",\n \"+ Create new version\") must never wrap. Equal `flex: 1` split\n starved the longer label and broke it onto a second line. */\n white-space: nowrap;\n text-align: left;\n}\n\n.version-switcher-caret { transition: transform var(--dur-2) var(--ease); }\n\n.version-switcher-item {\n appearance: none;\n background: transparent;\n border: 0;\n text-align: left;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 6px 10px;\n border-radius: var(--r-xs);\n cursor: pointer;\n color: var(--fg);\n}\n\n.version-switcher-item-caption { font: 400 11.5px/1.3 var(--f-body); }\n\n.version-switcher-item-foot {\n display: flex;\n align-items: center;\n gap: var(--s-2);\n color: var(--fg-soft);\n}\n\n.version-switcher-item-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--s-2);\n}\n\n.version-switcher-item-label { font: 500 13px/1.3 var(--f-body); }\n\n.version-switcher-item-status { display: inline-flex; align-items: center; }\n\n.version-switcher-item-timestamp { font: 400 11.5px/1 var(--f-mono); }\n\n.version-switcher-menu {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: 50;\n /* Wide enough for the two-action footer (\"Compare versions\" +\n \"+ Create new version\") to sit on one line without wrapping. */\n min-width: 300px;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-md);\n box-shadow: 0 12px 24px color-mix(in oklab, var(--ink) 14%, transparent);\n padding: 4px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n}\n\n.version-switcher-menu-footer {\n border-top: 1px solid var(--hair-soft);\n margin-top: 4px;\n padding-top: 4px;\n display: flex;\n justify-content: space-between;\n gap: var(--s-2);\n}\n\n.version-switcher-menu-list { overflow-y: auto; max-height: 280px; }\n\n.version-switcher-trigger {\n appearance: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: 1px solid var(--hair);\n border-radius: var(--r-sm);\n background: var(--bg-paper);\n color: var(--fg);\n font: 500 13px/1 var(--f-body);\n cursor: pointer;\n}\n\n.version-switcher-trigger-label { line-height: 1; }\n\n.version-switcher-trigger-status { margin-left: 2px; }" } }