{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-02",
  "title": "Team Switcher Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/Sidebar02.svelte",
      "content": "<script lang=\"ts\">\n  import type { Component } from 'svelte'\n  import { BookOpen, Bot, Frame, LifeBuoy, Map, PieChart, Send, Settings2, SquareTerminal } from '@lucide/svelte'\n  import NavMain from './NavMain.svelte'\n  import NavProjects from './NavProjects.svelte'\n  import NavSecondary from './NavSecondary.svelte'\n  import NavUser from './NavUser.svelte'\n  import TeamSwitcher from './TeamSwitcher.svelte'\n  import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from '$lib/components/ui/sidebar'\n\n  const data = {\n    user: {\n      name: 'shadcn',\n      email: 'm@example.com',\n    },\n    navMain: [\n      {\n        title: 'Playground',\n        url: '#',\n        icon: SquareTerminal as Component,\n        isActive: true,\n        items: [\n          {\n            title: 'History',\n            url: '#',\n          },\n          {\n            title: 'Starred',\n            url: '#',\n          },\n          {\n            title: 'Settings',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'Models',\n        url: '#',\n        icon: Bot as Component,\n        items: [\n          {\n            title: 'Genesis',\n            url: '#',\n          },\n          {\n            title: 'Explorer',\n            url: '#',\n          },\n          {\n            title: 'Quantum',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'Documentation',\n        url: '#',\n        icon: BookOpen as Component,\n        items: [\n          {\n            title: 'Introduction',\n            url: '#',\n          },\n          {\n            title: 'Get Started',\n            url: '#',\n          },\n          {\n            title: 'Tutorials',\n            url: '#',\n          },\n          {\n            title: 'Changelog',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'Settings',\n        url: '#',\n        icon: Settings2 as Component,\n        items: [\n          {\n            title: 'General',\n            url: '#',\n          },\n          {\n            title: 'Team',\n            url: '#',\n          },\n          {\n            title: 'Billing',\n            url: '#',\n          },\n          {\n            title: 'Limits',\n            url: '#',\n          },\n        ],\n      },\n    ],\n    navSecondary: [\n      {\n        title: 'Support',\n        url: '#',\n        icon: LifeBuoy as Component,\n      },\n      {\n        title: 'Feedback',\n        url: '#',\n        icon: Send as Component,\n      },\n    ],\n    projects: [\n      {\n        name: 'Design Engineering',\n        url: '#',\n        icon: Frame as Component,\n      },\n      {\n        name: 'Sales & Marketing',\n        url: '#',\n        icon: PieChart as Component,\n      },\n      {\n        name: 'Travel',\n        url: '#',\n        icon: Map as Component,\n      },\n    ],\n  }\n</script>\n\n<Sidebar data-slot=\"sidebar-02\" collapsible=\"icon\">\n  <SidebarHeader>\n    <TeamSwitcher />\n  </SidebarHeader>\n  <SidebarContent>\n    <NavMain items={data.navMain} />\n    <NavProjects projects={data.projects} />\n    <NavSecondary items={data.navSecondary} class=\"mt-auto\" />\n  </SidebarContent>\n  <SidebarFooter>\n    <NavUser user={data.user} />\n  </SidebarFooter>\n  <SidebarRail />\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/Sidebar02.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/TeamSwitcher.svelte",
      "content": "<script lang=\"ts\">\n  // Edit teams + activeTeam below to match your tenant model. The dropdown\n  // is the full team switcher pattern -- avatar tile, label, kbd shortcut,\n  // and a \"Add team\" footer row. Wire setActive() to your tenant API.\n  import type { Component } from 'svelte'\n  import { AudioWaveform, Check, ChevronsUpDown, Command, Plus } from '@lucide/svelte'\n  import UipkgeMark from './UipkgeMark.svelte'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '$lib/components/ui/sidebar'\n\n  const teams: { name: string; logo: Component; plan: string }[] = [\n    { name: 'uipkge', logo: UipkgeMark, plan: 'UI registry' },\n    { name: 'uipkge HRMS', logo: AudioWaveform, plan: 'Vertical' },\n    { name: 'uipkge Hospital', logo: Command, plan: 'Vertical' },\n  ]\n\n  // Read via `sidebar.isMobile` (not destructured) to stay subscribed.\n  const sidebar = useSidebar()\n  let activeTeam = $state(teams[0]!)\n\n  function setActive(team: (typeof teams)[number]) {\n    activeTeam = team\n  }\n\n  const ActiveLogo = $derived(activeTeam.logo)\n</script>\n\n<SidebarMenu data-slot=\"sidebar-02\">\n  <SidebarMenuItem>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        {#snippet child({ props })}\n          <SidebarMenuButton\n            {...props}\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center\"\n          >\n            <div\n              class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6\"\n            >\n              <ActiveLogo class=\"size-4 group-data-[collapsible=icon]:size-3.5\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n              <span class=\"font-display truncate font-bold\">{activeTeam.name}</span>\n              <span class=\"text-muted-foreground truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n          </SidebarMenuButton>\n        {/snippet}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        class=\"min-w-56 rounded-lg\"\n        side={sidebar.isMobile ? 'bottom' : 'right'}\n        align=\"start\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel class=\"text-muted-foreground text-xs\">Teams</DropdownMenuLabel>\n        {#each teams as team, i (team.name)}\n          {@const TeamLogo = team.logo}\n          <DropdownMenuItem class=\"gap-2 p-2\" onSelect={() => setActive(team)}>\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <TeamLogo class=\"size-3.5 shrink-0\" />\n            </div>\n            {team.name}\n            {#if activeTeam === team}\n              <Check class=\"ml-auto size-4\" />\n            {:else}\n              <DropdownMenuShortcut>⌘{i + 1}</DropdownMenuShortcut>\n            {/if}\n          </DropdownMenuItem>\n        {/each}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem class=\"gap-2 p-2\">\n          <div class=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n            <Plus class=\"size-4\" />\n          </div>\n          <div class=\"text-muted-foreground font-medium\">Add team</div>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </SidebarMenuItem>\n</SidebarMenu>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/TeamSwitcher.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/NavMain.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface NavMainItem {\n    title: string\n    url: string\n    icon: Component\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n      isActive?: boolean\n    }[]\n  }\n\n  export interface NavMainProps {\n    items: NavMainItem[]\n  }\n</script>\n\n<script lang=\"ts\">\n  import { ChevronRight } from '@lucide/svelte'\n  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$lib/components/ui/collapsible'\n  import {\n    SidebarGroup,\n    SidebarGroupLabel,\n    SidebarMenu,\n    SidebarMenuAction,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarMenuSub,\n    SidebarMenuSubButton,\n    SidebarMenuSubItem,\n  } from '$lib/components/ui/sidebar'\n\n  let { items }: NavMainProps = $props()\n</script>\n\n<SidebarGroup data-slot=\"sidebar-02\">\n  <SidebarGroupLabel>Platform</SidebarGroupLabel>\n  <SidebarMenu>\n    {#each items as item (item.title)}\n      {@const ItemIcon = item.icon}\n      <!-- The Svelte Collapsible has no as-child mode, so it renders its own\n           wrapper inside the menu item where the Vue twin merges the two. -->\n      <SidebarMenuItem>\n        <Collapsible defaultOpen={item.isActive}>\n          <SidebarMenuButton tooltip={item.title} isActive={item.isActive}>\n            {#snippet child({ props })}\n              <a href={item.url} {...props}>\n                <ItemIcon />\n                <span>{item.title}</span>\n              </a>\n            {/snippet}\n          </SidebarMenuButton>\n          {#if item.items?.length}\n            <CollapsibleTrigger>\n              {#snippet child({ props })}\n                <SidebarMenuAction {...props} class=\"data-[state=open]:rotate-90\">\n                  <ChevronRight />\n                  <span class=\"sr-only\">Toggle</span>\n                </SidebarMenuAction>\n              {/snippet}\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                {#each item.items as subItem (subItem.title)}\n                  <SidebarMenuSubItem>\n                    <SidebarMenuSubButton isActive={subItem.isActive}>\n                      {#snippet child({ props })}\n                        <a href={subItem.url} {...props}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      {/snippet}\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                {/each}\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          {/if}\n        </Collapsible>\n      </SidebarMenuItem>\n    {/each}\n  </SidebarMenu>\n</SidebarGroup>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/NavMain.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/NavProjects.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface NavProjectsProps {\n    projects: {\n      name: string\n      url: string\n      icon: Component\n    }[]\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Folder, Forward, MoreHorizontal, Trash2 } from '@lucide/svelte'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuSeparator,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import {\n    SidebarGroup,\n    SidebarGroupLabel,\n    SidebarMenu,\n    SidebarMenuAction,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    useSidebar,\n  } from '$lib/components/ui/sidebar'\n\n  let { projects }: NavProjectsProps = $props()\n\n  // Read via `sidebar.isMobile` (not destructured) to stay subscribed.\n  const sidebar = useSidebar()\n</script>\n\n<!-- Upstream shadcn-vue hides this entire group on icon-mode collapse\n     with `group-data-[collapsible=icon]:hidden`. We keep it visible so\n     the project icons stay reachable in the narrow column; the\n     SidebarGroupLabel below and the `<span>` children of each\n     SidebarMenuButton already self-hide on collapse, leaving an\n     icon-only column that lines up with NavMain. -->\n<SidebarGroup>\n  <SidebarGroupLabel>Projects</SidebarGroupLabel>\n  <SidebarMenu>\n    {#each projects as item (item.name)}\n      {@const ItemIcon = item.icon}\n      <SidebarMenuItem>\n        <SidebarMenuButton>\n          {#snippet child({ props })}\n            <a href={item.url} {...props}>\n              <ItemIcon />\n              <span>{item.name}</span>\n            </a>\n          {/snippet}\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger>\n            {#snippet child({ props })}\n              <SidebarMenuAction {...props} showOnHover>\n                <MoreHorizontal />\n                <span class=\"sr-only\">More</span>\n              </SidebarMenuAction>\n            {/snippet}\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            side={sidebar.isMobile ? 'bottom' : 'right'}\n            align={sidebar.isMobile ? 'end' : 'start'}\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    {/each}\n    <SidebarMenuItem>\n      <SidebarMenuButton>\n        <MoreHorizontal />\n        <span>More</span>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</SidebarGroup>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/NavProjects.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/NavSecondary.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface NavSecondaryProps {\n    items: {\n      title: string\n      url: string\n      icon: Component\n      isActive?: boolean\n    }[]\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import {\n    SidebarGroup,\n    SidebarGroupContent,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n  } from '$lib/components/ui/sidebar'\n\n  let { items, class: className }: NavSecondaryProps = $props()\n</script>\n\n<SidebarGroup data-slot=\"sidebar-02\" class={className}>\n  <SidebarGroupContent>\n    <SidebarMenu>\n      {#each items as item (item.title)}\n        {@const ItemIcon = item.icon}\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"sm\" isActive={item.isActive}>\n            {#snippet child({ props })}\n              <a href={item.url} {...props}>\n                <ItemIcon />\n                <span>{item.title}</span>\n              </a>\n            {/snippet}\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      {/each}\n    </SidebarMenu>\n  </SidebarGroupContent>\n</SidebarGroup>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/NavSecondary.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/NavUser.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface NavUserProps {\n    user: {\n      name: string\n      email: string\n    }\n  }\n</script>\n\n<script lang=\"ts\">\n  import {\n    BadgeCheck,\n    Bell,\n    ChevronsUpDown,\n    CreditCard,\n    LogOut,\n    Monitor,\n    Moon,\n    Palette,\n    Sun,\n    Zap,\n  } from '@lucide/svelte'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuSub,\n    DropdownMenuSubContent,\n    DropdownMenuSubTrigger,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '$lib/components/ui/sidebar'\n\n  let { user }: NavUserProps = $props()\n\n  // Read via `sidebar.isMobile` (not destructured) to stay subscribed.\n  const sidebar = useSidebar()\n\n  // The Svelte registry ships no use-theme hook (yet), so the block owns a\n  // tiny local theme state and applies the dark class itself. Swap this for\n  // your own theme store after install.\n  type Theme = 'light' | 'dark' | 'system'\n  let theme = $state<Theme>('system')\n\n  $effect(() => {\n    const root = document.documentElement\n    const dark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)\n    root.classList.toggle('dark', dark)\n  })\n\n  const initials = $derived.by(() => {\n    const parts = user.name.trim().split(/\\s+/).slice(0, 2)\n    return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'\n  })\n</script>\n\n<SidebarMenu data-slot=\"sidebar-02\">\n  <SidebarMenuItem>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        {#snippet child({ props })}\n          <SidebarMenuButton\n            {...props}\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center\"\n          >\n            <Avatar class=\"h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6\">\n              <AvatarFallback class=\"rounded-lg text-xs\">{initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n              <span class=\"truncate font-medium\">{user.name}</span>\n              <span class=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n          </SidebarMenuButton>\n        {/snippet}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        class=\"min-w-56 rounded-lg\"\n        side={sidebar.isMobile ? 'bottom' : 'right'}\n        align=\"end\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel class=\"p-0 font-normal\">\n          <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarFallback class=\"rounded-lg text-xs\">{initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{user.name}</span>\n              <span class=\"truncate text-xs\">{user.email}</span>\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Zap />\n            Upgrade to Pro\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BadgeCheck />\n            Account\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Bell />\n            Notifications\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <Palette />\n            Theme\n            <span class=\"text-muted-foreground ml-auto text-xs capitalize\">{theme}</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent class=\"min-w-36\">\n            <DropdownMenuRadioGroup\n              value={theme}\n              onValueChange={(v) => (theme = v as 'light' | 'dark' | 'system')}\n            >\n              <DropdownMenuRadioItem value=\"light\"><Sun /> Light</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"dark\"><Moon /> Dark</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"system\"><Monitor /> System</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </SidebarMenuItem>\n</SidebarMenu>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/NavUser.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/UipkgeMark.svelte",
      "content": "<!-- 4-quadrant uipkge logo. Sits next to Lucide icons in the teams array. -->\n<script lang=\"ts\" module>\n  export interface UipkgeMarkProps {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  let { class: className }: UipkgeMarkProps = $props()\n</script>\n\n<svg viewBox=\"0 0 24 24\" class={className} fill=\"currentColor\" aria-hidden=\"true\">\n  <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n  <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n  <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n  <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n</svg>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-02/UipkgeMark.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-02/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page installed by the sidebar-02 item. Visit /sidebar-02-demo after\n  // install to see the block without editing your own routes. Free to edit or\n  // delete me.\n  import Sidebar02 from '$lib/components/blocks/sidebar-02/Sidebar02.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider>\n  <Sidebar02 />\n  <SidebarInset>\n    <header class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n      <SidebarTrigger class=\"size-7\" />\n      <h1 class=\"text-sm font-semibold\">sidebar-02 demo</h1>\n    </header>\n    <div class=\"flex-1 p-6\">\n      <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n      </div>\n      <div class=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\"></div>\n    </div>\n  </SidebarInset>\n</SidebarProvider>\n",
      "type": "registry:block",
      "target": "~/src/routes/sidebar-02-demo/+page.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/sidebar.json",
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/collapsible.json",
    "https://uipkge.dev/r/svelte/dropdown-menu.json"
  ],
  "description": "Full-featured app sidebar -- collapsible=\"icon\" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.",
  "categories": [
    "layout",
    "sidebar"
  ]
}