{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "topbar",
  "type": "registry:component",
  "title": "Topbar",
  "description": "Optional top bar with breadcrumb, context switcher and actions slots.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils",
    "@wibo/sidebar"
  ],
  "files": [
    {
      "path": "src/shell/topbar.tsx",
      "type": "registry:component",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\nimport { ChevronsUpDown, Slash } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { SidebarTrigger } from \"@/components/sidebar\";\n\ninterface TopbarProps extends ComponentProps<\"header\"> {\n  /** A `Breadcrumb` element. */\n  breadcrumb?: ReactNode;\n  /** Tenant or project switcher, usually a `DropdownMenu` around a `ContextSwitcherTrigger`. */\n  contextSwitcher?: ReactNode;\n  /** Right-aligned actions (search, docs link, user menu). */\n  actions?: ReactNode;\n}\n\n/**\n * Optional bar across the top of the content frame (Mastra Studio's page\n * header): 40 px, a hairline under it, the context switcher and a breadcrumb\n * separated by a slash, actions on the right. The Workspace and the Admin\n * Panel do not use it: their pages carry the breadcrumb in `PageHeader` and\n * the account sits in the sidebar (`SidebarAccount`).\n */\nfunction Topbar({ breadcrumb, contextSwitcher, actions, className, children, ...props }: TopbarProps) {\n  return (\n    <header\n      data-slot=\"topbar\"\n      className={cn(\"flex h-10 shrink-0 items-center gap-1 border-b border-border px-2\", className)}\n      {...props}\n    >\n      <SidebarTrigger />\n      {contextSwitcher ? <div className=\"flex min-w-0 shrink-0 items-center\">{contextSwitcher}</div> : null}\n      {contextSwitcher && breadcrumb ? (\n        <Slash aria-hidden=\"true\" className=\"size-3.5 shrink-0 text-muted-foreground/60\" />\n      ) : null}\n      <div className=\"flex min-w-0 flex-1 items-center\">{breadcrumb}</div>\n      {children}\n      {actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n    </header>\n  );\n}\n\ninterface ContextSwitcherTriggerProps extends ComponentProps<\"button\"> {\n  /** Current tenant, workspace or project. */\n  label: ReactNode;\n  /** Small leading visual (avatar, logo). */\n  leading?: ReactNode;\n}\n\n/** Crumb-shaped button showing the current context; wrap it in a `DropdownMenuTrigger asChild`. */\nfunction ContextSwitcherTrigger({ label, leading, className, ...props }: ContextSwitcherTriggerProps) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"context-switcher-trigger\"\n      className={cn(\n        \"press inline-flex h-7 max-w-56 cursor-pointer items-center gap-1.5 rounded-control px-2.5 text-label font-medium text-foreground outline-none hover:bg-foreground/4 focus-visible:ring-2 focus-visible:ring-ring/50 data-[state=open]:bg-foreground/6\",\n        className,\n      )}\n      {...props}\n    >\n      {leading}\n      <span className=\"truncate\">{label}</span>\n      <ChevronsUpDown aria-hidden=\"true\" className=\"size-3.5 shrink-0 text-muted-foreground\" />\n    </button>\n  );\n}\n\nexport { ContextSwitcherTrigger, Topbar };\nexport type { ContextSwitcherTriggerProps, TopbarProps };\n"
    }
  ]
}