{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "introducing-shadcn",
  "title": "shadcn/ui — Introducing shadcn/ui (gift cut)",
  "description": "remocn demo composition \"shadcn/ui — Introducing shadcn/ui (gift cut)\" — installs the full Remotion composition. Generated with AI from the prompt in demos/introducing-shadcn/prompt.md.",
  "dependencies": [
    "@paper-design/shaders-react",
    "@remotion/google-fonts",
    "@remotion/transitions",
    "class-variance-authority",
    "clsx",
    "cmdk",
    "lucide-react",
    "radix-ui",
    "react-day-picker",
    "remotion",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://remocn.dev/r/kinetic-center-build.json",
    "https://remocn.dev/r/line-by-line-slide.json",
    "https://remocn.dev/r/scale-down-fade.json",
    "https://remocn.dev/r/shader-dithering.json",
    "https://remocn.dev/r/shader-simplex-noise.json",
    "https://remocn.dev/r/shader-smoke-ring.json",
    "https://remocn.dev/r/shader-swirl.json",
    "https://remocn.dev/r/short-slide-right.json",
    "https://remocn.dev/r/whip-pan.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/demos/_ui/app-sidebar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/demos/_ui/nav-main\"\nimport { NavProjects } from \"@/demos/_ui/nav-projects\"\nimport { NavUser } from \"@/demos/_ui/nav-user\"\nimport { TeamSwitcher } from \"@/demos/_ui/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/demos/_ui/sidebar\"\nimport { GalleryVerticalEndIcon, AudioLinesIcon, TerminalIcon, TerminalSquareIcon, BotIcon, BookOpenIcon, Settings2Icon, FrameIcon, PieChartIcon, MapIcon } from \"lucide-react\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <GalleryVerticalEndIcon\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <AudioLinesIcon\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <TerminalIcon\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <TerminalSquareIcon\n        />\n      ),\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: (\n        <BotIcon\n        />\n      ),\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: (\n        <BookOpenIcon\n        />\n      ),\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: (\n        <Settings2Icon\n        />\n      ),\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  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <FrameIcon\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <PieChartIcon\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <MapIcon\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/app-sidebar.tsx"
    },
    {
      "path": "src/demos/_ui/avatar.tsx",
      "content": "import * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/avatar.tsx"
    },
    {
      "path": "src/demos/_ui/badge.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:component",
      "target": "demos/_ui/badge.tsx"
    },
    {
      "path": "src/demos/_ui/breadcrumb.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <ChevronRightIcon />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MoreHorizontalIcon\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/breadcrumb.tsx"
    },
    {
      "path": "src/demos/_ui/button.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:component",
      "target": "demos/_ui/button.tsx"
    },
    {
      "path": "src/demos/_ui/calendar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/demos/_ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
      "type": "registry:component",
      "target": "demos/_ui/calendar.tsx"
    },
    {
      "path": "src/demos/_ui/card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-(--card-spacing)\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/card.tsx"
    },
    {
      "path": "src/demos/_ui/collapsible.tsx",
      "content": "import { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
      "type": "registry:component",
      "target": "demos/_ui/collapsible.tsx"
    },
    {
      "path": "src/demos/_ui/command.tsx",
      "content": "import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/demos/_ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/demos/_ui/input-group\"\nimport { SearchIcon, CheckIcon } from \"lucide-react\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CheckIcon className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\" />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/command.tsx"
    },
    {
      "path": "src/demos/_ui/dialog.tsx",
      "content": "import * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/demos/_ui/button\"\nimport { XIcon } from \"lucide-react\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <XIcon\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-base leading-none font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/dialog.tsx"
    },
    {
      "path": "src/demos/_ui/dropdown-menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\"z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", className )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", className )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/dropdown-menu.tsx"
    },
    {
      "path": "src/demos/_ui/input-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/demos/_ui/button\"\nimport { Input } from \"@/demos/_ui/input\"\nimport { Textarea } from \"@/demos/_ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/input-group.tsx"
    },
    {
      "path": "src/demos/_ui/input.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
      "type": "registry:component",
      "target": "demos/_ui/input.tsx"
    },
    {
      "path": "src/demos/_ui/label.tsx",
      "content": "import * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
      "type": "registry:component",
      "target": "demos/_ui/label.tsx"
    },
    {
      "path": "src/demos/_ui/nav-main.tsx",
      "content": "import {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/demos/_ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/demos/_ui/sidebar\"\nimport { ChevronRightIcon } from \"lucide-react\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                  <ChevronRightIcon className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/nav-main.tsx"
    },
    {
      "path": "src/demos/_ui/nav-projects.tsx",
      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/demos/_ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/demos/_ui/sidebar\"\nimport { MoreHorizontalIcon, FolderIcon, ArrowRightIcon, Trash2Icon } from \"lucide-react\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"aria-expanded:bg-muted\"\n                >\n                  <MoreHorizontalIcon\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-fit\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <FolderIcon\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowRightIcon\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <Trash2Icon\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontalIcon className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/nav-projects.tsx"
    },
    {
      "path": "src/demos/_ui/nav-user.tsx",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/demos/_ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/demos/_ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/demos/_ui/sidebar\"\nimport { ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon } from \"lucide-react\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDownIcon className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-fit\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <SparklesIcon\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheckIcon\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCardIcon\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <BellIcon\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOutIcon\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/nav-user.tsx"
    },
    {
      "path": "src/demos/_ui/progress.tsx",
      "content": "import * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
      "type": "registry:component",
      "target": "demos/_ui/progress.tsx"
    },
    {
      "path": "src/demos/_ui/radio-group.tsx",
      "content": "import * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
      "type": "registry:component",
      "target": "demos/_ui/radio-group.tsx"
    },
    {
      "path": "src/demos/_ui/select.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/select.tsx"
    },
    {
      "path": "src/demos/_ui/separator.tsx",
      "content": "import * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
      "type": "registry:component",
      "target": "demos/_ui/separator.tsx"
    },
    {
      "path": "src/demos/_ui/sheet.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/demos/_ui/button\"\nimport { XIcon } from \"lucide-react\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-3 right-3\"\n              size=\"icon-sm\"\n            >\n              <XIcon\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\n        \"font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/sheet.tsx"
    },
    {
      "path": "src/demos/_ui/sidebar.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/demos/_ui/use-mobile\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/demos/_ui/button\"\nimport { Input } from \"@/demos/_ui/input\"\nimport { Separator } from \"@/demos/_ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/demos/_ui/sheet\"\nimport { Skeleton } from \"@/demos/_ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/demos/_ui/tooltip\"\nimport { PanelLeftIcon } from \"lucide-react\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/sidebar.tsx"
    },
    {
      "path": "src/demos/_ui/skeleton.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
      "type": "registry:component",
      "target": "demos/_ui/skeleton.tsx"
    },
    {
      "path": "src/demos/_ui/slider.tsx",
      "content": "import * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
      "type": "registry:component",
      "target": "demos/_ui/slider.tsx"
    },
    {
      "path": "src/demos/_ui/switch.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
      "type": "registry:component",
      "target": "demos/_ui/switch.tsx"
    },
    {
      "path": "src/demos/_ui/table.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/table.tsx"
    },
    {
      "path": "src/demos/_ui/tabs.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
      "type": "registry:component",
      "target": "demos/_ui/tabs.tsx"
    },
    {
      "path": "src/demos/_ui/team-switcher.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/demos/_ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/demos/_ui/sidebar\"\nimport { ChevronsUpDownIcon, PlusIcon } from \"lucide-react\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDownIcon className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-fit\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <PlusIcon className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/team-switcher.tsx"
    },
    {
      "path": "src/demos/_ui/textarea.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
      "type": "registry:component",
      "target": "demos/_ui/textarea.tsx"
    },
    {
      "path": "src/demos/_ui/toggle.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
      "type": "registry:component",
      "target": "demos/_ui/toggle.tsx"
    },
    {
      "path": "src/demos/_ui/tooltip.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
      "type": "registry:component",
      "target": "demos/_ui/tooltip.tsx"
    },
    {
      "path": "src/demos/_ui/use-mobile.ts",
      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
      "type": "registry:component",
      "target": "demos/_ui/use-mobile.ts"
    },
    {
      "path": "src/demos/_ui/video-scope.tsx",
      "content": "import React from \"react\";\n\n// Pinned copy of the shadcn zinc tokens the demo videos were authored against.\n// Rendered as an inline <style> so it works identically in the Next.js site,\n// the Remotion CLI bundle, and any project a demo is installed into via the\n// registry — regardless of what that project's own shadcn theme looks like.\n// Apply className=\"video-scope\" on the composition root next to this tag.\nconst CSS = `\n.video-scope.video-scope {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.87 0 0);\n  --chart-2: oklch(0.556 0 0);\n  --chart-3: oklch(0.439 0 0);\n  --chart-4: oklch(0.371 0 0);\n  --chart-5: oklch(0.269 0 0);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n  --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  font-family: var(--font-sans);\n}\n.video-scope .dark,\n.video-scope.dark.video-scope {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.205 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.269 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.87 0 0);\n  --chart-2: oklch(0.556 0 0);\n  --chart-3: oklch(0.439 0 0);\n  --chart-4: oklch(0.371 0 0);\n  --chart-5: oklch(0.269 0 0);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.556 0 0);\n}\n/* CSS transitions/animations run on wall clock, not Remotion's frame clock:\n   a hard theme/var flip starts a real-time transition and the frame screenshot\n   catches it mid-flight (nondeterministic across frames and render workers).\n   All motion in demos is frame-driven via interpolate, so kill them outright. */\n.video-scope *,\n.video-scope *::before,\n.video-scope *::after {\n  transition: none !important;\n  animation: none !important;\n}\n`;\n\nexport const VideoScopeStyle: React.FC = () => <style>{CSS}</style>;\n",
      "type": "registry:component",
      "target": "demos/_ui/video-scope.tsx"
    },
    {
      "path": "src/demos/introducing-shadcn/categories.tsx",
      "content": "import React from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  Series,\n  interpolate,\n  useCurrentFrame,\n} from \"remotion\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/demos/_ui/card\";\nimport { Label } from \"@/demos/_ui/label\";\nimport { Switch } from \"@/demos/_ui/switch\";\nimport { AppSidebar } from \"@/demos/_ui/app-sidebar\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/demos/_ui/breadcrumb\";\nimport { Separator } from \"@/demos/_ui/separator\";\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/demos/_ui/sidebar\";\nimport { TooltipProvider } from \"@/demos/_ui/tooltip\";\n\nimport { MiniBars } from \"./field\";\n\nconst SANS =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst INK = \"#fafafa\";\n\nconst clampOpts = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\nexport const CAT_BEAT = 56;\nconst BLOCKS_BEAT = 96;\n\n// Shared beat frame: label and live UI as one centered column. `themed`\n// wraps the UI in the dark theme class; the Themes beat manages its own.\nconst CategoryFrame: React.FC<{\n  label: string;\n  themed?: boolean;\n  children: React.ReactNode;\n}> = ({ label, themed = true, children }) => {\n  const frame = useCurrentFrame();\n\n  const labelOpacity = interpolate(frame, [0, 7], [0, 1], clampOpts);\n  const labelY = interpolate(frame, [0, 8], [10, 0], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const labelBlur = interpolate(frame, [0, 7], [6, 0], clampOpts);\n\n  const uiIn = interpolate(frame, [4, 16], [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n\n  return (\n    <AbsoluteFill style={{ alignItems: \"center\", justifyContent: \"center\" }}>\n      <span\n        style={{\n          fontFamily: SANS,\n          fontWeight: 400,\n          fontSize: 46,\n          color: INK,\n          opacity: labelOpacity,\n          transform: `translateY(${labelY}px)`,\n          filter: `blur(${labelBlur}px)`,\n        }}\n      >\n        {label}\n      </span>\n      <div\n        className={`${themed ? \"dark \" : \"\"}**:font-normal!`}\n        style={{\n          marginTop: 36,\n          opacity: uiIn,\n          transform: `translateY(${(1 - uiIn) * 24}px) scale(${\n            0.97 + uiIn * 0.03\n          })`,\n        }}\n      >\n        {children}\n      </div>\n    </AbsoluteFill>\n  );\n};\n\n// Blocks — the real sidebar-07 block from the shadcn registry, assembling\n// itself: the frame resolves, the sidebar slides in from the left, the\n// header settles, and the content placeholders cascade in. The sidebar's\n// internals live in registry files, so its slide is driven by a\n// frame-computed <style> rule instead of edits to those files.\nconst BlocksBeat: React.FC = () => {\n  const frame = useCurrentFrame();\n\n  const easeOut = Easing.out(Easing.cubic);\n\n  const sbX = interpolate(frame, [6, 26], [-72, 0], {\n    ...clampOpts,\n    easing: easeOut,\n  });\n  const sbOpacity = interpolate(frame, [6, 22], [0, 1], clampOpts);\n\n  const headerIn = interpolate(frame, [16, 30], [0, 1], {\n    ...clampOpts,\n    easing: easeOut,\n  });\n\n  const cardIn = (delay: number) =>\n    interpolate(frame, [delay, delay + 14], [0, 1], {\n      ...clampOpts,\n      easing: easeOut,\n    });\n  const cards = [cardIn(20), cardIn(26), cardIn(32)];\n  const heroIn = cardIn(38);\n\n  return (\n    <CategoryFrame label=\"Blocks\">\n      {/* The wrapper is exactly the block's scaled size, so the centered\n          column truly centers the visible block (no phantom layout space). */}\n      <div style={{ position: \"relative\", width: 1120 * 0.72, height: 600 * 0.72 }}>\n      <div\n        data-blocks-anim\n        className=\"absolute left-0 top-0 h-[600px] w-[1120px] overflow-hidden rounded-xl border border-border bg-background [&_[data-slot=sidebar-container]]:absolute! [&_[data-slot=sidebar-container]]:h-full!\"\n        style={{ transform: \"scale(0.72)\", transformOrigin: \"top left\" }}\n      >\n        <style>{`[data-blocks-anim] [data-slot=sidebar-container]{transform:translateX(${sbX}px);opacity:${sbOpacity};}`}</style>\n        <TooltipProvider>\n          <SidebarProvider className=\"h-full min-h-0\">\n            <AppSidebar />\n            <SidebarInset className=\"min-h-0\">\n              <header\n                className=\"flex h-16 shrink-0 items-center gap-2 px-4\"\n                style={{\n                  opacity: headerIn,\n                  transform: `translateY(${(1 - headerIn) * -10}px)`,\n                }}\n              >\n                <SidebarTrigger className=\"-ml-1\" />\n                <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink>Building Your Application</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </header>\n              <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n                <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                  {cards.map((p, i) => (\n                    <div\n                      key={i}\n                      className=\"aspect-video rounded-xl bg-muted/50\"\n                      style={{\n                        opacity: p,\n                        transform: `translateY(${(1 - p) * 20}px) scale(${\n                          0.97 + p * 0.03\n                        })`,\n                      }}\n                    />\n                  ))}\n                </div>\n                <div\n                  className=\"flex-1 rounded-xl bg-muted/50\"\n                  style={{\n                    opacity: heroIn,\n                    transform: `translateY(${(1 - heroIn) * 24}px) scale(${\n                      0.98 + heroIn * 0.02\n                    })`,\n                  }}\n                />\n              </div>\n            </SidebarInset>\n          </SidebarProvider>\n        </TooltipProvider>\n      </div>\n      </div>\n    </CategoryFrame>\n  );\n};\n\n// Charts — a monochrome bar chart drawing itself live.\nconst ChartsBeat: React.FC = () => (\n  <CategoryFrame label=\"Charts\">\n    <Card className=\"w-[560px]\">\n      <CardHeader>\n        <CardDescription>Exercise minutes</CardDescription>\n        <CardTitle className=\"text-3xl\">1,284</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <MiniBars\n          values={[38, 62, 44, 78, 52, 70, 88, 58, 72, 84, 60, 92, 68, 80]}\n          height={140}\n          barWidth={26}\n          gap={10}\n          color=\"#a1a1aa\"\n          stagger={2}\n        />\n      </CardContent>\n    </Card>\n  </CategoryFrame>\n);\n\n// Themes — the same card, hard-flipping between dark and light.\nconst ThemeCard: React.FC = () => (\n  <Card className=\"w-[380px]\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>How you want to be notified</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center justify-between\">\n        <Label htmlFor=\"cat-push\">Push notifications</Label>\n        <Switch id=\"cat-push\" defaultChecked />\n      </div>\n      <div className=\"flex items-center justify-between\">\n        <Label htmlFor=\"cat-digest\">Weekly digest</Label>\n        <Switch id=\"cat-digest\" />\n      </div>\n    </CardContent>\n  </Card>\n);\n\nconst ThemesBeat: React.FC = () => {\n  const frame = useCurrentFrame();\n  // Two hard theme flips — dark → light → dark. The flip IS the beat.\n  const phase = frame >= 20 && frame < 38 ? \"light\" : \"dark\";\n\n  return (\n    <CategoryFrame label=\"Themes\" themed={false}>\n      <div className={phase === \"light\" ? \"\" : \"dark\"}>\n        <ThemeCard />\n      </div>\n    </CategoryFrame>\n  );\n};\n\n// Colors — the monochrome ramps the system ships with: gray, zinc, neutral,\n// stone × 11 shades (50→950) in docs order, values verbatim from tailwindcss\n// v4's theme.css.\nconst MONO_RAMPS: string[][] = [\n  // gray\n  [\"oklch(98.5% 0.002 247.839)\", \"oklch(96.7% 0.003 264.542)\", \"oklch(92.8% 0.006 264.531)\", \"oklch(87.2% 0.01 258.338)\", \"oklch(70.7% 0.022 261.325)\", \"oklch(55.1% 0.027 264.364)\", \"oklch(44.6% 0.03 256.802)\", \"oklch(37.3% 0.034 259.733)\", \"oklch(27.8% 0.033 256.848)\", \"oklch(21% 0.034 264.665)\", \"oklch(13% 0.028 261.692)\"],\n  // zinc\n  [\"oklch(98.5% 0 0)\", \"oklch(96.7% 0.001 286.375)\", \"oklch(92% 0.004 286.32)\", \"oklch(87.1% 0.006 286.286)\", \"oklch(70.5% 0.015 286.067)\", \"oklch(55.2% 0.016 285.938)\", \"oklch(44.2% 0.017 285.786)\", \"oklch(37% 0.013 285.805)\", \"oklch(27.4% 0.006 286.033)\", \"oklch(21% 0.006 285.885)\", \"oklch(14.1% 0.005 285.823)\"],\n  // neutral\n  [\"oklch(98.5% 0 0)\", \"oklch(97% 0 0)\", \"oklch(92.2% 0 0)\", \"oklch(87% 0 0)\", \"oklch(70.8% 0 0)\", \"oklch(55.6% 0 0)\", \"oklch(43.9% 0 0)\", \"oklch(37.1% 0 0)\", \"oklch(26.9% 0 0)\", \"oklch(20.5% 0 0)\", \"oklch(14.5% 0 0)\"],\n  // stone\n  [\"oklch(98.5% 0.001 106.423)\", \"oklch(97% 0.001 106.424)\", \"oklch(92.3% 0.003 48.717)\", \"oklch(86.9% 0.005 56.366)\", \"oklch(70.9% 0.01 56.259)\", \"oklch(55.3% 0.013 58.071)\", \"oklch(44.4% 0.011 73.639)\", \"oklch(37.4% 0.01 67.558)\", \"oklch(26.8% 0.007 34.298)\", \"oklch(21.6% 0.006 56.043)\", \"oklch(14.7% 0.004 49.25)\"],\n];\n\nconst ColorsBeat: React.FC = () => {\n  const frame = useCurrentFrame();\n  return (\n    <CategoryFrame label=\"Colors\">\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 5 }}>\n        {MONO_RAMPS.map((ramp, row) => (\n          <div key={row} style={{ display: \"flex\", gap: 5 }}>\n            {ramp.map((color, col) => {\n              const d = 4 + row * 0.9 + col;\n              const enter = interpolate(frame, [d, d + 9], [0, 1], {\n                ...clampOpts,\n                easing: Easing.out(Easing.cubic),\n              });\n              return (\n                <div\n                  key={col}\n                  style={{\n                    width: 56,\n                    height: 56,\n                    borderRadius: 4,\n                    background: color,\n                    border: \"1px solid rgba(250,250,250,0.08)\",\n                    opacity: enter,\n                    transform: `translateY(${(1 - enter) * 10}px)`,\n                  }}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </CategoryFrame>\n  );\n};\n\nconst BEATS: { label: string; dur: number; node: React.ReactNode }[] = [\n  { label: \"Blocks\", dur: BLOCKS_BEAT, node: <BlocksBeat /> },\n  { label: \"Charts\", dur: CAT_BEAT, node: <ChartsBeat /> },\n  { label: \"Themes\", dur: CAT_BEAT, node: <ThemesBeat /> },\n  { label: \"Colors\", dur: CAT_BEAT, node: <ColorsBeat /> },\n];\n\nexport const categorySceneDuration = (tailOverlap: number) =>\n  BEATS.reduce((acc, b) => acc + b.dur, 0) + tailOverlap;\n\nexport const CategoriesScene: React.FC<{ tailOverlap: number }> = ({\n  tailOverlap,\n}) => (\n  <AbsoluteFill>\n    <Series>\n      {BEATS.map((beat, i) => (\n        <Series.Sequence\n          key={beat.label}\n          durationInFrames={\n            i === BEATS.length - 1 ? beat.dur + tailOverlap : beat.dur\n          }\n        >\n          {beat.node}\n        </Series.Sequence>\n      ))}\n    </Series>\n  </AbsoluteFill>\n);\n",
      "type": "registry:component",
      "target": "demos/introducing-shadcn/categories.tsx"
    },
    {
      "path": "src/demos/introducing-shadcn/field.tsx",
      "content": "import React from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport {\n  Calculator,\n  Calendar as CalendarIcon,\n  Check,\n  CreditCard,\n  Send,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\";\n\nimport { Avatar, AvatarFallback } from \"@/demos/_ui/avatar\";\nimport { Badge } from \"@/demos/_ui/badge\";\nimport { Button } from \"@/demos/_ui/button\";\nimport { Calendar } from \"@/demos/_ui/calendar\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/demos/_ui/card\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/demos/_ui/command\";\nimport { Input } from \"@/demos/_ui/input\";\nimport { Label } from \"@/demos/_ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/demos/_ui/radio-group\";\nimport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n} from \"@/demos/_ui/select\";\nimport { Separator } from \"@/demos/_ui/separator\";\nimport { Slider } from \"@/demos/_ui/slider\";\nimport { Switch } from \"@/demos/_ui/switch\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/demos/_ui/table\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/demos/_ui/tabs\";\nimport { Textarea } from \"@/demos/_ui/textarea\";\nimport { Toggle } from \"@/demos/_ui/toggle\";\nimport { Progress } from \"@/demos/_ui/progress\";\n\nconst clampOpts = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\n// ---------------------------------------------------------------------------\n// A tiny deterministic bar chart (used by the Move Goal card here and by the\n// Charts beat in the category montage).\n// ---------------------------------------------------------------------------\nexport const MiniBars: React.FC<{\n  values: number[];\n  height: number;\n  barWidth?: number;\n  gap?: number;\n  color?: string;\n  stagger?: number;\n}> = ({ values, height, barWidth = 14, gap = 8, color = \"#52525b\", stagger = 2 }) => {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n  const max = Math.max(...values);\n  return (\n    <div style={{ display: \"flex\", alignItems: \"flex-end\", gap, height }}>\n      {values.map((v, i) => {\n        const grow = spring({\n          frame: frame - i * stagger,\n          fps,\n          config: { damping: 14, stiffness: 120, mass: 0.8 },\n        });\n        return (\n          <div\n            key={i}\n            style={{\n              width: barWidth,\n              height: Math.max(3, (v / max) * height * grow),\n              borderRadius: 4,\n              background: color,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// The component field — the ui.shadcn.com homepage cards, packed tight.\n// ---------------------------------------------------------------------------\nconst SELECTED_DAY = new Date(2026, 6, 3);\n\nconst CreateAccountCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Create an account</CardTitle>\n      <CardDescription>Enter your email below to get started</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Button variant=\"outline\">GitHub</Button>\n        <Button variant=\"outline\">Google</Button>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <Separator className=\"flex-1\" />\n        <span className=\"text-xs text-muted-foreground\">or continue with</span>\n        <Separator className=\"flex-1\" />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"fld-email\">Email</Label>\n        <Input id=\"fld-email\" placeholder=\"m@example.com\" readOnly />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"fld-pass\">Password</Label>\n        <Input id=\"fld-pass\" type=\"password\" defaultValue=\"password\" readOnly />\n      </div>\n      <Button className=\"w-full\">Create account</Button>\n    </CardContent>\n  </Card>\n);\n\nconst PaymentCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Payment method</CardTitle>\n      <CardDescription>All transactions are secure</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"fld-card-name\">Name</Label>\n        <Input id=\"fld-card-name\" defaultValue=\"First Last\" readOnly />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"fld-card-num\">Card number</Label>\n        <div className=\"relative\">\n          <Input id=\"fld-card-num\" defaultValue=\"1234 1234 1234 1234\" readOnly />\n          <CreditCard className=\"absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n        </div>\n      </div>\n      <div className=\"grid grid-cols-3 gap-3\">\n        <Input defaultValue=\"06/28\" readOnly />\n        <Input defaultValue=\"CVC\" readOnly />\n        <Input defaultValue=\"90210\" readOnly />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button className=\"w-full\">Save</Button>\n    </CardFooter>\n  </Card>\n);\n\nconst TeamCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Team members</CardTitle>\n      <CardDescription>Invite your team to collaborate.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      {[\n        { initials: \"SD\", name: \"Sofia Davis\", email: \"m@example.com\", role: \"Owner\" },\n        { initials: \"JL\", name: \"Jackson Lee\", email: \"p@example.com\", role: \"Member\" },\n        { initials: \"IN\", name: \"Isabella Nguyen\", email: \"i@example.com\", role: \"Member\" },\n      ].map((m) => (\n        <div key={m.initials} className=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarFallback>{m.initials}</AvatarFallback>\n          </Avatar>\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm\">{m.name}</span>\n            <span className=\"text-xs text-muted-foreground\">{m.email}</span>\n          </div>\n          <Button variant=\"outline\" size=\"sm\" className=\"ml-auto\">\n            {m.role}\n          </Button>\n        </div>\n      ))}\n    </CardContent>\n  </Card>\n);\n\nconst ChatCard = (\n  <Card>\n    <CardHeader>\n      <div className=\"flex items-center gap-3\">\n        <Avatar>\n          <AvatarFallback>SD</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col\">\n          <CardTitle>Sofia Davis</CardTitle>\n          <CardDescription>m@example.com</CardDescription>\n        </div>\n      </div>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-2\">\n      <div className=\"max-w-[85%] self-start rounded-lg bg-muted px-3 py-2 text-sm\">\n        Hi, how can I help you today?\n      </div>\n      <div className=\"max-w-[85%] self-end rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground\">\n        Hey, I&apos;m having trouble with my account.\n      </div>\n      <div className=\"max-w-[85%] self-start rounded-lg bg-muted px-3 py-2 text-sm\">\n        What seems to be the problem?\n      </div>\n      <div className=\"max-w-[85%] self-end rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground\">\n        I can&apos;t log in.\n      </div>\n    </CardContent>\n    <CardFooter className=\"gap-2\">\n      <Input placeholder=\"Type your message...\" readOnly className=\"flex-1\" />\n      <Button size=\"icon\">\n        <Send />\n      </Button>\n    </CardFooter>\n  </Card>\n);\n\nconst MoveGoalCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Move goal</CardTitle>\n      <CardDescription>Set your daily activity goal.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-4xl tracking-normal\">350</span>\n        <span className=\"text-xs text-muted-foreground\">calories/day</span>\n      </div>\n      <MiniBars\n        values={[40, 70, 52, 88, 60, 76, 96, 58, 70, 82, 64, 90]}\n        height={64}\n        barWidth={16}\n        gap={7}\n        color=\"#3f3f46\"\n      />\n    </CardContent>\n    <CardFooter>\n      <Button variant=\"outline\" className=\"w-full\">\n        Set goal\n      </Button>\n    </CardFooter>\n  </Card>\n);\n\nconst CalendarCard = (\n  <Calendar\n    mode=\"single\"\n    selected={SELECTED_DAY}\n    month={SELECTED_DAY}\n    today={SELECTED_DAY}\n    className=\"w-full rounded-xl border border-border bg-card [&_td_button]:text-white [&_td_button[data-selected-single=true]]:text-zinc-950\"\n  />\n);\n\nconst CookieCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Cookie settings</CardTitle>\n      <CardDescription>Manage your cookie settings here.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-5\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <Label htmlFor=\"fld-necessary\">Strictly necessary</Label>\n          <span className=\"text-xs text-muted-foreground\">\n            Essential for the website to function.\n          </span>\n        </div>\n        <Switch id=\"fld-necessary\" defaultChecked />\n      </div>\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <Label htmlFor=\"fld-functional\">Functional cookies</Label>\n          <span className=\"text-xs text-muted-foreground\">\n            Personalized features and content.\n          </span>\n        </div>\n        <Switch id=\"fld-functional\" />\n      </div>\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <Label htmlFor=\"fld-perf\">Performance cookies</Label>\n          <span className=\"text-xs text-muted-foreground\">\n            Help us improve the website.\n          </span>\n        </div>\n        <Switch id=\"fld-perf\" defaultChecked />\n      </div>\n    </CardContent>\n  </Card>\n);\n\nconst ReportCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Report an issue</CardTitle>\n      <CardDescription>What area are you having problems with?</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"grid grid-cols-2 gap-3\">\n        <div className=\"flex flex-col gap-2\">\n          <Label>Area</Label>\n          <Select defaultValue=\"billing\">\n            <SelectTrigger className=\"w-full\">\n              <SelectValue placeholder=\"Billing\" />\n            </SelectTrigger>\n          </Select>\n        </div>\n        <div className=\"flex flex-col gap-2\">\n          <Label>Severity</Label>\n          <Select defaultValue=\"s2\">\n            <SelectTrigger className=\"w-full\">\n              <SelectValue placeholder=\"Severity 2\" />\n            </SelectTrigger>\n          </Select>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"fld-subject\">Subject</Label>\n        <Input id=\"fld-subject\" defaultValue=\"I need help with...\" readOnly />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"fld-desc\">Description</Label>\n        <Textarea\n          id=\"fld-desc\"\n          placeholder=\"Please include all information relevant to your issue.\"\n          readOnly\n        />\n      </div>\n    </CardContent>\n    <CardFooter className=\"justify-end gap-2\">\n      <Button variant=\"ghost\">Cancel</Button>\n      <Button>Submit</Button>\n    </CardFooter>\n  </Card>\n);\n\nconst ShareCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Share this document</CardTitle>\n      <CardDescription>Anyone with the link can view.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"flex gap-2\">\n        <Input defaultValue=\"http://example.com/link/to/document\" readOnly className=\"flex-1\" />\n        <Button variant=\"secondary\">Copy</Button>\n      </div>\n      <Separator />\n      <div className=\"flex items-center gap-3\">\n        <Avatar>\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col\">\n          <span className=\"text-sm\">Olivia Martin</span>\n          <span className=\"text-xs text-muted-foreground\">m@example.com</span>\n        </div>\n        <Button variant=\"outline\" size=\"sm\" className=\"ml-auto\">\n          Can edit\n        </Button>\n      </div>\n    </CardContent>\n  </Card>\n);\n\nconst CommandCard = (\n  <Command className=\"rounded-xl border border-border\" value=\"Calendar\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem>\n          <CalendarIcon />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem>\n          <Smile />\n          <span>Search emoji</span>\n        </CommandItem>\n        <CommandItem>\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem>\n          <User />\n          <span>Profile</span>\n        </CommandItem>\n        <CommandItem>\n          <CreditCard />\n          <span>Billing</span>\n        </CommandItem>\n        <CommandItem>\n          <Settings />\n          <span>Settings</span>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n);\n\nconst PlanCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Upgrade your plan</CardTitle>\n      <CardDescription>Pick what fits your team.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <RadioGroup defaultValue=\"pro\" className=\"flex flex-col gap-3\">\n        <div className=\"flex items-center gap-3\">\n          <RadioGroupItem value=\"hobby\" id=\"fld-hobby\" />\n          <Label htmlFor=\"fld-hobby\">Hobby</Label>\n          <span className=\"ml-auto text-sm text-muted-foreground\">$0</span>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          <RadioGroupItem value=\"pro\" id=\"fld-pro\" />\n          <Label htmlFor=\"fld-pro\">Pro</Label>\n          <span className=\"ml-auto text-sm text-muted-foreground\">$20</span>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          <RadioGroupItem value=\"team\" id=\"fld-team\" />\n          <Label htmlFor=\"fld-team\">Team</Label>\n          <span className=\"ml-auto text-sm text-muted-foreground\">$100</span>\n        </div>\n      </RadioGroup>\n    </CardContent>\n    <CardFooter>\n      <Button className=\"w-full\">\n        <Check /> Upgrade\n      </Button>\n    </CardFooter>\n  </Card>\n);\n\nconst ExerciseCard = (\n  <Card>\n    <CardHeader>\n      <CardDescription>Exercise minutes</CardDescription>\n      <CardTitle className=\"text-3xl\">1,284</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <MiniBars\n        values={[38, 62, 44, 78, 52, 70, 88, 58, 72, 84, 60, 92]}\n        height={110}\n        barWidth={22}\n        gap={8}\n        color=\"#52525b\"\n      />\n    </CardContent>\n  </Card>\n);\n\nconst PaymentsTableCard = (\n  <Card className=\"py-4\">\n    <CardContent className=\"px-4\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell>INV001</TableCell>\n            <TableCell>Paid</TableCell>\n            <TableCell className=\"text-right\">$250.00</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>INV002</TableCell>\n            <TableCell>Pending</TableCell>\n            <TableCell className=\"text-right\">$150.00</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>INV003</TableCell>\n            <TableCell>Paid</TableCell>\n            <TableCell className=\"text-right\">$350.00</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </CardContent>\n  </Card>\n);\n\nconst TabsCard = (\n  <Tabs defaultValue=\"account\" className=\"w-full\">\n    <TabsList className=\"w-full\">\n      <TabsTrigger value=\"account\">Account</TabsTrigger>\n      <TabsTrigger value=\"password\">Password</TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>Make changes to your account.</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-2\">\n          <Label htmlFor=\"fld-tab-name\">Name</Label>\n          <Input id=\"fld-tab-name\" defaultValue=\"shadcn\" readOnly />\n        </CardContent>\n      </Card>\n    </TabsContent>\n  </Tabs>\n);\n\nconst StatusCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Deployment status</CardTitle>\n      <CardDescription>Your latest builds at a glance.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm\">production</span>\n        <Badge>Ready</Badge>\n      </div>\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm\">preview</span>\n        <Badge variant=\"secondary\">Building</Badge>\n      </div>\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm\">staging</span>\n        <Badge variant=\"outline\">Queued</Badge>\n      </div>\n    </CardContent>\n  </Card>\n);\n\nconst PlayerCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Now playing</CardTitle>\n      <CardDescription>Adjust playback and levels.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-5\">\n      <Slider defaultValue={[60]} max={100} />\n      <Progress value={42} />\n      <div className=\"flex items-center gap-2\">\n        <Toggle defaultPressed aria-label=\"Shuffle\">\n          Shuffle\n        </Toggle>\n        <Toggle aria-label=\"Repeat\">Repeat</Toggle>\n        <Toggle aria-label=\"Mute\">Mute</Toggle>\n      </div>\n    </CardContent>\n  </Card>\n);\n\nconst StorageCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Storage</CardTitle>\n      <CardDescription>82.4 GB of 100 GB used</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <Progress value={82} />\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-muted-foreground\">Documents</span>\n        <span className=\"text-sm\">24.1 GB</span>\n      </div>\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-muted-foreground\">Media</span>\n        <span className=\"text-sm\">51.6 GB</span>\n      </div>\n    </CardContent>\n  </Card>\n);\n\nconst FeedbackCard = (\n  <Card>\n    <CardHeader>\n      <CardTitle>Send feedback</CardTitle>\n      <CardDescription>Help us improve your experience.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <Textarea placeholder=\"Tell us what you think...\" readOnly />\n      <div className=\"flex justify-end\">\n        <Button size=\"sm\">Send</Button>\n      </div>\n    </CardContent>\n  </Card>\n);\n\n// Order matters: CSS columns fill left to right, so the first cards land in\n// the leftmost columns where the camera opens. The tail cards keep every\n// column tall enough that the end of the glide never sees an empty bottom.\nconst FIELD_CARDS: React.ReactNode[] = [\n  CreateAccountCard,\n  MoveGoalCard,\n  ChatCard,\n  CalendarCard,\n  CommandCard,\n  ExerciseCard,\n  PaymentCard,\n  CookieCard,\n  TeamCard,\n  PaymentsTableCard,\n  ReportCard,\n  ShareCard,\n  PlanCard,\n  TabsCard,\n  StatusCard,\n  PlayerCard,\n  StorageCard,\n  FeedbackCard,\n];\n\n// ---------------------------------------------------------------------------\n// Camera: no pull-back — one continuous diagonal glide across the packed\n// wall, top-left to bottom-right, with a slight push-in. The plane is a\n// 4-column CSS-columns masonry, ~1720px wide — dense, homepage-like.\n// ---------------------------------------------------------------------------\nconst PLANE_W = 1720;\nconst PLANE_H = 1620;\n\n// One single-segment glide: no keyframe joints mid-flight, so the camera\n// never halts — it is still moving when the swirl cover takes over at ~4s.\nconst CAM_T = [0, 224];\nconst CAM_X = [620, 1105];\nconst CAM_Y = [360, 900];\nconst CAM_S = [1.02, 1.1];\n\nconst camEasing = Easing.inOut(Easing.cubic);\n\nexport const FieldScene: React.FC = () => {\n  const frame = useCurrentFrame();\n\n  const px = interpolate(frame, CAM_T, CAM_X, {\n    ...clampOpts,\n    easing: camEasing,\n  });\n  const py = interpolate(frame, CAM_T, CAM_Y, {\n    ...clampOpts,\n    easing: camEasing,\n  });\n  const s = interpolate(frame, CAM_T, CAM_S, {\n    ...clampOpts,\n    easing: camEasing,\n  });\n  const rotate = interpolate(frame, [0, 224], [-1.0, 0.4], clampOpts);\n\n  const tx = 640 - px * s;\n  const ty = 360 - py * s;\n\n  return (\n    <AbsoluteFill style={{ overflow: \"hidden\" }}>\n      <AbsoluteFill style={{ transform: `rotate(${rotate}deg)` }}>\n        <div\n          className=\"dark **:font-normal!\"\n          style={{\n            position: \"absolute\",\n            width: PLANE_W,\n            transform: `translate(${tx}px, ${ty}px) scale(${s})`,\n            transformOrigin: \"0 0\",\n          }}\n        >\n          <div className=\"columns-4 gap-5 p-5\">\n            {FIELD_CARDS.map((node, i) => {\n              // Cards assemble as a quick left-to-right wave: the opening\n              // close-up is already set, the far columns land before the\n              // pull-back reveals them.\n              const d = 2 + i * 5;\n              const enter = interpolate(frame, [d, d + 12], [0, 1], {\n                ...clampOpts,\n                easing: Easing.out(Easing.cubic),\n              });\n              return (\n                <div\n                  key={i}\n                  className=\"mb-5 break-inside-avoid\"\n                  style={{\n                    opacity: enter,\n                    transform: `translateY(${(1 - enter) * 22}px) scale(${\n                      0.97 + enter * 0.03\n                    })`,\n                  }}\n                >\n                  {node}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </AbsoluteFill>\n    </AbsoluteFill>\n  );\n};\n\nexport { PLANE_H };\nexport const S_FIELD = 224;\n",
      "type": "registry:component",
      "target": "demos/introducing-shadcn/field.tsx"
    },
    {
      "path": "src/demos/introducing-shadcn/index.tsx",
      "content": "import React from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  Sequence,\n  Series,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport {\n  TransitionSeries,\n  linearTiming,\n  type TransitionPresentation,\n  type TransitionPresentationComponentProps,\n} from \"@remotion/transitions\";\nimport { loadFont as loadSans } from \"@remotion/google-fonts/Geist\";\nimport { loadFont as loadMono } from \"@remotion/google-fonts/GeistMono\";\n\nimport { ScaleDownFade } from \"@/components/remocn/scale-down-fade\";\nimport { ShortSlideRight } from \"@/components/remocn/short-slide-right\";\nimport { KineticCenterBuild } from \"@/components/remocn/kinetic-center-build\";\nimport { LineByLineSlide } from \"@/components/remocn/line-by-line-slide\";\nimport { whipPan } from \"@/components/remocn/whip-pan\";\n\nimport { ShaderSimplexNoise } from \"@/components/remocn/shader-simplex-noise\";\nimport { ShaderSwirl } from \"@/components/remocn/shader-swirl\";\nimport { ShaderDithering } from \"@/components/remocn/shader-dithering\";\nimport { ShaderSmokeRing } from \"@/components/remocn/shader-smoke-ring\";\n\nimport { Button } from \"@/demos/_ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/demos/_ui/card\";\nimport { Input } from \"@/demos/_ui/input\";\nimport { Label } from \"@/demos/_ui/label\";\nimport { Switch } from \"@/demos/_ui/switch\";\n\nimport { FieldScene, S_FIELD } from \"./field\";\nimport { CategoriesScene, categorySceneDuration } from \"./categories\";\nimport { VideoScopeStyle } from \"@/demos/_ui/video-scope\";\n\n// Geist regular only — the whole video never goes above weight 400.\nconst { fontFamily: SANS_FAMILY } = loadSans(\"normal\", {\n  subsets: [\"latin\"],\n  weights: [\"400\"],\n});\nconst { fontFamily: MONO_FAMILY } = loadMono(\"normal\", {\n  subsets: [\"latin\"],\n  weights: [\"400\"],\n});\n\nconst SANS =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO = `${MONO_FAMILY}, ui-monospace, SFMono-Regular, monospace`;\n\n// shadcn's own monochrome: zinc-950 canvas, ink foreground. The only color in\n// the video lives inside shader backgrounds — muted tones sampled from\n// shadcn's X avatar (deep plum, dark navy, dusty rose, dusty blue).\nconst ZINC = \"#09090b\";\nconst INK = \"#fafafa\";\nconst MUTED = \"rgba(250,250,250,0.62)\";\nconst FAINT = \"rgba(250,250,250,0.4)\";\n\nconst PLUM = \"#3d2547\";\nconst ROSE = \"#6b4054\";\n\nconst clampOpts = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\n\n// ---------------------------------------------------------------------------\n// Scene timings (frames @ 30fps). Transitions overlap.\n// ---------------------------------------------------------------------------\nconst S_MEET = 130; //     \"This is shadcn/ui\"\nconst S_TAGLINE = 76; //   \"Beautifully designed components\"\nconst S_CREED_A = 76; //   \"Not a component library\"\nconst S_CREED_B = 96; //   kinetic \"How you build your own\"\nconst S_PILLARS = 104; //  three pillar lines\nconst S_INSTALL_TITLE = 70; // \"Any component, one command\"\nconst S_INSTALL_CMD = 150; //  typed command + 3D name rolodex\nconst S_PRESET_TITLE = 66; //  \"Your whole design system, one preset\"\nconst S_CREATE = 200; //   shadcn create: settings flip, the preview reacts\nconst S_PRESET = 176; //   init --preset: the code flips, the UI re-themes live\nconst S_SWITCH = 64; //    \"Switch it any time\"\nconst S_YOURS = 70; //     \"And the code is yours\"\nconst S_APPS = 156; //     1,000,000 apps: dive → wheel spins up → pan → whip out\nconst WHO_BEAT = 24; //    one builder-name hard cut\nconst S_WHO = WHO_BEAT * 3 + 56; // Startups / YC / Fortune 500s / everyone\nconst S_ECO = 72; //       \"A massive ecosystem — and room for you to build\"\nconst S_BEST = 58; //      \"The best part?\"\nconst S_NEEDS = 96; //     kinetic \"Everyone needs UI\"\nconst S_OUTRO = 150; //    smoke ring blooms → wordmark + motto\n\nconst T_SWIRL = 104; //    shader-swirl cover (twist 1→0 → hold → 0→1)\nconst T_DITHER = 40; //    dusty-rose dither dissolve (held mid-frame)\nconst T_X = 14; //         crossfade\nconst T_WHIP = 18; //      whip-pan carrying the apps pan into the next scene\nconst T_BLUR = 16; //      blur crossfade\n\n// Readability scrim over a backdrop shader.\nconst Scrim: React.FC<{ strength?: number }> = ({ strength = 1 }) => (\n  <AbsoluteFill\n    style={{\n      background: `radial-gradient(120% 120% at 50% 42%, rgba(9,9,11,${\n        0.3 * strength\n      }) 0%, rgba(9,9,11,${0.78 * strength}) 100%)`,\n    }}\n  />\n);\n\n// ===========================================================================\n// Scene 2 — This is shadcn/ui. Static on entry (the swirl cover's exit\n// reveals it with a z-axis scale), then it plays its own exit so the tagline\n// starts on an empty canvas.\n// ===========================================================================\nconst MeetScene: React.FC = () => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  const exitP = interpolate(\n    frame,\n    [durationInFrames - 18, durationInFrames - 2],\n    [0, 1],\n    { ...clampOpts, easing: Easing.in(Easing.cubic) },\n  );\n\n  return (\n    <AbsoluteFill style={{ alignItems: \"center\", justifyContent: \"center\" }}>\n      <span\n        style={{\n          fontFamily: SANS,\n          fontWeight: 400,\n          fontSize: 74,\n          color: INK,\n          opacity: 1 - exitP,\n          transform: `translateY(${exitP * -10}px) scale(${1 - exitP * 0.05})`,\n          filter: `blur(${exitP * 6}px)`,\n        }}\n      >\n        This is shadcn/ui\n      </span>\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 3 — Tagline. Glides in only after the name has fully exited.\n// ===========================================================================\nconst TaglineScene: React.FC = () => (\n  <AbsoluteFill>\n    <ShortSlideRight\n      text=\"Beautifully designed components\"\n      fontSize={48}\n      fontWeight={400}\n      color={INK}\n    />\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scene 4 — The creed, first half. The negation lands solo.\n// ===========================================================================\nconst CreedAScene: React.FC = () => (\n  <AbsoluteFill>\n    <Sequence from={20} durationInFrames={56}>\n      <ScaleDownFade\n        text=\"Not a component library\"\n        fontSize={54}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scene 5 — The creed, second half. The answer assembles word by word.\n// ===========================================================================\nconst CreedBScene: React.FC = () => (\n  <AbsoluteFill>\n    <Sequence from={6}>\n      <KineticCenterBuild\n        text=\"How you build your own\"\n        fontSize={62}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\n// The category montage lives in ./categories — real shadcn/ui blocks,\n// charts, theme flips, and the full Tailwind palette, hard-cut like a\n// montage. The last beat absorbs the dither overlap.\nconst S_CATEGORIES = categorySceneDuration(T_DITHER);\n\n// ===========================================================================\n// Scene 7 — The pillars. Three claims accumulate as a block.\n// ===========================================================================\nconst PillarsScene: React.FC = () => (\n  <AbsoluteFill>\n    <Sequence from={24}>\n      <LineByLineSlide\n        text={\n          \"Accessible by default\\nComposable by design\\nOpen code, always\"\n        }\n        fontSize={50}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scene 8a — Install title. Its own typographic beat; plays its own exit so\n// the command scene starts on an empty canvas.\n// ===========================================================================\nconst InstallTitleScene: React.FC = () => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  const exitP = interpolate(\n    frame,\n    [durationInFrames - 18, durationInFrames - 2],\n    [0, 1],\n    { ...clampOpts, easing: Easing.in(Easing.cubic) },\n  );\n\n  return (\n    <AbsoluteFill\n      style={{\n        opacity: 1 - exitP,\n        transform: `translateY(${exitP * -10}px) scale(${1 - exitP * 0.05})`,\n        filter: `blur(${exitP * 6}px)`,\n      }}\n    >\n      <ShortSlideRight\n        text=\"Any component, one command\"\n        fontSize={50}\n        fontWeight={400}\n        color={INK}\n      />\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 8b — The command. It types itself; once typing lands, the component\n// name becomes a 3D rolodex flipping through the registry — any component,\n// same command.\n// ===========================================================================\nconst CMD = \"npx shadcn add \";\nconst PKG_NAMES = [\"button\", \"dialog\", \"command\", \"tabs\", \"chart-area\"];\nconst SIZER = PKG_NAMES.reduce((a, b) => (b.length > a.length ? b : a));\nconst CMD_START = 10;\nconst FLIP_START = 52; // first flip, after the typed command has settled\nconst FLIP_PER = 20; //  one name every 20 frames\nconst FLIP_DUR = 10; //  the 3D flip itself\n\nconst InstallCmdScene: React.FC = () => {\n  const frame = useCurrentFrame();\n\n  const full = CMD + PKG_NAMES[0];\n  const typed = Math.max(\n    0,\n    Math.min(full.length, Math.floor((frame - CMD_START) * 1.5)),\n  );\n  const visible = full.slice(0, typed);\n  const cmdOpacity = interpolate(\n    frame,\n    [CMD_START - 4, CMD_START],\n    [0, 1],\n    clampOpts,\n  );\n  const typingDone = typed >= full.length;\n  const caretOn = typingDone ? Math.floor(frame / 15) % 2 === 0 : true;\n  // The caret leaves just before the rolodex starts spinning.\n  const caretOpacity = interpolate(\n    frame,\n    [FLIP_START - 12, FLIP_START - 4],\n    [1, 0],\n    clampOpts,\n  );\n  const flipping = frame >= FLIP_START - 4;\n\n  return (\n    <AbsoluteFill\n      style={{\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        opacity: cmdOpacity,\n      }}\n    >\n      <span style={{ fontFamily: MONO, fontSize: 28, color: MUTED }}>\n        <span style={{ color: FAINT }}>$ </span>\n        <span>{visible.slice(0, Math.min(typed, CMD.length))}</span>\n        <span\n          style={{\n            display: \"inline-block\",\n            width: `${SIZER.length}ch`,\n            textAlign: \"left\",\n            position: \"relative\",\n            verticalAlign: \"bottom\",\n            perspective: 420,\n            color: INK,\n          }}\n        >\n          {/* Invisible sizer keeps the container's height and baseline. */}\n          <span style={{ visibility: \"hidden\" }}>{SIZER}</span>\n          {!flipping ? (\n            <span\n              style={{\n                position: \"absolute\",\n                left: 0,\n                top: 0,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {typed > CMD.length ? visible.slice(CMD.length) : \"\"}\n              <span\n                style={{\n                  display: \"inline-block\",\n                  width: 14,\n                  height: 28,\n                  marginLeft: 3,\n                  verticalAlign: \"-4px\",\n                  background: caretOn ? MUTED : \"transparent\",\n                  opacity: caretOpacity,\n                }}\n              />\n            </span>\n          ) : (\n            PKG_NAMES.map((name, i) => {\n              // The outgoing name clears first; the incoming one follows\n              // half a flip later, so the two never sit on top of each other.\n              const inStart = FLIP_START + (i - 1) * FLIP_PER + 5;\n              const outStart = FLIP_START + i * FLIP_PER;\n\n              let rotate = 0;\n              let y = 0;\n              let opacity = 1;\n\n              if (i > 0) {\n                const pIn = interpolate(\n                  frame,\n                  [inStart, inStart + FLIP_DUR],\n                  [0, 1],\n                  { ...clampOpts, easing: Easing.out(Easing.cubic) },\n                );\n                rotate = (1 - pIn) * -85;\n                y = (1 - pIn) * 20;\n                opacity = pIn;\n              }\n              if (i < PKG_NAMES.length - 1) {\n                const pOut = interpolate(\n                  frame,\n                  [outStart, outStart + FLIP_DUR],\n                  [0, 1],\n                  { ...clampOpts, easing: Easing.in(Easing.cubic) },\n                );\n                rotate += pOut * 85;\n                y -= pOut * 20;\n                opacity *= 1 - pOut;\n              }\n              if (opacity <= 0.001) return null;\n\n              return (\n                <span\n                  key={name}\n                  style={{\n                    position: \"absolute\",\n                    left: 0,\n                    top: 0,\n                    whiteSpace: \"nowrap\",\n                    opacity,\n                    transform: `translateY(${y}px) rotateX(${rotate}deg)`,\n                    transformOrigin: \"50% 50%\",\n                    backfaceVisibility: \"hidden\",\n                  }}\n                >\n                  {name}\n                </span>\n              );\n            })\n          )}\n        </span>\n      </span>\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 8c — Preset title. Same typographic setup as the install title:\n// glides in, holds, plays its own exit.\n// ===========================================================================\nconst PresetTitleScene: React.FC = () => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  const exitP = interpolate(\n    frame,\n    [durationInFrames - 18, durationInFrames - 2],\n    [0, 1],\n    { ...clampOpts, easing: Easing.in(Easing.cubic) },\n  );\n\n  return (\n    <AbsoluteFill\n      style={{\n        opacity: 1 - exitP,\n        transform: `translateY(${exitP * -10}px) scale(${1 - exitP * 0.05})`,\n        filter: `blur(${exitP * 6}px)`,\n      }}\n    >\n      <ShortSlideRight\n        text=\"Your whole design system, one preset\"\n        fontSize={46}\n        fontWeight={400}\n        color={INK}\n      />\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Shared preview card — the same real components in both preset beats: the\n// builder shapes this card, then `init --preset` re-themes it.\n// ===========================================================================\nconst PresetPreviewCard: React.FC = () => (\n  <Card className=\"w-[400px]\">\n    <CardHeader>\n      <CardTitle>Welcome back</CardTitle>\n      <CardDescription>Sign in to your account</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"preset-email\">Email</Label>\n        <Input id=\"preset-email\" placeholder=\"m@example.com\" readOnly />\n      </div>\n      <div className=\"flex items-center justify-between\">\n        <Label htmlFor=\"preset-remember\">Remember me</Label>\n        <Switch id=\"preset-remember\" defaultChecked />\n      </div>\n      <Button className=\"w-full\">Sign in</Button>\n    </CardContent>\n  </Card>\n);\n\n// ===========================================================================\n// Scene 8d — shadcn create. The builder from ui.shadcn.com/create: a settings\n// panel — style, base color, theme, font — next to a live preview. One\n// setting flips at a time and the same components reshape in response:\n// Lyra sharpens the corners, stone warms the grays, dark inverts, mono\n// swaps the type. Everything stays monochrome.\n// ===========================================================================\nconst CREATE_BEAT_STYLE = 34; //  Vega → Lyra (boxy and sharp)\nconst CREATE_BEAT_COLOR = 72; //  zinc → stone\nconst CREATE_BEAT_THEME = 110; // light → dark\nconst CREATE_BEAT_FONT = 148; //  Geist → Geist Mono\nconst CREATE_CODE_IN = 158; //   the choices become a preset code\n\nconst TILE_BORDER = \"1px solid rgba(250,250,250,0.14)\";\n\n// One settings tile from the create panel: muted label on top, the current\n// value large below, an icon on the right. The value flips in place — old\n// up and out, new up and in — when its beat hits.\nconst CreateTile: React.FC<{\n  label: string;\n  before: string;\n  after: string;\n  at: number;\n  enter: number;\n  afterMono?: boolean;\n  icon?: React.ReactNode;\n}> = ({ label, before, after, at, enter, afterMono = false, icon }) => {\n  const frame = useCurrentFrame();\n\n  const inP = interpolate(frame, [enter, enter + 10], [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const p = interpolate(frame, [at, at + 9], [0, 1], {\n    ...clampOpts,\n    easing: Easing.inOut(Easing.cubic),\n  });\n  const sizer = after.length > before.length ? after : before;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        gap: 16,\n        padding: \"10px 16px\",\n        borderRadius: 12,\n        border: TILE_BORDER,\n        background: \"rgba(250,250,250,0.035)\",\n        opacity: inP,\n        transform: `translateY(${(1 - inP) * 10}px)`,\n      }}\n    >\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 3 }}>\n        <span style={{ fontFamily: SANS, fontSize: 12.5, color: FAINT }}>\n          {label}\n        </span>\n        <span\n          style={{\n            position: \"relative\",\n            display: \"inline-block\",\n            fontSize: 19,\n            color: INK,\n            lineHeight: 1.25,\n          }}\n        >\n          <span\n            style={{\n              visibility: \"hidden\",\n              fontFamily: afterMono ? MONO : SANS,\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {sizer}\n          </span>\n          <span\n            style={{\n              position: \"absolute\",\n              left: 0,\n              top: 0,\n              whiteSpace: \"nowrap\",\n              fontFamily: SANS,\n              opacity: 1 - p,\n              transform: `translateY(${p * -9}px)`,\n            }}\n          >\n            {before}\n          </span>\n          <span\n            style={{\n              position: \"absolute\",\n              left: 0,\n              top: 0,\n              whiteSpace: \"nowrap\",\n              fontFamily: afterMono ? MONO : SANS,\n              opacity: p,\n              transform: `translateY(${(1 - p) * 9}px)`,\n            }}\n          >\n            {after}\n          </span>\n        </span>\n      </div>\n      {icon}\n    </div>\n  );\n};\n\n// Base-color dots — grays, so the video stays monochrome while \"color\"\n// switches.\nconst ZINC_DOT = \"#71717a\";\nconst STONE_DOT = \"#78716c\";\n\n// Warm stone grays layered over the neutral theme when stone is selected.\nconst STONE_LIGHT = {\n  \"--border\": \"#e7e5e4\",\n  \"--input\": \"#e7e5e4\",\n  \"--muted\": \"#f5f5f4\",\n  \"--secondary\": \"#f5f5f4\",\n  \"--accent\": \"#f5f5f4\",\n  \"--muted-foreground\": \"#78716c\",\n  \"--ring\": \"#a8a29e\",\n} as React.CSSProperties;\nconst STONE_DARK = {\n  \"--card\": \"#1c1917\",\n  \"--muted-foreground\": \"#a8a29e\",\n} as React.CSSProperties;\n\nconst CreateScene: React.FC = () => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  const panelIn = interpolate(frame, [0, 14], [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const previewIn = interpolate(frame, [4, 18], [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const exitP = interpolate(\n    frame,\n    [durationInFrames - 16, durationInFrames - 4],\n    [0, 1],\n    { ...clampOpts, easing: Easing.in(Easing.cubic) },\n  );\n\n  // One setting flips per beat; the preview reacts to each.\n  const colorIdx = frame < CREATE_BEAT_COLOR ? 1 : 3;\n  const dark = frame >= CREATE_BEAT_THEME;\n  const fontIdx = frame < CREATE_BEAT_FONT ? 0 : 2;\n\n  // Lyra is boxy and sharp — the radius morphs to 0 across the flip.\n  const radius = interpolate(\n    frame,\n    [CREATE_BEAT_STYLE, CREATE_BEAT_STYLE + 16],\n    [10, 0],\n    { ...clampOpts, easing: Easing.inOut(Easing.cubic) },\n  );\n\n  const pop = (at: number) =>\n    interpolate(frame, [at, at + 6, at + 18], [0, 1, 0], clampOpts);\n  const previewScale =\n    1 +\n    (pop(CREATE_BEAT_STYLE) +\n      pop(CREATE_BEAT_COLOR) +\n      pop(CREATE_BEAT_THEME) +\n      pop(CREATE_BEAT_FONT)) *\n      0.02;\n\n  const stoneVars =\n    colorIdx === 3 ? (dark ? STONE_DARK : STONE_LIGHT) : undefined;\n\n  return (\n    <AbsoluteFill\n      style={{\n        flexDirection: \"row\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 56,\n        opacity: 1 - exitP,\n        filter: exitP > 0 ? `blur(${exitP * 6}px)` : undefined,\n      }}\n    >\n      {/* The builder's settings panel — the tile stack from the create\n          page: label, current value, icon. Values flip beat by beat, the\n          choices become a preset code at the bottom. */}\n      <div\n        style={{\n          width: 300,\n          padding: 12,\n          borderRadius: 18,\n          border: TILE_BORDER,\n          background: \"rgba(250,250,250,0.025)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 9,\n          fontFamily: SANS,\n          opacity: panelIn,\n          transform: `translateX(${(1 - panelIn) * -24}px)`,\n        }}\n      >\n        <CreateTile\n          label=\"Style\"\n          before=\"Vega\"\n          after=\"Lyra\"\n          at={CREATE_BEAT_STYLE}\n          enter={2}\n          icon={\n            <span\n              style={{\n                width: 22,\n                height: 18,\n                border: `1.5px solid ${INK}`,\n                borderRadius: (radius / 10) * 6,\n              }}\n            />\n          }\n        />\n        <CreateTile\n          label=\"Base Color\"\n          before=\"Zinc\"\n          after=\"Stone\"\n          at={CREATE_BEAT_COLOR}\n          enter={5}\n          icon={\n            <span\n              style={{\n                width: 18,\n                height: 18,\n                borderRadius: 999,\n                background: colorIdx === 3 ? STONE_DOT : ZINC_DOT,\n              }}\n            />\n          }\n        />\n        <CreateTile\n          label=\"Theme\"\n          before=\"Light\"\n          after=\"Dark\"\n          at={CREATE_BEAT_THEME}\n          enter={8}\n          icon={\n            <span\n              style={{\n                width: 18,\n                height: 18,\n                borderRadius: 999,\n                background: dark ? \"#27272a\" : \"#e4e4e7\",\n                border: TILE_BORDER,\n              }}\n            />\n          }\n        />\n        <CreateTile\n          label=\"Font\"\n          before=\"Geist\"\n          after=\"Geist Mono\"\n          at={CREATE_BEAT_FONT}\n          enter={11}\n          afterMono\n          icon={\n            <span\n              style={{\n                fontFamily: fontIdx === 2 ? MONO : SANS,\n                fontSize: 18,\n                color: INK,\n                lineHeight: 1,\n              }}\n            >\n              Aa\n            </span>\n          }\n        />\n        {/* The choices become a code — the same mechanism the next beat\n            runs through the CLI. */}\n        <div\n          style={{\n            padding: \"9px 16px\",\n            borderRadius: 12,\n            border: TILE_BORDER,\n            textAlign: \"center\",\n            fontFamily: MONO,\n            fontSize: 14.5,\n            color: MUTED,\n            opacity: interpolate(\n              frame,\n              [CREATE_CODE_IN, CREATE_CODE_IN + 10],\n              [0, 1],\n              clampOpts,\n            ),\n          }}\n        >\n          --preset a1Dg5eFl\n        </div>\n        <div\n          style={{\n            padding: \"9px 16px\",\n            borderRadius: 12,\n            background: INK,\n            color: ZINC,\n            textAlign: \"center\",\n            fontSize: 15,\n            opacity: interpolate(frame, [14, 24], [0, 1], clampOpts),\n          }}\n        >\n          Get Code\n        </div>\n      </div>\n      {/* The live preview — the same card the next scene re-themes. */}\n      <div\n        className={`${dark ? \"dark \" : \"\"}**:font-normal!`}\n        style={\n          {\n            \"--radius\": `${radius}px`,\n            ...stoneVars,\n            fontFamily: fontIdx === 2 ? MONO : undefined,\n            opacity: previewIn,\n            transform: `translateX(${(1 - previewIn) * 24}px) scale(${previewScale})`,\n          } as React.CSSProperties\n        }\n      >\n        <PresetPreviewCard />\n      </div>\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 8e — Presets. One short code carries the whole design-system config\n// — colors, theme, fonts, radius. `init --preset` swaps it live: the same\n// real components re-theme on screen (hard theme flip, morphing radius) as\n// the code rolodexes through presets, components included.\n// ===========================================================================\nconst PRESETS = [\n  { code: \"a1Dg5eFl\", dark: true, radius: 10 },\n  { code: \"ad3qkJ7\", dark: false, radius: 0 },\n  { code: \"adtk27v\", dark: true, radius: 22 },\n];\nconst PRESET_CMD = \"npx shadcn init --preset \";\nconst P_SIZER = PRESETS.reduce((a, b) =>\n  b.code.length > a.code.length ? b : a,\n).code;\nconst P_FLIP_START = 64; // first code flip, after the pair has settled\nconst P_FLIP_PER = 48; //  one preset every 48 frames — time to read the UI\nconst P_FLIP_DUR = 10; //  the 3D flip itself\n\nconst PresetScene: React.FC = () => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  const uiIn = interpolate(frame, [0, 14], [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const cmdIn = interpolate(frame, [8, 20], [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const exitP = interpolate(\n    frame,\n    [durationInFrames - 16, durationInFrames - 4],\n    [0, 1],\n    { ...clampOpts, easing: Easing.in(Easing.cubic) },\n  );\n\n  // The theme flips hard mid-flip, like the Themes beat — the flip IS the\n  // story: same components, another system.\n  const flipMid1 = P_FLIP_START + P_FLIP_DUR / 2;\n  const flipMid2 = P_FLIP_START + P_FLIP_PER + P_FLIP_DUR / 2;\n  const preset =\n    frame < flipMid1 ? PRESETS[0] : frame < flipMid2 ? PRESETS[1] : PRESETS[2];\n\n  // The radius morphs smoothly through each flip. Every rounded-* utility\n  // inlines calc(var(--radius) …), so one variable re-shapes everything.\n  const radius = interpolate(\n    frame,\n    [\n      P_FLIP_START,\n      P_FLIP_START + 16,\n      P_FLIP_START + P_FLIP_PER,\n      P_FLIP_START + P_FLIP_PER + 16,\n    ],\n    [PRESETS[0].radius, PRESETS[1].radius, PRESETS[1].radius, PRESETS[2].radius],\n    { ...clampOpts, easing: Easing.inOut(Easing.cubic) },\n  );\n\n  // A small pop on each flip sells \"everything just reconfigured\".\n  const pop = (at: number) =>\n    interpolate(frame, [at, at + 6, at + 18], [0, 1, 0], clampOpts);\n  const scale =\n    1 + (pop(P_FLIP_START) + pop(P_FLIP_START + P_FLIP_PER)) * 0.02;\n\n  return (\n    <AbsoluteFill\n      style={{\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 40,\n        opacity: 1 - exitP,\n        filter: exitP > 0 ? `blur(${exitP * 6}px)` : undefined,\n      }}\n    >\n      <div\n        className={`${preset.dark ? \"dark \" : \"\"}**:font-normal!`}\n        style={\n          {\n            \"--radius\": `${radius}px`,\n            opacity: uiIn,\n            transform: `translateY(${(1 - uiIn) * 22}px) scale(${scale})`,\n          } as React.CSSProperties\n        }\n      >\n        <PresetPreviewCard />\n      </div>\n      <div\n        style={{\n          fontFamily: MONO,\n          fontSize: 24,\n          color: MUTED,\n          opacity: cmdIn,\n          transform: `translateY(${(1 - cmdIn) * 12}px)`,\n        }}\n      >\n        <span style={{ color: FAINT }}>$ </span>\n        <span>{PRESET_CMD}</span>\n        <span\n          style={{\n            display: \"inline-block\",\n            width: `${P_SIZER.length}ch`,\n            textAlign: \"left\",\n            position: \"relative\",\n            verticalAlign: \"bottom\",\n            perspective: 420,\n            color: INK,\n          }}\n        >\n          {/* Invisible sizer keeps the container's height and baseline. */}\n          <span style={{ visibility: \"hidden\" }}>{P_SIZER}</span>\n          {PRESETS.map(({ code }, i) => {\n            // Same rolodex as the install command: the outgoing code clears\n            // first, the incoming one follows half a flip later.\n            const inStart = P_FLIP_START + (i - 1) * P_FLIP_PER + 5;\n            const outStart = P_FLIP_START + i * P_FLIP_PER;\n\n            let rotate = 0;\n            let y = 0;\n            let opacity = 1;\n\n            if (i > 0) {\n              const pIn = interpolate(\n                frame,\n                [inStart, inStart + P_FLIP_DUR],\n                [0, 1],\n                { ...clampOpts, easing: Easing.out(Easing.cubic) },\n              );\n              rotate = (1 - pIn) * -85;\n              y = (1 - pIn) * 18;\n              opacity = pIn;\n            }\n            if (i < PRESETS.length - 1) {\n              const pOut = interpolate(\n                frame,\n                [outStart, outStart + P_FLIP_DUR],\n                [0, 1],\n                { ...clampOpts, easing: Easing.in(Easing.cubic) },\n              );\n              rotate += pOut * 85;\n              y -= pOut * 18;\n              opacity *= 1 - pOut;\n            }\n            if (opacity <= 0.001) return null;\n\n            return (\n              <span\n                key={code}\n                style={{\n                  position: \"absolute\",\n                  left: 0,\n                  top: 0,\n                  whiteSpace: \"nowrap\",\n                  opacity,\n                  transform: `translateY(${y}px) rotateX(${rotate}deg)`,\n                  transformOrigin: \"50% 50%\",\n                  backfaceVisibility: \"hidden\",\n                }}\n              >\n                {code}\n              </span>\n            );\n          })}\n        </span>\n      </div>\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 8f — The switch claim lands alone.\n// ===========================================================================\nconst PresetSwitchScene: React.FC = () => (\n  <AbsoluteFill>\n    <Sequence from={4} durationInFrames={56}>\n      <ScaleDownFade\n        text=\"Switch it any time\"\n        fontSize={54}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scene 9 — Ownership. The consequence lands alone.\n// ===========================================================================\nconst YoursScene: React.FC = () => (\n  <AbsoluteFill>\n    {/* Exits before the crossfade window — the apps scene enters already\n        zoomed on the rolling digits, so nothing may linger under it. */}\n    <Sequence from={4} durationInFrames={52}>\n      <ScaleDownFade\n        text=\"And the code is yours\"\n        fontSize={54}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scenes 10/10b — count-up beats. The number counts centered; when the label\n// arrives, the pair slides into a shared center. Each beat plays its own\n// exit so the following crossfade never overlaps two texts.\n// ===========================================================================\nconst CountUpScene: React.FC<{\n  target: number;\n  label: string;\n  fontSize: number;\n  labelShift: number;\n  pushIn?: boolean;\n}> = ({ target, label, fontSize, labelShift, pushIn = false }) => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  // Ease-in wheel: the digits tick up slowly under the diving camera, spin\n  // into a blur, and slam into the target at full zoom.\n  const p = interpolate(frame, pushIn ? [8, 78] : [6, 72], [0, 1], {\n    ...clampOpts,\n    easing: pushIn ? Easing.in(Easing.poly(3)) : Easing.out(Easing.poly(4)),\n  });\n  const value = Math.round(target * p).toLocaleString(\"en-US\");\n\n  const enterOpacity = interpolate(frame, [0, 10], [0, 1], clampOpts);\n  // With the push, the label settles early so it is already in place when\n  // the pan reaches it.\n  const labelInT = pushIn ? [10, 24] : [52, 70];\n  const labelIn = interpolate(frame, labelInT, [0, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  // With the push, only the digits may be in frame during the count-up AND\n  // the beat after the slam — the label stays invisible (its position is\n  // set, via labelIn, so it doesn't move) and fades in only once the read\n  // pan is already moving toward it.\n  const labelReveal = pushIn\n    ? interpolate(frame, [88, 102], [0, 1], {\n        ...clampOpts,\n        easing: Easing.out(Easing.cubic),\n      })\n    : labelIn;\n  // With the whip-pan handoff the outgoing motion IS the exit — no fade.\n  const exitP = pushIn\n    ? 0\n    : interpolate(\n        frame,\n        [durationInFrames - 28, durationInFrames - 14],\n        [0, 1],\n        { ...clampOpts, easing: Easing.in(Easing.cubic) },\n      );\n\n  // One continuous rightward travel, already at full scale: the scene opens\n  // mid-motion with the ticking digits sweeping in from the right, the\n  // camera decelerates onto them (0–20), HOLDS while the wheel spins up and\n  // slams into the target (78), takes a beat, then continues right along\n  // the line (84–132) so \"apps every month\" is read — and instead of\n  // stopping, ACCELERATES off (132→end) straight into the whip-pan cut,\n  // which carries the same leftward text motion into the next scene.\n  // screen_x = (x - focus) * zoom; `focus` is the camera's target point\n  // along the line (negative = the digits, positive = the tail).\n  const zoom = pushIn ? 2.4 : 1;\n  // Arrival: enters at speed (ease-out) and settles EARLY — the camera never\n  // drives flush into the digits, leaving a clear margin on their right.\n  const arrive = pushIn\n    ? interpolate(frame, [0, 20], [-600, -295], {\n        ...clampOpts,\n        easing: Easing.out(Easing.cubic),\n      })\n    : 0;\n  // The read pan across the label.\n  const readDelta = pushIn\n    ? interpolate(frame, [84, 132], [0, 620], {\n        ...clampOpts,\n        easing: Easing.inOut(Easing.cubic),\n      })\n    : 0;\n  // The run-off: starts from rest and only gains speed, so the whip cut\n  // happens mid-motion.\n  const runOff = pushIn\n    ? interpolate(frame, [132, durationInFrames], [0, 620], {\n        ...clampOpts,\n        easing: Easing.in(Easing.cubic),\n      })\n    : 0;\n  const focus = arrive + readDelta + runOff;\n\n  return (\n    <AbsoluteFill\n      style={{\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        opacity: enterOpacity * (1 - exitP),\n        filter: exitP > 0 ? `blur(${exitP * 6}px)` : undefined,\n      }}\n    >\n      <div style={{ transform: `scale(${zoom}) translateX(${-focus}px)` }}>\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"baseline\",\n            gap: 22,\n            fontFamily: SANS,\n            fontWeight: 400,\n            transform: `translateX(${labelShift * (1 - labelIn)}px)`,\n          }}\n        >\n          {/* Fixed final-string width, right-aligned (odometer): the digit\n              end stays put with a margin to the frame's right edge while the\n              count grows leftward INTO the frame. */}\n          <span\n            style={{\n              fontSize,\n              color: INK,\n              fontVariantNumeric: \"tabular-nums\",\n              display: \"inline-block\",\n              width: pushIn\n                ? `${target.toLocaleString(\"en-US\").length}ch`\n                : undefined,\n              textAlign: pushIn ? \"right\" : undefined,\n            }}\n          >\n            {value}\n          </span>\n          <span\n            style={{\n              fontSize,\n              color: MUTED,\n              opacity: labelReveal,\n              transform: `translateX(${(1 - labelIn) * -10}px)`,\n              display: \"inline-block\",\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {label}\n          </span>\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 10b — The ecosystem. One number a month.\n// ===========================================================================\nconst AppsScene: React.FC = () => (\n  <CountUpScene\n    target={1000000}\n    label=\"apps every month\"\n    fontSize={76}\n    labelShift={290}\n    pushIn\n  />\n);\n\n// ===========================================================================\n// Scene 10c — Who builds. Three names hard-cut, then the resolution.\n// ===========================================================================\nconst WhoLabel: React.FC<{ label: string }> = ({ label }) => {\n  const frame = useCurrentFrame();\n  const opacity = interpolate(frame, [0, 7], [0, 1], clampOpts);\n  // Slides in from the right, decelerating — it inherits the whip's\n  // leftward momentum and brings each hard cut into the same travel.\n  const x = interpolate(frame, [0, 10], [46, 0], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const blur = interpolate(frame, [0, 7], [6, 0], clampOpts);\n  return (\n    <AbsoluteFill style={{ alignItems: \"center\", justifyContent: \"center\" }}>\n      <span\n        style={{\n          fontFamily: SANS,\n          fontWeight: 400,\n          fontSize: 58,\n          color: INK,\n          opacity,\n          transform: `translateX(${x}px)`,\n          filter: `blur(${blur}px)`,\n        }}\n      >\n        {label}\n      </span>\n    </AbsoluteFill>\n  );\n};\n\nconst WhoScene: React.FC = () => (\n  <AbsoluteFill>\n    <Series>\n      {[\"Startups\", \"YC\", \"Fortune 500s\"].map((who) => (\n        <Series.Sequence key={who} durationInFrames={WHO_BEAT}>\n          <WhoLabel label={who} />\n        </Series.Sequence>\n      ))}\n      <Series.Sequence durationInFrames={56}>\n        <ScaleDownFade\n          text=\"Everyone is building with it\"\n          fontSize={54}\n          fontWeight={400}\n          color={INK}\n        />\n      </Series.Sequence>\n    </Series>\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scene 10d — The opportunity. Plays its own exit ahead of the crossfade.\n// ===========================================================================\nconst EcoScene: React.FC = () => {\n  const frame = useCurrentFrame();\n  const { durationInFrames } = useVideoConfig();\n\n  const exitP = interpolate(\n    frame,\n    [durationInFrames - 26, durationInFrames - 12],\n    [0, 1],\n    { ...clampOpts, easing: Easing.in(Easing.cubic) },\n  );\n\n  return (\n    <AbsoluteFill\n      style={{\n        opacity: 1 - exitP,\n        transform: `translateY(${exitP * -10}px)`,\n        filter: exitP > 0 ? `blur(${exitP * 6}px)` : undefined,\n      }}\n    >\n      <ShortSlideRight\n        text=\"A massive ecosystem — and room for you to build\"\n        fontSize={42}\n        fontWeight={400}\n        color={INK}\n      />\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Scene 10e — The kicker, two beats: the question, then the answer.\n// ===========================================================================\nconst BestScene: React.FC = () => (\n  <AbsoluteFill>\n    <Sequence from={4} durationInFrames={50}>\n      <ScaleDownFade\n        text=\"The best part?\"\n        fontSize={54}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\nconst NeedsScene: React.FC = () => (\n  <AbsoluteFill>\n    <Sequence from={6}>\n      <KineticCenterBuild\n        text=\"Everyone needs UI\"\n        fontSize={66}\n        fontWeight={400}\n        color={INK}\n      />\n    </Sequence>\n  </AbsoluteFill>\n);\n\n// ===========================================================================\n// Scene 11 — Outro. A smoke ring blooms open, the wordmark resolves inside,\n// and the project's own motto settles at the bottom. No links by design.\n// ===========================================================================\nconst OutroScene: React.FC = () => {\n  const frame = useCurrentFrame();\n\n  const ringRadius = interpolate(frame, [6, 56], [0.03, 0.19], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n\n  const wordOpacity = interpolate(frame, [50, 68], [0, 1], clampOpts);\n  const wordScale = interpolate(frame, [50, 74], [0.94, 1], {\n    ...clampOpts,\n    easing: Easing.out(Easing.cubic),\n  });\n  const wordBlur = interpolate(frame, [50, 68], [8, 0], clampOpts);\n\n  const mottoOpacity = interpolate(frame, [92, 110], [0, 1], clampOpts);\n\n  return (\n    <AbsoluteFill\n      style={{\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: ZINC,\n      }}\n    >      <AbsoluteFill style={{ opacity: 0.7 }}>\n        <ShaderSmokeRing\n          speed={0.8}\n          colorBack={ZINC}\n          colors={[\"#3a2734\", \"#2c2338\"]}\n          radius={ringRadius}\n          thickness={0.4}\n          scale={0.85}\n        />\n      </AbsoluteFill>\n      <Scrim strength={0.55} />\n      <span\n        style={{\n          fontFamily: SANS,\n          fontWeight: 400,\n          fontSize: 84,\n          color: INK,\n          opacity: wordOpacity,\n          transform: `scale(${wordScale}) translateY(-14px)`,\n          filter: `blur(${wordBlur}px)`,\n          position: \"relative\",\n        }}\n      >\n        shadcn/ui\n      </span>\n\n      <span\n        style={{\n          position: \"absolute\",\n          bottom: 42,\n          fontFamily: SANS,\n          fontWeight: 400,\n          fontSize: 19,\n          color: FAINT,\n          opacity: mottoOpacity,\n        }}\n      >\n        Open Source. Open Code.\n      </span>\n    </AbsoluteFill>\n  );\n};\n\n// ===========================================================================\n// Transition presentations — the scene changes are shaders too.\n// ===========================================================================\ntype EmptyProps = Record<string, never>;\n\nconst coverEnvelope = (p: number) =>\n  interpolate(p, [0, 0.3, 0.65, 1], [0, 1, 1, 0], clampOpts);\n\nconst coverChildOpacity = (p: number, entering: boolean) =>\n  entering\n    ? interpolate(p, [0.58, 0.66], [0, 1], clampOpts)\n    : interpolate(p, [0.28, 0.36], [1, 0], clampOpts);\n\n// The swirl cover: fades in over the outgoing scene as the dark twist=1\n// field, unwinds 1 → 0 into open muted-plum bands, holds ~500ms, then winds\n// back 0 → 1 — and synchronized with the wind-back the incoming text\n// resolves through scale + blur on top.\nconst SwirlCover: React.FC<\n  TransitionPresentationComponentProps<EmptyProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\n  const entering = presentationDirection === \"entering\";\n  const p = presentationProgress;\n  const twist = interpolate(p, [0.1, 0.42, 0.64, 1], [1, 0, 0, 1], {\n    ...clampOpts,\n    easing: Easing.bezier(0.42, 0, 0.58, 1),\n  });\n\n  const childStyle: React.CSSProperties = entering\n    ? {\n        opacity: interpolate(p, [0.77, 0.87], [0, 1], clampOpts),\n        transform: `scale(${interpolate(p, [0.77, 1], [0.3, 1], {\n          ...clampOpts,\n          easing: Easing.out(Easing.cubic),\n        })})`,\n        filter: `blur(${interpolate(p, [0.77, 0.93], [10, 0], clampOpts)}px)`,\n      }\n    : { opacity: interpolate(p, [0.12, 0.26], [1, 0], clampOpts) };\n\n  return (\n    <AbsoluteFill>\n      {entering ? (\n        <AbsoluteFill style={{ pointerEvents: \"none\" }}>\n          <ShaderSwirl\n            speed={1}\n            twist={twist}\n            colors={[\"#1c1426\", PLUM, \"#7a5566\"]}\n            colorBack=\"rgba(9,9,11,0)\"\n            bandCount={10}\n            softness={0.35}\n          />\n        </AbsoluteFill>\n      ) : null}\n      <AbsoluteFill style={childStyle}>{children}</AbsoluteFill>\n    </AbsoluteFill>\n  );\n};\nconst swirlCover = (): TransitionPresentation<EmptyProps> => ({\n  component: SwirlCover,\n  props: {},\n});\n\n// The frame dissolves through a slow drift of dusty-rose dither pixels.\nconst DitherCover: React.FC<\n  TransitionPresentationComponentProps<EmptyProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\n  const entering = presentationDirection === \"entering\";\n  const p = presentationProgress;\n  const size = interpolate(p, [0, 1], [1.6, 2.8], clampOpts);\n  return (\n    <AbsoluteFill>\n      <AbsoluteFill style={{ opacity: coverChildOpacity(p, entering) }}>\n        {children}\n      </AbsoluteFill>\n      {entering ? (\n        <AbsoluteFill\n          style={{ opacity: coverEnvelope(p), pointerEvents: \"none\" }}\n        >\n          <ShaderDithering\n            speed={1.5}\n            colorBack={ZINC}\n            colorFront={ROSE}\n            shape=\"simplex\"\n            size={size}\n          />\n        </AbsoluteFill>\n      ) : null}\n    </AbsoluteFill>\n  );\n};\nconst ditherCover = (): TransitionPresentation<EmptyProps> => ({\n  component: DitherCover,\n  props: {},\n});\n\nconst Crossfade: React.FC<TransitionPresentationComponentProps<EmptyProps>> = ({\n  children,\n  presentationProgress,\n  presentationDirection,\n}) => {\n  const entering = presentationDirection === \"entering\";\n  const opacity = entering ? presentationProgress : 1 - presentationProgress;\n  return <AbsoluteFill style={{ opacity }}>{children}</AbsoluteFill>;\n};\nconst crossfade = (): TransitionPresentation<EmptyProps> => ({\n  component: Crossfade,\n  props: {},\n});\n\nconst BlurFade: React.FC<TransitionPresentationComponentProps<EmptyProps>> = ({\n  children,\n  presentationProgress,\n  presentationDirection,\n}) => {\n  const entering = presentationDirection === \"entering\";\n  const p = presentationProgress;\n  const style: React.CSSProperties = entering\n    ? {\n        opacity: p,\n        transform: `scale(${0.94 + p * 0.06})`,\n        filter: p < 1 ? `blur(${(1 - p) * 12}px)` : undefined,\n      }\n    : {\n        opacity: 1 - p,\n        transform: `scale(${1 + p * 0.08})`,\n        filter: p > 0 ? `blur(${p * 12}px)` : undefined,\n      };\n  return <AbsoluteFill style={style}>{children}</AbsoluteFill>;\n};\nconst blurFade = (): TransitionPresentation<EmptyProps> => ({\n  component: BlurFade,\n  props: {},\n});\n\n// ===========================================================================\n// Composition root.\n// ===========================================================================\nexport const INTRODUCING_SHADCN_DURATION =\n  S_FIELD +\n  S_MEET +\n  S_TAGLINE +\n  S_CREED_A +\n  S_CREED_B +\n  S_CATEGORIES +\n  S_PILLARS +\n  S_INSTALL_TITLE +\n  S_INSTALL_CMD +\n  S_PRESET_TITLE +\n  S_CREATE +\n  S_PRESET +\n  S_SWITCH +\n  S_YOURS +\n  S_APPS +\n  S_WHO +\n  S_ECO +\n  S_BEST +\n  S_NEEDS +\n  S_OUTRO -\n  (T_SWIRL + T_DITHER + T_DITHER + T_X * 5 + T_WHIP + T_BLUR);\n\nexport const IntroducingShadcnDemo: React.FC = () => {\n  return (\n    <AbsoluteFill\n      className=\"video-scope\"\n      style={\n        {\n          \"--font-geist-sans\": SANS_FAMILY,\n          background: ZINC,\n        } as React.CSSProperties\n      }\n    >\n      <VideoScopeStyle />\n      {/* One quiet simplex-noise field carries the whole video. */}\n      <ShaderSimplexNoise\n        speed={0.35}\n        colors={[\"#09090b\", \"#0e0d13\", \"#171420\"]}\n        stepsPerColor={2}\n        softness={0.8}\n      />\n      <Scrim strength={0.85} />\n\n      <TransitionSeries>\n        {/* 1 — The component field: a camera flight through real shadcn/ui */}\n        <TransitionSeries.Sequence durationInFrames={S_FIELD}>\n          <FieldScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_SWIRL })}\n          presentation={swirlCover()}\n        />\n\n        {/* 2 — This is shadcn/ui (plays its own exit, hard cut) */}\n        <TransitionSeries.Sequence durationInFrames={S_MEET}>\n          <MeetScene />\n        </TransitionSeries.Sequence>\n\n        {/* 3 — Tagline, its own typography beat */}\n        <TransitionSeries.Sequence durationInFrames={S_TAGLINE}>\n          <TaglineScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_DITHER })}\n          presentation={ditherCover()}\n        />\n\n        {/* 4 — Not a component library */}\n        <TransitionSeries.Sequence durationInFrames={S_CREED_A}>\n          <CreedAScene />\n        </TransitionSeries.Sequence>\n\n        {/* 5 — How you build your own */}\n        <TransitionSeries.Sequence durationInFrames={S_CREED_B}>\n          <CreedBScene />\n        </TransitionSeries.Sequence>\n\n        {/* 6 — Category montage: real UI, hard cut in */}\n        <TransitionSeries.Sequence durationInFrames={S_CATEGORIES}>\n          <CategoriesScene tailOverlap={T_DITHER} />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_DITHER })}\n          presentation={ditherCover()}\n        />\n\n        {/* 7 — The pillars */}\n        <TransitionSeries.Sequence durationInFrames={S_PILLARS}>\n          <PillarsScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_X })}\n          presentation={crossfade()}\n        />\n\n        {/* 8 — Install title */}\n        <TransitionSeries.Sequence durationInFrames={S_INSTALL_TITLE}>\n          <InstallTitleScene />\n        </TransitionSeries.Sequence>\n\n        {/* 8b — Install command (title exits itself, hard cut) */}\n        <TransitionSeries.Sequence durationInFrames={S_INSTALL_CMD}>\n          <InstallCmdScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_X })}\n          presentation={crossfade()}\n        />\n\n        {/* 8c — Preset title (plays its own exit, hard cut) */}\n        <TransitionSeries.Sequence durationInFrames={S_PRESET_TITLE}>\n          <PresetTitleScene />\n        </TransitionSeries.Sequence>\n\n        {/* 8d — shadcn create: settings flip one by one, the live preview\n            reshapes (plays its own exit, hard cut) */}\n        <TransitionSeries.Sequence durationInFrames={S_CREATE}>\n          <CreateScene />\n        </TransitionSeries.Sequence>\n\n        {/* 8e — init --preset: the code flips, the same UI re-themes live\n            (plays its own exit, hard cut) */}\n        <TransitionSeries.Sequence durationInFrames={S_PRESET}>\n          <PresetScene />\n        </TransitionSeries.Sequence>\n\n        {/* 8f — Switch it any time (self-contained, hard cut) */}\n        <TransitionSeries.Sequence durationInFrames={S_SWITCH}>\n          <PresetSwitchScene />\n        </TransitionSeries.Sequence>\n\n        {/* 9 — And the code is yours */}\n        <TransitionSeries.Sequence durationInFrames={S_YOURS}>\n          <YoursScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_X })}\n          presentation={crossfade()}\n        />\n\n        {/* 10b — 1,000,000 apps every month; the pan accelerates into a\n            whip cut that carries the leftward motion into the next scene */}\n        <TransitionSeries.Sequence durationInFrames={S_APPS}>\n          <AppsScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_WHIP })}\n          presentation={whipPan({ direction: \"left\" })}\n        />\n\n        {/* 10c — Who builds: three hard cuts + the resolution */}\n        <TransitionSeries.Sequence durationInFrames={S_WHO}>\n          <WhoScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_X })}\n          presentation={crossfade()}\n        />\n\n        {/* 10d — The opportunity */}\n        <TransitionSeries.Sequence durationInFrames={S_ECO}>\n          <EcoScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_X })}\n          presentation={crossfade()}\n        />\n\n        {/* 10e — The kicker: question (self-exits, hard cut) then answer */}\n        <TransitionSeries.Sequence durationInFrames={S_BEST}>\n          <BestScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Sequence durationInFrames={S_NEEDS}>\n          <NeedsScene />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition\n          timing={linearTiming({ durationInFrames: T_BLUR })}\n          presentation={blurFade()}\n        />\n\n        {/* 11 — Outro lockup */}\n        <TransitionSeries.Sequence durationInFrames={S_OUTRO}>\n          <OutroScene />\n        </TransitionSeries.Sequence>\n      </TransitionSeries>\n    </AbsoluteFill>\n  );\n};\n",
      "type": "registry:component",
      "target": "demos/introducing-shadcn/index.tsx"
    },
    {
      "path": "src/demos/introducing-shadcn/prompt.md",
      "content": "<!-- TODO(draft): placeholder written by AI — replace with the real prompt used to generate this video -->\n\nMake a gift video introducing shadcn/ui, done in shadcn's own monochrome look — zinc-950 canvas, ink text, Geist at regular weight only, no color anywhere except muted shader covers sampled from shadcn's own X avatar. Open with a camera glide across a dense wall of real shadcn/ui components rendered live (pull actual cards from the ui.shadcn.com homepage — create account, calendar, command menu, and so on), then land the name, the \"not a component library, it's how you build your own\" creed, and a quick montage proving the breadth (blocks, charts, themes, colors). Show the install command turning into a component rolodex, then demo the preset builder — flipping style, base color, theme, and font live while a sign-in card reshapes — collapsing into a single preset code you can pass to init. Close with a big proof number (a million apps a month), a few logos of who's building on it, and a quiet outro lockup with \"Open Source. Open Code.\" and no URL. Use remocn for the shader covers and typography beats.\n",
      "type": "registry:file",
      "target": "demos/introducing-shadcn/prompt.md"
    }
  ],
  "docs": "Register the composition in your Remotion Root:\n\n  import { IntroducingShadcnDemo } from \"@/demos/introducing-shadcn\";\n  <Composition id=\"introducing-shadcn\" component={IntroducingShadcnDemo} durationInFrames={2178} fps={30} width={1280} height={720} />\n\nRequires Tailwind v4 wired into Remotion (@remotion/tailwind-v4).\nRender locally: npx remotion render introducing-shadcn out/introducing-shadcn.mp4 --gl=angle",
  "type": "registry:block"
}