diff --git a/components/ui/8bit/assets/chevronLeftIcon.tsx b/components/ui/8bit/assets/chevronLeftIcon.tsx
new file mode 100644
index 00000000..e06a7259
--- /dev/null
+++ b/components/ui/8bit/assets/chevronLeftIcon.tsx
@@ -0,0 +1,59 @@
+export const ChevronLeftIcon = () => {
+  return (
+    <svg
+      width="50"
+      height="50"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      strokeWidth="0.25"
+      color=""
+      className="size-7"
+      aria-label="chevron-left"
+    >
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 128 136)"
+      ></rect>
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 144 152)"
+      ></rect>
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 160 72)"
+      ></rect>
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 160 168)"
+      ></rect>
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 112 120)"
+      ></rect>
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 128 104)"
+      ></rect>
+      <rect
+        width="14"
+        height="14"
+        rx="1"
+        transform="matrix(-1 0 0 1 144 88)"
+      ></rect>
+    </svg>
+  );
+};
diff --git a/components/ui/8bit/assets/chevronRightIcon.tsx b/components/ui/8bit/assets/chevronRightIcon.tsx
new file mode 100644
index 00000000..24dc32f7
--- /dev/null
+++ b/components/ui/8bit/assets/chevronRightIcon.tsx
@@ -0,0 +1,24 @@
+export const ChevronRightIcon = () => {
+  return (
+    <svg
+      width="50"
+      height="50"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      strokeWidth="0.25"
+      color=""
+      className="raster-icon size-7"
+      aria-label="chevron-right"
+    >
+      <rect x="128" y="136" width="14" height="14" rx="1"></rect>
+      <rect x="112" y="152" width="14" height="14" rx="1"></rect>
+      <rect x="96" y="72" width="14" height="14" rx="1"></rect>
+      <rect x="96" y="168" width="14" height="14" rx="1"></rect>
+      <rect x="144" y="120" width="14" height="14" rx="1"></rect>
+      <rect x="128" y="104" width="14" height="14" rx="1"></rect>
+      <rect x="112" y="88" width="14" height="14" rx="1"></rect>
+    </svg>
+  );
+};
diff --git a/components/ui/8bit/breadcrumb.tsx b/components/ui/8bit/breadcrumb.tsx
index 41624580..70bc96f9 100644
--- a/components/ui/8bit/breadcrumb.tsx
+++ b/components/ui/8bit/breadcrumb.tsx
@@ -4,6 +4,7 @@ import { MoreHorizontal } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
 import {
   Breadcrumb as ShadcnBreadcrumb,
   BreadcrumbEllipsis as ShadcnBreadcrumbEllipsis,
@@ -52,31 +53,6 @@ interface BitBreadcrumbLinkProps
   extends React.ComponentProps<"a">,
     VariantProps<typeof breadcrumbVariants> {}
 
-const ChevronRight = () => {
-  return (
-    <svg
-      width="50"
-      height="50"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-      strokeWidth="0.25"
-      color=""
-      className="size-7"
-      aria-label="chevron-right"
-    >
-      <rect x="128" y="136" width="14" height="14" rx="1"></rect>
-      <rect x="112" y="152" width="14" height="14" rx="1"></rect>
-      <rect x="96" y="72" width="14" height="14" rx="1"></rect>
-      <rect x="96" y="168" width="14" height="14" rx="1"></rect>
-      <rect x="144" y="120" width="14" height="14" rx="1"></rect>
-      <rect x="128" y="104" width="14" height="14" rx="1"></rect>
-      <rect x="112" y="88" width="14" height="14" rx="1"></rect>
-    </svg>
-  );
-};
-
 function Breadcrumb({ children, ...props }: BitBreadcrumbNavigationProps) {
   const { variant, className, font } = props;
 
@@ -162,7 +138,7 @@ function BreadcrumbSeparator({ ...props }: BitBreadcrumbListItemProps) {
       className={cn(className, font !== "normal" && "retro", "[&>svg]:size-7")}
       {...props}
     >
-      {children ?? <ChevronRight />}
+      {children ?? <ChevronRightIcon />}
     </ShadcnBreadcrumbSeparator>
   );
 }
diff --git a/components/ui/8bit/calendar.tsx b/components/ui/8bit/calendar.tsx
index f5e989df..0ca33e42 100644
--- a/components/ui/8bit/calendar.tsx
+++ b/components/ui/8bit/calendar.tsx
@@ -3,6 +3,8 @@ import { DayPicker } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon";
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
 import { Calendar as ShadcnCalendar } from "@/components/ui/calendar";
 
 import { buttonVariants } from "./button";
@@ -124,85 +126,10 @@ function Calendar({ className, classNames, font, ...props }: CalendarProps) {
           },
           Chevron: ({ className, ...props }) => {
             if (props.orientation === "left") {
-              return (
-                <svg
-                  viewBox="0 0 256 256"
-                  fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
-                  stroke="currentColor"
-                  strokeWidth="0.25"
-                  color=""
-                  className={cn("size-4 shrink-0", className)}
-                  aria-label="chevron-left"
-                  {...props}
-                >
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 128 136)"
-                  ></rect>
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 144 152)"
-                  ></rect>
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 160 72)"
-                  ></rect>
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 160 168)"
-                  ></rect>
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 112 120)"
-                  ></rect>
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 128 104)"
-                  ></rect>
-                  <rect
-                    width="14"
-                    height="14"
-                    rx="1"
-                    transform="matrix(-1 0 0 1 144 88)"
-                  ></rect>
-                </svg>
-              );
+              return <ChevronLeftIcon />;
             }
 
-            return (
-              <svg
-                viewBox="0 0 256 256"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="currentColor"
-                strokeWidth="0.25"
-                color=""
-                className={cn("size-4 shrink-0", className)}
-                aria-label="chevron-right"
-                {...props}
-              >
-                <rect x="128" y="136" width="14" height="14" rx="1"></rect>
-                <rect x="112" y="152" width="14" height="14" rx="1"></rect>
-                <rect x="96" y="72" width="14" height="14" rx="1"></rect>
-                <rect x="96" y="168" width="14" height="14" rx="1"></rect>
-                <rect x="144" y="120" width="14" height="14" rx="1"></rect>
-                <rect x="128" y="104" width="14" height="14" rx="1"></rect>
-                <rect x="112" y="88" width="14" height="14" rx="1"></rect>
-              </svg>
-            );
+            return <ChevronRightIcon />;
           },
         }}
         {...props}
diff --git a/components/ui/8bit/context-menu.tsx b/components/ui/8bit/context-menu.tsx
index c3090897..20787478 100644
--- a/components/ui/8bit/context-menu.tsx
+++ b/components/ui/8bit/context-menu.tsx
@@ -3,10 +3,12 @@
 import * as React from "react";
 
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { ChevronRight, Circle } from "lucide-react";
+import { Circle } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
+
 import "./styles/retro.css";
 
 const ContextMenu = ContextMenuPrimitive.Root;
@@ -37,7 +39,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto size-4" />
+    <ChevronRightIcon />
   </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
diff --git a/components/ui/8bit/menubar.tsx b/components/ui/8bit/menubar.tsx
index cc9b7664..598f4b1b 100644
--- a/components/ui/8bit/menubar.tsx
+++ b/components/ui/8bit/menubar.tsx
@@ -8,6 +8,8 @@ import { Circle } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
+
 import "./styles/retro.css";
 
 export const menubarVariants = cva("", {
@@ -110,25 +112,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <svg
-      width="50"
-      height="50"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-      strokeWidth="0.25"
-      aria-label="chevron-right"
-      className="size-7 ml-auto"
-    >
-      <rect x="128" y="136" width="14" height="14" rx="1"></rect>
-      <rect x="112" y="152" width="14" height="14" rx="1"></rect>
-      <rect x="96" y="72" width="14" height="14" rx="1"></rect>
-      <rect x="96" y="168" width="14" height="14" rx="1"></rect>
-      <rect x="144" y="120" width="14" height="14" rx="1"></rect>
-      <rect x="128" y="104" width="14" height="14" rx="1"></rect>
-      <rect x="112" y="88" width="14" height="14" rx="1"></rect>
-    </svg>
+    <ChevronRightIcon />
   </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
diff --git a/components/ui/8bit/pagination.tsx b/components/ui/8bit/pagination.tsx
index ade7d452..c69dcc8f 100644
--- a/components/ui/8bit/pagination.tsx
+++ b/components/ui/8bit/pagination.tsx
@@ -3,6 +3,8 @@ import { MoreHorizontal } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon";
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
 import {
   Pagination as ShadcnPagination,
   PaginationContent as ShadcnPaginationContent,
@@ -48,91 +50,6 @@ function Pagination({ ...props }: BitPaginationProps<"nav">) {
   );
 }
 
-const ChevronLeftIcon = () => {
-  return (
-    <svg
-      width="50"
-      height="50"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-      strokeWidth="0.25"
-      color=""
-      className="size-7"
-      aria-label="chevron-left"
-    >
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 128 136)"
-      ></rect>
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 144 152)"
-      ></rect>
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 160 72)"
-      ></rect>
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 160 168)"
-      ></rect>
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 112 120)"
-      ></rect>
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 128 104)"
-      ></rect>
-      <rect
-        width="14"
-        height="14"
-        rx="1"
-        transform="matrix(-1 0 0 1 144 88)"
-      ></rect>
-    </svg>
-  );
-};
-
-const ChevronRightIcon = () => {
-  return (
-    <svg
-      width="50"
-      height="50"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-      strokeWidth="0.25"
-      color=""
-      className="raster-icon size-7"
-      aria-label="chevron-right"
-    >
-      <rect x="128" y="136" width="14" height="14" rx="1"></rect>
-      <rect x="112" y="152" width="14" height="14" rx="1"></rect>
-      <rect x="96" y="72" width="14" height="14" rx="1"></rect>
-      <rect x="96" y="168" width="14" height="14" rx="1"></rect>
-      <rect x="144" y="120" width="14" height="14" rx="1"></rect>
-      <rect x="128" y="104" width="14" height="14" rx="1"></rect>
-      <rect x="112" y="88" width="14" height="14" rx="1"></rect>
-    </svg>
-  );
-};
-
 function PaginationContent({ ...props }: BitPaginationProps<"ul">) {
   const { className, font } = props;
   return (
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index 437b3ed3..367ec6ed 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
+
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
@@ -76,7 +78,7 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? <ChevronRight />}
+      {children ?? <ChevronRightIcon />}
     </li>
   );
 }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index 37ec3edd..2a4b98d6 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -2,15 +2,13 @@
 
 import * as React from "react";
 
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon";
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
 import { Button, buttonVariants } from "@/components/ui/button";
 
 function Calendar({
@@ -136,18 +134,11 @@ function Calendar({
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            );
+            return <ChevronLeftIcon />;
           }
 
           if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            );
+            return <ChevronRightIcon />;
           }
 
           return (
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index bad74ca9..e5d71ac0 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -3,10 +3,12 @@
 import * as React from "react";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { CheckIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
+
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
@@ -218,7 +220,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto size-4" />
+      <ChevronRightIcon />
     </DropdownMenuPrimitive.SubTrigger>
   );
 }
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index cebf1fad..b149893b 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,13 +1,11 @@
 import * as React from "react";
 
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react";
+import { MoreHorizontalIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon";
+import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
 import { Button, buttonVariants } from "@/components/ui/button";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
diff --git a/public/r/8bit-accordion.json b/public/r/8bit-accordion.json
index bd9cc077..2ceb168e 100644
--- a/public/r/8bit-accordion.json
+++ b/public/r/8bit-accordion.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/accordion.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Accordion as ShadcnAccordion,\n  AccordionContent as ShadcnAccordionContent,\n  AccordionItem as ShadcnAccordionItem,\n  AccordionTrigger as ShadcnAccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nimport \"./styles/retro.css\";\n\nexport interface BitAccordionItemProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {\n  asChild?: boolean;\n}\n\nfunction AccordionItem({\n  className,\n  children,\n  ...props\n}: BitAccordionItemProps) {\n  return (\n    <ShadcnAccordionItem\n      className={cn(\n        \"border-dashed border-b-4 border-foreground dark:border-ring relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnAccordionItem>\n  );\n}\n\nexport interface BitAccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  font?: \"normal\" | \"retro\";\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  font,\n  ...props\n}: BitAccordionTriggerProps) {\n  return (\n    <ShadcnAccordionTrigger\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    >\n      {children}\n    </ShadcnAccordionTrigger>\n  );\n}\n\nexport interface BitAccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {\n  font?: \"normal\" | \"retro\";\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  font,\n  ...props\n}: BitAccordionContentProps) {\n  return (\n    <div className=\"relative\">\n      <ShadcnAccordionContent\n        className={cn(\n          \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"pb-4 pt-0 relative z-10 p-1\">{children}</div>\n      </ShadcnAccordionContent>\n\n      <AccordionPrimitive.Content asChild forceMount />\n    </div>\n  );\n}\n\nconst Accordion = ShadcnAccordion;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Accordion as ShadcnAccordion,\r\n  AccordionContent as ShadcnAccordionContent,\r\n  AccordionItem as ShadcnAccordionItem,\r\n  AccordionTrigger as ShadcnAccordionTrigger,\r\n} from \"@/components/ui/accordion\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport interface BitAccordionItemProps\r\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction AccordionItem({\r\n  className,\r\n  children,\r\n  ...props\r\n}: BitAccordionItemProps) {\r\n  return (\r\n    <ShadcnAccordionItem\r\n      className={cn(\r\n        \"border-dashed border-b-4 border-foreground dark:border-ring relative\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnAccordionItem>\r\n  );\r\n}\r\n\r\nexport interface BitAccordionTriggerProps\r\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\r\n  font?: \"normal\" | \"retro\";\r\n}\r\n\r\nfunction AccordionTrigger({\r\n  className,\r\n  children,\r\n  font,\r\n  ...props\r\n}: BitAccordionTriggerProps) {\r\n  return (\r\n    <ShadcnAccordionTrigger\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnAccordionTrigger>\r\n  );\r\n}\r\n\r\nexport interface BitAccordionContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {\r\n  font?: \"normal\" | \"retro\";\r\n}\r\n\r\nfunction AccordionContent({\r\n  className,\r\n  children,\r\n  font,\r\n  ...props\r\n}: BitAccordionContentProps) {\r\n  return (\r\n    <div className=\"relative\">\r\n      <ShadcnAccordionContent\r\n        className={cn(\r\n          \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <div className=\"pb-4 pt-0 relative z-10 p-1\">{children}</div>\r\n      </ShadcnAccordionContent>\r\n\r\n      <AccordionPrimitive.Content asChild forceMount />\r\n    </div>\r\n  );\r\n}\r\n\r\nconst Accordion = ShadcnAccordion;\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/accordion.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-alert-dialog.json b/public/r/8bit-alert-dialog.json
index f387d8dd..1b4c7f04 100644
--- a/public/r/8bit-alert-dialog.json
+++ b/public/r/8bit-alert-dialog.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/alert-dialog.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  AlertDialog as ShadcnAlertDialog,\n  AlertDialogAction as ShadcnAlertDialogAction,\n  AlertDialogCancel as ShadcnAlertDialogCancel,\n  AlertDialogContent as ShadcnAlertDialogContent,\n  AlertDialogDescription as ShadcnAlertDialogDescription,\n  AlertDialogFooter as ShadcnAlertDialogFooter,\n  AlertDialogHeader as ShadcnAlertDialogHeader,\n  AlertDialogOverlay as ShadcnAlertDialogOverlay,\n  AlertDialogPortal as ShadcnAlertDialogPortal,\n  AlertDialogTitle as ShadcnAlertDialogTitle,\n  AlertDialogTrigger as ShadcnAlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\n\nimport \"./styles/retro.css\";\n\nexport const alertDialogVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitAlertDialogProps\n  extends React.ComponentProps<typeof AlertDialogPrimitive.Root>,\n    VariantProps<typeof alertDialogVariants> {}\n\nfunction AlertDialog({ ...props }: BitAlertDialogProps) {\n  return <ShadcnAlertDialog {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  className,\n  asChild = true,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <ShadcnAlertDialogTrigger\n      className={cn(className)}\n      asChild={asChild}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return <ShadcnAlertDialogPortal {...props} />;\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return <ShadcnAlertDialogOverlay className={cn(className)} {...props} />;\n}\n\ninterface BitAlertDialogContentProps\n  extends React.ComponentProps<typeof AlertDialogPrimitive.Content>,\n    VariantProps<typeof alertDialogVariants> {}\n\nfunction AlertDialogContent({\n  className,\n  children,\n  font,\n  ...props\n}: BitAlertDialogContentProps) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <>\n        <ShadcnAlertDialogContent\n          className={cn(\n            \"rounded-none border-y-6 border-foreground dark:border-ring\",\n            font !== \"normal\" && \"retro\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n\n          <div\n            className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n        </ShadcnAlertDialogContent>\n      </>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return <ShadcnAlertDialogHeader className={cn(className)} {...props} />;\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <ShadcnAlertDialogFooter\n      className={cn(\"flex flex-col-reverse sm:flex-row gap-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return <ShadcnAlertDialogTitle className={cn(className)} {...props} />;\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return <ShadcnAlertDialogDescription className={cn(className)} {...props} />;\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <ShadcnAlertDialogAction\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative bg-primary\",\n        \"ring-0 border-none\",\n        className\n      )}\n      {...props}\n    >\n      {props.children}\n      {/* Pixelated border */}\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n      {/* Top shadow */}\n      <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n      <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n      {/* Bottom shadow */}\n      <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n      <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n    </ShadcnAlertDialogAction>\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <ShadcnAlertDialogCancel\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative bg-background\",\n        \"ring-0 border-none\",\n        className\n      )}\n      {...props}\n    >\n      {props.children}\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n    </ShadcnAlertDialogCancel>\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  AlertDialog as ShadcnAlertDialog,\r\n  AlertDialogAction as ShadcnAlertDialogAction,\r\n  AlertDialogCancel as ShadcnAlertDialogCancel,\r\n  AlertDialogContent as ShadcnAlertDialogContent,\r\n  AlertDialogDescription as ShadcnAlertDialogDescription,\r\n  AlertDialogFooter as ShadcnAlertDialogFooter,\r\n  AlertDialogHeader as ShadcnAlertDialogHeader,\r\n  AlertDialogOverlay as ShadcnAlertDialogOverlay,\r\n  AlertDialogPortal as ShadcnAlertDialogPortal,\r\n  AlertDialogTitle as ShadcnAlertDialogTitle,\r\n  AlertDialogTrigger as ShadcnAlertDialogTrigger,\r\n} from \"@/components/ui/alert-dialog\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const alertDialogVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitAlertDialogProps\r\n  extends React.ComponentProps<typeof AlertDialogPrimitive.Root>,\r\n    VariantProps<typeof alertDialogVariants> {}\r\n\r\nfunction AlertDialog({ ...props }: BitAlertDialogProps) {\r\n  return <ShadcnAlertDialog {...props} />;\r\n}\r\n\r\nfunction AlertDialogTrigger({\r\n  className,\r\n  asChild = true,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\r\n  return (\r\n    <ShadcnAlertDialogTrigger\r\n      className={cn(className)}\r\n      asChild={asChild}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertDialogPortal({\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\r\n  return <ShadcnAlertDialogPortal {...props} />;\r\n}\r\n\r\nfunction AlertDialogOverlay({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\r\n  return <ShadcnAlertDialogOverlay className={cn(className)} {...props} />;\r\n}\r\n\r\ninterface BitAlertDialogContentProps\r\n  extends React.ComponentProps<typeof AlertDialogPrimitive.Content>,\r\n    VariantProps<typeof alertDialogVariants> {}\r\n\r\nfunction AlertDialogContent({\r\n  className,\r\n  children,\r\n  font,\r\n  ...props\r\n}: BitAlertDialogContentProps) {\r\n  return (\r\n    <AlertDialogPortal>\r\n      <AlertDialogOverlay />\r\n      <>\r\n        <ShadcnAlertDialogContent\r\n          className={cn(\r\n            \"rounded-none border-y-6 border-foreground dark:border-ring\",\r\n            font !== \"normal\" && \"retro\",\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          {children}\r\n\r\n          <div\r\n            className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        </ShadcnAlertDialogContent>\r\n      </>\r\n    </AlertDialogPortal>\r\n  );\r\n}\r\n\r\nfunction AlertDialogHeader({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return <ShadcnAlertDialogHeader className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction AlertDialogFooter({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <ShadcnAlertDialogFooter\r\n      className={cn(\"flex flex-col-reverse sm:flex-row gap-4\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertDialogTitle({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\r\n  return <ShadcnAlertDialogTitle className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction AlertDialogDescription({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\r\n  return <ShadcnAlertDialogDescription className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction AlertDialogAction({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\r\n  return (\r\n    <ShadcnAlertDialogAction\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative bg-primary\",\r\n        \"ring-0 border-none\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {props.children}\r\n      {/* Pixelated border */}\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n      {/* Top shadow */}\r\n      <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n      <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n      {/* Bottom shadow */}\r\n      <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n      <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n    </ShadcnAlertDialogAction>\r\n  );\r\n}\r\n\r\nfunction AlertDialogCancel({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\r\n  return (\r\n    <ShadcnAlertDialogCancel\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative bg-background\",\r\n        \"ring-0 border-none\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {props.children}\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n    </ShadcnAlertDialogCancel>\r\n  );\r\n}\r\n\r\nexport {\r\n  AlertDialog,\r\n  AlertDialogPortal,\r\n  AlertDialogOverlay,\r\n  AlertDialogTrigger,\r\n  AlertDialogContent,\r\n  AlertDialogHeader,\r\n  AlertDialogFooter,\r\n  AlertDialogTitle,\r\n  AlertDialogDescription,\r\n  AlertDialogAction,\r\n  AlertDialogCancel,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/alert-dialog.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-alert.json b/public/r/8bit-alert.json
index e654d3f6..b5ddbb56 100644
--- a/public/r/8bit-alert.json
+++ b/public/r/8bit-alert.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/alert.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Alert as ShadcnAlert,\n  AlertDescription as ShadcnAlertDescription,\n  AlertTitle as ShadcnAlertTitle,\n} from \"@/components/ui/alert\";\n\nexport const alertVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-card text-card-foreground\",\n      destructive:\n        \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface BitAlertProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof alertVariants> {}\n\nfunction Alert({ children, ...props }: BitAlertProps) {\n  const { variant, className, font } = props;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <ShadcnAlert\n        {...props}\n        variant={variant}\n        className={cn(\n          \"relative rounded-none border-none bg-background\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      >\n        {children}\n      </ShadcnAlert>\n\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n    </div>\n  );\n}\n\nfunction AlertTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <ShadcnAlertTitle\n      className={cn(\"line-clamp-1 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <ShadcnAlertDescription\n      className={cn(\n        \"text-muted-foreground grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Alert as ShadcnAlert,\r\n  AlertDescription as ShadcnAlertDescription,\r\n  AlertTitle as ShadcnAlertTitle,\r\n} from \"@/components/ui/alert\";\r\n\r\nexport const alertVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-card text-card-foreground\",\r\n      destructive:\r\n        \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitAlertProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof alertVariants> {}\r\n\r\nfunction Alert({ children, ...props }: BitAlertProps) {\r\n  const { variant, className, font } = props;\r\n\r\n  return (\r\n    <div className={cn(\"relative\", className)}>\r\n      <ShadcnAlert\r\n        {...props}\r\n        variant={variant}\r\n        className={cn(\r\n          \"relative rounded-none border-none bg-background\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </ShadcnAlert>\r\n\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction AlertTitle({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <ShadcnAlertTitle\r\n      className={cn(\"line-clamp-1 font-medium tracking-tight\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertDescription({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <ShadcnAlertDescription\r\n      className={cn(\r\n        \"text-muted-foreground grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/alert.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-audio-settings.json b/public/r/8bit-audio-settings.json
index ea83c505..8d642e2a 100644
--- a/public/r/8bit-audio-settings.json
+++ b/public/r/8bit-audio-settings.json
@@ -12,37 +12,37 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/audio-settings.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Label } from \"@/components/ui/8bit/label\";\nimport { Slider } from \"@/components/ui/8bit/slider\";\nimport { Switch } from \"@/components/ui/8bit/switch\";\n\nexport default function AudioSettings({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-sm font-medium\">Audio Settings</CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"space-y-4\">\n            <Label htmlFor=\"volume\">Master Volume</Label>\n            <Slider\n              id=\"volume\"\n              defaultValue={[75]}\n              max={100}\n              step={1}\n              className=\"w-full\"\n            />\n          </div>\n          <div className=\"space-y-4\">\n            <Label htmlFor=\"sfx\">SFX Volume</Label>\n            <Slider\n              id=\"sfx\"\n              defaultValue={[60]}\n              max={100}\n              step={1}\n              className=\"w-full\"\n            />\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <Label htmlFor=\"mute\">Mute Audio</Label>\n            <Switch id=\"mute\" />\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <Label htmlFor=\"vibration\">Vibration</Label>\n            <Switch id=\"vibration\" defaultChecked />\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\nimport { Label } from \"@/components/ui/8bit/label\";\r\nimport { Slider } from \"@/components/ui/8bit/slider\";\r\nimport { Switch } from \"@/components/ui/8bit/switch\";\r\n\r\nexport default function AudioSettings({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n      <Card>\r\n        <CardHeader>\r\n          <CardTitle className=\"text-sm font-medium\">Audio Settings</CardTitle>\r\n        </CardHeader>\r\n        <CardContent className=\"space-y-4\">\r\n          <div className=\"space-y-4\">\r\n            <Label htmlFor=\"volume\">Master Volume</Label>\r\n            <Slider\r\n              id=\"volume\"\r\n              defaultValue={[75]}\r\n              max={100}\r\n              step={1}\r\n              className=\"w-full\"\r\n            />\r\n          </div>\r\n          <div className=\"space-y-4\">\r\n            <Label htmlFor=\"sfx\">SFX Volume</Label>\r\n            <Slider\r\n              id=\"sfx\"\r\n              defaultValue={[60]}\r\n              max={100}\r\n              step={1}\r\n              className=\"w-full\"\r\n            />\r\n          </div>\r\n          <div className=\"flex items-center justify-between\">\r\n            <Label htmlFor=\"mute\">Mute Audio</Label>\r\n            <Switch id=\"mute\" />\r\n          </div>\r\n          <div className=\"flex items-center justify-between\">\r\n            <Label htmlFor=\"vibration\">Vibration</Label>\r\n            <Switch id=\"vibration\" defaultChecked />\r\n          </div>\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/audio-settings.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     },
     {
       "path": "components/ui/8bit/switch.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"relative peer data-[state=checked]:bg-primary rounded-xs data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 border border-foreground dark:border-ring ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nfunction Switch({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\r\n  return (\r\n    <SwitchPrimitive.Root\r\n      data-slot=\"switch\"\r\n      className={cn(\r\n        \"relative peer data-[state=checked]:bg-primary rounded-xs data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <SwitchPrimitive.Thumb\r\n        data-slot=\"switch-thumb\"\r\n        className={cn(\r\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 border border-foreground dark:border-ring ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </SwitchPrimitive.Root>\r\n  );\r\n}\r\n\r\nexport { Switch };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/switch.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/slider.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"relative w-full\", className)}>\n    <SliderPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden bg-secondary\">\n        <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n      </SliderPrimitive.Track>\n      <SliderPrimitive.Thumb className=\"block size-5 border-2 border-foreground dark:border-ring bg-foreground dark:bg-ring ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50\" />\n    </SliderPrimitive.Root>\n\n    <div\n      className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n      aria-hidden=\"true\"\n    />\n\n    <div\n      className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n      aria-hidden=\"true\"\n    />\n  </div>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst Slider = React.forwardRef<\r\n  React.ComponentRef<typeof SliderPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <div className={cn(\"relative w-full\", className)}>\r\n    <SliderPrimitive.Root\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex w-full touch-none select-none items-center\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden bg-secondary\">\r\n        <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\r\n      </SliderPrimitive.Track>\r\n      <SliderPrimitive.Thumb className=\"block size-5 border-2 border-foreground dark:border-ring bg-foreground dark:bg-ring ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50\" />\r\n    </SliderPrimitive.Root>\r\n\r\n    <div\r\n      className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n      aria-hidden=\"true\"\r\n    />\r\n\r\n    <div\r\n      className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n      aria-hidden=\"true\"\r\n    />\r\n  </div>\r\n));\r\nSlider.displayName = SliderPrimitive.Root.displayName;\r\n\r\nexport { Slider };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/slider.tsx"
     },
     {
       "path": "components/ui/8bit/label.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface BitLabelProps\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n  return (\n    <ShadcnLabel\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface BitLabelProps\r\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Label({ className, font, ...props }: BitLabelProps) {\r\n  return (\r\n    <ShadcnLabel\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Label };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/label.tsx"
     }
diff --git a/public/r/8bit-avatar.json b/public/r/8bit-avatar.json
index 8c65cbd3..76c5a8d0 100644
--- a/public/r/8bit-avatar.json
+++ b/public/r/8bit-avatar.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/avatar.tsx",
-      "content": "import type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const avatarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"\",\n      retro: \"\",\n      pixel: \"\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n    variant: \"pixel\",\n  },\n});\n\nconst Avatar = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {\n    font?: \"normal\" | \"retro\";\n    variant?: \"default\" | \"retro\" | \"pixel\";\n  }\n>(({ className = \"\", font, variant = \"pixel\", ...props }, ref) => {\n  const isPixel = variant === \"pixel\";\n\n  return (\n    <div className={cn(\"relative size-max\", className)}>\n      {/* Pixel frame (only show if pixel variant) */}\n      {isPixel && (\n        <div\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\n          style={{ zIndex: 10 }}\n        >\n          {/* Top black border */}\n          <div className=\"absolute top-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Second row */}\n          <div className=\"absolute top-[6.25%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Third row */}\n          <div className=\"absolute top-[12.5%] left-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\n          <div className=\"absolute top-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\n\n          {/* Fourth row */}\n          <div className=\"absolute top-[18.75%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[18.75%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Fifth row */}\n          <div className=\"absolute top-[25%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[25%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 6-7 */}\n          <div className=\"absolute top-[31.25%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[31.25%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 8-10 */}\n          <div className=\"absolute top-[43.75%] left-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[43.75%] right-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 11-12 */}\n          <div className=\"absolute top-[62.5%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[62.5%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 13 */}\n          <div className=\"absolute top-[75%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[75%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 14 */}\n          <div className=\"absolute top-[81.25%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[81.25%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 15 */}\n          <div className=\"absolute top-[87.5%] left-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 16 */}\n          <div className=\"absolute top-[93.75%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Bottom row */}\n          <div className=\"absolute bottom-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n        </div>\n      )}\n\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn(\n          \"relative flex size-10 shrink-0 overflow-hidden text-xs\",\n          !isPixel && \"rounded-none\",\n          isPixel && \"rounded-full\",\n          font !== \"normal\" && \"retro\",\n          variant === \"retro\" && \"image-rendering-pixelated\",\n          className\n        )}\n        {...props}\n      />\n\n      {/* Original border styling (only show if not pixel variant) */}\n      {!isPixel && (\n        <>\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute top-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute top-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n        </>\n      )}\n    </div>\n  );\n});\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\ninterface BitAvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {\n  font?: \"normal\" | \"retro\";\n  variant?: \"default\" | \"retro\" | \"pixel\";\n}\n\nconst AvatarImage = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  BitAvatarImageProps\n>(({ className, font, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square h-full w-full\",\n        font === \"retro\" && \"retro\",\n        className\n      )}\n      {...props}\n    />\n  );\n});\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    data-slot=\"avatar-fallback\"\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback };\n",
+      "content": "import type React from \"react\";\r\nimport { forwardRef } from \"react\";\r\n\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\r\nimport { cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const avatarVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"\",\r\n      pixel: \"\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n    variant: \"pixel\",\r\n  },\r\n});\r\n\r\nconst Avatar = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {\r\n    font?: \"normal\" | \"retro\";\r\n    variant?: \"default\" | \"retro\" | \"pixel\";\r\n  }\r\n>(({ className = \"\", font, variant = \"pixel\", ...props }, ref) => {\r\n  const isPixel = variant === \"pixel\";\r\n\r\n  return (\r\n    <div className={cn(\"relative size-max\", className)}>\r\n      {/* Pixel frame (only show if pixel variant) */}\r\n      {isPixel && (\r\n        <div\r\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n          style={{ zIndex: 10 }}\r\n        >\r\n          {/* Top black border */}\r\n          <div className=\"absolute top-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Second row */}\r\n          <div className=\"absolute top-[6.25%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Third row */}\r\n          <div className=\"absolute top-[12.5%] left-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\r\n          <div className=\"absolute top-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\r\n\r\n          {/* Fourth row */}\r\n          <div className=\"absolute top-[18.75%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[18.75%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Fifth row */}\r\n          <div className=\"absolute top-[25%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[25%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 6-7 */}\r\n          <div className=\"absolute top-[31.25%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[31.25%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 8-10 */}\r\n          <div className=\"absolute top-[43.75%] left-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[43.75%] right-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 11-12 */}\r\n          <div className=\"absolute top-[62.5%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[62.5%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 13 */}\r\n          <div className=\"absolute top-[75%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[75%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 14 */}\r\n          <div className=\"absolute top-[81.25%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[81.25%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 15 */}\r\n          <div className=\"absolute top-[87.5%] left-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 16 */}\r\n          <div className=\"absolute top-[93.75%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Bottom row */}\r\n          <div className=\"absolute bottom-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n        </div>\r\n      )}\r\n\r\n      <AvatarPrimitive.Root\r\n        ref={ref}\r\n        data-slot=\"avatar\"\r\n        className={cn(\r\n          \"relative flex size-10 shrink-0 overflow-hidden text-xs\",\r\n          !isPixel && \"rounded-none\",\r\n          isPixel && \"rounded-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          variant === \"retro\" && \"image-rendering-pixelated\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n\r\n      {/* Original border styling (only show if not pixel variant) */}\r\n      {!isPixel && (\r\n        <>\r\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute top-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute top-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\nAvatar.displayName = AvatarPrimitive.Root.displayName;\r\n\r\ninterface BitAvatarImageProps\r\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {\r\n  font?: \"normal\" | \"retro\";\r\n  variant?: \"default\" | \"retro\" | \"pixel\";\r\n}\r\n\r\nconst AvatarImage = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\r\n  BitAvatarImageProps\r\n>(({ className, font, ...props }, ref) => {\r\n  return (\r\n    <AvatarPrimitive.Image\r\n      ref={ref}\r\n      data-slot=\"avatar-image\"\r\n      className={cn(\r\n        \"aspect-square h-full w-full\",\r\n        font === \"retro\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\r\n\r\nconst AvatarFallback = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n  <AvatarPrimitive.Fallback\r\n    ref={ref}\r\n    data-slot=\"avatar-fallback\"\r\n    className={cn(\r\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/avatar.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-badge.json b/public/r/8bit-badge.json
index 477975ef..c926f359 100644
--- a/public/r/8bit-badge.json
+++ b/public/r/8bit-badge.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/badge.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Badge as ShadcnBadge } from \"@/components/ui/badge\";\n\nexport const badgeVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-primary border-primary\",\n      destructive: \"bg-destructive border-destructive\",\n      outline: \"bg-background border-background\",\n      secondary: \"bg-secondary border-secondary\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nfunction Badge({\n  children,\n  className = \"\",\n  font,\n  variant,\n  ...props\n}: BitButtonProps) {\n  const color = badgeVariants({ variant, font });\n\n  const classes = className.split(\" \");\n\n  // spacing-related Tailwind classes\n  const spacingClasses = classes.filter((c) =>\n    /^(m|p|mt|mr|mb|ml|mx|my|pt|pr|pb|pl|px|py|top|bottom|left|right|inset|inset-x|inset-y)-/.test(\n      c\n    )\n  );\n\n  // visual classes for badge and sidebars\n  const visualClasses = classes.filter(\n    (c) =>\n      c.startsWith(\"bg-\") ||\n      c.startsWith(\"border-\") ||\n      c.startsWith(\"text-\") ||\n      c.startsWith(\"rounded-\")\n  );\n\n  return (\n    <div className={cn(\"relative inline-flex\", spacingClasses)}>\n      <ShadcnBadge\n        {...props}\n        className={cn(\n          \"rounded-none\",\n          font !== \"normal\" && \"retro\",\n          visualClasses\n        )}\n        variant={variant}\n      >\n        {children}\n      </ShadcnBadge>\n\n      {/* Left pixel bar */}\n      <div\n        className={cn(\n          \"absolute top-1.5 bottom-1.5 -left-1.5 h-1/2 w-1.5\",\n          color,\n          visualClasses\n        )}\n      />\n      {/* Right pixel bar */}\n      <div\n        className={cn(\n          \"absolute top-1.5 bottom-1.5 -right-1.5 h-1/2 w-1.5\",\n          color,\n          visualClasses\n        )}\n      />\n    </div>\n  );\n}\n\nexport { Badge };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Badge as ShadcnBadge } from \"@/components/ui/badge\";\r\n\r\nexport const badgeVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-primary border-primary\",\r\n      destructive: \"bg-destructive border-destructive\",\r\n      outline: \"bg-background border-background\",\r\n      secondary: \"bg-secondary border-secondary\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof badgeVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Badge({\r\n  children,\r\n  className = \"\",\r\n  font,\r\n  variant,\r\n  ...props\r\n}: BitButtonProps) {\r\n  const color = badgeVariants({ variant, font });\r\n\r\n  const classes = className.split(\" \");\r\n\r\n  // spacing-related Tailwind classes\r\n  const spacingClasses = classes.filter((c) =>\r\n    /^(m|p|mt|mr|mb|ml|mx|my|pt|pr|pb|pl|px|py|top|bottom|left|right|inset|inset-x|inset-y)-/.test(\r\n      c\r\n    )\r\n  );\r\n\r\n  // visual classes for badge and sidebars\r\n  const visualClasses = classes.filter(\r\n    (c) =>\r\n      c.startsWith(\"bg-\") ||\r\n      c.startsWith(\"border-\") ||\r\n      c.startsWith(\"text-\") ||\r\n      c.startsWith(\"rounded-\")\r\n  );\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-flex\", spacingClasses)}>\r\n      <ShadcnBadge\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none\",\r\n          font !== \"normal\" && \"retro\",\r\n          visualClasses\r\n        )}\r\n        variant={variant}\r\n      >\r\n        {children}\r\n      </ShadcnBadge>\r\n\r\n      {/* Left pixel bar */}\r\n      <div\r\n        className={cn(\r\n          \"absolute top-1.5 bottom-1.5 -left-1.5 h-1/2 w-1.5\",\r\n          color,\r\n          visualClasses\r\n        )}\r\n      />\r\n      {/* Right pixel bar */}\r\n      <div\r\n        className={cn(\r\n          \"absolute top-1.5 bottom-1.5 -right-1.5 h-1/2 w-1.5\",\r\n          color,\r\n          visualClasses\r\n        )}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Badge };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/badge.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-breadcrumb.json b/public/r/8bit-breadcrumb.json
index a592876f..7f7612a0 100644
--- a/public/r/8bit-breadcrumb.json
+++ b/public/r/8bit-breadcrumb.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/breadcrumb.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { MoreHorizontal } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Breadcrumb as ShadcnBreadcrumb,\n  BreadcrumbEllipsis as ShadcnBreadcrumbEllipsis,\n  BreadcrumbItem as ShadcnBreadcrumbItem,\n  BreadcrumbList as ShadcnBreadcrumbList,\n  BreadcrumbPage as ShadcnBreadcrumbPage,\n  BreadcrumbSeparator as ShadcnBreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nimport \"./styles/retro.css\";\n\nexport const breadcrumbVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"text-card-foreground\",\n      destructive:\n        \"text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface BitBreadcrumbNavigationProps\n  extends React.ComponentProps<\"nav\">,\n    VariantProps<typeof breadcrumbVariants> {}\n\ninterface BitBreadcrumbOrderedListProps\n  extends React.ComponentProps<\"ol\">,\n    VariantProps<typeof breadcrumbVariants> {}\n\ninterface BitBreadcrumbSpanProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof breadcrumbVariants> {}\n\ninterface BitBreadcrumbListItemProps\n  extends React.ComponentProps<\"li\">,\n    VariantProps<typeof breadcrumbVariants> {}\n\ninterface BitBreadcrumbLinkProps\n  extends React.ComponentProps<\"a\">,\n    VariantProps<typeof breadcrumbVariants> {}\n\nconst ChevronRight = () => {\n  return (\n    <svg\n      width=\"50\"\n      height=\"50\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth=\"0.25\"\n      color=\"\"\n      className=\"size-7\"\n      aria-label=\"chevron-right\"\n    >\n      <rect x=\"128\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"112\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"96\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"96\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"128\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"112\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n    </svg>\n  );\n};\n\nfunction Breadcrumb({ children, ...props }: BitBreadcrumbNavigationProps) {\n  const { variant, className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground\",\n        className\n      )}\n    >\n      <ShadcnBreadcrumb\n        {...props}\n        className={cn(\n          \"relative rounded-none border-none bg-background\",\n          breadcrumbVariants({ variant }),\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      >\n        {children}\n      </ShadcnBreadcrumb>\n    </div>\n  );\n}\n\nfunction BreadcrumbList({ ...props }: BitBreadcrumbOrderedListProps) {\n  const { font, className } = props;\n\n  return (\n    <ShadcnBreadcrumbList\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ ...props }: BitBreadcrumbListItemProps) {\n  const { font, className } = props;\n\n  return (\n    <ShadcnBreadcrumbItem\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  ...props\n}: BitBreadcrumbLinkProps & {\n  asChild?: boolean;\n}) {\n  const { font, className } = props;\n\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ ...props }: BitBreadcrumbSpanProps) {\n  const { font, className } = props;\n\n  return (\n    <ShadcnBreadcrumbPage\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({ ...props }: BitBreadcrumbListItemProps) {\n  const { font, children, className } = props;\n\n  return (\n    <ShadcnBreadcrumbSeparator\n      className={cn(className, font !== \"normal\" && \"retro\", \"[&>svg]:size-7\")}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </ShadcnBreadcrumbSeparator>\n  );\n}\n\nfunction BreadcrumbEllipsis({ ...props }: BitBreadcrumbSpanProps) {\n  const { font, className } = props;\n\n  return (\n    <ShadcnBreadcrumbEllipsis\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    >\n      <MoreHorizontal className={cn(\"size-7\", \"retro\")} />\n      <span className=\"sr-only\">More</span>\n    </ShadcnBreadcrumbEllipsis>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\nimport { MoreHorizontal } from \"lucide-react\";\r\n\r\nimport { ChevronRightIcon } from \"@/components/ui/8bit/assets/chevronRightIcon\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Breadcrumb as ShadcnBreadcrumb,\r\n  BreadcrumbEllipsis as ShadcnBreadcrumbEllipsis,\r\n  BreadcrumbItem as ShadcnBreadcrumbItem,\r\n  BreadcrumbList as ShadcnBreadcrumbList,\r\n  BreadcrumbPage as ShadcnBreadcrumbPage,\r\n  BreadcrumbSeparator as ShadcnBreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const breadcrumbVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"text-card-foreground\",\r\n      destructive:\r\n        \"text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\ninterface BitBreadcrumbNavigationProps\r\n  extends React.ComponentProps<\"nav\">,\r\n    VariantProps<typeof breadcrumbVariants> {}\r\n\r\ninterface BitBreadcrumbOrderedListProps\r\n  extends React.ComponentProps<\"ol\">,\r\n    VariantProps<typeof breadcrumbVariants> {}\r\n\r\ninterface BitBreadcrumbSpanProps\r\n  extends React.ComponentProps<\"span\">,\r\n    VariantProps<typeof breadcrumbVariants> {}\r\n\r\ninterface BitBreadcrumbListItemProps\r\n  extends React.ComponentProps<\"li\">,\r\n    VariantProps<typeof breadcrumbVariants> {}\r\n\r\ninterface BitBreadcrumbLinkProps\r\n  extends React.ComponentProps<\"a\">,\r\n    VariantProps<typeof breadcrumbVariants> {}\r\n\r\nfunction Breadcrumb({ children, ...props }: BitBreadcrumbNavigationProps) {\r\n  const { variant, className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnBreadcrumb\r\n        {...props}\r\n        className={cn(\r\n          \"relative rounded-none border-none bg-background\",\r\n          breadcrumbVariants({ variant }),\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </ShadcnBreadcrumb>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction BreadcrumbList({ ...props }: BitBreadcrumbOrderedListProps) {\r\n  const { font, className } = props;\r\n\r\n  return (\r\n    <ShadcnBreadcrumbList\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BreadcrumbItem({ ...props }: BitBreadcrumbListItemProps) {\r\n  const { font, className } = props;\r\n\r\n  return (\r\n    <ShadcnBreadcrumbItem\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BreadcrumbLink({\r\n  asChild,\r\n  ...props\r\n}: BitBreadcrumbLinkProps & {\r\n  asChild?: boolean;\r\n}) {\r\n  const { font, className } = props;\r\n\r\n  const Comp = asChild ? Slot : \"a\";\r\n\r\n  return (\r\n    <Comp\r\n      data-slot=\"breadcrumb-link\"\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BreadcrumbPage({ ...props }: BitBreadcrumbSpanProps) {\r\n  const { font, className } = props;\r\n\r\n  return (\r\n    <ShadcnBreadcrumbPage\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BreadcrumbSeparator({ ...props }: BitBreadcrumbListItemProps) {\r\n  const { font, children, className } = props;\r\n\r\n  return (\r\n    <ShadcnBreadcrumbSeparator\r\n      className={cn(className, font !== \"normal\" && \"retro\", \"[&>svg]:size-7\")}\r\n      {...props}\r\n    >\r\n      {children ?? <ChevronRightIcon/>}\r\n    </ShadcnBreadcrumbSeparator>\r\n  );\r\n}\r\n\r\nfunction BreadcrumbEllipsis({ ...props }: BitBreadcrumbSpanProps) {\r\n  const { font, className } = props;\r\n\r\n  return (\r\n    <ShadcnBreadcrumbEllipsis\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    >\r\n      <MoreHorizontal className={cn(\"size-7\", \"retro\")} />\r\n      <span className=\"sr-only\">More</span>\r\n    </ShadcnBreadcrumbEllipsis>\r\n  );\r\n}\r\n\r\nexport {\r\n  Breadcrumb,\r\n  BreadcrumbList,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n  BreadcrumbEllipsis,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/breadcrumb.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-button.json b/public/r/8bit-button.json
index f88051d1..b8f13429 100644
--- a/public/r/8bit-button.json
+++ b/public/r/8bit-button.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-calendar.json b/public/r/8bit-calendar.json
index a8a6c236..663fb548 100644
--- a/public/r/8bit-calendar.json
+++ b/public/r/8bit-calendar.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/calendar.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { DayPicker } from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Calendar as ShadcnCalendar } from \"@/components/ui/calendar\";\n\nimport { buttonVariants } from \"./button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\";\nimport \"./styles/retro.css\";\n\nexport const calendarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> &\n  VariantProps<typeof calendarVariants>;\n\nfunction Calendar({ className, classNames, font, ...props }: CalendarProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-popover relative border-y-6 border-foreground dark:border-ring w-max\",\n        className\n      )}\n    >\n      <ShadcnCalendar\n        className={cn(\n          calendarVariants({\n            className,\n            font,\n          })\n        )}\n        classNames={{\n          nav_button: cn(\n            buttonVariants({ variant: \"outline\" }),\n            \"size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50 border-2 border-foreground dark:border-ring\"\n          ),\n          day_button: cn(\n            buttonVariants({ variant: \"ghost\" }),\n            \"h-10 font-normal aria-selected:opacity-100\"\n          ),\n          day: cn(\n            \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none\"\n          ),\n          caption_label: \"text-xs font-medium\",\n          ...classNames,\n        }}\n        components={{\n          MonthsDropdown: ({ className, ...props }) => {\n            const currentMonth = props.value as number;\n\n            const months = [\n              \"January\",\n              \"February\",\n              \"March\",\n              \"April\",\n              \"May\",\n              \"June\",\n              \"July\",\n              \"August\",\n              \"September\",\n              \"October\",\n              \"November\",\n              \"December\",\n            ];\n\n            const currentMonthName = months[currentMonth];\n\n            return (\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\n                <Select defaultValue={currentMonthName}>\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n                    <SelectValue placeholder=\"Dropdown\" />\n                  </SelectTrigger>\n                  <SelectContent align=\"center\">\n                    {months.map((month) => (\n                      <SelectItem key={month} value={month}>\n                        {month}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            );\n          },\n          YearsDropdown: ({ className }) => {\n            const currentYear = new Date().getFullYear();\n            const years = Array.from(\n              { length: currentYear - 1925 + 1 },\n              (_, i) => 1925 + i\n            );\n\n            return (\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\n                <Select defaultValue={currentYear?.toString()}>\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n                    <SelectValue placeholder=\"Dropdown\" />\n                  </SelectTrigger>\n                  <SelectContent align=\"center\">\n                    {years.map((year) => (\n                      <SelectItem key={year} value={year.toString()}>\n                        {year}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            );\n          },\n          Chevron: ({ className, ...props }) => {\n            if (props.orientation === \"left\") {\n              return (\n                <svg\n                  viewBox=\"0 0 256 256\"\n                  fill=\"currentColor\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"0.25\"\n                  color=\"\"\n                  className={cn(\"size-4 shrink-0\", className)}\n                  aria-label=\"chevron-left\"\n                  {...props}\n                >\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 128 136)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 144 152)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 160 72)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 160 168)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 112 120)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 128 104)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 144 88)\"\n                  ></rect>\n                </svg>\n              );\n            }\n\n            return (\n              <svg\n                viewBox=\"0 0 256 256\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                stroke=\"currentColor\"\n                strokeWidth=\"0.25\"\n                color=\"\"\n                className={cn(\"size-4 shrink-0\", className)}\n                aria-label=\"chevron-right\"\n                {...props}\n              >\n                <rect x=\"128\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"112\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"96\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"96\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"128\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"112\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n              </svg>\n            );\n          },\n        }}\n        {...props}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Calendar };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\nimport { DayPicker } from \"react-day-picker\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Calendar as ShadcnCalendar } from \"@/components/ui/calendar\";\r\nimport { ChevronLeftIcon } from \"@/components/ui/8bit/assets/chevronLeftIcon\";\r\nimport { ChevronRightIcon } from \"@/components/ui/8bit/assets/chevronRightIcon\";\r\n\r\nimport { buttonVariants } from \"./button\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"./select\";\r\nimport \"./styles/retro.css\";\r\n\r\nexport const calendarVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> &\r\n  VariantProps<typeof calendarVariants>;\r\n\r\nfunction Calendar({ className, classNames, font, ...props }: CalendarProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"bg-popover relative border-y-6 border-foreground dark:border-ring w-max\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCalendar\r\n        className={cn(\r\n          calendarVariants({\r\n            className,\r\n            font,\r\n          })\r\n        )}\r\n        classNames={{\r\n          nav_button: cn(\r\n            buttonVariants({ variant: \"outline\" }),\r\n            \"size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50 border-2 border-foreground dark:border-ring\"\r\n          ),\r\n          day_button: cn(\r\n            buttonVariants({ variant: \"ghost\" }),\r\n            \"h-10 font-normal aria-selected:opacity-100\"\r\n          ),\r\n          day: cn(\r\n            \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none\"\r\n          ),\r\n          caption_label: \"text-xs font-medium\",\r\n          ...classNames,\r\n        }}\r\n        components={{\r\n          MonthsDropdown: ({ className, ...props }) => {\r\n            const currentMonth = props.value as number;\r\n\r\n            const months = [\r\n              \"January\",\r\n              \"February\",\r\n              \"March\",\r\n              \"April\",\r\n              \"May\",\r\n              \"June\",\r\n              \"July\",\r\n              \"August\",\r\n              \"September\",\r\n              \"October\",\r\n              \"November\",\r\n              \"December\",\r\n            ];\r\n\r\n            const currentMonthName = months[currentMonth];\r\n\r\n            return (\r\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\r\n                <Select defaultValue={currentMonthName}>\r\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\r\n                    <SelectValue placeholder=\"Dropdown\" />\r\n                  </SelectTrigger>\r\n                  <SelectContent align=\"center\">\r\n                    {months.map((month) => (\r\n                      <SelectItem key={month} value={month}>\r\n                        {month}\r\n                      </SelectItem>\r\n                    ))}\r\n                  </SelectContent>\r\n                </Select>\r\n              </div>\r\n            );\r\n          },\r\n          YearsDropdown: ({ className }) => {\r\n            const currentYear = new Date().getFullYear();\r\n            const years = Array.from(\r\n              { length: currentYear - 1925 + 1 },\r\n              (_, i) => 1925 + i\r\n            );\r\n\r\n            return (\r\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\r\n                <Select defaultValue={currentYear?.toString()}>\r\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\r\n                    <SelectValue placeholder=\"Dropdown\" />\r\n                  </SelectTrigger>\r\n                  <SelectContent align=\"center\">\r\n                    {years.map((year) => (\r\n                      <SelectItem key={year} value={year.toString()}>\r\n                        {year}\r\n                      </SelectItem>\r\n                    ))}\r\n                  </SelectContent>\r\n                </Select>\r\n              </div>\r\n            );\r\n          },\r\n          Chevron: ({ className, ...props }) => {\r\n            if (props.orientation === \"left\") {\r\n              return (\r\n                <ChevronLeftIcon/>\r\n              );\r\n            }\r\n\r\n            return (\r\n              <ChevronRightIcon/>\r\n            );\r\n          },\r\n        }}\r\n        {...props}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Calendar };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/calendar.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-card.json b/public/r/8bit-card.json
index 30a01173..e298c0f2 100644
--- a/public/r/8bit-card.json
+++ b/public/r/8bit-card.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-carousel.json b/public/r/8bit-carousel.json
index 3a8bef20..f426786d 100644
--- a/public/r/8bit-carousel.json
+++ b/public/r/8bit-carousel.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/carousel.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    );\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return;\n      }\n\n      setCanScrollPrev(api.canScrollPrev());\n      setCanScrollNext(api.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => {\n      console.log(\"scrolled prev\");\n      api?.scrollPrev();\n    }, [api]);\n\n    const scrollNext = React.useCallback(() => {\n      console.log(\"scrolled next\");\n      api?.scrollNext();\n    }, [api]);\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault();\n          scrollPrev();\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault();\n          scrollNext();\n        }\n      },\n      [scrollPrev, scrollNext]\n    );\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return;\n      }\n\n      setApi(api);\n    }, [api, setApi]);\n\n    React.useEffect(() => {\n      if (!api) {\n        return;\n      }\n\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n\n      return () => {\n        api?.off(\"select\", onSelect);\n      };\n    }, [api, onSelect]);\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    );\n  }\n);\nCarousel.displayName = \"Carousel\";\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nCarouselContent.displayName = \"CarouselContent\";\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n});\nCarouselItem.displayName = \"CarouselItem\";\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-10 md:-left-14 -translate-y-1/2 active:-translate-y-1 w-8 h-9 md:w-9 md:h-10 \"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90 w-8 h-10 md:w-9 md:h-11\",\n        \"absolute rounded-none aspect-square grid place-items-center\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <svg\n        width=\"50\"\n        height=\"50\"\n        viewBox=\"0 0 256 256\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        stroke=\"currentColor\"\n        strokeWidth=\"0.25\"\n        color=\"currentColor\"\n        aria-label=\"arrow-left\"\n      >\n        <rect x=\"64\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"96\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"80\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"112\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"160\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"80\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"96\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"112\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"80\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"96\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"112\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"176\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"128\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      </svg>\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n});\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-10 md:-right-14 -translate-y-1/2 active:-translate-y-1 aspect-square shrink-0 w-8 h-9 md:w-9 md:h-10 \"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90 w-8 h-10 md:w-9 md:h-11\",\n        \"absolute rounded-none aspect-square grid place-items-center\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <svg\n        width=\"50\"\n        height=\"50\"\n        viewBox=\"0 0 256 256\"\n        fill=\"currentColor\"\n        className=\"block\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        stroke=\"currentColor\"\n        strokeWidth=\"0.25\"\n        color=\"currentColor\"\n        aria-label=\"arrow-right\"\n      >\n        <rect x=\"64\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"96\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"80\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"112\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"160\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"160\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"144\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"128\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"128\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"176\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"160\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"144\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"128\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      </svg>\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n});\nCarouselNext.displayName = \"CarouselNext\";\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport useEmblaCarousel, {\r\n  type UseEmblaCarouselType,\r\n} from \"embla-carousel-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\n\r\ntype CarouselApi = UseEmblaCarouselType[1];\r\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\r\ntype CarouselOptions = UseCarouselParameters[0];\r\ntype CarouselPlugin = UseCarouselParameters[1];\r\n\r\ntype CarouselProps = {\r\n  opts?: CarouselOptions;\r\n  plugins?: CarouselPlugin;\r\n  orientation?: \"horizontal\" | \"vertical\";\r\n  setApi?: (api: CarouselApi) => void;\r\n};\r\n\r\ntype CarouselContextProps = {\r\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\r\n  api: ReturnType<typeof useEmblaCarousel>[1];\r\n  scrollPrev: () => void;\r\n  scrollNext: () => void;\r\n  canScrollPrev: boolean;\r\n  canScrollNext: boolean;\r\n} & CarouselProps;\r\n\r\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\r\n\r\nfunction useCarousel() {\r\n  const context = React.useContext(CarouselContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nconst Carousel = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\r\n>(\r\n  (\r\n    {\r\n      orientation = \"horizontal\",\r\n      opts,\r\n      setApi,\r\n      plugins,\r\n      className,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const [carouselRef, api] = useEmblaCarousel(\r\n      {\r\n        ...opts,\r\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\r\n      },\r\n      plugins\r\n    );\r\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\r\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\r\n\r\n    const onSelect = React.useCallback((api: CarouselApi) => {\r\n      if (!api) {\r\n        return;\r\n      }\r\n\r\n      setCanScrollPrev(api.canScrollPrev());\r\n      setCanScrollNext(api.canScrollNext());\r\n    }, []);\r\n\r\n    const scrollPrev = React.useCallback(() => {\r\n      console.log(\"scrolled prev\");\r\n      api?.scrollPrev();\r\n    }, [api]);\r\n\r\n    const scrollNext = React.useCallback(() => {\r\n      console.log(\"scrolled next\");\r\n      api?.scrollNext();\r\n    }, [api]);\r\n\r\n    const handleKeyDown = React.useCallback(\r\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n        if (event.key === \"ArrowLeft\") {\r\n          event.preventDefault();\r\n          scrollPrev();\r\n        } else if (event.key === \"ArrowRight\") {\r\n          event.preventDefault();\r\n          scrollNext();\r\n        }\r\n      },\r\n      [scrollPrev, scrollNext]\r\n    );\r\n\r\n    React.useEffect(() => {\r\n      if (!api || !setApi) {\r\n        return;\r\n      }\r\n\r\n      setApi(api);\r\n    }, [api, setApi]);\r\n\r\n    React.useEffect(() => {\r\n      if (!api) {\r\n        return;\r\n      }\r\n\r\n      onSelect(api);\r\n      api.on(\"reInit\", onSelect);\r\n      api.on(\"select\", onSelect);\r\n\r\n      return () => {\r\n        api?.off(\"select\", onSelect);\r\n      };\r\n    }, [api, onSelect]);\r\n\r\n    return (\r\n      <CarouselContext.Provider\r\n        value={{\r\n          carouselRef,\r\n          api: api,\r\n          opts,\r\n          orientation:\r\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\r\n          scrollPrev,\r\n          scrollNext,\r\n          canScrollPrev,\r\n          canScrollNext,\r\n        }}\r\n      >\r\n        <div\r\n          ref={ref}\r\n          onKeyDownCapture={handleKeyDown}\r\n          className={cn(\"relative\", className)}\r\n          role=\"region\"\r\n          aria-roledescription=\"carousel\"\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      </CarouselContext.Provider>\r\n    );\r\n  }\r\n);\r\nCarousel.displayName = \"Carousel\";\r\n\r\nconst CarouselContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n  const { carouselRef, orientation } = useCarousel();\r\n\r\n  return (\r\n    <div ref={carouselRef} className=\"overflow-hidden\">\r\n      <div\r\n        ref={ref}\r\n        className={cn(\r\n          \"flex\",\r\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n});\r\nCarouselContent.displayName = \"CarouselContent\";\r\n\r\nconst CarouselItem = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n  const { orientation } = useCarousel();\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"group\"\r\n      aria-roledescription=\"slide\"\r\n      className={cn(\r\n        \"min-w-0 shrink-0 grow-0 basis-full\",\r\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nCarouselItem.displayName = \"CarouselItem\";\r\n\r\nconst CarouselPrevious = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<typeof Button>\r\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\r\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      variant={variant}\r\n      size={size}\r\n      className={cn(\r\n        orientation === \"horizontal\"\r\n          ? \"top-1/2 -left-10 md:-left-14 -translate-y-1/2 active:-translate-y-1 w-8 h-9 md:w-9 md:h-10 \"\r\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90 w-8 h-10 md:w-9 md:h-11\",\r\n        \"absolute rounded-none aspect-square grid place-items-center\",\r\n        className\r\n      )}\r\n      disabled={!canScrollPrev}\r\n      onClick={scrollPrev}\r\n      {...props}\r\n    >\r\n      <svg\r\n        width=\"50\"\r\n        height=\"50\"\r\n        viewBox=\"0 0 256 256\"\r\n        fill=\"currentColor\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"0.25\"\r\n        color=\"currentColor\"\r\n        aria-label=\"arrow-left\"\r\n      >\r\n        <rect x=\"64\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"96\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"80\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"112\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"160\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"80\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"96\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"112\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"80\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"96\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"112\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"176\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"128\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n      </svg>\r\n      <span className=\"sr-only\">Previous slide</span>\r\n    </Button>\r\n  );\r\n});\r\nCarouselPrevious.displayName = \"CarouselPrevious\";\r\n\r\nconst CarouselNext = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<typeof Button>\r\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\r\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      variant={variant}\r\n      size={size}\r\n      className={cn(\r\n        orientation === \"horizontal\"\r\n          ? \"top-1/2 -right-10 md:-right-14 -translate-y-1/2 active:-translate-y-1 aspect-square shrink-0 w-8 h-9 md:w-9 md:h-10 \"\r\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90 w-8 h-10 md:w-9 md:h-11\",\r\n        \"absolute rounded-none aspect-square grid place-items-center\",\r\n        className\r\n      )}\r\n      disabled={!canScrollNext}\r\n      onClick={scrollNext}\r\n      {...props}\r\n    >\r\n      <svg\r\n        width=\"50\"\r\n        height=\"50\"\r\n        viewBox=\"0 0 256 256\"\r\n        fill=\"currentColor\"\r\n        className=\"block\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"0.25\"\r\n        color=\"currentColor\"\r\n        aria-label=\"arrow-right\"\r\n      >\r\n        <rect x=\"64\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"96\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"80\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"112\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"160\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"160\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"144\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"128\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"128\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"176\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"160\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"144\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"128\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n      </svg>\r\n      <span className=\"sr-only\">Next slide</span>\r\n    </Button>\r\n  );\r\n});\r\nCarouselNext.displayName = \"CarouselNext\";\r\n\r\nexport {\r\n  type CarouselApi,\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem,\r\n  CarouselPrevious,\r\n  CarouselNext,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/carousel.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-chart-area-step.json b/public/r/8bit-chart-area-step.json
index 9ee5453e..4aaabd9f 100644
--- a/public/r/8bit-chart-area-step.json
+++ b/public/r/8bit-chart-area-step.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/chart-area-step.tsx",
-      "content": "\"use client\";\n\nimport { Activity } from \"lucide-react\";\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\";\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/8bit/chart\";\n\nexport const description = \"A step area chart\";\n\nconst chartData = [\n  { month: \"January\", desktop: 99 },\n  { month: \"February\", desktop: 204 },\n  { month: \"March\", desktop: 180 },\n  { month: \"April\", desktop: 120 },\n  { month: \"May\", desktop: 180 },\n  { month: \"June\", desktop: 42 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig;\n\nexport default function ChartAreaStep() {\n  return (\n    <ChartContainer config={chartConfig}>\n      <AreaChart\n        data={chartData}\n        margin={{\n          left: 20,\n          right: 20,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent hideLabel />}\n        />\n        <Area\n          dataKey=\"desktop\"\n          type=\"step\"\n          fill=\"var(--color-desktop)\"\n          stroke=\"var(--color-desktop)\"\n          activeDot={{\n            fill: \"var(--chart-active-dot)\",\n          }}\n        />\n      </AreaChart>\n    </ChartContainer>\n  );\n}\n",
+      "content": "\"use client\";\r\n\r\nimport { Activity } from \"lucide-react\";\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\";\r\n\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@/components/ui/8bit/chart\";\r\n\r\nexport const description = \"A step area chart\";\r\n\r\nconst chartData = [\r\n  { month: \"January\", desktop: 99 },\r\n  { month: \"February\", desktop: 204 },\r\n  { month: \"March\", desktop: 180 },\r\n  { month: \"April\", desktop: 120 },\r\n  { month: \"May\", desktop: 180 },\r\n  { month: \"June\", desktop: 42 },\r\n];\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--chart-1)\",\r\n    icon: Activity,\r\n  },\r\n} satisfies ChartConfig;\r\n\r\nexport default function ChartAreaStep() {\r\n  return (\r\n    <ChartContainer config={chartConfig}>\r\n      <AreaChart\r\n        data={chartData}\r\n        margin={{\r\n          left: 20,\r\n          right: 20,\r\n        }}\r\n      >\r\n        <CartesianGrid vertical={false} />\r\n        <XAxis\r\n          dataKey=\"month\"\r\n          tickLine={false}\r\n          axisLine={false}\r\n          tickMargin={8}\r\n          tickFormatter={(value) => value.slice(0, 3)}\r\n        />\r\n        <ChartTooltip\r\n          cursor={false}\r\n          content={<ChartTooltipContent hideLabel />}\r\n        />\r\n        <Area\r\n          dataKey=\"desktop\"\r\n          type=\"step\"\r\n          fill=\"var(--color-desktop)\"\r\n          stroke=\"var(--color-desktop)\"\r\n          activeDot={{\r\n            fill: \"var(--chart-active-dot)\",\r\n          }}\r\n        />\r\n      </AreaChart>\r\n    </ChartContainer>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/chart-area-step.tsx"
     },
     {
       "path": "components/ui/8bit/chart.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"];\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n  }) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload.fill || item.color;\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          \"shrink-0 border-(--color-border) bg-(--color-bg)\",\n                          {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          }\n                        )}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      \"flex flex-1 justify-between leading-none\",\n                      nestLabel ? \"items-end\" : \"items-center\"\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                      {item.value && (\n                        <span className=\"text-foreground font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean;\n    nameKey?: string;\n  }) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as RechartsPrimitive from \"recharts\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\r\n\r\nexport type ChartConfig = {\r\n  [k in string]: {\r\n    label?: React.ReactNode;\r\n    icon?: React.ComponentType;\r\n  } & (\r\n    | { color?: string; theme?: never }\r\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\r\n  );\r\n};\r\n\r\ntype ChartContextProps = {\r\n  config: ChartConfig;\r\n};\r\n\r\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\r\n\r\nfunction useChart() {\r\n  const context = React.useContext(ChartContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nfunction ChartContainer({\r\n  id,\r\n  className,\r\n  children,\r\n  config,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  config: ChartConfig;\r\n  children: React.ComponentProps<\r\n    typeof RechartsPrimitive.ResponsiveContainer\r\n  >[\"children\"];\r\n}) {\r\n  const uniqueId = React.useId();\r\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\r\n\r\n  return (\r\n    <ChartContext.Provider value={{ config }}>\r\n      <div\r\n        data-slot=\"chart\"\r\n        data-chart={chartId}\r\n        className={cn(\r\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <ChartStyle id={chartId} config={config} />\r\n        <RechartsPrimitive.ResponsiveContainer>\r\n          {children}\r\n        </RechartsPrimitive.ResponsiveContainer>\r\n      </div>\r\n    </ChartContext.Provider>\r\n  );\r\n}\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n  const colorConfig = Object.entries(config).filter(\r\n    ([, config]) => config.theme || config.color\r\n  );\r\n\r\n  if (!colorConfig.length) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <style\r\n      dangerouslySetInnerHTML={{\r\n        __html: Object.entries(THEMES)\r\n          .map(\r\n            ([theme, prefix]) => `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n  .map(([key, itemConfig]) => {\r\n    const color =\r\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\r\n      itemConfig.color;\r\n    return color ? `  --color-${key}: ${color};` : null;\r\n  })\r\n  .join(\"\\n\")}\r\n}\r\n`\r\n          )\r\n          .join(\"\\n\"),\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip;\r\n\r\nfunction ChartTooltipContent({\r\n  active,\r\n  payload,\r\n  className,\r\n  indicator = \"dot\",\r\n  hideLabel = false,\r\n  hideIndicator = false,\r\n  label,\r\n  labelFormatter,\r\n  labelClassName,\r\n  formatter,\r\n  color,\r\n  nameKey,\r\n  labelKey,\r\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\r\n  React.ComponentProps<\"div\"> & {\r\n    hideLabel?: boolean;\r\n    hideIndicator?: boolean;\r\n    indicator?: \"line\" | \"dot\" | \"dashed\";\r\n    nameKey?: string;\r\n    labelKey?: string;\r\n  }) {\r\n  const { config } = useChart();\r\n\r\n  const tooltipLabel = React.useMemo(() => {\r\n    if (hideLabel || !payload?.length) {\r\n      return null;\r\n    }\r\n\r\n    const [item] = payload;\r\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\r\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n    const value =\r\n      !labelKey && typeof label === \"string\"\r\n        ? config[label as keyof typeof config]?.label || label\r\n        : itemConfig?.label;\r\n\r\n    if (labelFormatter) {\r\n      return (\r\n        <div className={cn(\"font-medium\", labelClassName)}>\r\n          {labelFormatter(value, payload)}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (!value) {\r\n      return null;\r\n    }\r\n\r\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\r\n  }, [\r\n    label,\r\n    labelFormatter,\r\n    payload,\r\n    hideLabel,\r\n    labelClassName,\r\n    config,\r\n    labelKey,\r\n  ]);\r\n\r\n  if (!active || !payload?.length) {\r\n    return null;\r\n  }\r\n\r\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5 text-xs shadow-xl\",\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      {!nestLabel ? tooltipLabel : null}\r\n      <div className=\"grid gap-1.5\">\r\n        {payload.map((item, index) => {\r\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\r\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n          const indicatorColor = color || item.payload.fill || item.color;\r\n\r\n          return (\r\n            <div\r\n              key={item.dataKey}\r\n              className={cn(\r\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\r\n                indicator === \"dot\" && \"items-center\"\r\n              )}\r\n            >\r\n              {formatter && item?.value !== undefined && item.name ? (\r\n                formatter(item.value, item.name, item, index, item.payload)\r\n              ) : (\r\n                <>\r\n                  {itemConfig?.icon ? (\r\n                    <itemConfig.icon />\r\n                  ) : (\r\n                    !hideIndicator && (\r\n                      <div\r\n                        className={cn(\r\n                          \"shrink-0 border-(--color-border) bg-(--color-bg)\",\r\n                          {\r\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\r\n                            \"w-1\": indicator === \"line\",\r\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\r\n                              indicator === \"dashed\",\r\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\r\n                          }\r\n                        )}\r\n                        style={\r\n                          {\r\n                            \"--color-bg\": indicatorColor,\r\n                            \"--color-border\": indicatorColor,\r\n                          } as React.CSSProperties\r\n                        }\r\n                      />\r\n                    )\r\n                  )}\r\n                  <div\r\n                    className={cn(\r\n                      \"flex flex-1 justify-between leading-none\",\r\n                      nestLabel ? \"items-end\" : \"items-center\"\r\n                    )}\r\n                  >\r\n                    <div className=\"grid gap-1.5\">\r\n                      {nestLabel ? tooltipLabel : null}\r\n                      <span className=\"text-muted-foreground\">\r\n                        {itemConfig?.label || item.name}\r\n                      </span>\r\n                      {item.value && (\r\n                        <span className=\"text-foreground font-medium tabular-nums\">\r\n                          {item.value.toLocaleString()}\r\n                        </span>\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </>\r\n              )}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend;\r\n\r\nfunction ChartLegendContent({\r\n  className,\r\n  hideIcon = false,\r\n  payload,\r\n  verticalAlign = \"bottom\",\r\n  nameKey,\r\n}: React.ComponentProps<\"div\"> &\r\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\r\n    hideIcon?: boolean;\r\n    nameKey?: string;\r\n  }) {\r\n  const { config } = useChart();\r\n\r\n  if (!payload?.length) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex items-center justify-center gap-4\",\r\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\r\n        className\r\n      )}\r\n    >\r\n      {payload.map((item) => {\r\n        const key = `${nameKey || item.dataKey || \"value\"}`;\r\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n\r\n        return (\r\n          <div\r\n            key={item.value}\r\n            className={cn(\r\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\r\n            )}\r\n          >\r\n            {itemConfig?.icon && !hideIcon ? (\r\n              <itemConfig.icon />\r\n            ) : (\r\n              <div\r\n                className=\"h-2 w-2 shrink-0\"\r\n                style={{\r\n                  backgroundColor: item.color,\r\n                }}\r\n              />\r\n            )}\r\n            {itemConfig?.label}\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n\r\n// Helper to extract item config from a payload.\r\nfunction getPayloadConfigFromPayload(\r\n  config: ChartConfig,\r\n  payload: unknown,\r\n  key: string\r\n) {\r\n  if (typeof payload !== \"object\" || payload === null) {\r\n    return undefined;\r\n  }\r\n\r\n  const payloadPayload =\r\n    \"payload\" in payload &&\r\n    typeof payload.payload === \"object\" &&\r\n    payload.payload !== null\r\n      ? payload.payload\r\n      : undefined;\r\n\r\n  let configLabelKey: string = key;\r\n\r\n  if (\r\n    key in payload &&\r\n    typeof payload[key as keyof typeof payload] === \"string\"\r\n  ) {\r\n    configLabelKey = payload[key as keyof typeof payload] as string;\r\n  } else if (\r\n    payloadPayload &&\r\n    key in payloadPayload &&\r\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n  ) {\r\n    configLabelKey = payloadPayload[\r\n      key as keyof typeof payloadPayload\r\n    ] as string;\r\n  }\r\n\r\n  return configLabelKey in config\r\n    ? config[configLabelKey]\r\n    : config[key as keyof typeof config];\r\n}\r\n\r\nexport {\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartStyle,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/chart.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-chart-bar.json b/public/r/8bit-chart-bar.json
index 35dee855..c35bb138 100644
--- a/public/r/8bit-chart-bar.json
+++ b/public/r/8bit-chart-bar.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/chart-bar.tsx",
-      "content": "\"use client\";\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\";\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/8bit/chart\";\n\nexport const description = \"A multiple bar chart\";\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig;\n\nexport default function ChartBarMultiple() {\n  return (\n    <ChartContainer config={chartConfig}>\n      <BarChart data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent indicator=\"dot\" />}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n      </BarChart>\n    </ChartContainer>\n  );\n}\n",
+      "content": "\"use client\";\r\n\r\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\";\r\n\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@/components/ui/8bit/chart\";\r\n\r\nexport const description = \"A multiple bar chart\";\r\n\r\nconst chartData = [\r\n  { month: \"January\", desktop: 186, mobile: 80 },\r\n  { month: \"February\", desktop: 305, mobile: 200 },\r\n  { month: \"March\", desktop: 237, mobile: 120 },\r\n  { month: \"April\", desktop: 73, mobile: 190 },\r\n  { month: \"May\", desktop: 209, mobile: 130 },\r\n  { month: \"June\", desktop: 214, mobile: 140 },\r\n];\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--chart-1)\",\r\n  },\r\n  mobile: {\r\n    label: \"Mobile\",\r\n    color: \"var(--chart-2)\",\r\n  },\r\n} satisfies ChartConfig;\r\n\r\nexport default function ChartBarMultiple() {\r\n  return (\r\n    <ChartContainer config={chartConfig}>\r\n      <BarChart data={chartData}>\r\n        <CartesianGrid vertical={false} />\r\n        <XAxis\r\n          dataKey=\"month\"\r\n          tickLine={false}\r\n          tickMargin={10}\r\n          axisLine={false}\r\n          tickFormatter={(value) => value.slice(0, 3)}\r\n        />\r\n        <ChartTooltip\r\n          cursor={false}\r\n          content={<ChartTooltipContent indicator=\"dot\" />}\r\n        />\r\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" />\r\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\r\n      </BarChart>\r\n    </ChartContainer>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/chart-bar.tsx"
     },
     {
       "path": "components/ui/8bit/chart.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"];\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n  }) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload.fill || item.color;\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          \"shrink-0 border-(--color-border) bg-(--color-bg)\",\n                          {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          }\n                        )}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      \"flex flex-1 justify-between leading-none\",\n                      nestLabel ? \"items-end\" : \"items-center\"\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                      {item.value && (\n                        <span className=\"text-foreground font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean;\n    nameKey?: string;\n  }) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as RechartsPrimitive from \"recharts\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\r\n\r\nexport type ChartConfig = {\r\n  [k in string]: {\r\n    label?: React.ReactNode;\r\n    icon?: React.ComponentType;\r\n  } & (\r\n    | { color?: string; theme?: never }\r\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\r\n  );\r\n};\r\n\r\ntype ChartContextProps = {\r\n  config: ChartConfig;\r\n};\r\n\r\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\r\n\r\nfunction useChart() {\r\n  const context = React.useContext(ChartContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nfunction ChartContainer({\r\n  id,\r\n  className,\r\n  children,\r\n  config,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  config: ChartConfig;\r\n  children: React.ComponentProps<\r\n    typeof RechartsPrimitive.ResponsiveContainer\r\n  >[\"children\"];\r\n}) {\r\n  const uniqueId = React.useId();\r\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\r\n\r\n  return (\r\n    <ChartContext.Provider value={{ config }}>\r\n      <div\r\n        data-slot=\"chart\"\r\n        data-chart={chartId}\r\n        className={cn(\r\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <ChartStyle id={chartId} config={config} />\r\n        <RechartsPrimitive.ResponsiveContainer>\r\n          {children}\r\n        </RechartsPrimitive.ResponsiveContainer>\r\n      </div>\r\n    </ChartContext.Provider>\r\n  );\r\n}\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n  const colorConfig = Object.entries(config).filter(\r\n    ([, config]) => config.theme || config.color\r\n  );\r\n\r\n  if (!colorConfig.length) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <style\r\n      dangerouslySetInnerHTML={{\r\n        __html: Object.entries(THEMES)\r\n          .map(\r\n            ([theme, prefix]) => `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n  .map(([key, itemConfig]) => {\r\n    const color =\r\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\r\n      itemConfig.color;\r\n    return color ? `  --color-${key}: ${color};` : null;\r\n  })\r\n  .join(\"\\n\")}\r\n}\r\n`\r\n          )\r\n          .join(\"\\n\"),\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip;\r\n\r\nfunction ChartTooltipContent({\r\n  active,\r\n  payload,\r\n  className,\r\n  indicator = \"dot\",\r\n  hideLabel = false,\r\n  hideIndicator = false,\r\n  label,\r\n  labelFormatter,\r\n  labelClassName,\r\n  formatter,\r\n  color,\r\n  nameKey,\r\n  labelKey,\r\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\r\n  React.ComponentProps<\"div\"> & {\r\n    hideLabel?: boolean;\r\n    hideIndicator?: boolean;\r\n    indicator?: \"line\" | \"dot\" | \"dashed\";\r\n    nameKey?: string;\r\n    labelKey?: string;\r\n  }) {\r\n  const { config } = useChart();\r\n\r\n  const tooltipLabel = React.useMemo(() => {\r\n    if (hideLabel || !payload?.length) {\r\n      return null;\r\n    }\r\n\r\n    const [item] = payload;\r\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\r\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n    const value =\r\n      !labelKey && typeof label === \"string\"\r\n        ? config[label as keyof typeof config]?.label || label\r\n        : itemConfig?.label;\r\n\r\n    if (labelFormatter) {\r\n      return (\r\n        <div className={cn(\"font-medium\", labelClassName)}>\r\n          {labelFormatter(value, payload)}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (!value) {\r\n      return null;\r\n    }\r\n\r\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\r\n  }, [\r\n    label,\r\n    labelFormatter,\r\n    payload,\r\n    hideLabel,\r\n    labelClassName,\r\n    config,\r\n    labelKey,\r\n  ]);\r\n\r\n  if (!active || !payload?.length) {\r\n    return null;\r\n  }\r\n\r\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5 text-xs shadow-xl\",\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      {!nestLabel ? tooltipLabel : null}\r\n      <div className=\"grid gap-1.5\">\r\n        {payload.map((item, index) => {\r\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\r\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n          const indicatorColor = color || item.payload.fill || item.color;\r\n\r\n          return (\r\n            <div\r\n              key={item.dataKey}\r\n              className={cn(\r\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\r\n                indicator === \"dot\" && \"items-center\"\r\n              )}\r\n            >\r\n              {formatter && item?.value !== undefined && item.name ? (\r\n                formatter(item.value, item.name, item, index, item.payload)\r\n              ) : (\r\n                <>\r\n                  {itemConfig?.icon ? (\r\n                    <itemConfig.icon />\r\n                  ) : (\r\n                    !hideIndicator && (\r\n                      <div\r\n                        className={cn(\r\n                          \"shrink-0 border-(--color-border) bg-(--color-bg)\",\r\n                          {\r\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\r\n                            \"w-1\": indicator === \"line\",\r\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\r\n                              indicator === \"dashed\",\r\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\r\n                          }\r\n                        )}\r\n                        style={\r\n                          {\r\n                            \"--color-bg\": indicatorColor,\r\n                            \"--color-border\": indicatorColor,\r\n                          } as React.CSSProperties\r\n                        }\r\n                      />\r\n                    )\r\n                  )}\r\n                  <div\r\n                    className={cn(\r\n                      \"flex flex-1 justify-between leading-none\",\r\n                      nestLabel ? \"items-end\" : \"items-center\"\r\n                    )}\r\n                  >\r\n                    <div className=\"grid gap-1.5\">\r\n                      {nestLabel ? tooltipLabel : null}\r\n                      <span className=\"text-muted-foreground\">\r\n                        {itemConfig?.label || item.name}\r\n                      </span>\r\n                      {item.value && (\r\n                        <span className=\"text-foreground font-medium tabular-nums\">\r\n                          {item.value.toLocaleString()}\r\n                        </span>\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </>\r\n              )}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend;\r\n\r\nfunction ChartLegendContent({\r\n  className,\r\n  hideIcon = false,\r\n  payload,\r\n  verticalAlign = \"bottom\",\r\n  nameKey,\r\n}: React.ComponentProps<\"div\"> &\r\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\r\n    hideIcon?: boolean;\r\n    nameKey?: string;\r\n  }) {\r\n  const { config } = useChart();\r\n\r\n  if (!payload?.length) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex items-center justify-center gap-4\",\r\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\r\n        className\r\n      )}\r\n    >\r\n      {payload.map((item) => {\r\n        const key = `${nameKey || item.dataKey || \"value\"}`;\r\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n\r\n        return (\r\n          <div\r\n            key={item.value}\r\n            className={cn(\r\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\r\n            )}\r\n          >\r\n            {itemConfig?.icon && !hideIcon ? (\r\n              <itemConfig.icon />\r\n            ) : (\r\n              <div\r\n                className=\"h-2 w-2 shrink-0\"\r\n                style={{\r\n                  backgroundColor: item.color,\r\n                }}\r\n              />\r\n            )}\r\n            {itemConfig?.label}\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n\r\n// Helper to extract item config from a payload.\r\nfunction getPayloadConfigFromPayload(\r\n  config: ChartConfig,\r\n  payload: unknown,\r\n  key: string\r\n) {\r\n  if (typeof payload !== \"object\" || payload === null) {\r\n    return undefined;\r\n  }\r\n\r\n  const payloadPayload =\r\n    \"payload\" in payload &&\r\n    typeof payload.payload === \"object\" &&\r\n    payload.payload !== null\r\n      ? payload.payload\r\n      : undefined;\r\n\r\n  let configLabelKey: string = key;\r\n\r\n  if (\r\n    key in payload &&\r\n    typeof payload[key as keyof typeof payload] === \"string\"\r\n  ) {\r\n    configLabelKey = payload[key as keyof typeof payload] as string;\r\n  } else if (\r\n    payloadPayload &&\r\n    key in payloadPayload &&\r\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n  ) {\r\n    configLabelKey = payloadPayload[\r\n      key as keyof typeof payloadPayload\r\n    ] as string;\r\n  }\r\n\r\n  return configLabelKey in config\r\n    ? config[configLabelKey]\r\n    : config[key as keyof typeof config];\r\n}\r\n\r\nexport {\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartStyle,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/chart.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-chart.json b/public/r/8bit-chart.json
index 46fcc5fe..69cd4a9d 100644
--- a/public/r/8bit-chart.json
+++ b/public/r/8bit-chart.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/chart.tsx",
-      "content": "\"use client\";\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\";\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/8bit/chart\";\n\nexport const description = \"An area chart with axes\";\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig;\n\nexport function ChartExample() {\n  return (\n    <ChartContainer\n      config={chartConfig}\n      className={`min-h-[200px] w-full ${\"retro\"}`}\n    >\n      <AreaChart accessibilityLayer data={chartData}>\n        <CartesianGrid />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n        <YAxis\n          width={47}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickCount={3}\n        />\n        <Area\n          dataKey=\"mobile\"\n          fill=\"var(--chart-2)\"\n          stroke=\"var(--chart-2)\"\n          stackId=\"a\"\n        />\n        <Area\n          dataKey=\"desktop\"\n          fill=\"var(--chart-1)\"\n          stroke=\"var(--chart-1)\"\n          stackId=\"a\"\n        />\n      </AreaChart>\n    </ChartContainer>\n  );\n}\n",
+      "content": "\"use client\";\r\n\r\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\";\r\n\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@/components/ui/8bit/chart\";\r\n\r\nexport const description = \"An area chart with axes\";\r\n\r\nconst chartData = [\r\n  { month: \"January\", desktop: 186, mobile: 80 },\r\n  { month: \"February\", desktop: 305, mobile: 200 },\r\n  { month: \"March\", desktop: 237, mobile: 120 },\r\n  { month: \"April\", desktop: 73, mobile: 190 },\r\n  { month: \"May\", desktop: 209, mobile: 130 },\r\n  { month: \"June\", desktop: 214, mobile: 140 },\r\n];\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--chart-1)\",\r\n  },\r\n  mobile: {\r\n    label: \"Mobile\",\r\n    color: \"var(--chart-2)\",\r\n  },\r\n} satisfies ChartConfig;\r\n\r\nexport function ChartExample() {\r\n  return (\r\n    <ChartContainer\r\n      config={chartConfig}\r\n      className={`min-h-[200px] w-full ${\"retro\"}`}\r\n    >\r\n      <AreaChart accessibilityLayer data={chartData}>\r\n        <CartesianGrid />\r\n        <XAxis\r\n          dataKey=\"month\"\r\n          tickLine={false}\r\n          axisLine={false}\r\n          tickMargin={8}\r\n          tickFormatter={(value) => value.slice(0, 3)}\r\n        />\r\n        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\r\n        <YAxis\r\n          width={47}\r\n          tickLine={false}\r\n          axisLine={false}\r\n          tickMargin={8}\r\n          tickCount={3}\r\n        />\r\n        <Area\r\n          dataKey=\"mobile\"\r\n          fill=\"var(--chart-2)\"\r\n          stroke=\"var(--chart-2)\"\r\n          stackId=\"a\"\r\n        />\r\n        <Area\r\n          dataKey=\"desktop\"\r\n          fill=\"var(--chart-1)\"\r\n          stroke=\"var(--chart-1)\"\r\n          stackId=\"a\"\r\n        />\r\n      </AreaChart>\r\n    </ChartContainer>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/chart.tsx"
     },
     {
       "path": "components/ui/8bit/chart.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"];\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n  }) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload.fill || item.color;\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          \"shrink-0 border-(--color-border) bg-(--color-bg)\",\n                          {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          }\n                        )}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      \"flex flex-1 justify-between leading-none\",\n                      nestLabel ? \"items-end\" : \"items-center\"\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                      {item.value && (\n                        <span className=\"text-foreground font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean;\n    nameKey?: string;\n  }) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as RechartsPrimitive from \"recharts\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\r\n\r\nexport type ChartConfig = {\r\n  [k in string]: {\r\n    label?: React.ReactNode;\r\n    icon?: React.ComponentType;\r\n  } & (\r\n    | { color?: string; theme?: never }\r\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\r\n  );\r\n};\r\n\r\ntype ChartContextProps = {\r\n  config: ChartConfig;\r\n};\r\n\r\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\r\n\r\nfunction useChart() {\r\n  const context = React.useContext(ChartContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nfunction ChartContainer({\r\n  id,\r\n  className,\r\n  children,\r\n  config,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  config: ChartConfig;\r\n  children: React.ComponentProps<\r\n    typeof RechartsPrimitive.ResponsiveContainer\r\n  >[\"children\"];\r\n}) {\r\n  const uniqueId = React.useId();\r\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\r\n\r\n  return (\r\n    <ChartContext.Provider value={{ config }}>\r\n      <div\r\n        data-slot=\"chart\"\r\n        data-chart={chartId}\r\n        className={cn(\r\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <ChartStyle id={chartId} config={config} />\r\n        <RechartsPrimitive.ResponsiveContainer>\r\n          {children}\r\n        </RechartsPrimitive.ResponsiveContainer>\r\n      </div>\r\n    </ChartContext.Provider>\r\n  );\r\n}\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n  const colorConfig = Object.entries(config).filter(\r\n    ([, config]) => config.theme || config.color\r\n  );\r\n\r\n  if (!colorConfig.length) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <style\r\n      dangerouslySetInnerHTML={{\r\n        __html: Object.entries(THEMES)\r\n          .map(\r\n            ([theme, prefix]) => `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n  .map(([key, itemConfig]) => {\r\n    const color =\r\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\r\n      itemConfig.color;\r\n    return color ? `  --color-${key}: ${color};` : null;\r\n  })\r\n  .join(\"\\n\")}\r\n}\r\n`\r\n          )\r\n          .join(\"\\n\"),\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip;\r\n\r\nfunction ChartTooltipContent({\r\n  active,\r\n  payload,\r\n  className,\r\n  indicator = \"dot\",\r\n  hideLabel = false,\r\n  hideIndicator = false,\r\n  label,\r\n  labelFormatter,\r\n  labelClassName,\r\n  formatter,\r\n  color,\r\n  nameKey,\r\n  labelKey,\r\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\r\n  React.ComponentProps<\"div\"> & {\r\n    hideLabel?: boolean;\r\n    hideIndicator?: boolean;\r\n    indicator?: \"line\" | \"dot\" | \"dashed\";\r\n    nameKey?: string;\r\n    labelKey?: string;\r\n  }) {\r\n  const { config } = useChart();\r\n\r\n  const tooltipLabel = React.useMemo(() => {\r\n    if (hideLabel || !payload?.length) {\r\n      return null;\r\n    }\r\n\r\n    const [item] = payload;\r\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\r\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n    const value =\r\n      !labelKey && typeof label === \"string\"\r\n        ? config[label as keyof typeof config]?.label || label\r\n        : itemConfig?.label;\r\n\r\n    if (labelFormatter) {\r\n      return (\r\n        <div className={cn(\"font-medium\", labelClassName)}>\r\n          {labelFormatter(value, payload)}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (!value) {\r\n      return null;\r\n    }\r\n\r\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\r\n  }, [\r\n    label,\r\n    labelFormatter,\r\n    payload,\r\n    hideLabel,\r\n    labelClassName,\r\n    config,\r\n    labelKey,\r\n  ]);\r\n\r\n  if (!active || !payload?.length) {\r\n    return null;\r\n  }\r\n\r\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5 text-xs shadow-xl\",\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      {!nestLabel ? tooltipLabel : null}\r\n      <div className=\"grid gap-1.5\">\r\n        {payload.map((item, index) => {\r\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\r\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n          const indicatorColor = color || item.payload.fill || item.color;\r\n\r\n          return (\r\n            <div\r\n              key={item.dataKey}\r\n              className={cn(\r\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\r\n                indicator === \"dot\" && \"items-center\"\r\n              )}\r\n            >\r\n              {formatter && item?.value !== undefined && item.name ? (\r\n                formatter(item.value, item.name, item, index, item.payload)\r\n              ) : (\r\n                <>\r\n                  {itemConfig?.icon ? (\r\n                    <itemConfig.icon />\r\n                  ) : (\r\n                    !hideIndicator && (\r\n                      <div\r\n                        className={cn(\r\n                          \"shrink-0 border-(--color-border) bg-(--color-bg)\",\r\n                          {\r\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\r\n                            \"w-1\": indicator === \"line\",\r\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\r\n                              indicator === \"dashed\",\r\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\r\n                          }\r\n                        )}\r\n                        style={\r\n                          {\r\n                            \"--color-bg\": indicatorColor,\r\n                            \"--color-border\": indicatorColor,\r\n                          } as React.CSSProperties\r\n                        }\r\n                      />\r\n                    )\r\n                  )}\r\n                  <div\r\n                    className={cn(\r\n                      \"flex flex-1 justify-between leading-none\",\r\n                      nestLabel ? \"items-end\" : \"items-center\"\r\n                    )}\r\n                  >\r\n                    <div className=\"grid gap-1.5\">\r\n                      {nestLabel ? tooltipLabel : null}\r\n                      <span className=\"text-muted-foreground\">\r\n                        {itemConfig?.label || item.name}\r\n                      </span>\r\n                      {item.value && (\r\n                        <span className=\"text-foreground font-medium tabular-nums\">\r\n                          {item.value.toLocaleString()}\r\n                        </span>\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </>\r\n              )}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend;\r\n\r\nfunction ChartLegendContent({\r\n  className,\r\n  hideIcon = false,\r\n  payload,\r\n  verticalAlign = \"bottom\",\r\n  nameKey,\r\n}: React.ComponentProps<\"div\"> &\r\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\r\n    hideIcon?: boolean;\r\n    nameKey?: string;\r\n  }) {\r\n  const { config } = useChart();\r\n\r\n  if (!payload?.length) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex items-center justify-center gap-4\",\r\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\r\n        className\r\n      )}\r\n    >\r\n      {payload.map((item) => {\r\n        const key = `${nameKey || item.dataKey || \"value\"}`;\r\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n\r\n        return (\r\n          <div\r\n            key={item.value}\r\n            className={cn(\r\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\r\n            )}\r\n          >\r\n            {itemConfig?.icon && !hideIcon ? (\r\n              <itemConfig.icon />\r\n            ) : (\r\n              <div\r\n                className=\"h-2 w-2 shrink-0\"\r\n                style={{\r\n                  backgroundColor: item.color,\r\n                }}\r\n              />\r\n            )}\r\n            {itemConfig?.label}\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n\r\n// Helper to extract item config from a payload.\r\nfunction getPayloadConfigFromPayload(\r\n  config: ChartConfig,\r\n  payload: unknown,\r\n  key: string\r\n) {\r\n  if (typeof payload !== \"object\" || payload === null) {\r\n    return undefined;\r\n  }\r\n\r\n  const payloadPayload =\r\n    \"payload\" in payload &&\r\n    typeof payload.payload === \"object\" &&\r\n    payload.payload !== null\r\n      ? payload.payload\r\n      : undefined;\r\n\r\n  let configLabelKey: string = key;\r\n\r\n  if (\r\n    key in payload &&\r\n    typeof payload[key as keyof typeof payload] === \"string\"\r\n  ) {\r\n    configLabelKey = payload[key as keyof typeof payload] as string;\r\n  } else if (\r\n    payloadPayload &&\r\n    key in payloadPayload &&\r\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n  ) {\r\n    configLabelKey = payloadPayload[\r\n      key as keyof typeof payloadPayload\r\n    ] as string;\r\n  }\r\n\r\n  return configLabelKey in config\r\n    ? config[configLabelKey]\r\n    : config[key as keyof typeof config];\r\n}\r\n\r\nexport {\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartStyle,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/chart.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-cheat-code.json b/public/r/8bit-cheat-code.json
index 3b707b6f..5c767908 100644
--- a/public/r/8bit-cheat-code.json
+++ b/public/r/8bit-cheat-code.json
@@ -11,25 +11,25 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/cheat-code.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Sparkles,\n} from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Alert, AlertDescription } from \"@/components/ui/8bit/alert\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\n\nconst KONAMI_SEQUENCE: Array<string> = [\n  \"ArrowUp\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"ArrowDown\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"b\",\n  \"a\",\n  \"Enter\",\n];\n\nfunction getIconForKey(key: string) {\n  switch (key) {\n    case \"ArrowUp\":\n      return <ArrowUp className=\"size-4\" />;\n    case \"ArrowDown\":\n      return <ArrowDown className=\"size-4\" />;\n    case \"ArrowLeft\":\n      return <ArrowLeft className=\"size-4\" />;\n    case \"ArrowRight\":\n      return <ArrowRight className=\"size-4\" />;\n    case \"Enter\":\n      return <span className=\"text-[10px]\">START</span>;\n    case \"a\":\n    case \"b\":\n      return <span className=\"text-[10px] uppercase\">{key}</span>;\n    default:\n      return <span className=\"text-[10px]\">{key}</span>;\n  }\n}\n\nexport default function CheatCode({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const [progress, setProgress] = React.useState<number>(0);\n  const [activated, setActivated] = React.useState<boolean>(false);\n  const resetTimerRef = React.useRef<number | null>(null);\n\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (activated) return;\n\n      const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const expected = KONAMI_SEQUENCE[progress];\n\n      // Reset inactivity timer\n      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);\n      resetTimerRef.current = window.setTimeout(() => setProgress(0), 2000);\n\n      if (key === expected) {\n        const next = progress + 1;\n        setProgress(next);\n\n        if (next === KONAMI_SEQUENCE.length) {\n          setActivated(true);\n          if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);\n        }\n      } else {\n        // Allow overlapping prefix (e.g., pressing Up when sequence starts with Up)\n        if (key === KONAMI_SEQUENCE[0]) {\n          setProgress(1);\n        } else {\n          setProgress(0);\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);\n    };\n  }, [activated, progress]);\n\n  const reset = () => {\n    setActivated(false);\n    setProgress(0);\n  };\n\n  return (\n    <Card className={cn(className)} {...props}>\n      <CardHeader className=\"items-center text-center gap-2\">\n        <CardTitle>Cheat Code</CardTitle>\n        <CardDescription>Try the classic code on your keyboard</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col items-center gap-6\">\n        <div className=\"grid grid-cols-6 sm:grid-cols-11 gap-2\">\n          {KONAMI_SEQUENCE.map((k, i) => (\n            <div\n              key={i}\n              className={cn(\n                \"relative flex h-10 w-10 items-center justify-center bg-secondary text-secondary-foreground\",\n                \"border-2 border-foreground dark:border-ring\",\n                progress > i && \"bg-primary text-primary-foreground\"\n              )}\n              aria-label={`step-${i + 1}`}\n            >\n              {getIconForKey(k)}\n            </div>\n          ))}\n        </div>\n\n        {activated ? (\n          <Alert className=\"w-full max-w-md text-center px-4 py-3\">\n            <AlertDescription className=\"flex items-center justify-center gap-2\">\n              <Sparkles className=\"size-4\" />\n              Cheat activated! Extra retro vibes unlocked.\n            </AlertDescription>\n          </Alert>\n        ) : (\n          <Alert className=\"w-full max-w-md text-center px-4 py-3\">\n            <AlertDescription>\n              Press the sequence shown above. Progress resets after inactivity.\n            </AlertDescription>\n          </Alert>\n        )}\n\n        {activated && (\n          <button\n            type=\"button\"\n            onClick={reset}\n            className={cn(\n              \"rounded-none relative inline-flex items-center justify-center gap-1.5\",\n              \"px-4 py-2 bg-foreground text-background active:translate-y-1\"\n            )}\n          >\n            Reset\n            <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n            <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n          </button>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {\r\n  ArrowDown,\r\n  ArrowLeft,\r\n  ArrowRight,\r\n  ArrowUp,\r\n  Sparkles,\r\n} from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Alert, AlertDescription } from \"@/components/ui/8bit/alert\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\n\r\nconst KONAMI_SEQUENCE: Array<string> = [\r\n  \"ArrowUp\",\r\n  \"ArrowUp\",\r\n  \"ArrowDown\",\r\n  \"ArrowDown\",\r\n  \"ArrowLeft\",\r\n  \"ArrowRight\",\r\n  \"ArrowLeft\",\r\n  \"ArrowRight\",\r\n  \"b\",\r\n  \"a\",\r\n  \"Enter\",\r\n];\r\n\r\nfunction getIconForKey(key: string) {\r\n  switch (key) {\r\n    case \"ArrowUp\":\r\n      return <ArrowUp className=\"size-4\" />;\r\n    case \"ArrowDown\":\r\n      return <ArrowDown className=\"size-4\" />;\r\n    case \"ArrowLeft\":\r\n      return <ArrowLeft className=\"size-4\" />;\r\n    case \"ArrowRight\":\r\n      return <ArrowRight className=\"size-4\" />;\r\n    case \"Enter\":\r\n      return <span className=\"text-[10px]\">START</span>;\r\n    case \"a\":\r\n    case \"b\":\r\n      return <span className=\"text-[10px] uppercase\">{key}</span>;\r\n    default:\r\n      return <span className=\"text-[10px]\">{key}</span>;\r\n  }\r\n}\r\n\r\nexport default function CheatCode({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  const [progress, setProgress] = React.useState<number>(0);\r\n  const [activated, setActivated] = React.useState<boolean>(false);\r\n  const resetTimerRef = React.useRef<number | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const handleKeyDown = (event: KeyboardEvent) => {\r\n      if (activated) return;\r\n\r\n      const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;\r\n      const expected = KONAMI_SEQUENCE[progress];\r\n\r\n      // Reset inactivity timer\r\n      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);\r\n      resetTimerRef.current = window.setTimeout(() => setProgress(0), 2000);\r\n\r\n      if (key === expected) {\r\n        const next = progress + 1;\r\n        setProgress(next);\r\n\r\n        if (next === KONAMI_SEQUENCE.length) {\r\n          setActivated(true);\r\n          if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);\r\n        }\r\n      } else {\r\n        // Allow overlapping prefix (e.g., pressing Up when sequence starts with Up)\r\n        if (key === KONAMI_SEQUENCE[0]) {\r\n          setProgress(1);\r\n        } else {\r\n          setProgress(0);\r\n        }\r\n      }\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", handleKeyDown);\r\n    return () => {\r\n      window.removeEventListener(\"keydown\", handleKeyDown);\r\n      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);\r\n    };\r\n  }, [activated, progress]);\r\n\r\n  const reset = () => {\r\n    setActivated(false);\r\n    setProgress(0);\r\n  };\r\n\r\n  return (\r\n    <Card className={cn(className)} {...props}>\r\n      <CardHeader className=\"items-center text-center gap-2\">\r\n        <CardTitle>Cheat Code</CardTitle>\r\n        <CardDescription>Try the classic code on your keyboard</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className=\"flex flex-col items-center gap-6\">\r\n        <div className=\"grid grid-cols-6 sm:grid-cols-11 gap-2\">\r\n          {KONAMI_SEQUENCE.map((k, i) => (\r\n            <div\r\n              key={i}\r\n              className={cn(\r\n                \"relative flex h-10 w-10 items-center justify-center bg-secondary text-secondary-foreground\",\r\n                \"border-2 border-foreground dark:border-ring\",\r\n                progress > i && \"bg-primary text-primary-foreground\"\r\n              )}\r\n              aria-label={`step-${i + 1}`}\r\n            >\r\n              {getIconForKey(k)}\r\n            </div>\r\n          ))}\r\n        </div>\r\n\r\n        {activated ? (\r\n          <Alert className=\"w-full max-w-md text-center px-4 py-3\">\r\n            <AlertDescription className=\"flex items-center justify-center gap-2\">\r\n              <Sparkles className=\"size-4\" />\r\n              Cheat activated! Extra retro vibes unlocked.\r\n            </AlertDescription>\r\n          </Alert>\r\n        ) : (\r\n          <Alert className=\"w-full max-w-md text-center px-4 py-3\">\r\n            <AlertDescription>\r\n              Press the sequence shown above. Progress resets after inactivity.\r\n            </AlertDescription>\r\n          </Alert>\r\n        )}\r\n\r\n        {activated && (\r\n          <button\r\n            type=\"button\"\r\n            onClick={reset}\r\n            className={cn(\r\n              \"rounded-none relative inline-flex items-center justify-center gap-1.5\",\r\n              \"px-4 py-2 bg-foreground text-background active:translate-y-1\"\r\n            )}\r\n          >\r\n            Reset\r\n            <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n            <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n          </button>\r\n        )}\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/cheat-code.tsx"
     },
     {
       "path": "components/ui/8bit/alert.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Alert as ShadcnAlert,\n  AlertDescription as ShadcnAlertDescription,\n  AlertTitle as ShadcnAlertTitle,\n} from \"@/components/ui/alert\";\n\nexport const alertVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-card text-card-foreground\",\n      destructive:\n        \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface BitAlertProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof alertVariants> {}\n\nfunction Alert({ children, ...props }: BitAlertProps) {\n  const { variant, className, font } = props;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <ShadcnAlert\n        {...props}\n        variant={variant}\n        className={cn(\n          \"relative rounded-none border-none bg-background\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      >\n        {children}\n      </ShadcnAlert>\n\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n    </div>\n  );\n}\n\nfunction AlertTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <ShadcnAlertTitle\n      className={cn(\"line-clamp-1 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <ShadcnAlertDescription\n      className={cn(\n        \"text-muted-foreground grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Alert as ShadcnAlert,\r\n  AlertDescription as ShadcnAlertDescription,\r\n  AlertTitle as ShadcnAlertTitle,\r\n} from \"@/components/ui/alert\";\r\n\r\nexport const alertVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-card text-card-foreground\",\r\n      destructive:\r\n        \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitAlertProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof alertVariants> {}\r\n\r\nfunction Alert({ children, ...props }: BitAlertProps) {\r\n  const { variant, className, font } = props;\r\n\r\n  return (\r\n    <div className={cn(\"relative\", className)}>\r\n      <ShadcnAlert\r\n        {...props}\r\n        variant={variant}\r\n        className={cn(\r\n          \"relative rounded-none border-none bg-background\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </ShadcnAlert>\r\n\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction AlertTitle({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <ShadcnAlertTitle\r\n      className={cn(\"line-clamp-1 font-medium tracking-tight\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertDescription({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <ShadcnAlertDescription\r\n      className={cn(\r\n        \"text-muted-foreground grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/alert.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-checkbox.json b/public/r/8bit-checkbox.json
index e80d3422..e1c70cae 100644
--- a/public/r/8bit-checkbox.json
+++ b/public/r/8bit-checkbox.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/checkbox.tsx",
-      "content": "import * as React from \"react\";\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Checkbox as ShadcnCheckbox } from \"@/components/ui/checkbox\";\n\nimport \"./styles/retro.css\";\n\nexport const checkboxVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {\n  asChild?: boolean;\n}\n\nfunction Checkbox({ className, font, ...props }: BitCheckboxProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center border-y-6 border-foreground dark:border-ring\",\n        className\n      )}\n    >\n      <ShadcnCheckbox\n        className={cn(\n          \"rounded-none size-5 ring-0 border-none\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n        {...props}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Checkbox };\n",
+      "content": "import * as React from \"react\";\r\n\r\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Checkbox as ShadcnCheckbox } from \"@/components/ui/checkbox\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const checkboxVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCheckboxProps\r\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\r\n    VariantProps<typeof checkboxVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Checkbox({ className, font, ...props }: BitCheckboxProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center justify-center border-y-6 border-foreground dark:border-ring\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCheckbox\r\n        className={cn(\r\n          \"rounded-none size-5 ring-0 border-none\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Checkbox };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/checkbox.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-collapsible.json b/public/r/8bit-collapsible.json
index 8ccd7cfd..61c7c23e 100644
--- a/public/r/8bit-collapsible.json
+++ b/public/r/8bit-collapsible.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/collapsible.tsx",
-      "content": "\"use client\";\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport {\n  Collapsible as ShadcnCollapsible,\n  CollapsibleContent as ShadcnCollapsibleContent,\n  CollapsibleTrigger as ShadcnCollapsibleTrigger,\n} from \"@radix-ui/react-collapsible\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport interface BitCollapsibleProps\n  extends React.ComponentProps<typeof CollapsiblePrimitive.Root> {\n  asChild?: boolean;\n}\n\nfunction Collapsible({ children, ...props }: BitCollapsibleProps) {\n  const { className } = props;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <ShadcnCollapsible {...props} className={cn(className, \"retro\")}>\n        {children}\n      </ShadcnCollapsible>\n    </div>\n  );\n}\n\nfunction CollapsibleTrigger({\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  const { className } = props;\n  return (\n    <ShadcnCollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      className={cn(className, \"retro\")}\n      {...props}\n    >\n      {children}\n    </ShadcnCollapsibleTrigger>\n  );\n}\n\nfunction CollapsibleContent({\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  const { className } = props;\n  return (\n    <ShadcnCollapsibleContent\n      data-slot=\"collapsible-content\"\n      className={cn(className, \"retro\")}\n      {...props}\n    >\n      {children}\n    </ShadcnCollapsibleContent>\n  );\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n",
+      "content": "\"use client\";\r\n\r\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\r\nimport {\r\n  Collapsible as ShadcnCollapsible,\r\n  CollapsibleContent as ShadcnCollapsibleContent,\r\n  CollapsibleTrigger as ShadcnCollapsibleTrigger,\r\n} from \"@radix-ui/react-collapsible\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport interface BitCollapsibleProps\r\n  extends React.ComponentProps<typeof CollapsiblePrimitive.Root> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Collapsible({ children, ...props }: BitCollapsibleProps) {\r\n  const { className } = props;\r\n\r\n  return (\r\n    <div className={cn(\"relative\", className)}>\r\n      <ShadcnCollapsible {...props} className={cn(className, \"retro\")}>\r\n        {children}\r\n      </ShadcnCollapsible>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CollapsibleTrigger({\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\r\n  const { className } = props;\r\n  return (\r\n    <ShadcnCollapsibleTrigger\r\n      data-slot=\"collapsible-trigger\"\r\n      className={cn(className, \"retro\")}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnCollapsibleTrigger>\r\n  );\r\n}\r\n\r\nfunction CollapsibleContent({\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\r\n  const { className } = props;\r\n  return (\r\n    <ShadcnCollapsibleContent\r\n      data-slot=\"collapsible-content\"\r\n      className={cn(className, \"retro\")}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnCollapsibleContent>\r\n  );\r\n}\r\n\r\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/collapsible.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-combo-box.json b/public/r/8bit-combo-box.json
index d8e85b2a..443f7199 100644
--- a/public/r/8bit-combo-box.json
+++ b/public/r/8bit-combo-box.json
@@ -12,19 +12,19 @@
   "files": [
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/popover.tsx",
-      "content": "import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Popover as ShadcnPopover,\n  PopoverAnchor as ShadcnPopoverAnchor,\n  PopoverContent as ShadcnPopoverContent,\n  PopoverTrigger as ShadcnPopoverTrigger,\n} from \"@/components/ui/popover\";\n\nimport \"./styles/retro.css\";\n\nconst Popover = ShadcnPopover;\n\nconst PopoverTrigger = ShadcnPopoverTrigger;\n\nconst PopoverAnchor = ShadcnPopoverAnchor;\n\nexport const popOverVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitPopoverProps\n  extends React.ComponentProps<typeof PopoverPrimitive.Content>,\n    VariantProps<typeof popOverVariants> {}\n\nfunction PopoverContent({\n  children,\n  font,\n  className,\n  ...props\n}: BitPopoverProps) {\n  return (\n    <ShadcnPopoverContent\n      className={cn(\n        \"relative bg-card border-y-6 border-foreground dark:border-ring rounded-none mt-1\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnPopoverContent>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n",
+      "content": "import * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Popover as ShadcnPopover,\r\n  PopoverAnchor as ShadcnPopoverAnchor,\r\n  PopoverContent as ShadcnPopoverContent,\r\n  PopoverTrigger as ShadcnPopoverTrigger,\r\n} from \"@/components/ui/popover\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst Popover = ShadcnPopover;\r\n\r\nconst PopoverTrigger = ShadcnPopoverTrigger;\r\n\r\nconst PopoverAnchor = ShadcnPopoverAnchor;\r\n\r\nexport const popOverVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitPopoverProps\r\n  extends React.ComponentProps<typeof PopoverPrimitive.Content>,\r\n    VariantProps<typeof popOverVariants> {}\r\n\r\nfunction PopoverContent({\r\n  children,\r\n  font,\r\n  className,\r\n  ...props\r\n}: BitPopoverProps) {\r\n  return (\r\n    <ShadcnPopoverContent\r\n      className={cn(\r\n        \"relative bg-card border-y-6 border-foreground dark:border-ring rounded-none mt-1\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </ShadcnPopoverContent>\r\n  );\r\n}\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/popover.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-command.json b/public/r/8bit-command.json
index bc5b99b1..a7700f19 100644
--- a/public/r/8bit-command.json
+++ b/public/r/8bit-command.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/command.tsx",
-      "content": "\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Separator } from \"@/components/ui/8bit/separator\";\nimport {\n  Command as ShadcnCommand,\n  CommandDialog as ShadcnCommandDialog,\n  CommandEmpty as ShadcnCommandEmpty,\n  CommandGroup as ShadcnCommandGroup,\n  CommandItem as ShadcnCommandItem,\n  CommandList as ShadcnCommandList,\n  CommandSeparator as ShadcnCommandSeparator,\n  CommandShortcut as ShadcnCommandShortcut,\n} from \"@/components/ui/command\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\n\nimport \"./styles/retro.css\";\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <div className={cn(\"relative !p-0\", className)}>\n      <ShadcnCommand\n        data-slot=\"command\"\n        className={cn(\n          \"bg-popover text-popover-foreground flex h-full !w-full flex-col overflow-hidden rounded-md\",\n          \"retro\",\n          className\n        )}\n        {...props}\n      />\n\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n    </div>\n  );\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n}) {\n  return (\n    <ShadcnCommandDialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </ShadcnCommandDialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-10 items-center gap-2 border-b px-3\"\n    >\n      <svg\n        width=\"30\"\n        height=\"30\"\n        viewBox=\"0 0 256 256\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        stroke=\"currentColor\"\n        strokeWidth=\"0.25\"\n        aria-label=\"search\"\n      >\n        <rect x=\"88\" y=\"56\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"72\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"56\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"56\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"56\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"72\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"88\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"104\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"120\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"136\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"152\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"152\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"152\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"136\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"120\" y=\"56\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"104\" y=\"56\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"152\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"168\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n        <rect x=\"184\" y=\"184\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      </svg>\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <ShadcnCommandList\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[320px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        \"retro\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <ShadcnCommandEmpty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <ShadcnCommandGroup\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        \"retro\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <ShadcnCommandSeparator\n      data-slot=\"command-separator\"\n      className={cn(\n        \"data-[orientation=horizontal]:bg-[length:16px_8px] data-[orientation=horizontal]:bg-[linear-gradient(90deg,var(--foreground)_75%,transparent_75%)] dark:data-[orientation=horizontal]:bg-[linear-gradient(90deg,var(--ring)_75%,transparent_75%)] shrink-0 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:bg-[length:2px_16px] data-[orientation=vertical]:bg-[linear-gradient(0deg,var(--foreground)_75%,transparent_75%)] dark:data-[orientation=vertical]:bg-[linear-gradient(0deg,var(--ring)_75%,transparent_75%)]\",\n        \"retro\",\n        className\n      )}\n      {...props}\n    >\n      <Separator />\n    </ShadcnCommandSeparator>\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <ShadcnCommandItem\n      data-slot=\"command-item\"\n      className={cn(\n        \"rounded-none border-dashed border-y-3 border-ring/0 hover:border-foreground dark:hover:border-ring\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <ShadcnCommandShortcut className={cn(\"\", \"retro\", className)} {...props} />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport { Command as CommandPrimitive } from \"cmdk\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Separator } from \"@/components/ui/8bit/separator\";\r\nimport {\r\n  Command as ShadcnCommand,\r\n  CommandDialog as ShadcnCommandDialog,\r\n  CommandEmpty as ShadcnCommandEmpty,\r\n  CommandGroup as ShadcnCommandGroup,\r\n  CommandItem as ShadcnCommandItem,\r\n  CommandList as ShadcnCommandList,\r\n  CommandSeparator as ShadcnCommandSeparator,\r\n  CommandShortcut as ShadcnCommandShortcut,\r\n} from \"@/components/ui/command\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogHeader,\r\n  DialogTitle,\r\n} from \"@/components/ui/dialog\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nfunction Command({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive>) {\r\n  return (\r\n    <div className={cn(\"relative !p-0\", className)}>\r\n      <ShadcnCommand\r\n        data-slot=\"command\"\r\n        className={cn(\r\n          \"bg-popover text-popover-foreground flex h-full !w-full flex-col overflow-hidden rounded-md\",\r\n          \"retro\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CommandDialog({\r\n  title = \"Command Palette\",\r\n  description = \"Search for a command to run...\",\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof Dialog> & {\r\n  title?: string;\r\n  description?: string;\r\n}) {\r\n  return (\r\n    <ShadcnCommandDialog {...props}>\r\n      <DialogHeader className=\"sr-only\">\r\n        <DialogTitle>{title}</DialogTitle>\r\n        <DialogDescription>{description}</DialogDescription>\r\n      </DialogHeader>\r\n      <DialogContent className=\"overflow-hidden p-0\">\r\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\r\n          {children}\r\n        </Command>\r\n      </DialogContent>\r\n    </ShadcnCommandDialog>\r\n  );\r\n}\r\n\r\nfunction CommandInput({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\r\n  return (\r\n    <div\r\n      data-slot=\"command-input-wrapper\"\r\n      className=\"flex h-10 items-center gap-2 border-b px-3\"\r\n    >\r\n      <svg\r\n        width=\"30\"\r\n        height=\"30\"\r\n        viewBox=\"0 0 256 256\"\r\n        fill=\"currentColor\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"0.25\"\r\n        aria-label=\"search\"\r\n      >\r\n        <rect x=\"88\" y=\"56\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"72\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"56\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"56\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"56\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"72\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"88\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"104\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"120\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"136\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"152\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"152\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"152\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"136\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"120\" y=\"56\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"104\" y=\"56\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"152\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"168\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n        <rect x=\"184\" y=\"184\" width=\"14\" height=\"14\" rx=\"1\"></rect>\r\n      </svg>\r\n      <CommandPrimitive.Input\r\n        data-slot=\"command-input\"\r\n        className={cn(\r\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CommandList({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\r\n  return (\r\n    <ShadcnCommandList\r\n      data-slot=\"command-list\"\r\n      className={cn(\r\n        \"max-h-[320px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\r\n        \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CommandEmpty({\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\r\n  return (\r\n    <ShadcnCommandEmpty\r\n      data-slot=\"command-empty\"\r\n      className=\"py-6 text-center text-sm\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CommandGroup({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\r\n  return (\r\n    <ShadcnCommandGroup\r\n      data-slot=\"command-group\"\r\n      className={cn(\r\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\r\n        \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CommandSeparator({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\r\n  return (\r\n    <ShadcnCommandSeparator\r\n      data-slot=\"command-separator\"\r\n      className={cn(\r\n        \"data-[orientation=horizontal]:bg-[length:16px_8px] data-[orientation=horizontal]:bg-[linear-gradient(90deg,var(--foreground)_75%,transparent_75%)] dark:data-[orientation=horizontal]:bg-[linear-gradient(90deg,var(--ring)_75%,transparent_75%)] shrink-0 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:bg-[length:2px_16px] data-[orientation=vertical]:bg-[linear-gradient(0deg,var(--foreground)_75%,transparent_75%)] dark:data-[orientation=vertical]:bg-[linear-gradient(0deg,var(--ring)_75%,transparent_75%)]\",\r\n        \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <Separator />\r\n    </ShadcnCommandSeparator>\r\n  );\r\n}\r\n\r\nfunction CommandItem({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\r\n  return (\r\n    <ShadcnCommandItem\r\n      data-slot=\"command-item\"\r\n      className={cn(\r\n        \"rounded-none border-dashed border-y-3 border-ring/0 hover:border-foreground dark:hover:border-ring\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CommandShortcut({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <ShadcnCommandShortcut className={cn(\"\", \"retro\", className)} {...props} />\r\n  );\r\n}\r\n\r\nexport {\r\n  Command,\r\n  CommandDialog,\r\n  CommandInput,\r\n  CommandList,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandItem,\r\n  CommandShortcut,\r\n  CommandSeparator,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/command.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-context-menu.json b/public/r/8bit-context-menu.json
index 509e5e12..4ef7adf7 100644
--- a/public/r/8bit-context-menu.json
+++ b/public/r/8bit-context-menu.json
@@ -8,13 +8,13 @@
   "files": [
     {
       "path": "components/ui/8bit/context-menu.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport { ChevronRight, Circle } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nconst ContextMenu = ContextMenuPrimitive.Root;\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group;\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal;\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub;\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto size-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n));\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n));\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;\n\nconst ContextMenuContent = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <div className=\"relative\">\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        className={cn(\n          \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-context-menu-content-transform-origin]\",\n          \"retro\",\n          className\n        )}\n        {...props}\n      />\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  </ContextMenuPrimitive.Portal>\n));\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;\n\nconst ContextMenuItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <svg\n          width=\"50\"\n          height=\"50\"\n          viewBox=\"0 0 256 256\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          stroke=\"currentColor\"\n          strokeWidth=\"0.25\"\n          aria-label=\"check\"\n          className=\"size-9\"\n        >\n          <rect\n            x=\"80\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 80 128)\"\n          ></rect>\n          <rect\n            x=\"96\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 96 144)\"\n          ></rect>\n          <rect\n            x=\"112\"\n            y=\"160\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 112 160)\"\n          ></rect>\n          <rect\n            x=\"128\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 128 144)\"\n          ></rect>\n          <rect\n            x=\"144\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 144 128)\"\n          ></rect>\n          <rect\n            x=\"160\"\n            y=\"112\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 160 112)\"\n          ></rect>\n          <rect\n            x=\"176\"\n            y=\"96\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 176 96)\"\n          ></rect>\n          <rect\n            x=\"192\"\n            y=\"80\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 192 80)\"\n          ></rect>\n        </svg>\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n));\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName;\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"size-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n));\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n));\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\nContextMenuShortcut.displayName = \"ContextMenuShortcut\";\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\r\nimport { Circle } from \"lucide-react\";\r\n\r\nimport { ChevronRightIcon } from \"@/components/ui/8bit/assets/chevronRightIcon\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst ContextMenu = ContextMenuPrimitive.Root;\r\n\r\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\r\n\r\nconst ContextMenuGroup = ContextMenuPrimitive.Group;\r\n\r\nconst ContextMenuPortal = ContextMenuPrimitive.Portal;\r\n\r\nconst ContextMenuSub = ContextMenuPrimitive.Sub;\r\n\r\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\r\n\r\nconst ContextMenuSubTrigger = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\r\n    inset?: boolean;\r\n  }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n  <ContextMenuPrimitive.SubTrigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n    <ChevronRightIcon/>\r\n  </ContextMenuPrimitive.SubTrigger>\r\n));\r\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;\r\n\r\nconst ContextMenuSubContent = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n  <ContextMenuPrimitive.SubContent\r\n    ref={ref}\r\n    className={cn(\r\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-context-menu-content-transform-origin]\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;\r\n\r\nconst ContextMenuContent = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\r\n>(({ className, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Portal>\r\n    <div className=\"relative\">\r\n      <ContextMenuPrimitive.Content\r\n        ref={ref}\r\n        className={cn(\r\n          \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-context-menu-content-transform-origin]\",\r\n          \"retro\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  </ContextMenuPrimitive.Portal>\r\n));\r\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;\r\n\r\nconst ContextMenuItem = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\r\n    inset?: boolean;\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\r\n\r\nconst ContextMenuCheckboxItem = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n  <ContextMenuPrimitive.CheckboxItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    checked={checked}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <ContextMenuPrimitive.ItemIndicator>\r\n        <svg\r\n          width=\"50\"\r\n          height=\"50\"\r\n          viewBox=\"0 0 256 256\"\r\n          fill=\"currentColor\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          stroke=\"currentColor\"\r\n          strokeWidth=\"0.25\"\r\n          aria-label=\"check\"\r\n          className=\"size-9\"\r\n        >\r\n          <rect\r\n            x=\"80\"\r\n            y=\"128\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 80 128)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"96\"\r\n            y=\"144\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 96 144)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"112\"\r\n            y=\"160\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 112 160)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"128\"\r\n            y=\"144\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 128 144)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"144\"\r\n            y=\"128\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 144 128)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"160\"\r\n            y=\"112\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 160 112)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"176\"\r\n            y=\"96\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 176 96)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"192\"\r\n            y=\"80\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 192 80)\"\r\n          ></rect>\r\n        </svg>\r\n      </ContextMenuPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </ContextMenuPrimitive.CheckboxItem>\r\n));\r\nContextMenuCheckboxItem.displayName =\r\n  ContextMenuPrimitive.CheckboxItem.displayName;\r\n\r\nconst ContextMenuRadioItem = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n  <ContextMenuPrimitive.RadioItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <ContextMenuPrimitive.ItemIndicator>\r\n        <Circle className=\"size-2 fill-current\" />\r\n      </ContextMenuPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </ContextMenuPrimitive.RadioItem>\r\n));\r\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;\r\n\r\nconst ContextMenuLabel = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.Label>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\r\n    inset?: boolean;\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Label\r\n    ref={ref}\r\n    className={cn(\r\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;\r\n\r\nconst ContextMenuSeparator = React.forwardRef<\r\n  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\r\n    {...props}\r\n  />\r\n));\r\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;\r\n\r\nconst ContextMenuShortcut = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\nContextMenuShortcut.displayName = \"ContextMenuShortcut\";\r\n\r\nexport {\r\n  ContextMenu,\r\n  ContextMenuTrigger,\r\n  ContextMenuContent,\r\n  ContextMenuItem,\r\n  ContextMenuCheckboxItem,\r\n  ContextMenuRadioItem,\r\n  ContextMenuLabel,\r\n  ContextMenuSeparator,\r\n  ContextMenuShortcut,\r\n  ContextMenuGroup,\r\n  ContextMenuPortal,\r\n  ContextMenuSub,\r\n  ContextMenuSubContent,\r\n  ContextMenuSubTrigger,\r\n  ContextMenuRadioGroup,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/context-menu.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-dialog.json b/public/r/8bit-dialog.json
index c3490532..690b6be0 100644
--- a/public/r/8bit-dialog.json
+++ b/public/r/8bit-dialog.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/dialog.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Dialog as ShadcnDialog,\n  DialogClose as ShadcnDialogClose,\n  DialogContent as ShadcnDialogContent,\n  DialogDescription as ShadcnDialogDescription,\n  DialogFooter as ShadcnDialogFooter,\n  DialogHeader as ShadcnDialogHeader,\n  DialogTitle as ShadcnDialogTitle,\n  DialogTrigger as ShadcnDialogTrigger,\n} from \"@/components/ui/dialog\";\n\nimport \"./styles/retro.css\";\n\nconst Dialog = ShadcnDialog;\n\nconst DialogTrigger = ShadcnDialogTrigger;\n\nconst DialogHeader = ShadcnDialogHeader;\n\nconst DialogDescription = ShadcnDialogDescription;\n\nconst DialogClose = ShadcnDialogClose;\n\nconst DialogFooter = ShadcnDialogFooter;\n\nexport interface BitDialogProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof dialogContentVariants> {}\n\nfunction DialogTitle({ ...props }: BitDialogProps) {\n  const { className, font } = props;\n  return (\n    <ShadcnDialogTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport const dialogContentVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nfunction DialogContent({\n  className,\n  children,\n  font,\n  ...props\n}: BitDialogProps) {\n  return (\n    <ShadcnDialogContent\n      className={cn(\n        \"bg-card rounded-none border-none\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDialogContent>\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogHeader,\n  DialogFooter,\n  DialogDescription,\n  DialogTitle,\n  DialogContent,\n  DialogClose,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Dialog as ShadcnDialog,\r\n  DialogClose as ShadcnDialogClose,\r\n  DialogContent as ShadcnDialogContent,\r\n  DialogDescription as ShadcnDialogDescription,\r\n  DialogFooter as ShadcnDialogFooter,\r\n  DialogHeader as ShadcnDialogHeader,\r\n  DialogTitle as ShadcnDialogTitle,\r\n  DialogTrigger as ShadcnDialogTrigger,\r\n} from \"@/components/ui/dialog\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst Dialog = ShadcnDialog;\r\n\r\nconst DialogTrigger = ShadcnDialogTrigger;\r\n\r\nconst DialogHeader = ShadcnDialogHeader;\r\n\r\nconst DialogDescription = ShadcnDialogDescription;\r\n\r\nconst DialogClose = ShadcnDialogClose;\r\n\r\nconst DialogFooter = ShadcnDialogFooter;\r\n\r\nexport interface BitDialogProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof dialogContentVariants> {}\r\n\r\nfunction DialogTitle({ ...props }: BitDialogProps) {\r\n  const { className, font } = props;\r\n  return (\r\n    <ShadcnDialogTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport const dialogContentVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nfunction DialogContent({\r\n  className,\r\n  children,\r\n  font,\r\n  ...props\r\n}: BitDialogProps) {\r\n  return (\r\n    <ShadcnDialogContent\r\n      className={cn(\r\n        \"bg-card rounded-none border-none\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      <div\r\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </ShadcnDialogContent>\r\n  );\r\n}\r\n\r\nexport {\r\n  Dialog,\r\n  DialogTrigger,\r\n  DialogHeader,\r\n  DialogFooter,\r\n  DialogDescription,\r\n  DialogTitle,\r\n  DialogContent,\r\n  DialogClose,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/dialog.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-dialogue-box.json b/public/r/8bit-dialogue-box.json
index 45edd012..d2aaa15a 100644
--- a/public/r/8bit-dialogue-box.json
+++ b/public/r/8bit-dialogue-box.json
@@ -11,25 +11,25 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/dialogue-box.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/components/ui/8bit/alert\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/8bit/avatar\";\n\nexport default function DialogueBox({\n  className,\n}: React.ComponentProps<\"div\">) {\n  return (\n    <Alert className={cn(className, \"flex gap-5 items-center\")}>\n      <Avatar variant=\"retro\" className=\"size-20\">\n        <AvatarImage\n          src=\"https://8bitcn.com/images/pixelized-8bitcnorc.jpg\"\n          alt=\"8-bit Orc\"\n        />\n        <AvatarFallback>Orc</AvatarFallback>\n      </Avatar>\n      <div className=\"flex flex-col gap-2\">\n        <AlertTitle>8-bit Orc</AlertTitle>\n        <AlertDescription>This is not a bug. It’s a feature.</AlertDescription>\n      </div>\n    </Alert>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Alert,\r\n  AlertDescription,\r\n  AlertTitle,\r\n} from \"@/components/ui/8bit/alert\";\r\nimport {\r\n  Avatar,\r\n  AvatarFallback,\r\n  AvatarImage,\r\n} from \"@/components/ui/8bit/avatar\";\r\n\r\nexport default function DialogueBox({\r\n  className,\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <Alert className={cn(className, \"flex gap-5 items-center\")}>\r\n      <Avatar variant=\"retro\" className=\"size-20\">\r\n        <AvatarImage\r\n          src=\"https://8bitcn.com/images/pixelized-8bitcnorc.jpg\"\r\n          alt=\"8-bit Orc\"\r\n        />\r\n        <AvatarFallback>Orc</AvatarFallback>\r\n      </Avatar>\r\n      <div className=\"flex flex-col gap-2\">\r\n        <AlertTitle>8-bit Orc</AlertTitle>\r\n        <AlertDescription>This is not a bug. It’s a feature.</AlertDescription>\r\n      </div>\r\n    </Alert>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/dialogue-box.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     },
     {
       "path": "components/ui/8bit/alert.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Alert as ShadcnAlert,\n  AlertDescription as ShadcnAlertDescription,\n  AlertTitle as ShadcnAlertTitle,\n} from \"@/components/ui/alert\";\n\nexport const alertVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-card text-card-foreground\",\n      destructive:\n        \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface BitAlertProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof alertVariants> {}\n\nfunction Alert({ children, ...props }: BitAlertProps) {\n  const { variant, className, font } = props;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <ShadcnAlert\n        {...props}\n        variant={variant}\n        className={cn(\n          \"relative rounded-none border-none bg-background\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      >\n        {children}\n      </ShadcnAlert>\n\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n    </div>\n  );\n}\n\nfunction AlertTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <ShadcnAlertTitle\n      className={cn(\"line-clamp-1 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <ShadcnAlertDescription\n      className={cn(\n        \"text-muted-foreground grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Alert as ShadcnAlert,\r\n  AlertDescription as ShadcnAlertDescription,\r\n  AlertTitle as ShadcnAlertTitle,\r\n} from \"@/components/ui/alert\";\r\n\r\nexport const alertVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-card text-card-foreground\",\r\n      destructive:\r\n        \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitAlertProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof alertVariants> {}\r\n\r\nfunction Alert({ children, ...props }: BitAlertProps) {\r\n  const { variant, className, font } = props;\r\n\r\n  return (\r\n    <div className={cn(\"relative\", className)}>\r\n      <ShadcnAlert\r\n        {...props}\r\n        variant={variant}\r\n        className={cn(\r\n          \"relative rounded-none border-none bg-background\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </ShadcnAlert>\r\n\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction AlertTitle({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <ShadcnAlertTitle\r\n      className={cn(\"line-clamp-1 font-medium tracking-tight\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertDescription({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <ShadcnAlertDescription\r\n      className={cn(\r\n        \"text-muted-foreground grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/alert.tsx"
     },
     {
       "path": "components/ui/8bit/avatar.tsx",
-      "content": "import type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const avatarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"\",\n      retro: \"\",\n      pixel: \"\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n    variant: \"pixel\",\n  },\n});\n\nconst Avatar = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {\n    font?: \"normal\" | \"retro\";\n    variant?: \"default\" | \"retro\" | \"pixel\";\n  }\n>(({ className = \"\", font, variant = \"pixel\", ...props }, ref) => {\n  const isPixel = variant === \"pixel\";\n\n  return (\n    <div className={cn(\"relative size-max\", className)}>\n      {/* Pixel frame (only show if pixel variant) */}\n      {isPixel && (\n        <div\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\n          style={{ zIndex: 10 }}\n        >\n          {/* Top black border */}\n          <div className=\"absolute top-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Second row */}\n          <div className=\"absolute top-[6.25%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Third row */}\n          <div className=\"absolute top-[12.5%] left-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\n          <div className=\"absolute top-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\n\n          {/* Fourth row */}\n          <div className=\"absolute top-[18.75%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[18.75%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Fifth row */}\n          <div className=\"absolute top-[25%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[25%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 6-7 */}\n          <div className=\"absolute top-[31.25%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[31.25%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 8-10 */}\n          <div className=\"absolute top-[43.75%] left-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[43.75%] right-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 11-12 */}\n          <div className=\"absolute top-[62.5%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[62.5%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 13 */}\n          <div className=\"absolute top-[75%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[75%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 14 */}\n          <div className=\"absolute top-[81.25%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[81.25%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 15 */}\n          <div className=\"absolute top-[87.5%] left-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 16 */}\n          <div className=\"absolute top-[93.75%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Bottom row */}\n          <div className=\"absolute bottom-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n        </div>\n      )}\n\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn(\n          \"relative flex size-10 shrink-0 overflow-hidden text-xs\",\n          !isPixel && \"rounded-none\",\n          isPixel && \"rounded-full\",\n          font !== \"normal\" && \"retro\",\n          variant === \"retro\" && \"image-rendering-pixelated\",\n          className\n        )}\n        {...props}\n      />\n\n      {/* Original border styling (only show if not pixel variant) */}\n      {!isPixel && (\n        <>\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute top-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute top-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n        </>\n      )}\n    </div>\n  );\n});\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\ninterface BitAvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {\n  font?: \"normal\" | \"retro\";\n  variant?: \"default\" | \"retro\" | \"pixel\";\n}\n\nconst AvatarImage = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  BitAvatarImageProps\n>(({ className, font, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square h-full w-full\",\n        font === \"retro\" && \"retro\",\n        className\n      )}\n      {...props}\n    />\n  );\n});\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    data-slot=\"avatar-fallback\"\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback };\n",
+      "content": "import type React from \"react\";\r\nimport { forwardRef } from \"react\";\r\n\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\r\nimport { cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const avatarVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"\",\r\n      pixel: \"\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n    variant: \"pixel\",\r\n  },\r\n});\r\n\r\nconst Avatar = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {\r\n    font?: \"normal\" | \"retro\";\r\n    variant?: \"default\" | \"retro\" | \"pixel\";\r\n  }\r\n>(({ className = \"\", font, variant = \"pixel\", ...props }, ref) => {\r\n  const isPixel = variant === \"pixel\";\r\n\r\n  return (\r\n    <div className={cn(\"relative size-max\", className)}>\r\n      {/* Pixel frame (only show if pixel variant) */}\r\n      {isPixel && (\r\n        <div\r\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n          style={{ zIndex: 10 }}\r\n        >\r\n          {/* Top black border */}\r\n          <div className=\"absolute top-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Second row */}\r\n          <div className=\"absolute top-[6.25%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Third row */}\r\n          <div className=\"absolute top-[12.5%] left-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\r\n          <div className=\"absolute top-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\r\n\r\n          {/* Fourth row */}\r\n          <div className=\"absolute top-[18.75%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[18.75%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Fifth row */}\r\n          <div className=\"absolute top-[25%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[25%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 6-7 */}\r\n          <div className=\"absolute top-[31.25%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[31.25%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 8-10 */}\r\n          <div className=\"absolute top-[43.75%] left-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[43.75%] right-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 11-12 */}\r\n          <div className=\"absolute top-[62.5%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[62.5%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 13 */}\r\n          <div className=\"absolute top-[75%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[75%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 14 */}\r\n          <div className=\"absolute top-[81.25%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[81.25%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 15 */}\r\n          <div className=\"absolute top-[87.5%] left-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 16 */}\r\n          <div className=\"absolute top-[93.75%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Bottom row */}\r\n          <div className=\"absolute bottom-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n        </div>\r\n      )}\r\n\r\n      <AvatarPrimitive.Root\r\n        ref={ref}\r\n        data-slot=\"avatar\"\r\n        className={cn(\r\n          \"relative flex size-10 shrink-0 overflow-hidden text-xs\",\r\n          !isPixel && \"rounded-none\",\r\n          isPixel && \"rounded-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          variant === \"retro\" && \"image-rendering-pixelated\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n\r\n      {/* Original border styling (only show if not pixel variant) */}\r\n      {!isPixel && (\r\n        <>\r\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute top-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute top-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\nAvatar.displayName = AvatarPrimitive.Root.displayName;\r\n\r\ninterface BitAvatarImageProps\r\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {\r\n  font?: \"normal\" | \"retro\";\r\n  variant?: \"default\" | \"retro\" | \"pixel\";\r\n}\r\n\r\nconst AvatarImage = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\r\n  BitAvatarImageProps\r\n>(({ className, font, ...props }, ref) => {\r\n  return (\r\n    <AvatarPrimitive.Image\r\n      ref={ref}\r\n      data-slot=\"avatar-image\"\r\n      className={cn(\r\n        \"aspect-square h-full w-full\",\r\n        font === \"retro\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\r\n\r\nconst AvatarFallback = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n  <AvatarPrimitive.Fallback\r\n    ref={ref}\r\n    data-slot=\"avatar-fallback\"\r\n    className={cn(\r\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/avatar.tsx"
     }
diff --git a/public/r/8bit-drawer.json b/public/r/8bit-drawer.json
index 90444768..7f6d7ef9 100644
--- a/public/r/8bit-drawer.json
+++ b/public/r/8bit-drawer.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/drawer.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Drawer as ShadcnDrawer,\n  DrawerClose as ShadcnDrawerClose,\n  DrawerDescription as ShadcnDrawerDescription,\n  DrawerFooter as ShadcnDrawerFooter,\n  DrawerHeader as ShadcnDrawerHeader,\n  DrawerOverlay as ShadcnDrawerOverlay,\n  DrawerPortal as ShadcnDrawerPortal,\n  DrawerTitle as ShadcnDrawerTitle,\n  DrawerTrigger as ShadcnDrawerTrigger,\n} from \"@/components/ui/drawer\";\n\nimport \"./styles/retro.css\";\n\nconst Drawer = ShadcnDrawer;\n\nconst DrawerPortal = ShadcnDrawerPortal;\n\nconst DrawerOverlay = ShadcnDrawerOverlay;\n\nconst DrawerClose = ShadcnDrawerClose;\n\nfunction DrawerTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <ShadcnDrawerTitle className={cn(className, \"retro\")} {...props}>\n      {children}\n    </ShadcnDrawerTitle>\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <ShadcnDrawerDescription className={cn(className, \"retro\")} {...props}>\n      {children}\n    </ShadcnDrawerDescription>\n  );\n}\n\nfunction DrawerTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return (\n    <>\n      <ShadcnDrawerTrigger\n        className={cn(\n          \"border-foreground dark:border-ring hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-4 focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\n          className,\n          \"retro\"\n        )}\n        {...props}\n      >\n        {children}\n      </ShadcnDrawerTrigger>\n    </>\n  );\n}\n\nexport const drawerVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Content> &\n  VariantProps<typeof drawerVariants> & {\n    side?: \"right\" | \"bottom\" | \"left\";\n  };\n\nfunction DrawerContent({ className, children, side, ...props }: DrawerProps) {\n  return (\n    <ShadcnDrawerPortal data-slot=\"drawer-portal\">\n      <ShadcnDrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"border-foreground dark:border-ring rounded-none\",\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          side === \"right\" &&\n            \"border-l-4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm\",\n          side === \"left\" &&\n            \"border-r-4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm\",\n          side === \"bottom\" &&\n            \"border-t-4 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto\",\n          className,\n          \"retro\"\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </ShadcnDrawerPortal>\n  );\n}\n\nfunction DrawerHeader({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <ShadcnDrawerHeader className={cn(\"\", className, \"retro\")} {...props}>\n      {children}\n    </ShadcnDrawerHeader>\n  );\n}\n\nfunction DrawerFooter({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <ShadcnDrawerFooter className={cn(\"\", className, \"retro\")} {...props}>\n      {children}\n    </ShadcnDrawerFooter>\n  );\n}\n\nexport {\n  Drawer,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerClose,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerDescription,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\nimport { Drawer as DrawerPrimitive } from \"vaul\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Drawer as ShadcnDrawer,\r\n  DrawerClose as ShadcnDrawerClose,\r\n  DrawerDescription as ShadcnDrawerDescription,\r\n  DrawerFooter as ShadcnDrawerFooter,\r\n  DrawerHeader as ShadcnDrawerHeader,\r\n  DrawerOverlay as ShadcnDrawerOverlay,\r\n  DrawerPortal as ShadcnDrawerPortal,\r\n  DrawerTitle as ShadcnDrawerTitle,\r\n  DrawerTrigger as ShadcnDrawerTrigger,\r\n} from \"@/components/ui/drawer\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst Drawer = ShadcnDrawer;\r\n\r\nconst DrawerPortal = ShadcnDrawerPortal;\r\n\r\nconst DrawerOverlay = ShadcnDrawerOverlay;\r\n\r\nconst DrawerClose = ShadcnDrawerClose;\r\n\r\nfunction DrawerTitle({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\r\n  return (\r\n    <ShadcnDrawerTitle className={cn(className, \"retro\")} {...props}>\r\n      {children}\r\n    </ShadcnDrawerTitle>\r\n  );\r\n}\r\n\r\nfunction DrawerDescription({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\r\n  return (\r\n    <ShadcnDrawerDescription className={cn(className, \"retro\")} {...props}>\r\n      {children}\r\n    </ShadcnDrawerDescription>\r\n  );\r\n}\r\n\r\nfunction DrawerTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\r\n  return (\r\n    <>\r\n      <ShadcnDrawerTrigger\r\n        className={cn(\r\n          \"border-foreground dark:border-ring hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-4 focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\r\n          className,\r\n          \"retro\"\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </ShadcnDrawerTrigger>\r\n    </>\r\n  );\r\n}\r\n\r\nexport const drawerVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Content> &\r\n  VariantProps<typeof drawerVariants> & {\r\n    side?: \"right\" | \"bottom\" | \"left\";\r\n  };\r\n\r\nfunction DrawerContent({ className, children, side, ...props }: DrawerProps) {\r\n  return (\r\n    <ShadcnDrawerPortal data-slot=\"drawer-portal\">\r\n      <ShadcnDrawerOverlay />\r\n      <DrawerPrimitive.Content\r\n        data-slot=\"drawer-content\"\r\n        className={cn(\r\n          \"border-foreground dark:border-ring rounded-none\",\r\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\r\n          side === \"right\" &&\r\n            \"border-l-4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm\",\r\n          side === \"left\" &&\r\n            \"border-r-4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm\",\r\n          side === \"bottom\" &&\r\n            \"border-t-4 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto\",\r\n          className,\r\n          \"retro\"\r\n        )}\r\n        {...props}\r\n      >\r\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\r\n        {children}\r\n      </DrawerPrimitive.Content>\r\n    </ShadcnDrawerPortal>\r\n  );\r\n}\r\n\r\nfunction DrawerHeader({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <ShadcnDrawerHeader className={cn(\"\", className, \"retro\")} {...props}>\r\n      {children}\r\n    </ShadcnDrawerHeader>\r\n  );\r\n}\r\n\r\nfunction DrawerFooter({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <ShadcnDrawerFooter className={cn(\"\", className, \"retro\")} {...props}>\r\n      {children}\r\n    </ShadcnDrawerFooter>\r\n  );\r\n}\r\n\r\nexport {\r\n  Drawer,\r\n  DrawerHeader,\r\n  DrawerFooter,\r\n  DrawerClose,\r\n  DrawerTrigger,\r\n  DrawerContent,\r\n  DrawerOverlay,\r\n  DrawerPortal,\r\n  DrawerTitle,\r\n  DrawerDescription,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/drawer.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-dropdown-menu.json b/public/r/8bit-dropdown-menu.json
index 4ed0405d..7452cd54 100644
--- a/public/r/8bit-dropdown-menu.json
+++ b/public/r/8bit-dropdown-menu.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/dropdown-menu.tsx",
-      "content": "import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  DropdownMenu as ShadcnDropdownMenu,\n  DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem,\n  DropdownMenuContent as ShadcnDropdownMenuContent,\n  DropdownMenuGroup as ShadcnDropdownMenuGroup,\n  DropdownMenuItem as ShadcnDropdownMenuItem,\n  DropdownMenuLabel as ShadcnDropdownMenuLabel,\n  DropdownMenuPortal as ShadcnDropdownMenuPortal,\n  DropdownMenuSeparator as ShadcnDropdownMenuSeparator,\n  DropdownMenuShortcut as ShadcnDropdownMenuShortcut,\n  DropdownMenuSub as ShadcnDropdownMenuSub,\n  DropdownMenuSubContent as ShadcnDropdownMenuSubContent,\n  DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger,\n  DropdownMenuTrigger as ShadcnDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nimport \"./styles/retro.css\";\n\nconst DropdownMenu = ShadcnDropdownMenu;\n\nconst DropdownMenuPortal = ShadcnDropdownMenuPortal;\n\nconst DropdownMenuTrigger = ShadcnDropdownMenuTrigger;\n\nconst DropdownMenuGroup = ShadcnDropdownMenuGroup;\n\nconst DropdownMenuLabel = ShadcnDropdownMenuLabel;\n\nconst DropdownMenuSeparator = ShadcnDropdownMenuSeparator;\n\nconst DropdownMenuShortcut = ShadcnDropdownMenuShortcut;\n\nconst DropdownMenuSub = ShadcnDropdownMenuSub;\n\nconst DropdownMenuCheckboxItem = ShadcnDropdownMenuCheckboxItem;\n\nfunction DropdownMenuSubTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.DropdownMenuSubTrigger>) {\n  return (\n    <ShadcnDropdownMenuSubTrigger\n      className={cn(\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnDropdownMenuSubTrigger>\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item>) {\n  return (\n    <ShadcnDropdownMenuItem\n      className={cn(\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-3 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnDropdownMenuItem>\n  );\n}\n\nexport const dropDownVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nfunction DropdownMenuSubContent({\n  children,\n  className,\n  font,\n  ...props\n}: BitDropownMenuContentProps) {\n  return (\n    <ShadcnDropdownMenuSubContent\n      {...props}\n      className={cn(\"bg-popover\", font !== \"normal\" && \"retro\", className)}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDropdownMenuSubContent>\n  );\n}\n\nexport interface BitDropownMenuContentProps\n  extends React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n    VariantProps<typeof dropDownVariants> {}\n\nfunction DropdownMenuContent({\n  children,\n  font,\n  className,\n  ...props\n}: BitDropownMenuContentProps) {\n  return (\n    <ShadcnDropdownMenuContent\n      className={cn(\"mt-1 py-2\", font !== \"normal\" && \"retro\", className)}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"mt-2.5 absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"mt-1 absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDropdownMenuContent>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n};\n",
+      "content": "import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  DropdownMenu as ShadcnDropdownMenu,\r\n  DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem,\r\n  DropdownMenuContent as ShadcnDropdownMenuContent,\r\n  DropdownMenuGroup as ShadcnDropdownMenuGroup,\r\n  DropdownMenuItem as ShadcnDropdownMenuItem,\r\n  DropdownMenuLabel as ShadcnDropdownMenuLabel,\r\n  DropdownMenuPortal as ShadcnDropdownMenuPortal,\r\n  DropdownMenuSeparator as ShadcnDropdownMenuSeparator,\r\n  DropdownMenuShortcut as ShadcnDropdownMenuShortcut,\r\n  DropdownMenuSub as ShadcnDropdownMenuSub,\r\n  DropdownMenuSubContent as ShadcnDropdownMenuSubContent,\r\n  DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger,\r\n  DropdownMenuTrigger as ShadcnDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst DropdownMenu = ShadcnDropdownMenu;\r\n\r\nconst DropdownMenuPortal = ShadcnDropdownMenuPortal;\r\n\r\nconst DropdownMenuTrigger = ShadcnDropdownMenuTrigger;\r\n\r\nconst DropdownMenuGroup = ShadcnDropdownMenuGroup;\r\n\r\nconst DropdownMenuLabel = ShadcnDropdownMenuLabel;\r\n\r\nconst DropdownMenuSeparator = ShadcnDropdownMenuSeparator;\r\n\r\nconst DropdownMenuShortcut = ShadcnDropdownMenuShortcut;\r\n\r\nconst DropdownMenuSub = ShadcnDropdownMenuSub;\r\n\r\nconst DropdownMenuCheckboxItem = ShadcnDropdownMenuCheckboxItem;\r\n\r\nfunction DropdownMenuSubTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof DropdownMenuPrimitive.DropdownMenuSubTrigger>) {\r\n  return (\r\n    <ShadcnDropdownMenuSubTrigger\r\n      className={cn(\r\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnDropdownMenuSubTrigger>\r\n  );\r\n}\r\n\r\nfunction DropdownMenuItem({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item>) {\r\n  return (\r\n    <ShadcnDropdownMenuItem\r\n      className={cn(\r\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-3 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnDropdownMenuItem>\r\n  );\r\n}\r\n\r\nexport const dropDownVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nfunction DropdownMenuSubContent({\r\n  children,\r\n  className,\r\n  font,\r\n  ...props\r\n}: BitDropownMenuContentProps) {\r\n  return (\r\n    <ShadcnDropdownMenuSubContent\r\n      {...props}\r\n      className={cn(\"bg-popover\", font !== \"normal\" && \"retro\", className)}\r\n    >\r\n      {children}\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      <div\r\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </ShadcnDropdownMenuSubContent>\r\n  );\r\n}\r\n\r\nexport interface BitDropownMenuContentProps\r\n  extends React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\r\n    VariantProps<typeof dropDownVariants> {}\r\n\r\nfunction DropdownMenuContent({\r\n  children,\r\n  font,\r\n  className,\r\n  ...props\r\n}: BitDropownMenuContentProps) {\r\n  return (\r\n    <ShadcnDropdownMenuContent\r\n      className={cn(\"mt-1 py-2\", font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    >\r\n      {children}\r\n\r\n      <div\r\n        className=\"mt-2.5 absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      <div\r\n        className=\"mt-1 absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </ShadcnDropdownMenuContent>\r\n  );\r\n}\r\n\r\nexport {\r\n  DropdownMenu,\r\n  DropdownMenuPortal,\r\n  DropdownMenuTrigger,\r\n  DropdownMenuContent,\r\n  DropdownMenuGroup,\r\n  DropdownMenuLabel,\r\n  DropdownMenuItem,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuSubTrigger,\r\n  DropdownMenuSubContent,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuShortcut,\r\n  DropdownMenuSub,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/dropdown-menu.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-game-over.json b/public/r/8bit-game-over.json
index 6ac6cdc5..bd5d3acd 100644
--- a/public/r/8bit-game-over.json
+++ b/public/r/8bit-game-over.json
@@ -11,25 +11,25 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/game-over.tsx",
-      "content": "import { RefreshCcw, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\n\nexport default function GameOver({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"p-5\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <div className=\"flex flex-col gap-5 px-5 py-15\">\n            <div className=\"flex flex-col items-center text-center\">\n              <h1 className=\"text-xl font-bold\">Game Over</h1>\n              <p className=\"text-balance text-xs text-muted-foreground\">\n                Continue?\n              </p>\n            </div>\n\n            <Button className=\"flex items-center\">\n              <RefreshCcw className=\"size-4\" />\n              <span>Retry</span>\n            </Button>\n            <Button className=\"flex items-center\">\n              <X className=\"size-4\" />\n              <span>Exit</span>\n            </Button>\n          </div>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/images/8-bit-skull.png\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale opacity-70\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
+      "content": "import { RefreshCcw, X } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\r\n\r\nexport default function GameOver({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n      <Card className=\"p-5\">\r\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\r\n          <div className=\"flex flex-col gap-5 px-5 py-15\">\r\n            <div className=\"flex flex-col items-center text-center\">\r\n              <h1 className=\"text-xl font-bold\">Game Over</h1>\r\n              <p className=\"text-balance text-xs text-muted-foreground\">\r\n                Continue?\r\n              </p>\r\n            </div>\r\n\r\n            <Button className=\"flex items-center\">\r\n              <RefreshCcw className=\"size-4\" />\r\n              <span>Retry</span>\r\n            </Button>\r\n            <Button className=\"flex items-center\">\r\n              <X className=\"size-4\" />\r\n              <span>Exit</span>\r\n            </Button>\r\n          </div>\r\n          <div className=\"relative hidden bg-muted md:block\">\r\n            <img\r\n              src=\"/images/8-bit-skull.png\"\r\n              alt=\"Image\"\r\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale opacity-70\"\r\n            />\r\n          </div>\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/game-over.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     }
diff --git a/public/r/8bit-game-progress.json b/public/r/8bit-game-progress.json
index c8268aec..c70b9a4c 100644
--- a/public/r/8bit-game-progress.json
+++ b/public/r/8bit-game-progress.json
@@ -8,31 +8,31 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/game-progress.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport HealthBar from \"@/components/ui/8bit/health-bar\";\nimport ManaBar from \"@/components/ui/8bit/mana-bar\";\nimport { Progress } from \"@/components/ui/8bit/progress\";\n\nexport default function GameProgress({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <Card className={cn(className)} {...props}>\n      <CardHeader>\n        <CardTitle className=\"text-sm font-medium\">Game Progress</CardTitle>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div>\n          <div className=\"flex justify-between text-sm mb-2\">\n            <span>Health</span>\n            <span>75%</span>\n          </div>\n          <HealthBar value={75} />\n        </div>\n        <div>\n          <div className=\"flex justify-between text-sm mb-2\">\n            <span>Mana</span>\n            <span>45%</span>\n          </div>\n          <ManaBar value={45} />\n        </div>\n        <div>\n          <div className=\"flex justify-between text-sm mb-2\">\n            <span>Experience</span>\n            <span>90%</span>\n          </div>\n          <Progress value={90} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\nimport HealthBar from \"@/components/ui/8bit/health-bar\";\r\nimport ManaBar from \"@/components/ui/8bit/mana-bar\";\r\nimport { Progress } from \"@/components/ui/8bit/progress\";\r\n\r\nexport default function GameProgress({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <Card className={cn(className)} {...props}>\r\n      <CardHeader>\r\n        <CardTitle className=\"text-sm font-medium\">Game Progress</CardTitle>\r\n      </CardHeader>\r\n      <CardContent className=\"space-y-4\">\r\n        <div>\r\n          <div className=\"flex justify-between text-sm mb-2\">\r\n            <span>Health</span>\r\n            <span>75%</span>\r\n          </div>\r\n          <HealthBar value={75} />\r\n        </div>\r\n        <div>\r\n          <div className=\"flex justify-between text-sm mb-2\">\r\n            <span>Mana</span>\r\n            <span>45%</span>\r\n          </div>\r\n          <ManaBar value={45} />\r\n        </div>\r\n        <div>\r\n          <div className=\"flex justify-between text-sm mb-2\">\r\n            <span>Experience</span>\r\n            <span>90%</span>\r\n          </div>\r\n          <Progress value={90} />\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/game-progress.tsx"
     },
     {
       "path": "components/ui/8bit/health-bar.tsx",
-      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\n\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\n  className?: string;\n  props?: BitProgressProps;\n  variant?: \"retro\" | \"default\";\n  value?: number;\n}\n\nexport default function HealthBar({\n  className,\n  variant,\n  value,\n  ...props\n}: ManaBarProps) {\n  return (\n    <Progress\n      {...props}\n      value={value}\n      variant={variant}\n      className={className}\n      progressBg=\"bg-red-500\"\n    />\n  );\n}\n",
+      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\r\n\r\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\r\n  className?: string;\r\n  props?: BitProgressProps;\r\n  variant?: \"retro\" | \"default\";\r\n  value?: number;\r\n}\r\n\r\nexport default function HealthBar({\r\n  className,\r\n  variant,\r\n  value,\r\n  ...props\r\n}: ManaBarProps) {\r\n  return (\r\n    <Progress\r\n      {...props}\r\n      value={value}\r\n      variant={variant}\r\n      className={className}\r\n      progressBg=\"bg-red-500\"\r\n    />\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/health-bar.tsx"
     },
     {
       "path": "components/ui/8bit/mana-bar.tsx",
-      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\n\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\n  className?: string;\n  props?: BitProgressProps;\n  variant?: \"retro\" | \"default\";\n  value?: number;\n}\n\nexport default function ManaBar({\n  className,\n  variant,\n  value,\n  ...props\n}: ManaBarProps) {\n  return (\n    <Progress\n      {...props}\n      value={value}\n      variant={variant}\n      className={className}\n      progressBg=\"bg-blue-500\"\n    />\n  );\n}\n",
+      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\r\n\r\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\r\n  className?: string;\r\n  props?: BitProgressProps;\r\n  variant?: \"retro\" | \"default\";\r\n  value?: number;\r\n}\r\n\r\nexport default function ManaBar({\r\n  className,\r\n  variant,\r\n  value,\r\n  ...props\r\n}: ManaBarProps) {\r\n  return (\r\n    <Progress\r\n      {...props}\r\n      value={value}\r\n      variant={variant}\r\n      className={className}\r\n      progressBg=\"bg-blue-500\"\r\n    />\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/mana-bar.tsx"
     },
     {
       "path": "components/ui/8bit/progress.tsx",
-      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const progressVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: \"\",\n      retro: \"retro\",\n    },\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressVariants> {\n  className?: string;\n  font?: VariantProps<typeof progressVariants>[\"font\"];\n  progressBg?: string;\n}\n\nfunction Progress({\n  className,\n  font,\n  variant,\n  value,\n  progressBg,\n  ...props\n}: BitProgressProps) {\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <ProgressPrimitive.Root\n        data-slot=\"progress\"\n        className={cn(\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\n          font !== \"normal\" && \"retro\"\n        )}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={cn(\n            \"h-full transition-all\",\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\n          )}\n          style={\n            variant === \"retro\"\n              ? undefined\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\n          }\n        >\n          {variant === \"retro\" && (\n            <div className=\"flex w-full\">\n              {Array.from({ length: 20 }).map((_, i) => {\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\n                return (\n                  <div\n                    key={i}\n                    className={cn(\n                      \"size-2 mx-[1px] w-full\",\n                      i < filledSquares ? progressBg : \"bg-transparent\"\n                    )}\n                  />\n                );\n              })}\n            </div>\n          )}\n        </ProgressPrimitive.Indicator>\n      </ProgressPrimitive.Root>\n\n      <div\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Progress };\n",
+      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const progressVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitProgressProps\r\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\r\n    VariantProps<typeof progressVariants> {\r\n  className?: string;\r\n  font?: VariantProps<typeof progressVariants>[\"font\"];\r\n  progressBg?: string;\r\n}\r\n\r\nfunction Progress({\r\n  className,\r\n  font,\r\n  variant,\r\n  value,\r\n  progressBg,\r\n  ...props\r\n}: BitProgressProps) {\r\n  return (\r\n    <div className={cn(\"relative w-full\", className)}>\r\n      <ProgressPrimitive.Root\r\n        data-slot=\"progress\"\r\n        className={cn(\r\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\r\n          font !== \"normal\" && \"retro\"\r\n        )}\r\n        {...props}\r\n      >\r\n        <ProgressPrimitive.Indicator\r\n          data-slot=\"progress-indicator\"\r\n          className={cn(\r\n            \"h-full transition-all\",\r\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\r\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\r\n          )}\r\n          style={\r\n            variant === \"retro\"\r\n              ? undefined\r\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\r\n          }\r\n        >\r\n          {variant === \"retro\" && (\r\n            <div className=\"flex w-full\">\r\n              {Array.from({ length: 20 }).map((_, i) => {\r\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\r\n                return (\r\n                  <div\r\n                    key={i}\r\n                    className={cn(\r\n                      \"size-2 mx-[1px] w-full\",\r\n                      i < filledSquares ? progressBg : \"bg-transparent\"\r\n                    )}\r\n                  />\r\n                );\r\n              })}\r\n            </div>\r\n          )}\r\n        </ProgressPrimitive.Indicator>\r\n      </ProgressPrimitive.Root>\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Progress };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/progress.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-health-bar.json b/public/r/8bit-health-bar.json
index 19d8d737..a44ee101 100644
--- a/public/r/8bit-health-bar.json
+++ b/public/r/8bit-health-bar.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "path": "components/ui/8bit/health-bar.tsx",
-      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\n\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\n  className?: string;\n  props?: BitProgressProps;\n  variant?: \"retro\" | \"default\";\n  value?: number;\n}\n\nexport default function HealthBar({\n  className,\n  variant,\n  value,\n  ...props\n}: ManaBarProps) {\n  return (\n    <Progress\n      {...props}\n      value={value}\n      variant={variant}\n      className={className}\n      progressBg=\"bg-red-500\"\n    />\n  );\n}\n",
+      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\r\n\r\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\r\n  className?: string;\r\n  props?: BitProgressProps;\r\n  variant?: \"retro\" | \"default\";\r\n  value?: number;\r\n}\r\n\r\nexport default function HealthBar({\r\n  className,\r\n  variant,\r\n  value,\r\n  ...props\r\n}: ManaBarProps) {\r\n  return (\r\n    <Progress\r\n      {...props}\r\n      value={value}\r\n      variant={variant}\r\n      className={className}\r\n      progressBg=\"bg-red-500\"\r\n    />\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/health-bar.tsx"
     },
     {
       "path": "components/ui/8bit/progress.tsx",
-      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const progressVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: \"\",\n      retro: \"retro\",\n    },\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressVariants> {\n  className?: string;\n  font?: VariantProps<typeof progressVariants>[\"font\"];\n  progressBg?: string;\n}\n\nfunction Progress({\n  className,\n  font,\n  variant,\n  value,\n  progressBg,\n  ...props\n}: BitProgressProps) {\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <ProgressPrimitive.Root\n        data-slot=\"progress\"\n        className={cn(\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\n          font !== \"normal\" && \"retro\"\n        )}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={cn(\n            \"h-full transition-all\",\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\n          )}\n          style={\n            variant === \"retro\"\n              ? undefined\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\n          }\n        >\n          {variant === \"retro\" && (\n            <div className=\"flex w-full\">\n              {Array.from({ length: 20 }).map((_, i) => {\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\n                return (\n                  <div\n                    key={i}\n                    className={cn(\n                      \"size-2 mx-[1px] w-full\",\n                      i < filledSquares ? progressBg : \"bg-transparent\"\n                    )}\n                  />\n                );\n              })}\n            </div>\n          )}\n        </ProgressPrimitive.Indicator>\n      </ProgressPrimitive.Root>\n\n      <div\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Progress };\n",
+      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const progressVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitProgressProps\r\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\r\n    VariantProps<typeof progressVariants> {\r\n  className?: string;\r\n  font?: VariantProps<typeof progressVariants>[\"font\"];\r\n  progressBg?: string;\r\n}\r\n\r\nfunction Progress({\r\n  className,\r\n  font,\r\n  variant,\r\n  value,\r\n  progressBg,\r\n  ...props\r\n}: BitProgressProps) {\r\n  return (\r\n    <div className={cn(\"relative w-full\", className)}>\r\n      <ProgressPrimitive.Root\r\n        data-slot=\"progress\"\r\n        className={cn(\r\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\r\n          font !== \"normal\" && \"retro\"\r\n        )}\r\n        {...props}\r\n      >\r\n        <ProgressPrimitive.Indicator\r\n          data-slot=\"progress-indicator\"\r\n          className={cn(\r\n            \"h-full transition-all\",\r\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\r\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\r\n          )}\r\n          style={\r\n            variant === \"retro\"\r\n              ? undefined\r\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\r\n          }\r\n        >\r\n          {variant === \"retro\" && (\r\n            <div className=\"flex w-full\">\r\n              {Array.from({ length: 20 }).map((_, i) => {\r\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\r\n                return (\r\n                  <div\r\n                    key={i}\r\n                    className={cn(\r\n                      \"size-2 mx-[1px] w-full\",\r\n                      i < filledSquares ? progressBg : \"bg-transparent\"\r\n                    )}\r\n                  />\r\n                );\r\n              })}\r\n            </div>\r\n          )}\r\n        </ProgressPrimitive.Indicator>\r\n      </ProgressPrimitive.Root>\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Progress };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/progress.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-hover-card.json b/public/r/8bit-hover-card.json
index 55072330..3154fbf8 100644
--- a/public/r/8bit-hover-card.json
+++ b/public/r/8bit-hover-card.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/hover-card.tsx",
-      "content": "import * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  HoverCard as ShadcnHoverCard,\n  HoverCardContent as ShadcnHoverCardContent,\n  HoverCardTrigger as ShadcnHoverCardTrigger,\n} from \"@/components/ui/hover-card\";\n\nimport \"./styles/retro.css\";\n\nexport const hoverCardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitHoverCardProps\n  extends React.ComponentProps<typeof HoverCardPrimitive.Content>,\n    VariantProps<typeof hoverCardVariants> {}\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <ShadcnHoverCard {...props} />;\n}\n\nfunction HoverCardTrigger({\n  className,\n  asChild = true,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <ShadcnHoverCardTrigger\n      className={cn(className)}\n      asChild={asChild}\n      {...props}\n    />\n  );\n}\n\nfunction HoverCardContent({\n  children,\n  className,\n  font,\n  ...props\n}: BitHoverCardProps) {\n  return (\n    <ShadcnHoverCardContent\n      className={cn(\n        \"relative\",\n        hoverCardVariants({\n          font,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnHoverCardContent>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n",
+      "content": "import * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  HoverCard as ShadcnHoverCard,\r\n  HoverCardContent as ShadcnHoverCardContent,\r\n  HoverCardTrigger as ShadcnHoverCardTrigger,\r\n} from \"@/components/ui/hover-card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const hoverCardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitHoverCardProps\r\n  extends React.ComponentProps<typeof HoverCardPrimitive.Content>,\r\n    VariantProps<typeof hoverCardVariants> {}\r\n\r\nfunction HoverCard({\r\n  ...props\r\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\r\n  return <ShadcnHoverCard {...props} />;\r\n}\r\n\r\nfunction HoverCardTrigger({\r\n  className,\r\n  asChild = true,\r\n  ...props\r\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\r\n  return (\r\n    <ShadcnHoverCardTrigger\r\n      className={cn(className)}\r\n      asChild={asChild}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction HoverCardContent({\r\n  children,\r\n  className,\r\n  font,\r\n  ...props\r\n}: BitHoverCardProps) {\r\n  return (\r\n    <ShadcnHoverCardContent\r\n      className={cn(\r\n        \"relative\",\r\n        hoverCardVariants({\r\n          font,\r\n          className,\r\n        })\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      <div\r\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </ShadcnHoverCardContent>\r\n  );\r\n}\r\n\r\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/hover-card.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-input-otp.json b/public/r/8bit-input-otp.json
index 381778fd..5b44ef99 100644
--- a/public/r/8bit-input-otp.json
+++ b/public/r/8bit-input-otp.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/input-otp.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  InputOTP as ShadcnInputOTP,\n  InputOTPGroup as ShadcnInputOTPGroup,\n  InputOTPSeparator as ShadcnInputOTPSeparator,\n  InputOTPSlot as ShadcnInputOTPSlot,\n} from \"@/components/ui/input-otp\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface SharedProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof inputVariants> {\n  className?: string;\n  children?: React.ReactNode;\n}\n\ninterface InputOTPProps {\n  maxLength: number;\n  value?: string;\n  onChange?: (value: string) => unknown;\n  children?: React.ReactNode;\n  className?: string;\n  font?: \"normal\" | \"retro\";\n}\n\nexport const InputOTP = ({\n  className,\n  font,\n  maxLength,\n  value,\n  onChange,\n  children,\n  ...otherProps\n}: InputOTPProps) => {\n  return (\n    <div className={cn(\"relative w-fit\", className)}>\n      <ShadcnInputOTP\n        maxLength={maxLength}\n        value={value}\n        onChange={onChange}\n        {...otherProps}\n        className={cn(font !== \"normal\" && \"retro\", className)}\n      >\n        {children}\n      </ShadcnInputOTP>\n    </div>\n  );\n};\n\nexport const InputOTPGroup = ({ className, ...props }: SharedProps) => {\n  return (\n    <ShadcnInputOTPGroup {...props} className={cn(\"flex gap-2\", className)} />\n  );\n};\n\nexport const InputOTPSlot = ({\n  className,\n  font,\n  index = 0,\n  ...props\n}: SharedProps & { index?: number }) => {\n  return (\n    <div className=\"relative size-12 border-y-6 border-foreground dark:border-ring\">\n      <ShadcnInputOTPSlot\n        index={index}\n        {...props}\n        className={cn(\n          \"pl-1 size-full text-center text-xl tracking-widest z-0 ring-0 border-transparent \",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n};\n\nexport const InputOTPSeparator = ({ className, ...props }: SharedProps) => {\n  return <ShadcnInputOTPSeparator {...props} className={cn(\"\", className)} />;\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  InputOTP as ShadcnInputOTP,\r\n  InputOTPGroup as ShadcnInputOTPGroup,\r\n  InputOTPSeparator as ShadcnInputOTPSeparator,\r\n  InputOTPSlot as ShadcnInputOTPSlot,\r\n} from \"@/components/ui/input-otp\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface SharedProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof inputVariants> {\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface InputOTPProps {\r\n  maxLength: number;\r\n  value?: string;\r\n  onChange?: (value: string) => unknown;\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  font?: \"normal\" | \"retro\";\r\n}\r\n\r\nexport const InputOTP = ({\r\n  className,\r\n  font,\r\n  maxLength,\r\n  value,\r\n  onChange,\r\n  children,\r\n  ...otherProps\r\n}: InputOTPProps) => {\r\n  return (\r\n    <div className={cn(\"relative w-fit\", className)}>\r\n      <ShadcnInputOTP\r\n        maxLength={maxLength}\r\n        value={value}\r\n        onChange={onChange}\r\n        {...otherProps}\r\n        className={cn(font !== \"normal\" && \"retro\", className)}\r\n      >\r\n        {children}\r\n      </ShadcnInputOTP>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InputOTPGroup = ({ className, ...props }: SharedProps) => {\r\n  return (\r\n    <ShadcnInputOTPGroup {...props} className={cn(\"flex gap-2\", className)} />\r\n  );\r\n};\r\n\r\nexport const InputOTPSlot = ({\r\n  className,\r\n  font,\r\n  index = 0,\r\n  ...props\r\n}: SharedProps & { index?: number }) => {\r\n  return (\r\n    <div className=\"relative size-12 border-y-6 border-foreground dark:border-ring\">\r\n      <ShadcnInputOTPSlot\r\n        index={index}\r\n        {...props}\r\n        className={cn(\r\n          \"pl-1 size-full text-center text-xl tracking-widest z-0 ring-0 border-transparent \",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InputOTPSeparator = ({ className, ...props }: SharedProps) => {\r\n  return <ShadcnInputOTPSeparator {...props} className={cn(\"\", className)} />;\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/input-otp.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-input.json b/public/r/8bit-input.json
index a0405bd3..1b70fc88 100644
--- a/public/r/8bit-input.json
+++ b/public/r/8bit-input.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/input.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\n        className\n      )}\n    >\n      <ShadcnInput\n        {...props}\n        className={cn(\n          \"rounded-none ring-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Input };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitInputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Input({ ...props }: BitInputProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnInput\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none ring-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Input };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/input.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-label.json b/public/r/8bit-label.json
index 53e76b86..278a5902 100644
--- a/public/r/8bit-label.json
+++ b/public/r/8bit-label.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/label.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface BitLabelProps\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n  return (\n    <ShadcnLabel\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface BitLabelProps\r\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Label({ className, font, ...props }: BitLabelProps) {\r\n  return (\r\n    <ShadcnLabel\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Label };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/label.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-login-form-2.json b/public/r/8bit-login-form-2.json
index 2d2233d4..08dccf13 100644
--- a/public/r/8bit-login-form-2.json
+++ b/public/r/8bit-login-form-2.json
@@ -13,37 +13,37 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/login-form-2.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n          <CardDescription className=\"text-xs\">\n            Login with your Apple or Google account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"grid gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Apple\n                </Button>\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Google\n                </Button>\n              </div>\n              <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"password\">Password</Label>\n                    <a\n                      href=\"#\"\n                      className=\"ml-auto text-xs underline-offset-4 hover:underline\"\n                    >\n                      Forgot password?\n                    </a>\n                  </div>\n                  <Input id=\"password\" type=\"password\" required />\n                </div>\n                <Button type=\"submit\" className=\"w-full\">\n                  Login\n                </Button>\n              </div>\n              <div className=\"text-center text-xs\">\n                Don&apos;t have an account?{\" \"}\n                <a href=\"#\" className=\"underline underline-offset-4\">\n                  Sign up\n                </a>\n              </div>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n      <div\n        className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary`}\n      >\n        <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n      </div>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\nimport { Input } from \"@/components/ui/8bit/input\";\r\nimport { Label } from \"@/components/ui/8bit/label\";\r\n\r\nimport \"../styles/retro.css\";\r\n\r\nexport function LoginForm({\r\n  className,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n      <Card>\r\n        <CardHeader className=\"text-center\">\r\n          <CardTitle className=\"text-xl\">Welcome back</CardTitle>\r\n          <CardDescription className=\"text-xs\">\r\n            Login with your Apple or Google account\r\n          </CardDescription>\r\n        </CardHeader>\r\n        <CardContent>\r\n          <form>\r\n            <div className=\"grid gap-6\">\r\n              <div className=\"flex flex-col gap-4\">\r\n                <Button variant=\"outline\" className=\"w-full\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                    <path\r\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\r\n                      fill=\"currentColor\"\r\n                    />\r\n                  </svg>\r\n                  Login with Apple\r\n                </Button>\r\n                <Button variant=\"outline\" className=\"w-full\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                    <path\r\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\r\n                      fill=\"currentColor\"\r\n                    />\r\n                  </svg>\r\n                  Login with Google\r\n                </Button>\r\n              </div>\r\n              <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\r\n                <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\r\n                  Or continue with\r\n                </span>\r\n              </div>\r\n              <div className=\"grid gap-6\">\r\n                <div className=\"grid gap-2\">\r\n                  <Label htmlFor=\"email\">Email</Label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    type=\"email\"\r\n                    placeholder=\"m@example.com\"\r\n                    required\r\n                  />\r\n                </div>\r\n                <div className=\"grid gap-2\">\r\n                  <div className=\"flex items-center\">\r\n                    <Label htmlFor=\"password\">Password</Label>\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"ml-auto text-xs underline-offset-4 hover:underline\"\r\n                    >\r\n                      Forgot password?\r\n                    </a>\r\n                  </div>\r\n                  <Input id=\"password\" type=\"password\" required />\r\n                </div>\r\n                <Button type=\"submit\" className=\"w-full\">\r\n                  Login\r\n                </Button>\r\n              </div>\r\n              <div className=\"text-center text-xs\">\r\n                Don&apos;t have an account?{\" \"}\r\n                <a href=\"#\" className=\"underline underline-offset-4\">\r\n                  Sign up\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </CardContent>\r\n      </Card>\r\n      <div\r\n        className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary`}\r\n      >\r\n        <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/login-form-2.tsx"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/input.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\n        className\n      )}\n    >\n      <ShadcnInput\n        {...props}\n        className={cn(\n          \"rounded-none ring-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Input };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitInputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Input({ ...props }: BitInputProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnInput\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none ring-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Input };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/input.tsx"
     },
     {
       "path": "components/ui/8bit/label.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface BitLabelProps\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n  return (\n    <ShadcnLabel\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface BitLabelProps\r\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Label({ className, font, ...props }: BitLabelProps) {\r\n  return (\r\n    <ShadcnLabel\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Label };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/label.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-login-form-with-image.json b/public/r/8bit-login-form-with-image.json
index 123e914d..c61930a7 100644
--- a/public/r/8bit-login-form-with-image.json
+++ b/public/r/8bit-login-form-with-image.json
@@ -13,37 +13,37 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/login-form-with-image.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"p-5\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-xs text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-xs underline-offset-2 hover:underline\"\n                  >\n                    Forgot password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Login\n              </Button>\n              <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </div>\n              <div className=\"text-center text-xs\">\n                Don&apos;t have an account?{\" \"}\n                <a href=\"#\" className=\"underline underline-offset-4\">\n                  Sign up\n                </a>\n              </div>\n            </div>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <p\n        className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary`}\n      >\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </p>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\r\nimport { Input } from \"@/components/ui/8bit/input\";\r\nimport { Label } from \"@/components/ui/8bit/label\";\r\n\r\nimport \"../styles/retro.css\";\r\n\r\nexport function LoginForm({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n      <Card className=\"p-5\">\r\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\r\n          <form className=\"p-6 md:p-8\">\r\n            <div className=\"flex flex-col gap-6\">\r\n              <div className=\"flex flex-col items-center text-center\">\r\n                <h1 className=\"text-xl font-bold\">Welcome back</h1>\r\n                <p className=\"text-balance text-xs text-muted-foreground\">\r\n                  Login to your Acme Inc account\r\n                </p>\r\n              </div>\r\n              <div className=\"grid gap-2\">\r\n                <Label htmlFor=\"email\">Email</Label>\r\n                <Input\r\n                  id=\"email\"\r\n                  type=\"email\"\r\n                  placeholder=\"m@example.com\"\r\n                  required\r\n                />\r\n              </div>\r\n              <div className=\"grid gap-2\">\r\n                <div className=\"flex items-center\">\r\n                  <Label htmlFor=\"password\">Password</Label>\r\n                  <a\r\n                    href=\"#\"\r\n                    className=\"ml-auto text-xs underline-offset-2 hover:underline\"\r\n                  >\r\n                    Forgot password?\r\n                  </a>\r\n                </div>\r\n                <Input id=\"password\" type=\"password\" required />\r\n              </div>\r\n              <Button type=\"submit\" className=\"w-full\">\r\n                Login\r\n              </Button>\r\n              <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\r\n                <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\r\n                  Or continue with\r\n                </span>\r\n              </div>\r\n              <div className=\"grid grid-cols-3 gap-4\">\r\n                <Button variant=\"outline\" className=\"w-full\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                    <path\r\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\r\n                      fill=\"currentColor\"\r\n                    />\r\n                  </svg>\r\n                  <span className=\"sr-only\">Login with Apple</span>\r\n                </Button>\r\n                <Button variant=\"outline\" className=\"w-full\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                    <path\r\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\r\n                      fill=\"currentColor\"\r\n                    />\r\n                  </svg>\r\n                  <span className=\"sr-only\">Login with Google</span>\r\n                </Button>\r\n                <Button variant=\"outline\" className=\"w-full\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                    <path\r\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\r\n                      fill=\"currentColor\"\r\n                    />\r\n                  </svg>\r\n                  <span className=\"sr-only\">Login with Meta</span>\r\n                </Button>\r\n              </div>\r\n              <div className=\"text-center text-xs\">\r\n                Don&apos;t have an account?{\" \"}\r\n                <a href=\"#\" className=\"underline underline-offset-4\">\r\n                  Sign up\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div className=\"relative hidden bg-muted md:block\">\r\n            <img\r\n              src=\"/placeholder.svg\"\r\n              alt=\"Image\"\r\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\r\n            />\r\n          </div>\r\n        </CardContent>\r\n      </Card>\r\n      <p\r\n        className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary`}\r\n      >\r\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\r\n        and <a href=\"#\">Privacy Policy</a>.\r\n      </p>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/login-form-with-image.tsx"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/input.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\n        className\n      )}\n    >\n      <ShadcnInput\n        {...props}\n        className={cn(\n          \"rounded-none ring-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Input };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitInputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Input({ ...props }: BitInputProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnInput\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none ring-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Input };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/input.tsx"
     },
     {
       "path": "components/ui/8bit/label.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface BitLabelProps\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n  return (\n    <ShadcnLabel\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface BitLabelProps\r\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Label({ className, font, ...props }: BitLabelProps) {\r\n  return (\r\n    <ShadcnLabel\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Label };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/label.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-login-form.json b/public/r/8bit-login-form.json
index 1d870678..99539aac 100644
--- a/public/r/8bit-login-form.json
+++ b/public/r/8bit-login-form.json
@@ -13,37 +13,37 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/login-form.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription className=\"text-xs\">\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-2\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"inline-block text-xs underline-offset-4 hover:underline\"\n                  >\n                    Forgot password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Login\n              </Button>\n              <Button variant=\"outline\" className=\"w-full\">\n                Login with Google\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-xs\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\nimport { Input } from \"@/components/ui/8bit/input\";\r\nimport { Label } from \"@/components/ui/8bit/label\";\r\n\r\nexport function LoginForm({\r\n  className,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n      <Card>\r\n        <CardHeader>\r\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\r\n          <CardDescription className=\"text-xs\">\r\n            Enter your email below to login to your account\r\n          </CardDescription>\r\n        </CardHeader>\r\n        <CardContent>\r\n          <form>\r\n            <div className=\"flex flex-col gap-6\">\r\n              <div className=\"grid gap-2\">\r\n                <Label htmlFor=\"email\">Email</Label>\r\n                <Input\r\n                  id=\"email\"\r\n                  type=\"email\"\r\n                  placeholder=\"m@example.com\"\r\n                  required\r\n                />\r\n              </div>\r\n              <div className=\"grid gap-2\">\r\n                <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-2\">\r\n                  <Label htmlFor=\"password\">Password</Label>\r\n                  <a\r\n                    href=\"#\"\r\n                    className=\"inline-block text-xs underline-offset-4 hover:underline\"\r\n                  >\r\n                    Forgot password?\r\n                  </a>\r\n                </div>\r\n                <Input id=\"password\" type=\"password\" required />\r\n              </div>\r\n              <Button type=\"submit\" className=\"w-full\">\r\n                Login\r\n              </Button>\r\n              <Button variant=\"outline\" className=\"w-full\">\r\n                Login with Google\r\n              </Button>\r\n            </div>\r\n            <div className=\"mt-4 text-center text-xs\">\r\n              Don&apos;t have an account?{\" \"}\r\n              <a href=\"#\" className=\"underline underline-offset-4\">\r\n                Sign up\r\n              </a>\r\n            </div>\r\n          </form>\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/login-form.tsx"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/input.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\n        className\n      )}\n    >\n      <ShadcnInput\n        {...props}\n        className={cn(\n          \"rounded-none ring-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Input };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitInputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Input({ ...props }: BitInputProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnInput\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none ring-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Input };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/input.tsx"
     },
     {
       "path": "components/ui/8bit/label.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface BitLabelProps\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n  return (\n    <ShadcnLabel\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface BitLabelProps\r\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Label({ className, font, ...props }: BitLabelProps) {\r\n  return (\r\n    <ShadcnLabel\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Label };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/label.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-login-page.json b/public/r/8bit-login-page.json
index c205cfe0..bac1e440 100644
--- a/public/r/8bit-login-page.json
+++ b/public/r/8bit-login-page.json
@@ -13,43 +13,43 @@
   "files": [
     {
       "path": "app/login/page.tsx",
-      "content": "import { GalleryVerticalEnd } from \"lucide-react\";\n\nimport { LoginForm } from \"@/components/ui/8bit/blocks/login-form\";\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-md\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  );\n}\n",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\";\r\n\r\nimport { LoginForm } from \"@/components/ui/8bit/blocks/login-form\";\r\n\r\nexport default function LoginPage() {\r\n  return (\r\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\r\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\r\n        <div className=\"flex justify-center gap-2 md:justify-start\">\r\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\r\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\r\n              <GalleryVerticalEnd className=\"size-4\" />\r\n            </div>\r\n            Acme Inc.\r\n          </a>\r\n        </div>\r\n        <div className=\"flex flex-1 items-center justify-center\">\r\n          <div className=\"w-full max-w-md\">\r\n            <LoginForm />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className=\"bg-muted relative hidden lg:block\">\r\n        <img\r\n          src=\"/placeholder.svg\"\r\n          alt=\"Image\"\r\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "app/login/page.tsx"
     },
     {
       "path": "components/ui/8bit/blocks/login-form.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription className=\"text-xs\">\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-2\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"inline-block text-xs underline-offset-4 hover:underline\"\n                  >\n                    Forgot password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Login\n              </Button>\n              <Button variant=\"outline\" className=\"w-full\">\n                Login with Google\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-xs\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\nimport { Input } from \"@/components/ui/8bit/input\";\r\nimport { Label } from \"@/components/ui/8bit/label\";\r\n\r\nexport function LoginForm({\r\n  className,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n      <Card>\r\n        <CardHeader>\r\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\r\n          <CardDescription className=\"text-xs\">\r\n            Enter your email below to login to your account\r\n          </CardDescription>\r\n        </CardHeader>\r\n        <CardContent>\r\n          <form>\r\n            <div className=\"flex flex-col gap-6\">\r\n              <div className=\"grid gap-2\">\r\n                <Label htmlFor=\"email\">Email</Label>\r\n                <Input\r\n                  id=\"email\"\r\n                  type=\"email\"\r\n                  placeholder=\"m@example.com\"\r\n                  required\r\n                />\r\n              </div>\r\n              <div className=\"grid gap-2\">\r\n                <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-2\">\r\n                  <Label htmlFor=\"password\">Password</Label>\r\n                  <a\r\n                    href=\"#\"\r\n                    className=\"inline-block text-xs underline-offset-4 hover:underline\"\r\n                  >\r\n                    Forgot password?\r\n                  </a>\r\n                </div>\r\n                <Input id=\"password\" type=\"password\" required />\r\n              </div>\r\n              <Button type=\"submit\" className=\"w-full\">\r\n                Login\r\n              </Button>\r\n              <Button variant=\"outline\" className=\"w-full\">\r\n                Login with Google\r\n              </Button>\r\n            </div>\r\n            <div className=\"mt-4 text-center text-xs\">\r\n              Don&apos;t have an account?{\" \"}\r\n              <a href=\"#\" className=\"underline underline-offset-4\">\r\n                Sign up\r\n              </a>\r\n            </div>\r\n          </form>\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/login-form.tsx"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/input.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\n        className\n      )}\n    >\n      <ShadcnInput\n        {...props}\n        className={cn(\n          \"rounded-none ring-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Input };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitInputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Input({ ...props }: BitInputProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnInput\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none ring-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Input };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/input.tsx"
     },
     {
       "path": "components/ui/8bit/label.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ninterface BitLabelProps\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n  return (\n    <ShadcnLabel\n      className={cn(className, font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ninterface BitLabelProps\r\n  extends React.ComponentProps<typeof LabelPrimitive.Root>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Label({ className, font, ...props }: BitLabelProps) {\r\n  return (\r\n    <ShadcnLabel\r\n      className={cn(className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Label };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/label.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-main-menu.json b/public/r/8bit-main-menu.json
index 2510f522..f9269948 100644
--- a/public/r/8bit-main-menu.json
+++ b/public/r/8bit-main-menu.json
@@ -11,25 +11,25 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/main-menu.tsx",
-      "content": "import { Play, Power, Settings, Trophy, Users } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\n\nconst menuItems = [\n  {\n    label: \"START GAME\",\n    icon: Play,\n    action: () => console.log(\"Starting game...\"),\n  },\n  {\n    label: \"OPTIONS\",\n    icon: Settings,\n    action: () => console.log(\"Showing options...\"),\n  },\n  {\n    label: \"HIGH SCORES\",\n    icon: Trophy,\n    action: () => console.log(\"Showing high scores...\"),\n  },\n  {\n    label: \"MULTIPLAYER\",\n    icon: Users,\n    action: () => console.log(\"Multiplayer mode...\"),\n  },\n  { label: \"QUIT\", icon: Power, action: () => console.log(\"Quitting game...\") },\n];\n\nexport default function MainMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <Card className={cn(className)} {...props}>\n      <CardHeader className=\"flex flex-col items-center justify-center gap-2\">\n        <CardTitle>Main Menu</CardTitle>\n        <CardDescription>Retro 8-bit Quest</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-8\">\n          {menuItems.map((item) => (\n            <Button key={item.label} className=\"flex items-center gap-2\">\n              <item.icon className=\"size-4\" />\n              <span>{item.label}</span>\n            </Button>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { Play, Power, Settings, Trophy, Users } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\n\r\nconst menuItems = [\r\n  {\r\n    label: \"START GAME\",\r\n    icon: Play,\r\n    action: () => console.log(\"Starting game...\"),\r\n  },\r\n  {\r\n    label: \"OPTIONS\",\r\n    icon: Settings,\r\n    action: () => console.log(\"Showing options...\"),\r\n  },\r\n  {\r\n    label: \"HIGH SCORES\",\r\n    icon: Trophy,\r\n    action: () => console.log(\"Showing high scores...\"),\r\n  },\r\n  {\r\n    label: \"MULTIPLAYER\",\r\n    icon: Users,\r\n    action: () => console.log(\"Multiplayer mode...\"),\r\n  },\r\n  { label: \"QUIT\", icon: Power, action: () => console.log(\"Quitting game...\") },\r\n];\r\n\r\nexport default function MainMenu({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <Card className={cn(className)} {...props}>\r\n      <CardHeader className=\"flex flex-col items-center justify-center gap-2\">\r\n        <CardTitle>Main Menu</CardTitle>\r\n        <CardDescription>Retro 8-bit Quest</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <div className=\"flex flex-col gap-8\">\r\n          {menuItems.map((item) => (\r\n            <Button key={item.label} className=\"flex items-center gap-2\">\r\n              <item.icon className=\"size-4\" />\r\n              <span>{item.label}</span>\r\n            </Button>\r\n          ))}\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/main-menu.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     }
diff --git a/public/r/8bit-mana-bar.json b/public/r/8bit-mana-bar.json
index 0b4c7487..ff39e6b6 100644
--- a/public/r/8bit-mana-bar.json
+++ b/public/r/8bit-mana-bar.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "path": "components/ui/8bit/mana-bar.tsx",
-      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\n\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\n  className?: string;\n  props?: BitProgressProps;\n  variant?: \"retro\" | \"default\";\n  value?: number;\n}\n\nexport default function ManaBar({\n  className,\n  variant,\n  value,\n  ...props\n}: ManaBarProps) {\n  return (\n    <Progress\n      {...props}\n      value={value}\n      variant={variant}\n      className={className}\n      progressBg=\"bg-blue-500\"\n    />\n  );\n}\n",
+      "content": "import { BitProgressProps, Progress } from \"@/components/ui/8bit/progress\";\r\n\r\ninterface ManaBarProps extends React.ComponentProps<\"div\"> {\r\n  className?: string;\r\n  props?: BitProgressProps;\r\n  variant?: \"retro\" | \"default\";\r\n  value?: number;\r\n}\r\n\r\nexport default function ManaBar({\r\n  className,\r\n  variant,\r\n  value,\r\n  ...props\r\n}: ManaBarProps) {\r\n  return (\r\n    <Progress\r\n      {...props}\r\n      value={value}\r\n      variant={variant}\r\n      className={className}\r\n      progressBg=\"bg-blue-500\"\r\n    />\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/mana-bar.tsx"
     },
     {
       "path": "components/ui/8bit/progress.tsx",
-      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const progressVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: \"\",\n      retro: \"retro\",\n    },\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressVariants> {\n  className?: string;\n  font?: VariantProps<typeof progressVariants>[\"font\"];\n  progressBg?: string;\n}\n\nfunction Progress({\n  className,\n  font,\n  variant,\n  value,\n  progressBg,\n  ...props\n}: BitProgressProps) {\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <ProgressPrimitive.Root\n        data-slot=\"progress\"\n        className={cn(\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\n          font !== \"normal\" && \"retro\"\n        )}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={cn(\n            \"h-full transition-all\",\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\n          )}\n          style={\n            variant === \"retro\"\n              ? undefined\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\n          }\n        >\n          {variant === \"retro\" && (\n            <div className=\"flex w-full\">\n              {Array.from({ length: 20 }).map((_, i) => {\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\n                return (\n                  <div\n                    key={i}\n                    className={cn(\n                      \"size-2 mx-[1px] w-full\",\n                      i < filledSquares ? progressBg : \"bg-transparent\"\n                    )}\n                  />\n                );\n              })}\n            </div>\n          )}\n        </ProgressPrimitive.Indicator>\n      </ProgressPrimitive.Root>\n\n      <div\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Progress };\n",
+      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const progressVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitProgressProps\r\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\r\n    VariantProps<typeof progressVariants> {\r\n  className?: string;\r\n  font?: VariantProps<typeof progressVariants>[\"font\"];\r\n  progressBg?: string;\r\n}\r\n\r\nfunction Progress({\r\n  className,\r\n  font,\r\n  variant,\r\n  value,\r\n  progressBg,\r\n  ...props\r\n}: BitProgressProps) {\r\n  return (\r\n    <div className={cn(\"relative w-full\", className)}>\r\n      <ProgressPrimitive.Root\r\n        data-slot=\"progress\"\r\n        className={cn(\r\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\r\n          font !== \"normal\" && \"retro\"\r\n        )}\r\n        {...props}\r\n      >\r\n        <ProgressPrimitive.Indicator\r\n          data-slot=\"progress-indicator\"\r\n          className={cn(\r\n            \"h-full transition-all\",\r\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\r\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\r\n          )}\r\n          style={\r\n            variant === \"retro\"\r\n              ? undefined\r\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\r\n          }\r\n        >\r\n          {variant === \"retro\" && (\r\n            <div className=\"flex w-full\">\r\n              {Array.from({ length: 20 }).map((_, i) => {\r\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\r\n                return (\r\n                  <div\r\n                    key={i}\r\n                    className={cn(\r\n                      \"size-2 mx-[1px] w-full\",\r\n                      i < filledSquares ? progressBg : \"bg-transparent\"\r\n                    )}\r\n                  />\r\n                );\r\n              })}\r\n            </div>\r\n          )}\r\n        </ProgressPrimitive.Indicator>\r\n      </ProgressPrimitive.Root>\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Progress };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/progress.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-menubar.json b/public/r/8bit-menubar.json
index f9a9b57b..d238b3bc 100644
--- a/public/r/8bit-menubar.json
+++ b/public/r/8bit-menubar.json
@@ -8,13 +8,13 @@
   "files": [
     {
       "path": "components/ui/8bit/menubar.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport { cva } from \"class-variance-authority\";\nimport { Circle } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const menubarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu {...props} />;\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group {...props} />;\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal {...props} />;\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup {...props} />;\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nconst Menubar = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n      menubarVariants({ font: \"retro\" }),\n      className\n    )}\n  >\n    <MenubarPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\n        className\n      )}\n      {...props}\n    />\n    <div\n      className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n      aria-hidden=\"true\"\n    />\n  </div>\n));\nMenubar.displayName = MenubarPrimitive.Root.displayName;\n\nconst MenubarTrigger = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[state=open]:border-b-4 data-[state=open]:border-foreground data-[state=open]:dark:border-ring data-[state=open]:text-accent-foreground data-[state=open]:border-dashed border-b-4 border-transparent pt-2\",\n      className\n    )}\n    {...props}\n  />\n));\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none h-10 focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[state=open]:border-y-4 data-[state=open]:border-foreground data-[state=open]:dark:border-ring data-[state=open]:text-accent-foreground data-[state=open]:border-dashed\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <svg\n      width=\"50\"\n      height=\"50\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth=\"0.25\"\n      aria-label=\"chevron-right\"\n      className=\"size-7 ml-auto\"\n    >\n      <rect x=\"128\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"112\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"96\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"96\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"128\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"112\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n    </svg>\n  </MenubarPrimitive.SubTrigger>\n));\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;\n\nconst MenubarSubContent = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-menubar-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n));\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;\n\nconst MenubarContent = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border-6 mt-1 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-menubar-content-transform-origin]\",\n          menubarVariants({ font: \"retro\" }),\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n);\nMenubarContent.displayName = MenubarPrimitive.Content.displayName;\n\nconst MenubarItem = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground focus:dark:border-ring h-9 focus:border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n));\nMenubarItem.displayName = MenubarPrimitive.Item.displayName;\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none h-9 focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <svg\n          width=\"50\"\n          height=\"50\"\n          viewBox=\"0 0 256 256\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          stroke=\"currentColor\"\n          strokeWidth=\"0.25\"\n          aria-label=\"check\"\n          className=\"size-7\"\n        >\n          <rect\n            x=\"80\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 80 128)\"\n          ></rect>\n          <rect\n            x=\"96\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 96 144)\"\n          ></rect>\n          <rect\n            x=\"112\"\n            y=\"160\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 112 160)\"\n          ></rect>\n          <rect\n            x=\"128\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 128 144)\"\n          ></rect>\n          <rect\n            x=\"144\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 144 128)\"\n          ></rect>\n          <rect\n            x=\"160\"\n            y=\"112\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 160 112)\"\n          ></rect>\n          <rect\n            x=\"176\"\n            y=\"96\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 176 96)\"\n          ></rect>\n          <rect\n            x=\"192\"\n            y=\"80\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 192 80)\"\n          ></rect>\n        </svg>\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n));\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 h-9 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n));\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;\n\nconst MenubarLabel = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n));\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName;\n\nconst MenubarSeparator = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n));\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\nMenubarShortcut.displayname = \"MenubarShortcut\";\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\";\r\nimport { cva } from \"class-variance-authority\";\r\nimport { Circle } from \"lucide-react\";\r\n\r\nimport { ChevronRightIcon } from \"@/components/ui/8bit/assets/chevronRightIcon\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport \"./styles/retro.css\";\r\n\r\nexport const menubarVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nfunction MenubarMenu({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\r\n  return <MenubarPrimitive.Menu {...props} />;\r\n}\r\n\r\nfunction MenubarGroup({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\r\n  return <MenubarPrimitive.Group {...props} />;\r\n}\r\n\r\nfunction MenubarPortal({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\r\n  return <MenubarPrimitive.Portal {...props} />;\r\n}\r\n\r\nfunction MenubarRadioGroup({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\r\n  return <MenubarPrimitive.RadioGroup {...props} />;\r\n}\r\n\r\nfunction MenubarSub({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\r\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\r\n}\r\n\r\nconst Menubar = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    className={cn(\r\n      \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n      menubarVariants({ font: \"retro\" }),\r\n      className\r\n    )}\r\n  >\r\n    <MenubarPrimitive.Root\r\n      ref={ref}\r\n      className={cn(\r\n        \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n    <div\r\n      className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n      aria-hidden=\"true\"\r\n    />\r\n  </div>\r\n));\r\nMenubar.displayName = MenubarPrimitive.Root.displayName;\r\n\r\nconst MenubarTrigger = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.Trigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[state=open]:border-b-4 data-[state=open]:border-foreground data-[state=open]:dark:border-ring data-[state=open]:text-accent-foreground data-[state=open]:border-dashed border-b-4 border-transparent pt-2\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;\r\n\r\nconst MenubarSubTrigger = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\r\n    inset?: boolean;\r\n  }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n  <MenubarPrimitive.SubTrigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none h-10 focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[state=open]:border-y-4 data-[state=open]:border-foreground data-[state=open]:dark:border-ring data-[state=open]:text-accent-foreground data-[state=open]:border-dashed\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n    <ChevronRightIcon/>\r\n  </MenubarPrimitive.SubTrigger>\r\n));\r\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;\r\n\r\nconst MenubarSubContent = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.SubContent>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.SubContent\r\n    ref={ref}\r\n    className={cn(\r\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-menubar-content-transform-origin]\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;\r\n\r\nconst MenubarContent = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\r\n>(\r\n  (\r\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\r\n    ref\r\n  ) => (\r\n    <MenubarPrimitive.Portal>\r\n      <MenubarPrimitive.Content\r\n        ref={ref}\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        sideOffset={sideOffset}\r\n        className={cn(\r\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border-6 mt-1 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-menubar-content-transform-origin]\",\r\n          menubarVariants({ font: \"retro\" }),\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </MenubarPrimitive.Portal>\r\n  )\r\n);\r\nMenubarContent.displayName = MenubarPrimitive.Content.displayName;\r\n\r\nconst MenubarItem = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\r\n    inset?: boolean;\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <MenubarPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground focus:dark:border-ring h-9 focus:border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nMenubarItem.displayName = MenubarPrimitive.Item.displayName;\r\n\r\nconst MenubarCheckboxItem = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n  <MenubarPrimitive.CheckboxItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none h-9 focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    checked={checked}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <MenubarPrimitive.ItemIndicator>\r\n        <svg\r\n          width=\"50\"\r\n          height=\"50\"\r\n          viewBox=\"0 0 256 256\"\r\n          fill=\"currentColor\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          stroke=\"currentColor\"\r\n          strokeWidth=\"0.25\"\r\n          aria-label=\"check\"\r\n          className=\"size-7\"\r\n        >\r\n          <rect\r\n            x=\"80\"\r\n            y=\"128\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 80 128)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"96\"\r\n            y=\"144\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 96 144)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"112\"\r\n            y=\"160\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 112 160)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"128\"\r\n            y=\"144\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 128 144)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"144\"\r\n            y=\"128\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 144 128)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"160\"\r\n            y=\"112\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 160 112)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"176\"\r\n            y=\"96\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 176 96)\"\r\n          ></rect>\r\n          <rect\r\n            x=\"192\"\r\n            y=\"80\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            rx=\"1\"\r\n            transform=\"rotate(90 192 80)\"\r\n          ></rect>\r\n        </svg>\r\n      </MenubarPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </MenubarPrimitive.CheckboxItem>\r\n));\r\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;\r\n\r\nconst MenubarRadioItem = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n  <MenubarPrimitive.RadioItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 h-9 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground focus:dark:border-ring focus:border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <MenubarPrimitive.ItemIndicator>\r\n        <Circle className=\"h-2 w-2 fill-current\" />\r\n      </MenubarPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </MenubarPrimitive.RadioItem>\r\n));\r\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;\r\n\r\nconst MenubarLabel = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.Label>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\r\n    inset?: boolean;\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <MenubarPrimitive.Label\r\n    ref={ref}\r\n    className={cn(\r\n      \"px-2 py-1.5 text-sm font-semibold\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName;\r\n\r\nconst MenubarSeparator = React.forwardRef<\r\n  React.ComponentRef<typeof MenubarPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\r\n    {...props}\r\n  />\r\n));\r\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;\r\n\r\nconst MenubarShortcut = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\nMenubarShortcut.displayname = \"MenubarShortcut\";\r\n\r\nexport {\r\n  Menubar,\r\n  MenubarMenu,\r\n  MenubarTrigger,\r\n  MenubarContent,\r\n  MenubarItem,\r\n  MenubarSeparator,\r\n  MenubarLabel,\r\n  MenubarCheckboxItem,\r\n  MenubarRadioGroup,\r\n  MenubarRadioItem,\r\n  MenubarPortal,\r\n  MenubarSubContent,\r\n  MenubarSubTrigger,\r\n  MenubarGroup,\r\n  MenubarSub,\r\n  MenubarShortcut,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/menubar.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-navigation-menu.json b/public/r/8bit-navigation-menu.json
index ba178100..da123ee5 100644
--- a/public/r/8bit-navigation-menu.json
+++ b/public/r/8bit-navigation-menu.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/navigation-menu.tsx",
-      "content": "import * as React from \"react\";\n\nimport { Indicator, Root, Viewport } from \"@radix-ui/react-navigation-menu\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  NavigationMenuContent as ShadcnNavigationMenuContent,\n  NavigationMenuIndicator as ShadcnNavigationMenuIndicator,\n  NavigationMenuItem as ShadcnNavigationMenuItem,\n  NavigationMenuLink as ShadcnNavigationMenuLink,\n  NavigationMenuList as ShadcnNavigationMenuList,\n  NavigationMenuTrigger as ShadcnNavigationMenuTrigger,\n} from \"@/components/ui/navigation-menu\";\n\nimport \"./styles/retro.css\";\n\nexport { navigationMenuTriggerStyle } from \"@/components/ui/navigation-menu\";\n\nexport const navigationMenuVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\ntype FontVariantProps = VariantProps<typeof navigationMenuVariants>;\n\nconst getFontClassName = (font: FontVariantProps[\"font\"]) =>\n  navigationMenuVariants({ font });\n\nfunction NavigationMenu({\n  className,\n  font,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof Root> & {\n  viewport?: boolean;\n} & FontVariantProps) {\n  return (\n    <Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        getFontClassName(font),\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  font,\n  ...props\n}: React.ComponentProps<typeof ShadcnNavigationMenuList> &\n  VariantProps<typeof navigationMenuVariants>) {\n  return (\n    <ShadcnNavigationMenuList\n      className={cn(getFontClassName(font), className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  font,\n  ...props\n}: React.ComponentProps<typeof ShadcnNavigationMenuItem> & FontVariantProps) {\n  return (\n    <ShadcnNavigationMenuItem\n      className={cn(\"static\", getFontClassName(font), className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuTrigger({\n  className,\n  font,\n  ...props\n}: React.ComponentProps<typeof ShadcnNavigationMenuTrigger> &\n  FontVariantProps) {\n  return (\n    <ShadcnNavigationMenuTrigger\n      className={cn(getFontClassName(font), className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  font,\n  children,\n  ...props\n}: React.ComponentProps<typeof ShadcnNavigationMenuContent> &\n  FontVariantProps) {\n  return (\n    <ShadcnNavigationMenuContent\n      className={cn(getFontClassName(font), className)}\n      {...props}\n    >\n      {children}\n    </ShadcnNavigationMenuContent>\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  font,\n  ...props\n}: React.ComponentProps<typeof Viewport> & FontVariantProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-3 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          getFontClassName(font),\n          \"shadow-[6px_0px_0px_0px_var(--foreground),-6px_0px_0px_0px_var(--foreground),0px_-6px_0px_0px_var(--foreground),0px_6px_0px_0px_var(--foreground)]\",\n          \"dark:shadow-[6px_0px_0px_0px_var(--ring),-6px_0px_0px_0px_var(--ring),0px_-6px_0px_0px_var(--ring),0px_6px_0px_0px_var(--ring)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  font,\n  ...props\n}: React.ComponentProps<typeof ShadcnNavigationMenuLink> & FontVariantProps) {\n  return (\n    <ShadcnNavigationMenuLink\n      className={cn(getFontClassName(font), className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  font,\n  ...props\n}: React.ComponentProps<typeof ShadcnNavigationMenuIndicator> &\n  FontVariantProps) {\n  return (\n    <Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        getFontClassName(font),\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-foreground dark:bg-ring relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n};\n",
+      "content": "import * as React from \"react\";\r\n\r\nimport { Indicator, Root, Viewport } from \"@radix-ui/react-navigation-menu\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  NavigationMenuContent as ShadcnNavigationMenuContent,\r\n  NavigationMenuIndicator as ShadcnNavigationMenuIndicator,\r\n  NavigationMenuItem as ShadcnNavigationMenuItem,\r\n  NavigationMenuLink as ShadcnNavigationMenuLink,\r\n  NavigationMenuList as ShadcnNavigationMenuList,\r\n  NavigationMenuTrigger as ShadcnNavigationMenuTrigger,\r\n} from \"@/components/ui/navigation-menu\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport { navigationMenuTriggerStyle } from \"@/components/ui/navigation-menu\";\r\n\r\nexport const navigationMenuVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\ntype FontVariantProps = VariantProps<typeof navigationMenuVariants>;\r\n\r\nconst getFontClassName = (font: FontVariantProps[\"font\"]) =>\r\n  navigationMenuVariants({ font });\r\n\r\nfunction NavigationMenu({\r\n  className,\r\n  font,\r\n  children,\r\n  viewport = true,\r\n  ...props\r\n}: React.ComponentProps<typeof Root> & {\r\n  viewport?: boolean;\r\n} & FontVariantProps) {\r\n  return (\r\n    <Root\r\n      data-slot=\"navigation-menu\"\r\n      data-viewport={viewport}\r\n      className={cn(\r\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\r\n        getFontClassName(font),\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      {viewport && <NavigationMenuViewport />}\r\n    </Root>\r\n  );\r\n}\r\n\r\nfunction NavigationMenuList({\r\n  className,\r\n  font,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnNavigationMenuList> &\r\n  VariantProps<typeof navigationMenuVariants>) {\r\n  return (\r\n    <ShadcnNavigationMenuList\r\n      className={cn(getFontClassName(font), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction NavigationMenuItem({\r\n  className,\r\n  font,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnNavigationMenuItem> & FontVariantProps) {\r\n  return (\r\n    <ShadcnNavigationMenuItem\r\n      className={cn(\"static\", getFontClassName(font), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction NavigationMenuTrigger({\r\n  className,\r\n  font,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnNavigationMenuTrigger> &\r\n  FontVariantProps) {\r\n  return (\r\n    <ShadcnNavigationMenuTrigger\r\n      className={cn(getFontClassName(font), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction NavigationMenuContent({\r\n  className,\r\n  font,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnNavigationMenuContent> &\r\n  FontVariantProps) {\r\n  return (\r\n    <ShadcnNavigationMenuContent\r\n      className={cn(getFontClassName(font), className)}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnNavigationMenuContent>\r\n  );\r\n}\r\n\r\nfunction NavigationMenuViewport({\r\n  className,\r\n  font,\r\n  ...props\r\n}: React.ComponentProps<typeof Viewport> & FontVariantProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\r\n      )}\r\n    >\r\n      <Viewport\r\n        data-slot=\"navigation-menu-viewport\"\r\n        className={cn(\r\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-3 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\r\n          getFontClassName(font),\r\n          \"shadow-[6px_0px_0px_0px_var(--foreground),-6px_0px_0px_0px_var(--foreground),0px_-6px_0px_0px_var(--foreground),0px_6px_0px_0px_var(--foreground)]\",\r\n          \"dark:shadow-[6px_0px_0px_0px_var(--ring),-6px_0px_0px_0px_var(--ring),0px_-6px_0px_0px_var(--ring),0px_6px_0px_0px_var(--ring)]\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction NavigationMenuLink({\r\n  className,\r\n  font,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnNavigationMenuLink> & FontVariantProps) {\r\n  return (\r\n    <ShadcnNavigationMenuLink\r\n      className={cn(getFontClassName(font), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction NavigationMenuIndicator({\r\n  className,\r\n  font,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnNavigationMenuIndicator> &\r\n  FontVariantProps) {\r\n  return (\r\n    <Indicator\r\n      data-slot=\"navigation-menu-indicator\"\r\n      className={cn(\r\n        \"data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\r\n        getFontClassName(font),\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className=\"bg-foreground dark:bg-ring relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\r\n    </Indicator>\r\n  );\r\n}\r\n\r\nexport {\r\n  NavigationMenu,\r\n  NavigationMenuContent,\r\n  NavigationMenuIndicator,\r\n  NavigationMenuItem,\r\n  NavigationMenuLink,\r\n  NavigationMenuList,\r\n  NavigationMenuTrigger,\r\n  NavigationMenuViewport,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/navigation-menu.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-pagination.json b/public/r/8bit-pagination.json
index d17e1a0b..65d4711d 100644
--- a/public/r/8bit-pagination.json
+++ b/public/r/8bit-pagination.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/pagination.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { MoreHorizontal } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Pagination as ShadcnPagination,\n  PaginationContent as ShadcnPaginationContent,\n  PaginationEllipsis as ShadcnPaginationEllipsis,\n  PaginationItem as ShadcnPaginationItem,\n  PaginationLink as ShadcnPaginationLink,\n} from \"@/components/ui/pagination\";\n\nimport { Button } from \"../button\";\nimport \"./styles/retro.css\";\n\nexport const paginationVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"text-card-foreground\",\n      destructive:\n        \"text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport type BitPaginationProps<T extends React.ElementType> =\n  React.ComponentPropsWithoutRef<T> & VariantProps<typeof paginationVariants>;\n\nfunction Pagination({ ...props }: BitPaginationProps<\"nav\">) {\n  const { variant, className, font } = props;\n  return (\n    <ShadcnPagination\n      {...props}\n      className={cn(\n        paginationVariants({ variant }),\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n    />\n  );\n}\n\nconst ChevronLeftIcon = () => {\n  return (\n    <svg\n      width=\"50\"\n      height=\"50\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth=\"0.25\"\n      color=\"\"\n      className=\"size-7\"\n      aria-label=\"chevron-left\"\n    >\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 128 136)\"\n      ></rect>\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 144 152)\"\n      ></rect>\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 160 72)\"\n      ></rect>\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 160 168)\"\n      ></rect>\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 112 120)\"\n      ></rect>\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 128 104)\"\n      ></rect>\n      <rect\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        transform=\"matrix(-1 0 0 1 144 88)\"\n      ></rect>\n    </svg>\n  );\n};\n\nconst ChevronRightIcon = () => {\n  return (\n    <svg\n      width=\"50\"\n      height=\"50\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth=\"0.25\"\n      color=\"\"\n      className=\"raster-icon size-7\"\n      aria-label=\"chevron-right\"\n    >\n      <rect x=\"128\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"112\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"96\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"96\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"128\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n      <rect x=\"112\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n    </svg>\n  );\n};\n\nfunction PaginationContent({ ...props }: BitPaginationProps<\"ul\">) {\n  const { className, font } = props;\n  return (\n    <ShadcnPaginationContent\n      className={cn(\"gap-2\", font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationItem({ ...props }: BitPaginationProps<\"li\">) {\n  const { className, font } = props;\n  return (\n    <ShadcnPaginationItem\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  BitPaginationProps<\"a\">;\n\nfunction PaginationLink({ ...props }: PaginationLinkProps) {\n  const { font, children, isActive, className } = props;\n  return (\n    <ShadcnPaginationLink\n      className={cn(\n        font !== \"normal\" && \"retro\",\n        className,\n        \"relative group\",\n        \"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent\",\n        \"rounded-none border-dashed border-y-4 border-transparent\",\n        \"dark:hover:border-ring dark:focus:border-ring\",\n        \"hover:border-foreground focus:border-foreground\",\n        \"active:border-transparent\",\n        \"data-[active=true]:border-none aria-[current=page]:border-none\"\n      )}\n      {...props}\n    >\n      {children}\n\n      {isActive && (\n        <div\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\n          style={{ zIndex: 10 }}\n        >\n          <div\n            className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute left-0 bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />\n        </div>\n      )}\n    </ShadcnPaginationLink>\n  );\n}\n\nfunction PaginationPrevious({\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  const { font, className } = props;\n  return (\n    <PaginationLink\n      className={cn(\n        \"relative group\",\n        \"flex flex-row w-full text-sm\",\n        \"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent\",\n        \"rounded-none border-dashed border-y-4 border-transparent\",\n        \"hover:border-foreground focus:border-foreground active:border-transparent\",\n        \"dark:hover:border-ring dark:focus:border-ring\",\n        \"data-[active=true]:border-none aria-[current=page]:border-none\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  const { font, className } = props;\n\n  return (\n    <PaginationLink\n      className={cn(\n        \"relative group\",\n        \"flex flex-row w-full text-sm\",\n        \"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent\",\n        \"rounded-none border-dashed border-y-4 border-transparent\",\n        \"hover:border-foreground focus:border-foreground active:border-transparent\",\n        \"dark:hover:border-ring dark:focus:border-ring\",\n        \"data-[active=true]:border-none aria-[current=page]:border-none\",\n        \"flex flex-row text-sm w-full\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ ...props }: BitPaginationProps<\"span\">) {\n  const { font, className } = props;\n\n  return (\n    <ShadcnPaginationEllipsis\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    >\n      <MoreHorizontal className={cn(\"size-7\", \"retro\")} />\n      <span className=\"sr-only\">More pages</span>\n    </ShadcnPaginationEllipsis>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\nimport { MoreHorizontal } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Pagination as ShadcnPagination,\r\n  PaginationContent as ShadcnPaginationContent,\r\n  PaginationEllipsis as ShadcnPaginationEllipsis,\r\n  PaginationItem as ShadcnPaginationItem,\r\n  PaginationLink as ShadcnPaginationLink,\r\n} from \"@/components/ui/pagination\";\r\n\r\nimport { ChevronLeftIcon } from \"@/components/ui/8bit/assets/chevronLeftIcon\";\r\nimport { ChevronRightIcon } from \"@/components/ui/8bit/assets/chevronRightIcon\";\r\nimport { Button } from \"../button\";\r\nimport \"./styles/retro.css\";\r\n\r\nexport const paginationVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"text-card-foreground\",\r\n      destructive:\r\n        \"text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport type BitPaginationProps<T extends React.ElementType> =\r\n  React.ComponentPropsWithoutRef<T> & VariantProps<typeof paginationVariants>;\r\n\r\nfunction Pagination({ ...props }: BitPaginationProps<\"nav\">) {\r\n  const { variant, className, font } = props;\r\n  return (\r\n    <ShadcnPagination\r\n      {...props}\r\n      className={cn(\r\n        paginationVariants({ variant }),\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n    />\r\n  );\r\n}\r\n\r\nfunction PaginationContent({ ...props }: BitPaginationProps<\"ul\">) {\r\n  const { className, font } = props;\r\n  return (\r\n    <ShadcnPaginationContent\r\n      className={cn(\"gap-2\", font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction PaginationItem({ ...props }: BitPaginationProps<\"li\">) {\r\n  const { className, font } = props;\r\n  return (\r\n    <ShadcnPaginationItem\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ntype PaginationLinkProps = {\r\n  isActive?: boolean;\r\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\r\n  BitPaginationProps<\"a\">;\r\n\r\nfunction PaginationLink({ ...props }: PaginationLinkProps) {\r\n  const { font, children, isActive, className } = props;\r\n  return (\r\n    <ShadcnPaginationLink\r\n      className={cn(\r\n        font !== \"normal\" && \"retro\",\r\n        className,\r\n        \"relative group\",\r\n        \"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent\",\r\n        \"rounded-none border-dashed border-y-4 border-transparent\",\r\n        \"dark:hover:border-ring dark:focus:border-ring\",\r\n        \"hover:border-foreground focus:border-foreground\",\r\n        \"active:border-transparent\",\r\n        \"data-[active=true]:border-none aria-[current=page]:border-none\"\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n\r\n      {isActive && (\r\n        <div\r\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n          style={{ zIndex: 10 }}\r\n        >\r\n          <div\r\n            className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n          <div\r\n            className=\"absolute left-0 bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n          <div\r\n            className=\"absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n          <div\r\n            className=\"absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n          <div\r\n            className=\"absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n          <div\r\n            className=\"absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        </div>\r\n      )}\r\n    </ShadcnPaginationLink>\r\n  );\r\n}\r\n\r\nfunction PaginationPrevious({\r\n  ...props\r\n}: React.ComponentProps<typeof PaginationLink>) {\r\n  const { font, className } = props;\r\n  return (\r\n    <PaginationLink\r\n      className={cn(\r\n        \"relative group\",\r\n        \"flex flex-row w-full text-sm\",\r\n        \"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent\",\r\n        \"rounded-none border-dashed border-y-4 border-transparent\",\r\n        \"hover:border-foreground focus:border-foreground active:border-transparent\",\r\n        \"dark:hover:border-ring dark:focus:border-ring\",\r\n        \"data-[active=true]:border-none aria-[current=page]:border-none\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <ChevronLeftIcon />\r\n      <span className=\"hidden sm:block\">Previous</span>\r\n    </PaginationLink>\r\n  );\r\n}\r\n\r\nfunction PaginationNext({\r\n  ...props\r\n}: React.ComponentProps<typeof PaginationLink>) {\r\n  const { font, className } = props;\r\n\r\n  return (\r\n    <PaginationLink\r\n      className={cn(\r\n        \"relative group\",\r\n        \"flex flex-row w-full text-sm\",\r\n        \"bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent\",\r\n        \"rounded-none border-dashed border-y-4 border-transparent\",\r\n        \"hover:border-foreground focus:border-foreground active:border-transparent\",\r\n        \"dark:hover:border-ring dark:focus:border-ring\",\r\n        \"data-[active=true]:border-none aria-[current=page]:border-none\",\r\n        \"flex flex-row text-sm w-full\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <span className=\"hidden sm:block\">Next</span>\r\n      <ChevronRightIcon />\r\n    </PaginationLink>\r\n  );\r\n}\r\n\r\nfunction PaginationEllipsis({ ...props }: BitPaginationProps<\"span\">) {\r\n  const { font, className } = props;\r\n\r\n  return (\r\n    <ShadcnPaginationEllipsis\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    >\r\n      <MoreHorizontal className={cn(\"size-7\", \"retro\")} />\r\n      <span className=\"sr-only\">More pages</span>\r\n    </ShadcnPaginationEllipsis>\r\n  );\r\n}\r\n\r\nexport {\r\n  Pagination,\r\n  PaginationContent,\r\n  PaginationLink,\r\n  PaginationItem,\r\n  PaginationPrevious,\r\n  PaginationNext,\r\n  PaginationEllipsis,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/pagination.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-pause-menu.json b/public/r/8bit-pause-menu.json
index 86da5f55..2549b235 100644
--- a/public/r/8bit-pause-menu.json
+++ b/public/r/8bit-pause-menu.json
@@ -11,25 +11,25 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/pause-menu.tsx",
-      "content": "import { Pause, Power, RotateCcw } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\n\nconst menuItems = [\n  {\n    label: \"RESUME\",\n    icon: Pause,\n    action: () => console.log(\"Resuming game...\"),\n  },\n  {\n    label: \"RESTART\",\n    icon: RotateCcw,\n    action: () => console.log(\"Restarting game...\"),\n  },\n  {\n    label: \"QUIT\",\n    icon: Power,\n    action: () => console.log(\"Quitting game...\"),\n  },\n];\n\nexport default function PauseMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <Card className={cn(className)} {...props}>\n      <CardHeader className=\"flex flex-col items-center justify-center gap-2\">\n        <CardTitle>Paused</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-8\">\n          {menuItems.map((item) => (\n            <Button key={item.label} className=\"flex items-center gap-2\">\n              <item.icon className=\"size-4\" />\n              <span>{item.label}</span>\n            </Button>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { Pause, Power, RotateCcw } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button } from \"@/components/ui/8bit/button\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/8bit/card\";\r\n\r\nconst menuItems = [\r\n  {\r\n    label: \"RESUME\",\r\n    icon: Pause,\r\n    action: () => console.log(\"Resuming game...\"),\r\n  },\r\n  {\r\n    label: \"RESTART\",\r\n    icon: RotateCcw,\r\n    action: () => console.log(\"Restarting game...\"),\r\n  },\r\n  {\r\n    label: \"QUIT\",\r\n    icon: Power,\r\n    action: () => console.log(\"Quitting game...\"),\r\n  },\r\n];\r\n\r\nexport default function PauseMenu({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <Card className={cn(className)} {...props}>\r\n      <CardHeader className=\"flex flex-col items-center justify-center gap-2\">\r\n        <CardTitle>Paused</CardTitle>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <div className=\"flex flex-col gap-8\">\r\n          {menuItems.map((item) => (\r\n            <Button key={item.label} className=\"flex items-center gap-2\">\r\n              <item.icon className=\"size-4\" />\r\n              <span>{item.label}</span>\r\n            </Button>\r\n          ))}\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/pause-menu.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     }
diff --git a/public/r/8bit-popover.json b/public/r/8bit-popover.json
index 76c3ba9e..fcfa6559 100644
--- a/public/r/8bit-popover.json
+++ b/public/r/8bit-popover.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/popover.tsx",
-      "content": "import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Popover as ShadcnPopover,\n  PopoverAnchor as ShadcnPopoverAnchor,\n  PopoverContent as ShadcnPopoverContent,\n  PopoverTrigger as ShadcnPopoverTrigger,\n} from \"@/components/ui/popover\";\n\nimport \"./styles/retro.css\";\n\nconst Popover = ShadcnPopover;\n\nconst PopoverTrigger = ShadcnPopoverTrigger;\n\nconst PopoverAnchor = ShadcnPopoverAnchor;\n\nexport const popOverVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitPopoverProps\n  extends React.ComponentProps<typeof PopoverPrimitive.Content>,\n    VariantProps<typeof popOverVariants> {}\n\nfunction PopoverContent({\n  children,\n  font,\n  className,\n  ...props\n}: BitPopoverProps) {\n  return (\n    <ShadcnPopoverContent\n      className={cn(\n        \"relative bg-card border-y-6 border-foreground dark:border-ring rounded-none mt-1\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnPopoverContent>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n",
+      "content": "import * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Popover as ShadcnPopover,\r\n  PopoverAnchor as ShadcnPopoverAnchor,\r\n  PopoverContent as ShadcnPopoverContent,\r\n  PopoverTrigger as ShadcnPopoverTrigger,\r\n} from \"@/components/ui/popover\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst Popover = ShadcnPopover;\r\n\r\nconst PopoverTrigger = ShadcnPopoverTrigger;\r\n\r\nconst PopoverAnchor = ShadcnPopoverAnchor;\r\n\r\nexport const popOverVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitPopoverProps\r\n  extends React.ComponentProps<typeof PopoverPrimitive.Content>,\r\n    VariantProps<typeof popOverVariants> {}\r\n\r\nfunction PopoverContent({\r\n  children,\r\n  font,\r\n  className,\r\n  ...props\r\n}: BitPopoverProps) {\r\n  return (\r\n    <ShadcnPopoverContent\r\n      className={cn(\r\n        \"relative bg-card border-y-6 border-foreground dark:border-ring rounded-none mt-1\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </ShadcnPopoverContent>\r\n  );\r\n}\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/popover.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-profile-card.json b/public/r/8bit-profile-card.json
index 804ac619..c66ff7dc 100644
--- a/public/r/8bit-profile-card.json
+++ b/public/r/8bit-profile-card.json
@@ -13,31 +13,31 @@
   "files": [
     {
       "path": "components/ui/8bit/card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Card as ShadcnCard,\r\n  CardAction as ShadcnCardAction,\r\n  CardContent as ShadcnCardContent,\r\n  CardDescription as ShadcnCardDescription,\r\n  CardFooter as ShadcnCardFooter,\r\n  CardHeader as ShadcnCardHeader,\r\n  CardTitle as ShadcnCardTitle,\r\n} from \"@/components/ui/card\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const cardVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitCardProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof cardVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Card({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\r\n        className\r\n      )}\r\n    >\r\n      <ShadcnCard\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none border-0 !w-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CardHeader({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardHeader\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardTitle({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardTitle\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardDescription({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardDescription\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardAction({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardAction\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardContent({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardContent\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction CardFooter({ ...props }: BitCardProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <ShadcnCardFooter\r\n      data-slot=\"card-footer\"\r\n      className={cn(font !== \"normal\" && \"retro\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/card.tsx"
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const buttonVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-foreground\",\r\n      destructive: \"bg-foreground\",\r\n      outline: \"bg-foreground\",\r\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n      link: \"text-primary underline-offset-4 hover:underline\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n      icon: \"size-9\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n}\r\n\r\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\r\n  const { variant, size, className, font } = props;\r\n\r\n  return (\r\n    <ShadcnButton\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n      size={size}\r\n      variant={variant}\r\n      asChild={asChild}\r\n    >\r\n      {asChild ? (\r\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </span>\r\n      ) : (\r\n        <>\r\n          {children}\r\n\r\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\r\n            <>\r\n              {/* Pixelated border */}\r\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\r\n              {variant !== \"outline\" && (\r\n                <>\r\n                  {/* Top shadow */}\r\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\r\n\r\n                  {/* Bottom shadow */}\r\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\r\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {size === \"icon\" && (\r\n            <>\r\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n            </>\r\n          )}\r\n        </>\r\n      )}\r\n    </ShadcnButton>\r\n  );\r\n}\r\n\r\nexport { Button };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
     {
       "path": "components/ui/8bit/avatar.tsx",
-      "content": "import type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const avatarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"\",\n      retro: \"\",\n      pixel: \"\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n    variant: \"pixel\",\n  },\n});\n\nconst Avatar = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {\n    font?: \"normal\" | \"retro\";\n    variant?: \"default\" | \"retro\" | \"pixel\";\n  }\n>(({ className = \"\", font, variant = \"pixel\", ...props }, ref) => {\n  const isPixel = variant === \"pixel\";\n\n  return (\n    <div className={cn(\"relative size-max\", className)}>\n      {/* Pixel frame (only show if pixel variant) */}\n      {isPixel && (\n        <div\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\n          style={{ zIndex: 10 }}\n        >\n          {/* Top black border */}\n          <div className=\"absolute top-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Second row */}\n          <div className=\"absolute top-[6.25%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Third row */}\n          <div className=\"absolute top-[12.5%] left-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\n          <div className=\"absolute top-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\n\n          {/* Fourth row */}\n          <div className=\"absolute top-[18.75%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[18.75%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Fifth row */}\n          <div className=\"absolute top-[25%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[25%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 6-7 */}\n          <div className=\"absolute top-[31.25%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[31.25%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 8-10 */}\n          <div className=\"absolute top-[43.75%] left-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[43.75%] right-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Rows 11-12 */}\n          <div className=\"absolute top-[62.5%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[62.5%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 13 */}\n          <div className=\"absolute top-[75%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[75%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 14 */}\n          <div className=\"absolute top-[81.25%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n          <div className=\"absolute top-[81.25%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 15 */}\n          <div className=\"absolute top-[87.5%] left-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Row 16 */}\n          <div className=\"absolute top-[93.75%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n\n          {/* Bottom row */}\n          <div className=\"absolute bottom-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\n        </div>\n      )}\n\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn(\n          \"relative flex size-10 shrink-0 overflow-hidden text-xs\",\n          !isPixel && \"rounded-none\",\n          isPixel && \"rounded-full\",\n          font !== \"normal\" && \"retro\",\n          variant === \"retro\" && \"image-rendering-pixelated\",\n          className\n        )}\n        {...props}\n      />\n\n      {/* Original border styling (only show if not pixel variant) */}\n      {!isPixel && (\n        <>\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute top-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute top-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n          <div className=\"absolute bottom-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n        </>\n      )}\n    </div>\n  );\n});\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\ninterface BitAvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {\n  font?: \"normal\" | \"retro\";\n  variant?: \"default\" | \"retro\" | \"pixel\";\n}\n\nconst AvatarImage = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  BitAvatarImageProps\n>(({ className, font, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square h-full w-full\",\n        font === \"retro\" && \"retro\",\n        className\n      )}\n      {...props}\n    />\n  );\n});\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    data-slot=\"avatar-fallback\"\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback };\n",
+      "content": "import type React from \"react\";\r\nimport { forwardRef } from \"react\";\r\n\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\r\nimport { cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const avatarVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"\",\r\n      pixel: \"\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n    variant: \"pixel\",\r\n  },\r\n});\r\n\r\nconst Avatar = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {\r\n    font?: \"normal\" | \"retro\";\r\n    variant?: \"default\" | \"retro\" | \"pixel\";\r\n  }\r\n>(({ className = \"\", font, variant = \"pixel\", ...props }, ref) => {\r\n  const isPixel = variant === \"pixel\";\r\n\r\n  return (\r\n    <div className={cn(\"relative size-max\", className)}>\r\n      {/* Pixel frame (only show if pixel variant) */}\r\n      {isPixel && (\r\n        <div\r\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n          style={{ zIndex: 10 }}\r\n        >\r\n          {/* Top black border */}\r\n          <div className=\"absolute top-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Second row */}\r\n          <div className=\"absolute top-[6.25%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Third row */}\r\n          <div className=\"absolute top-[12.5%] left-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\r\n          <div className=\"absolute top-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring w-[18.75%]\"></div>\r\n\r\n          {/* Fourth row */}\r\n          <div className=\"absolute top-[18.75%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[18.75%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Fifth row */}\r\n          <div className=\"absolute top-[25%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[25%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 6-7 */}\r\n          <div className=\"absolute top-[31.25%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[31.25%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 8-10 */}\r\n          <div className=\"absolute top-[43.75%] left-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[43.75%] right-0 w-[12.5%] h-[18.75%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Rows 11-12 */}\r\n          <div className=\"absolute top-[62.5%] left-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[62.5%] right-0 w-[12.5%] h-[12.5%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 13 */}\r\n          <div className=\"absolute top-[75%] left-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[75%] right-0 w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 14 */}\r\n          <div className=\"absolute top-[81.25%] left-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n          <div className=\"absolute top-[81.25%] right-[6.25%] w-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 15 */}\r\n          <div className=\"absolute top-[87.5%] left-[12.5%] right-[12.5%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Row 16 */}\r\n          <div className=\"absolute top-[93.75%] left-[18.75%] right-[18.75%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n\r\n          {/* Bottom row */}\r\n          <div className=\"absolute bottom-0 left-[25%] right-[25%] h-[6.25%] bg-foreground dark:bg-ring\"></div>\r\n        </div>\r\n      )}\r\n\r\n      <AvatarPrimitive.Root\r\n        ref={ref}\r\n        data-slot=\"avatar\"\r\n        className={cn(\r\n          \"relative flex size-10 shrink-0 overflow-hidden text-xs\",\r\n          !isPixel && \"rounded-none\",\r\n          isPixel && \"rounded-full\",\r\n          font !== \"normal\" && \"retro\",\r\n          variant === \"retro\" && \"image-rendering-pixelated\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n\r\n      {/* Original border styling (only show if not pixel variant) */}\r\n      {!isPixel && (\r\n        <>\r\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-0 w-full h-1 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute top-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-1 -left-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute top-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n          <div className=\"absolute bottom-1 -right-1 w-1 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\nAvatar.displayName = AvatarPrimitive.Root.displayName;\r\n\r\ninterface BitAvatarImageProps\r\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {\r\n  font?: \"normal\" | \"retro\";\r\n  variant?: \"default\" | \"retro\" | \"pixel\";\r\n}\r\n\r\nconst AvatarImage = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\r\n  BitAvatarImageProps\r\n>(({ className, font, ...props }, ref) => {\r\n  return (\r\n    <AvatarPrimitive.Image\r\n      ref={ref}\r\n      data-slot=\"avatar-image\"\r\n      className={cn(\r\n        \"aspect-square h-full w-full\",\r\n        font === \"retro\" && \"retro\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\r\n\r\nconst AvatarFallback = forwardRef<\r\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n  <AvatarPrimitive.Fallback\r\n    ref={ref}\r\n    data-slot=\"avatar-fallback\"\r\n    className={cn(\r\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/avatar.tsx"
     },
     {
       "path": "components/ui/8bit/badge.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Badge as ShadcnBadge } from \"@/components/ui/badge\";\n\nexport const badgeVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-primary border-primary\",\n      destructive: \"bg-destructive border-destructive\",\n      outline: \"bg-background border-background\",\n      secondary: \"bg-secondary border-secondary\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nfunction Badge({\n  children,\n  className = \"\",\n  font,\n  variant,\n  ...props\n}: BitButtonProps) {\n  const color = badgeVariants({ variant, font });\n\n  const classes = className.split(\" \");\n\n  // spacing-related Tailwind classes\n  const spacingClasses = classes.filter((c) =>\n    /^(m|p|mt|mr|mb|ml|mx|my|pt|pr|pb|pl|px|py|top|bottom|left|right|inset|inset-x|inset-y)-/.test(\n      c\n    )\n  );\n\n  // visual classes for badge and sidebars\n  const visualClasses = classes.filter(\n    (c) =>\n      c.startsWith(\"bg-\") ||\n      c.startsWith(\"border-\") ||\n      c.startsWith(\"text-\") ||\n      c.startsWith(\"rounded-\")\n  );\n\n  return (\n    <div className={cn(\"relative inline-flex\", spacingClasses)}>\n      <ShadcnBadge\n        {...props}\n        className={cn(\n          \"rounded-none\",\n          font !== \"normal\" && \"retro\",\n          visualClasses\n        )}\n        variant={variant}\n      >\n        {children}\n      </ShadcnBadge>\n\n      {/* Left pixel bar */}\n      <div\n        className={cn(\n          \"absolute top-1.5 bottom-1.5 -left-1.5 h-1/2 w-1.5\",\n          color,\n          visualClasses\n        )}\n      />\n      {/* Right pixel bar */}\n      <div\n        className={cn(\n          \"absolute top-1.5 bottom-1.5 -right-1.5 h-1/2 w-1.5\",\n          color,\n          visualClasses\n        )}\n      />\n    </div>\n  );\n}\n\nexport { Badge };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Badge as ShadcnBadge } from \"@/components/ui/badge\";\r\n\r\nexport const badgeVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-primary border-primary\",\r\n      destructive: \"bg-destructive border-destructive\",\r\n      outline: \"bg-background border-background\",\r\n      secondary: \"bg-secondary border-secondary\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof badgeVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Badge({\r\n  children,\r\n  className = \"\",\r\n  font,\r\n  variant,\r\n  ...props\r\n}: BitButtonProps) {\r\n  const color = badgeVariants({ variant, font });\r\n\r\n  const classes = className.split(\" \");\r\n\r\n  // spacing-related Tailwind classes\r\n  const spacingClasses = classes.filter((c) =>\r\n    /^(m|p|mt|mr|mb|ml|mx|my|pt|pr|pb|pl|px|py|top|bottom|left|right|inset|inset-x|inset-y)-/.test(\r\n      c\r\n    )\r\n  );\r\n\r\n  // visual classes for badge and sidebars\r\n  const visualClasses = classes.filter(\r\n    (c) =>\r\n      c.startsWith(\"bg-\") ||\r\n      c.startsWith(\"border-\") ||\r\n      c.startsWith(\"text-\") ||\r\n      c.startsWith(\"rounded-\")\r\n  );\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-flex\", spacingClasses)}>\r\n      <ShadcnBadge\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none\",\r\n          font !== \"normal\" && \"retro\",\r\n          visualClasses\r\n        )}\r\n        variant={variant}\r\n      >\r\n        {children}\r\n      </ShadcnBadge>\r\n\r\n      {/* Left pixel bar */}\r\n      <div\r\n        className={cn(\r\n          \"absolute top-1.5 bottom-1.5 -left-1.5 h-1/2 w-1.5\",\r\n          color,\r\n          visualClasses\r\n        )}\r\n      />\r\n      {/* Right pixel bar */}\r\n      <div\r\n        className={cn(\r\n          \"absolute top-1.5 bottom-1.5 -right-1.5 h-1/2 w-1.5\",\r\n          color,\r\n          visualClasses\r\n        )}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Badge };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/badge.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-progress.json b/public/r/8bit-progress.json
index e7ca04ac..5412d91e 100644
--- a/public/r/8bit-progress.json
+++ b/public/r/8bit-progress.json
@@ -8,13 +8,13 @@
   "files": [
     {
       "path": "components/ui/8bit/progress.tsx",
-      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./styles/retro.css\";\n\nexport const progressVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: \"\",\n      retro: \"retro\",\n    },\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressVariants> {\n  className?: string;\n  font?: VariantProps<typeof progressVariants>[\"font\"];\n  progressBg?: string;\n}\n\nfunction Progress({\n  className,\n  font,\n  variant,\n  value,\n  progressBg,\n  ...props\n}: BitProgressProps) {\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <ProgressPrimitive.Root\n        data-slot=\"progress\"\n        className={cn(\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\n          font !== \"normal\" && \"retro\"\n        )}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={cn(\n            \"h-full transition-all\",\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\n          )}\n          style={\n            variant === \"retro\"\n              ? undefined\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\n          }\n        >\n          {variant === \"retro\" && (\n            <div className=\"flex w-full\">\n              {Array.from({ length: 20 }).map((_, i) => {\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\n                return (\n                  <div\n                    key={i}\n                    className={cn(\n                      \"size-2 mx-[1px] w-full\",\n                      i < filledSquares ? progressBg : \"bg-transparent\"\n                    )}\n                  />\n                );\n              })}\n            </div>\n          )}\n        </ProgressPrimitive.Indicator>\n      </ProgressPrimitive.Root>\n\n      <div\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Progress };\n",
+      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const progressVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitProgressProps\r\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\r\n    VariantProps<typeof progressVariants> {\r\n  className?: string;\r\n  font?: VariantProps<typeof progressVariants>[\"font\"];\r\n  progressBg?: string;\r\n}\r\n\r\nfunction Progress({\r\n  className,\r\n  font,\r\n  variant,\r\n  value,\r\n  progressBg,\r\n  ...props\r\n}: BitProgressProps) {\r\n  return (\r\n    <div className={cn(\"relative w-full\", className)}>\r\n      <ProgressPrimitive.Root\r\n        data-slot=\"progress\"\r\n        className={cn(\r\n          \"bg-primary/20 relative h-2 w-full overflow-hidden\",\r\n          font !== \"normal\" && \"retro\"\r\n        )}\r\n        {...props}\r\n      >\r\n        <ProgressPrimitive.Indicator\r\n          data-slot=\"progress-indicator\"\r\n          className={cn(\r\n            \"h-full transition-all\",\r\n            variant === \"retro\" ? \"flex\" : \"w-full flex-1\",\r\n            progressBg && variant !== \"retro\" ? progressBg : \"bg-primary\"\r\n          )}\r\n          style={\r\n            variant === \"retro\"\r\n              ? undefined\r\n              : { transform: `translateX(-${100 - (value || 0)}%)` }\r\n          }\r\n        >\r\n          {variant === \"retro\" && (\r\n            <div className=\"flex w-full\">\r\n              {Array.from({ length: 20 }).map((_, i) => {\r\n                const filledSquares = Math.round(((value || 0) / 100) * 20);\r\n                return (\r\n                  <div\r\n                    key={i}\r\n                    className={cn(\r\n                      \"size-2 mx-[1px] w-full\",\r\n                      i < filledSquares ? progressBg : \"bg-transparent\"\r\n                    )}\r\n                  />\r\n                );\r\n              })}\r\n            </div>\r\n          )}\r\n        </ProgressPrimitive.Indicator>\r\n      </ProgressPrimitive.Root>\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Progress };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/progress.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-radio-group.json b/public/r/8bit-radio-group.json
index 423f43d1..2646f9fc 100644
--- a/public/r/8bit-radio-group.json
+++ b/public/r/8bit-radio-group.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/radio-group.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { RadioGroup as ShadcnRadioGroup } from \"@/components/ui/radio-group\";\n\nimport \"./styles/retro.css\";\n\nexport const radioGroupVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ShadcnRadioGroup>) {\n  return <ShadcnRadioGroup className={cn(\"\", className)} {...props} />;\n}\n\nfunction RadioGroupItem({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {\n  ref?: React.RefObject<React.ComponentRef<typeof RadioGroupPrimitive.Item>>;\n}) {\n  return (\n    <div className={cn(\"relative\", className)}>\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center rounded-none border-none py-3 peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 size-4 shrink-0 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n          \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary\",\n          className\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator>\n          <svg\n            viewBox=\"0 0 256 256\"\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            stroke=\"currentColor\"\n            strokeWidth=\"0\"\n            className=\"w-2.5\"\n            aria-label=\"square\"\n          >\n            <rect x=\"30\" y=\"35\" width=\"200\" height=\"200\" rx=\"0\" />\n            <rect x=\"80\" y=\"5\" width=\"100\" height=\"200\" rx=\"0\" />\n            <rect x=\"0\" y=\"85\" width=\"100\" height=\"100\" rx=\"0\" />\n            <rect x=\"80\" y=\"65\" width=\"100\" height=\"200\" rx=\"0\" />\n            <rect x=\"200\" y=\"85\" width=\"100\" height=\"100\" rx=\"0\" />\n          </svg>\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n\n      <div className=\"absolute top-[0px] w-2.5 left-1.5 h-1 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-[0px] w-2.5 right-1.5 h-1 bg-foreground dark:bg-ring\" />\n\n      <div className=\"absolute bottom-[0px] w-2.5 left-1.5 h-1 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-[0px] w-2.5 right-1.5 h-1 bg-foreground dark:bg-ring\" />\n\n      <div className=\"absolute top-[4px] -left-1 w-1 h-[15px] bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-[4px] -right-1 w-1 h-[15px] bg-foreground dark:bg-ring\" />\n\n      <div className=\"absolute top-[2px] -right-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-[2px] -left-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\n\n      <div className=\"absolute bottom-[2px] -right-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-[2px] -left-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\n    </div>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\nimport { cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { RadioGroup as ShadcnRadioGroup } from \"@/components/ui/radio-group\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const radioGroupVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nfunction RadioGroup({\r\n  className,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<typeof ShadcnRadioGroup>) {\r\n  return <ShadcnRadioGroup className={cn(\"\", className)} {...props} />;\r\n}\r\n\r\nfunction RadioGroupItem({\r\n  className,\r\n  ref,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {\r\n  ref?: React.RefObject<React.ComponentRef<typeof RadioGroupPrimitive.Item>>;\r\n}) {\r\n  return (\r\n    <div className={cn(\"relative\", className)}>\r\n      <RadioGroupPrimitive.Item\r\n        ref={ref}\r\n        className={cn(\r\n          \"flex items-center justify-center rounded-none border-none py-3 peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 size-4 shrink-0 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\r\n          \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <RadioGroupPrimitive.Indicator>\r\n          <svg\r\n            viewBox=\"0 0 256 256\"\r\n            fill=\"currentColor\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth=\"0\"\r\n            className=\"w-2.5\"\r\n            aria-label=\"square\"\r\n          >\r\n            <rect x=\"30\" y=\"35\" width=\"200\" height=\"200\" rx=\"0\" />\r\n            <rect x=\"80\" y=\"5\" width=\"100\" height=\"200\" rx=\"0\" />\r\n            <rect x=\"0\" y=\"85\" width=\"100\" height=\"100\" rx=\"0\" />\r\n            <rect x=\"80\" y=\"65\" width=\"100\" height=\"200\" rx=\"0\" />\r\n            <rect x=\"200\" y=\"85\" width=\"100\" height=\"100\" rx=\"0\" />\r\n          </svg>\r\n        </RadioGroupPrimitive.Indicator>\r\n      </RadioGroupPrimitive.Item>\r\n\r\n      <div className=\"absolute top-[0px] w-2.5 left-1.5 h-1 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-[0px] w-2.5 right-1.5 h-1 bg-foreground dark:bg-ring\" />\r\n\r\n      <div className=\"absolute bottom-[0px] w-2.5 left-1.5 h-1 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-[0px] w-2.5 right-1.5 h-1 bg-foreground dark:bg-ring\" />\r\n\r\n      <div className=\"absolute top-[4px] -left-1 w-1 h-[15px] bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-[4px] -right-1 w-1 h-[15px] bg-foreground dark:bg-ring\" />\r\n\r\n      <div className=\"absolute top-[2px] -right-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-[2px] -left-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\r\n\r\n      <div className=\"absolute bottom-[2px] -right-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-[2px] -left-0.5 w-1 h-1 bg-foreground dark:bg-ring\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { RadioGroup, RadioGroupItem };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/radio-group.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-resizable.json b/public/r/8bit-resizable.json
index eb0cfc69..a9bd1eef 100644
--- a/public/r/8bit-resizable.json
+++ b/public/r/8bit-resizable.json
@@ -8,13 +8,13 @@
   "files": [
     {
       "path": "components/ui/8bit/resizable.tsx",
-      "content": "\"use client\";\n\nimport * as ResizablePrimitive from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst ResizablePanelGroup = ({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <div className={cn(\"w-full h-full relative\", className)}>\n    <ResizablePrimitive.PanelGroup\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\"\n      )}\n      {...props}\n    >\n      {children}\n      <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n      <div className=\"absolute bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n      <div className=\"absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n      <div className=\"absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n      <div className=\"absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n      <div className=\"absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n    </ResizablePrimitive.PanelGroup>\n  </div>\n);\n\nfunction ResizablePanel({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return (\n    <ResizablePrimitive.Panel className={cn(className)} {...props}>\n      {children}\n    </ResizablePrimitive.Panel>\n  );\n}\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean;\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      `relative flex w-[1px] items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-[6px] data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 focus:dark:outline-ring`,\n      \"bg-foreground dark:bg-ring\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"absolute w-[6px] h-full border bg-foreground dark:bg-ring border-foreground dark:border-ring pointer-events-none\" />\n    {withHandle && (\n      <div className=\"relative w-[12px] aspect-video h-[20px] z-10 border-3 border-foreground dark:border-ring\"></div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n);\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n",
+      "content": "\"use client\";\r\n\r\nimport * as ResizablePrimitive from \"react-resizable-panels\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst ResizablePanelGroup = ({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\r\n  <div className={cn(\"w-full h-full relative\", className)}>\r\n    <ResizablePrimitive.PanelGroup\r\n      className={cn(\r\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\"\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n      <div className=\"absolute bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\r\n      <div className=\"absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n      <div className=\"absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n      <div className=\"absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n      <div className=\"absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\r\n    </ResizablePrimitive.PanelGroup>\r\n  </div>\r\n);\r\n\r\nfunction ResizablePanel({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\r\n  return (\r\n    <ResizablePrimitive.Panel className={cn(className)} {...props}>\r\n      {children}\r\n    </ResizablePrimitive.Panel>\r\n  );\r\n}\r\n\r\nconst ResizableHandle = ({\r\n  withHandle,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\r\n  withHandle?: boolean;\r\n}) => (\r\n  <ResizablePrimitive.PanelResizeHandle\r\n    className={cn(\r\n      `relative flex w-[1px] items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-[6px] data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 focus:dark:outline-ring`,\r\n      \"bg-foreground dark:bg-ring\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <div className=\"absolute w-[6px] h-full border bg-foreground dark:bg-ring border-foreground dark:border-ring pointer-events-none\" />\r\n    {withHandle && (\r\n      <div className=\"relative w-[12px] aspect-video h-[20px] z-10 border-3 border-foreground dark:border-ring\"></div>\r\n    )}\r\n  </ResizablePrimitive.PanelResizeHandle>\r\n);\r\n\r\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/resizable.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-scroll-area.json b/public/r/8bit-scroll-area.json
index a65a8a5e..4d73ad22 100644
--- a/public/r/8bit-scroll-area.json
+++ b/public/r/8bit-scroll-area.json
@@ -8,13 +8,13 @@
   "files": [
     {
       "path": "components/ui/8bit/scroll-area.tsx",
-      "content": "import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none bg-foreground/30 dark:bg-ring/30 relative\",\n        orientation === \"vertical\" &&\n          \"h-full w-1.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-1.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className={cn(\n          \"relative dark:bg-ring rounded-none  flex-1 bg-foreground transition-none duration-75\",\n          orientation === \"vertical\" && \"scale-x-250 \",\n          orientation === \"horizontal\" && \"scale-y-250 \"\n        )}\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n",
+      "content": "import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nfunction ScrollArea({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\r\n  return (\r\n    <ScrollAreaPrimitive.Root\r\n      data-slot=\"scroll-area\"\r\n      className={cn(\"relative\", className)}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.Viewport\r\n        data-slot=\"scroll-area-viewport\"\r\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\r\n      >\r\n        {children}\r\n      </ScrollAreaPrimitive.Viewport>\r\n      <ScrollBar />\r\n      <ScrollAreaPrimitive.Corner />\r\n    </ScrollAreaPrimitive.Root>\r\n  );\r\n}\r\n\r\nfunction ScrollBar({\r\n  className,\r\n  orientation = \"vertical\",\r\n  ...props\r\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\r\n  return (\r\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\r\n      data-slot=\"scroll-area-scrollbar\"\r\n      orientation={orientation}\r\n      className={cn(\r\n        \"flex touch-none p-px transition-colors select-none bg-foreground/30 dark:bg-ring/30 relative\",\r\n        orientation === \"vertical\" &&\r\n          \"h-full w-1.5 border-l border-l-transparent\",\r\n        orientation === \"horizontal\" &&\r\n          \"h-1.5 flex-col border-t border-t-transparent\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.ScrollAreaThumb\r\n        data-slot=\"scroll-area-thumb\"\r\n        className={cn(\r\n          \"relative dark:bg-ring rounded-none  flex-1 bg-foreground transition-none duration-75\",\r\n          orientation === \"vertical\" && \"scale-x-250 \",\r\n          orientation === \"horizontal\" && \"scale-y-250 \"\r\n        )}\r\n      />\r\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\r\n  );\r\n}\r\n\r\nexport { ScrollArea, ScrollBar };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/scroll-area.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-select.json b/public/r/8bit-select.json
index 6d969a80..94236166 100644
--- a/public/r/8bit-select.json
+++ b/public/r/8bit-select.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/select.tsx",
-      "content": "import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Select as ShadcnSelect,\n  SelectContent as ShadcnSelectContent,\n  SelectGroup as ShadcnSelectGroup,\n  SelectItem as ShadcnSelectItem,\n  SelectLabel as ShadcnSelectLabel,\n  SelectScrollDownButton as ShadcnSelectScrollDownButton,\n  SelectScrollUpButton as ShadcnSelectScrollUpButton,\n  SelectSeparator as ShadcnSelectSeparator,\n  SelectTrigger as ShadcnSelectTrigger,\n  SelectValue as ShadcnSelectValue,\n} from \"@/components/ui/select\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Select({ ...props }: React.ComponentProps<typeof ShadcnSelect>) {\n  return <ShadcnSelect {...props} />;\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <ShadcnSelectGroup {...props} />;\n}\n\ninterface BitSelectValueProps\n  extends React.ComponentProps<typeof SelectPrimitive.Value>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction SelectValue({ ...props }: BitSelectValueProps) {\n  const { font } = props;\n\n  return (\n    <ShadcnSelectValue\n      className={cn(font !== \"normal\" && \"retro\")}\n      {...props}\n    />\n  );\n}\n\ninterface BitSelectTriggerProps\n  extends React.ComponentProps<typeof SelectPrimitive.Trigger>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction SelectTrigger({ children, ...props }: BitSelectTriggerProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring\",\n        className,\n        font !== \"normal\" && \"retro\"\n      )}\n    >\n      <ShadcnSelectTrigger\n        {...props}\n        className={cn(\"rounded-none ring-0 w-full border-0\", className)}\n      >\n        {children}\n      </ShadcnSelectTrigger>\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport interface BitSelectContentProps\n  extends React.ComponentProps<typeof SelectPrimitive.Content>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction SelectContent({\n  className,\n  children,\n  ...props\n}: BitSelectContentProps) {\n  const { font } = props;\n\n  return (\n    <ShadcnSelectContent\n      className={cn(\n        font !== \"normal\" && \"retro\",\n        className,\n        \"relative rounded-none border-4 border-foreground dark:border-ring -ml-1 mt-1\"\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnSelectContent>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return <ShadcnSelectLabel className={cn(className)} {...props} />;\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <ShadcnSelectItem\n      className={cn(\n        className,\n        \"rounded-none border-y-3 border-dashed border-ring/0 hover:border-foreground dark:hover:border-ring\"\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnSelectItem>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return <ShadcnSelectSeparator className={cn(className)} {...props} />;\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof ShadcnSelectScrollUpButton>) {\n  return <ShadcnSelectScrollUpButton className={cn(className)} {...props} />;\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return <ShadcnSelectScrollDownButton className={cn(className)} {...props} />;\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",
+      "content": "import * as SelectPrimitive from \"@radix-ui/react-select\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Select as ShadcnSelect,\r\n  SelectContent as ShadcnSelectContent,\r\n  SelectGroup as ShadcnSelectGroup,\r\n  SelectItem as ShadcnSelectItem,\r\n  SelectLabel as ShadcnSelectLabel,\r\n  SelectScrollDownButton as ShadcnSelectScrollDownButton,\r\n  SelectScrollUpButton as ShadcnSelectScrollUpButton,\r\n  SelectSeparator as ShadcnSelectSeparator,\r\n  SelectTrigger as ShadcnSelectTrigger,\r\n  SelectValue as ShadcnSelectValue,\r\n} from \"@/components/ui/select\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitSelectProps\r\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Select({ ...props }: React.ComponentProps<typeof ShadcnSelect>) {\r\n  return <ShadcnSelect {...props} />;\r\n}\r\n\r\nfunction SelectGroup({\r\n  ...props\r\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\r\n  return <ShadcnSelectGroup {...props} />;\r\n}\r\n\r\ninterface BitSelectValueProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Value>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction SelectValue({ ...props }: BitSelectValueProps) {\r\n  const { font } = props;\r\n\r\n  return (\r\n    <ShadcnSelectValue\r\n      className={cn(font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface BitSelectTriggerProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Trigger>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction SelectTrigger({ children, ...props }: BitSelectTriggerProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative border-y-6 border-foreground dark:border-ring\",\r\n        className,\r\n        font !== \"normal\" && \"retro\"\r\n      )}\r\n    >\r\n      <ShadcnSelectTrigger\r\n        {...props}\r\n        className={cn(\"rounded-none ring-0 w-full border-0\", className)}\r\n      >\r\n        {children}\r\n      </ShadcnSelectTrigger>\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport interface BitSelectContentProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Content>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction SelectContent({\r\n  className,\r\n  children,\r\n  ...props\r\n}: BitSelectContentProps) {\r\n  const { font } = props;\r\n\r\n  return (\r\n    <ShadcnSelectContent\r\n      className={cn(\r\n        font !== \"normal\" && \"retro\",\r\n        className,\r\n        \"relative rounded-none border-4 border-foreground dark:border-ring -ml-1 mt-1\"\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnSelectContent>\r\n  );\r\n}\r\n\r\nfunction SelectLabel({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\r\n  return <ShadcnSelectLabel className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction SelectItem({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\r\n  return (\r\n    <ShadcnSelectItem\r\n      className={cn(\r\n        className,\r\n        \"rounded-none border-y-3 border-dashed border-ring/0 hover:border-foreground dark:hover:border-ring\"\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnSelectItem>\r\n  );\r\n}\r\n\r\nfunction SelectSeparator({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\r\n  return <ShadcnSelectSeparator className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction SelectScrollUpButton({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnSelectScrollUpButton>) {\r\n  return <ShadcnSelectScrollUpButton className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction SelectScrollDownButton({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\r\n  return <ShadcnSelectScrollDownButton className={cn(className)} {...props} />;\r\n}\r\n\r\nexport {\r\n  Select,\r\n  SelectContent,\r\n  SelectGroup,\r\n  SelectItem,\r\n  SelectLabel,\r\n  SelectScrollDownButton,\r\n  SelectScrollUpButton,\r\n  SelectSeparator,\r\n  SelectTrigger,\r\n  SelectValue,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/select.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-sheet.json b/public/r/8bit-sheet.json
index bc809d52..b0d7d84d 100644
--- a/public/r/8bit-sheet.json
+++ b/public/r/8bit-sheet.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/sheet.tsx",
-      "content": "import * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Sheet as ShadcnSheet,\n  SheetClose as ShadcnSheetClose,\n  SheetDescription as ShadcnSheetDescription,\n  SheetFooter as ShadcnSheetFooter,\n  SheetHeader as ShadcnSheetHeader,\n  SheetTitle as ShadcnSheetTitle,\n  SheetTrigger as ShadcnSheetTrigger,\n} from \"@/components/ui/sheet\";\n\nimport \"./styles/retro.css\";\n\nconst Sheet = ShadcnSheet;\n\nconst SheetTrigger = ShadcnSheetTrigger;\n\nconst SheetClose = ShadcnSheetClose;\n\nconst SheetDescription = ShadcnSheetDescription;\n\nconst SheetFooter = ShadcnSheetFooter;\n\nconst SheetHeader = ShadcnSheetHeader;\n\nconst SheetTitle = ShadcnSheetTitle;\n\nexport const sheetVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\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        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type BitSheetProps = React.ComponentProps<\n  typeof SheetPrimitive.Content\n> &\n  VariantProps<typeof sheetVariants> & {\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  };\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  font,\n  ...props\n}: BitSheetProps) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto\",\n          sheetVariants({\n            font,\n            className,\n          })\n        )}\n        {...props}\n      >\n        <div className=\"w-full h-full relative\">\n          {children}\n          {/* 8 bit borders */}\n          {side !== \"top\" && (\n            <div\n              className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\n              aria-hidden=\"true\"\n            />\n          )}\n          {side !== \"bottom\" && (\n            <div\n              className=\"absolute bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\n              aria-hidden=\"true\"\n            />\n          )}\n          {side !== \"left\" && (\n            <>\n              <div\n                className=\"absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n                aria-hidden=\"true\"\n              />\n              <div\n                className=\"absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n                aria-hidden=\"true\"\n              />\n            </>\n          )}\n          {side !== \"right\" && (\n            <>\n              <div\n                className=\"absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n                aria-hidden=\"true\"\n              />\n              <div\n                className=\"absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\n                aria-hidden=\"true\"\n              />\n            </>\n          )}\n        </div>\n        <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n          <svg\n            width={50}\n            height={50}\n            viewBox=\"0 0 256 256\"\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            stroke=\"currentColor\"\n            strokeWidth={0.25}\n            color=\"\"\n            className=\"w-6 h-6\"\n            aria-label=\"x\"\n          >\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 120 152)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 104 168)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 184 184)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 88 184)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 168 104)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 184 88)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 200 72)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 200 200)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 152 120)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 152 152)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 136 136)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 120 120)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 136 136)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 168 168)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 88 88)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 72 72)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 72 200)\"\n            />\n            <rect\n              width={14}\n              height={14}\n              rx={1}\n              transform=\"matrix(0 -1 -1 0 104 104)\"\n            />\n          </svg>\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n};\n",
+      "content": "import * as SheetPrimitive from \"@radix-ui/react-dialog\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Sheet as ShadcnSheet,\r\n  SheetClose as ShadcnSheetClose,\r\n  SheetDescription as ShadcnSheetDescription,\r\n  SheetFooter as ShadcnSheetFooter,\r\n  SheetHeader as ShadcnSheetHeader,\r\n  SheetTitle as ShadcnSheetTitle,\r\n  SheetTrigger as ShadcnSheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst Sheet = ShadcnSheet;\r\n\r\nconst SheetTrigger = ShadcnSheetTrigger;\r\n\r\nconst SheetClose = ShadcnSheetClose;\r\n\r\nconst SheetDescription = ShadcnSheetDescription;\r\n\r\nconst SheetFooter = ShadcnSheetFooter;\r\n\r\nconst SheetHeader = ShadcnSheetHeader;\r\n\r\nconst SheetTitle = ShadcnSheetTitle;\r\n\r\nexport const sheetVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nfunction SheetPortal({\r\n  ...props\r\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\r\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\r\n}\r\n\r\nfunction SheetOverlay({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\r\n  return (\r\n    <SheetPrimitive.Overlay\r\n      data-slot=\"sheet-overlay\"\r\n      className={cn(\r\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport type BitSheetProps = React.ComponentProps<\r\n  typeof SheetPrimitive.Content\r\n> &\r\n  VariantProps<typeof sheetVariants> & {\r\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\";\r\n  };\r\n\r\nfunction SheetContent({\r\n  className,\r\n  children,\r\n  side = \"right\",\r\n  font,\r\n  ...props\r\n}: BitSheetProps) {\r\n  return (\r\n    <SheetPortal>\r\n      <SheetOverlay />\r\n      <SheetPrimitive.Content\r\n        data-slot=\"sheet-content\"\r\n        className={cn(\r\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\r\n          side === \"right\" &&\r\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm\",\r\n          side === \"left\" &&\r\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm\",\r\n          side === \"top\" &&\r\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto\",\r\n          side === \"bottom\" &&\r\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto\",\r\n          sheetVariants({\r\n            font,\r\n            className,\r\n          })\r\n        )}\r\n        {...props}\r\n      >\r\n        <div className=\"w-full h-full relative\">\r\n          {children}\r\n          {/* 8 bit borders */}\r\n          {side !== \"top\" && (\r\n            <div\r\n              className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          )}\r\n          {side !== \"bottom\" && (\r\n            <div\r\n              className=\"absolute bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          )}\r\n          {side !== \"left\" && (\r\n            <>\r\n              <div\r\n                className=\"absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n                aria-hidden=\"true\"\r\n              />\r\n              <div\r\n                className=\"absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            </>\r\n          )}\r\n          {side !== \"right\" && (\r\n            <>\r\n              <div\r\n                className=\"absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n                aria-hidden=\"true\"\r\n              />\r\n              <div\r\n                className=\"absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            </>\r\n          )}\r\n        </div>\r\n        <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\r\n          <svg\r\n            width={50}\r\n            height={50}\r\n            viewBox=\"0 0 256 256\"\r\n            fill=\"currentColor\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth={0.25}\r\n            color=\"\"\r\n            className=\"w-6 h-6\"\r\n            aria-label=\"x\"\r\n          >\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 120 152)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 104 168)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 184 184)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 88 184)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 168 104)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 184 88)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 200 72)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 200 200)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 152 120)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 152 152)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 136 136)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 120 120)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 136 136)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 168 168)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 88 88)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 72 72)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 72 200)\"\r\n            />\r\n            <rect\r\n              width={14}\r\n              height={14}\r\n              rx={1}\r\n              transform=\"matrix(0 -1 -1 0 104 104)\"\r\n            />\r\n          </svg>\r\n          <span className=\"sr-only\">Close</span>\r\n        </SheetPrimitive.Close>\r\n      </SheetPrimitive.Content>\r\n    </SheetPortal>\r\n  );\r\n}\r\n\r\nexport {\r\n  Sheet,\r\n  SheetTrigger,\r\n  SheetClose,\r\n  SheetContent,\r\n  SheetDescription,\r\n  SheetFooter,\r\n  SheetHeader,\r\n  SheetTitle,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/sheet.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-sidebar.json b/public/r/8bit-sidebar.json
index 814340c1..2726a86c 100644
--- a/public/r/8bit-sidebar.json
+++ b/public/r/8bit-sidebar.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/sidebar.tsx",
-      "content": "import { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\";\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\";\n\nimport \"./styles/retro.css\";\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n];\n\nexport function AppSidebar() {\n  return (\n    <Sidebar\n      className={`${\"retro\"} border-r-4 border-foreground dark:border-ring`}\n    >\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {items.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n",
+      "content": "import { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\";\r\n\r\nimport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarGroup,\r\n  SidebarGroupContent,\r\n  SidebarGroupLabel,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n} from \"@/components/ui/sidebar\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\n// Menu items.\r\nconst items = [\r\n  {\r\n    title: \"Home\",\r\n    url: \"#\",\r\n    icon: Home,\r\n  },\r\n  {\r\n    title: \"Inbox\",\r\n    url: \"#\",\r\n    icon: Inbox,\r\n  },\r\n  {\r\n    title: \"Calendar\",\r\n    url: \"#\",\r\n    icon: Calendar,\r\n  },\r\n  {\r\n    title: \"Search\",\r\n    url: \"#\",\r\n    icon: Search,\r\n  },\r\n  {\r\n    title: \"Settings\",\r\n    url: \"#\",\r\n    icon: Settings,\r\n  },\r\n];\r\n\r\nexport function AppSidebar() {\r\n  return (\r\n    <Sidebar\r\n      className={`${\"retro\"} border-r-4 border-foreground dark:border-ring`}\r\n    >\r\n      <SidebarContent>\r\n        <SidebarGroup>\r\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\r\n          <SidebarGroupContent>\r\n            <SidebarMenu>\r\n              {items.map((item) => (\r\n                <SidebarMenuItem key={item.title}>\r\n                  <SidebarMenuButton asChild>\r\n                    <a href={item.url}>\r\n                      <item.icon />\r\n                      <span>{item.title}</span>\r\n                    </a>\r\n                  </SidebarMenuButton>\r\n                </SidebarMenuItem>\r\n              ))}\r\n            </SidebarMenu>\r\n          </SidebarGroupContent>\r\n        </SidebarGroup>\r\n      </SidebarContent>\r\n    </Sidebar>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/sidebar.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-skeleton.json b/public/r/8bit-skeleton.json
index a131618c..05ad4067 100644
--- a/public/r/8bit-skeleton.json
+++ b/public/r/8bit-skeleton.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/skeleton.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nimport { Skeleton as ShadcnSkeleton } from \"@/components/ui/skeleton\";\n\nimport \"./styles/retro.css\";\n\nexport interface BitSkeletonProp extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction Skeleton({ children, ...props }: BitSkeletonProp) {\n  const { className } = props;\n\n  return (\n    <div className={cn(\"relative animate-pulse\", className)}>\n      <ShadcnSkeleton\n        {...props}\n        className={cn(\"rounded-none border-none bg-accent\", \"retro\", className)}\n      >\n        {children}\n      </ShadcnSkeleton>\n\n      <div className=\"opacity-60\">\n        <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n        <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      </div>\n      <div className=\"opacity-60\">\n        <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n        <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      </div>\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\n      <div className=\"opacity-60\">\n        <div className=\"absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n        <div className=\"absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      </div>\n      <div className=\"opacity-60\">\n        <div className=\"absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n        <div className=\"absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      </div>\n    </div>\n  );\n}\n\nexport { Skeleton };\n",
+      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nimport { Skeleton as ShadcnSkeleton } from \"@/components/ui/skeleton\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport interface BitSkeletonProp extends React.ComponentProps<\"div\"> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Skeleton({ children, ...props }: BitSkeletonProp) {\r\n  const { className } = props;\r\n\r\n  return (\r\n    <div className={cn(\"relative animate-pulse\", className)}>\r\n      <ShadcnSkeleton\r\n        {...props}\r\n        className={cn(\"rounded-none border-none bg-accent\", \"retro\", className)}\r\n      >\r\n        {children}\r\n      </ShadcnSkeleton>\r\n\r\n      <div className=\"opacity-60\">\r\n        <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n        <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      </div>\r\n      <div className=\"opacity-60\">\r\n        <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n        <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      </div>\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground/60 dark:bg-ring/60\" />\r\n      <div className=\"opacity-60\">\r\n        <div className=\"absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n        <div className=\"absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      </div>\r\n      <div className=\"opacity-60\">\r\n        <div className=\"absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n        <div className=\"absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Skeleton };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/skeleton.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-slider.json b/public/r/8bit-slider.json
index 9eec9f37..2ee65316 100644
--- a/public/r/8bit-slider.json
+++ b/public/r/8bit-slider.json
@@ -8,13 +8,13 @@
   "files": [
     {
       "path": "components/ui/8bit/slider.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"relative w-full\", className)}>\n    <SliderPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden bg-secondary\">\n        <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n      </SliderPrimitive.Track>\n      <SliderPrimitive.Thumb className=\"block size-5 border-2 border-foreground dark:border-ring bg-foreground dark:bg-ring ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50\" />\n    </SliderPrimitive.Root>\n\n    <div\n      className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n      aria-hidden=\"true\"\n    />\n\n    <div\n      className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n      aria-hidden=\"true\"\n    />\n  </div>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst Slider = React.forwardRef<\r\n  React.ComponentRef<typeof SliderPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <div className={cn(\"relative w-full\", className)}>\r\n    <SliderPrimitive.Root\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex w-full touch-none select-none items-center\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden bg-secondary\">\r\n        <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\r\n      </SliderPrimitive.Track>\r\n      <SliderPrimitive.Thumb className=\"block size-5 border-2 border-foreground dark:border-ring bg-foreground dark:bg-ring ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50\" />\r\n    </SliderPrimitive.Root>\r\n\r\n    <div\r\n      className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n      aria-hidden=\"true\"\r\n    />\r\n\r\n    <div\r\n      className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n      aria-hidden=\"true\"\r\n    />\r\n  </div>\r\n));\r\nSlider.displayName = SliderPrimitive.Root.displayName;\r\n\r\nexport { Slider };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/slider.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-switch.json b/public/r/8bit-switch.json
index fa219ced..fb590bda 100644
--- a/public/r/8bit-switch.json
+++ b/public/r/8bit-switch.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/switch.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"relative peer data-[state=checked]:bg-primary rounded-xs data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 border border-foreground dark:border-ring ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nfunction Switch({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\r\n  return (\r\n    <SwitchPrimitive.Root\r\n      data-slot=\"switch\"\r\n      className={cn(\r\n        \"relative peer data-[state=checked]:bg-primary rounded-xs data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <SwitchPrimitive.Thumb\r\n        data-slot=\"switch-thumb\"\r\n        className={cn(\r\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 border border-foreground dark:border-ring ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </SwitchPrimitive.Root>\r\n  );\r\n}\r\n\r\nexport { Switch };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/switch.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-table.json b/public/r/8bit-table.json
index 88ad6441..e2f3180e 100644
--- a/public/r/8bit-table.json
+++ b/public/r/8bit-table.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/table.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Table as ShadcnTable,\n  TableBody as ShadcnTableBody,\n  TableCaption as ShadcnTableCaption,\n  TableCell as ShadcnTableCell,\n  TableFooter as ShadcnTableFooter,\n  TableHead as ShadcnTableHead,\n  TableHeader as ShadcnTableHeader,\n  TableRow as ShadcnTableRow,\n} from \"@/components/ui/table\";\n\nimport \"./styles/retro.css\";\n\nexport const tableVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: \"p-4 py-2.5 border-y-6 border-foreground dark:border-ring\",\n      borderless: \"\",\n    },\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n    variant: \"default\",\n  },\n});\n\nfunction Table({\n  className,\n  font,\n  variant,\n  ...props\n}: React.ComponentProps<\"table\"> & {\n  font?: VariantProps<typeof tableVariants>[\"font\"];\n  variant?: VariantProps<typeof tableVariants>[\"variant\"];\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex justify-center w-fit\",\n        tableVariants({ font, variant })\n      )}\n    >\n      <ShadcnTable className={className} {...props} />\n\n      {variant !== \"borderless\" && (\n        <div\n          className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n          aria-hidden=\"true\"\n        />\n      )}\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <ShadcnTableHeader\n      className={cn(className, \"border-b-4 border-foreground dark:border-ring\")}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return <ShadcnTableBody className={cn(className)} {...props} />;\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return <ShadcnTableFooter className={cn(className)} {...props} />;\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <ShadcnTableRow\n      className={cn(\n        className,\n        \"border-dashed border-b-4 border-foreground dark:border-ring\"\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return <ShadcnTableHead className={cn(className)} {...props} />;\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return <ShadcnTableCell className={cn(className)} {...props} />;\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return <ShadcnTableCaption className={cn(className)} {...props} />;\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Table as ShadcnTable,\r\n  TableBody as ShadcnTableBody,\r\n  TableCaption as ShadcnTableCaption,\r\n  TableCell as ShadcnTableCell,\r\n  TableFooter as ShadcnTableFooter,\r\n  TableHead as ShadcnTableHead,\r\n  TableHeader as ShadcnTableHeader,\r\n  TableRow as ShadcnTableRow,\r\n} from \"@/components/ui/table\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const tableVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"p-4 py-2.5 border-y-6 border-foreground dark:border-ring\",\r\n      borderless: \"\",\r\n    },\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nfunction Table({\r\n  className,\r\n  font,\r\n  variant,\r\n  ...props\r\n}: React.ComponentProps<\"table\"> & {\r\n  font?: VariantProps<typeof tableVariants>[\"font\"];\r\n  variant?: VariantProps<typeof tableVariants>[\"variant\"];\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex justify-center w-fit\",\r\n        tableVariants({ font, variant })\r\n      )}\r\n    >\r\n      <ShadcnTable className={className} {...props} />\r\n\r\n      {variant !== \"borderless\" && (\r\n        <div\r\n          className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n          aria-hidden=\"true\"\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\r\n  return (\r\n    <ShadcnTableHeader\r\n      className={cn(className, \"border-b-4 border-foreground dark:border-ring\")}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\r\n  return <ShadcnTableBody className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\r\n  return <ShadcnTableFooter className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\r\n  return (\r\n    <ShadcnTableRow\r\n      className={cn(\r\n        className,\r\n        \"border-dashed border-b-4 border-foreground dark:border-ring\"\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\r\n  return <ShadcnTableHead className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\r\n  return <ShadcnTableCell className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction TableCaption({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"caption\">) {\r\n  return <ShadcnTableCaption className={cn(className)} {...props} />;\r\n}\r\n\r\nexport {\r\n  Table,\r\n  TableHeader,\r\n  TableBody,\r\n  TableFooter,\r\n  TableHead,\r\n  TableRow,\r\n  TableCell,\r\n  TableCaption,\r\n};\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/table.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-tabs.json b/public/r/8bit-tabs.json
index 9853de58..0a41d64b 100644
--- a/public/r/8bit-tabs.json
+++ b/public/r/8bit-tabs.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/tabs.tsx",
-      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Tabs as ShadcnTabs,\n  TabsContent as ShadcnTabsContent,\n  TabsList as ShadcnTabsList,\n  TabsTrigger as ShadcnTabsTrigger,\n} from \"@/components/ui/tabs\";\n\nimport \"./styles/retro.css\";\n\nexport const tabsVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: \"bg-primary\",\n      retro: \"retro\",\n    },\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitTabsProps\n  extends React.ComponentProps<typeof TabsPrimitive.Root>,\n    VariantProps<typeof tabsVariants> {\n  asChild?: boolean;\n}\n\nfunction Tabs({ className, ...props }: BitTabsProps) {\n  const { font } = props;\n\n  return (\n    <ShadcnTabs\n      {...props}\n      className={cn(\"relative\", font !== \"normal\" && \"retro\", className)}\n    />\n  );\n}\n\nfunction TabsList({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ShadcnTabsList>) {\n  return (\n    <ShadcnTabsList\n      {...props}\n      className={cn(\"relative bg-card rounded-none\", className)}\n    >\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      {children}\n    </ShadcnTabsList>\n  );\n}\n\nfunction TabsTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ShadcnTabsTrigger>) {\n  return (\n    <ShadcnTabsTrigger\n      className={cn(\n        \"border-none data-[state=active]:bg-accent data-[state=active]:text-foreground text-muted-foreground rounded-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnTabsTrigger>\n  );\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ShadcnTabsContent>) {\n  return <ShadcnTabsContent className={cn(\"\", className)} {...props} />;\n}\n\nexport { Tabs, TabsList, TabsContent, TabsTrigger };\n",
+      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Tabs as ShadcnTabs,\r\n  TabsContent as ShadcnTabsContent,\r\n  TabsList as ShadcnTabsList,\r\n  TabsTrigger as ShadcnTabsTrigger,\r\n} from \"@/components/ui/tabs\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const tabsVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"bg-primary\",\r\n      retro: \"retro\",\r\n    },\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitTabsProps\r\n  extends React.ComponentProps<typeof TabsPrimitive.Root>,\r\n    VariantProps<typeof tabsVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Tabs({ className, ...props }: BitTabsProps) {\r\n  const { font } = props;\r\n\r\n  return (\r\n    <ShadcnTabs\r\n      {...props}\r\n      className={cn(\"relative\", font !== \"normal\" && \"retro\", className)}\r\n    />\r\n  );\r\n}\r\n\r\nfunction TabsList({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnTabsList>) {\r\n  return (\r\n    <ShadcnTabsList\r\n      {...props}\r\n      className={cn(\"relative bg-card rounded-none\", className)}\r\n    >\r\n      <div\r\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n      {children}\r\n    </ShadcnTabsList>\r\n  );\r\n}\r\n\r\nfunction TabsTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnTabsTrigger>) {\r\n  return (\r\n    <ShadcnTabsTrigger\r\n      className={cn(\r\n        \"border-none data-[state=active]:bg-accent data-[state=active]:text-foreground text-muted-foreground rounded-none\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnTabsTrigger>\r\n  );\r\n}\r\n\r\nfunction TabsContent({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof ShadcnTabsContent>) {\r\n  return <ShadcnTabsContent className={cn(\"\", className)} {...props} />;\r\n}\r\n\r\nexport { Tabs, TabsList, TabsContent, TabsTrigger };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/tabs.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-textarea.json b/public/r/8bit-textarea.json
index 1de7c583..ef354684 100644
--- a/public/r/8bit-textarea.json
+++ b/public/r/8bit-textarea.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/textarea.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Textarea as ShadcnTextarea } from \"@/components/ui/textarea\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitTextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    VariantProps<typeof inputVariants> {\n  asChild?: boolean;\n}\n\nfunction Textarea({ ...props }: BitTextareaProps) {\n  const { className, font } = props;\n\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <ShadcnTextarea\n        {...props}\n        className={cn(\n          \"rounded-none transition-transform ring-0 border-0\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Textarea };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Textarea as ShadcnTextarea } from \"@/components/ui/textarea\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const inputVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitTextareaProps\r\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\r\n    VariantProps<typeof inputVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Textarea({ ...props }: BitTextareaProps) {\r\n  const { className, font } = props;\r\n\r\n  return (\r\n    <div className={cn(\"relative w-full\", className)}>\r\n      <ShadcnTextarea\r\n        {...props}\r\n        className={cn(\r\n          \"rounded-none transition-transform ring-0 border-0\",\r\n          font !== \"normal\" && \"retro\",\r\n          className\r\n        )}\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      <div\r\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Textarea };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/textarea.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-toast.json b/public/r/8bit-toast.json
index 7a6650a7..2d9e4b19 100644
--- a/public/r/8bit-toast.json
+++ b/public/r/8bit-toast.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/toast.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { toast as sonnerToast } from \"sonner\";\n\nimport \"./styles/retro.css\";\n\nexport function toast(toast: string) {\n  return sonnerToast.custom((id) => <Toast id={id} title={toast} />);\n}\n\ninterface ToastProps {\n  id: string | number;\n  title: string;\n}\n\nfunction Toast(props: ToastProps) {\n  const { title } = props;\n\n  return (\n    <div className={`relative ${\"retro\"}`}>\n      <div className=\"flex rounded-lg bg-background shadow-lg ring-1 ring-black/5 w-full md:max-w-[364px] items-center p-4\">\n        <div className=\"flex flex-1 items-center\">\n          <div className=\"w-full\">\n            <p className=\"text-sm font-medium\">{title}</p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n      <div className=\"absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { toast as sonnerToast } from \"sonner\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport function toast(toast: string) {\r\n  return sonnerToast.custom((id) => <Toast id={id} title={toast} />);\r\n}\r\n\r\ninterface ToastProps {\r\n  id: string | number;\r\n  title: string;\r\n}\r\n\r\nfunction Toast(props: ToastProps) {\r\n  const { title } = props;\r\n\r\n  return (\r\n    <div className={`relative ${\"retro\"}`}>\r\n      <div className=\"flex rounded-lg bg-background shadow-lg ring-1 ring-black/5 w-full md:max-w-[364px] items-center p-4\">\r\n        <div className=\"flex flex-1 items-center\">\r\n          <div className=\"w-full\">\r\n            <p className=\"text-sm font-medium\">{title}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n      <div className=\"absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/toast.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-toggle-group.json b/public/r/8bit-toggle-group.json
index d086500e..7c0ea144 100644
--- a/public/r/8bit-toggle-group.json
+++ b/public/r/8bit-toggle-group.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/toggle-group.tsx",
-      "content": "import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  ToggleGroup as ShadcnToggleGroup,\n  ToggleGroupItem as ShadcnToggleGroupItem,\n} from \"../toggle-group\";\nimport \"./styles/retro.css\";\n\nexport const toggleGroupVariants = cva(\"\", {\n  variants: {\n    font: { normal: \"\", retro: \"retro\" },\n    variant: {\n      default: \"bg-transparent\",\n      outline:\n        \"bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n    },\n    size: {\n      default: \"h-9 px-2 min-w-9\",\n      sm: \"h-4 px-1.5 min-w-4\",\n      lg: \"h-10 px-2.5 min-w-10\",\n    },\n  },\n  defaultVariants: { variant: \"default\", font: \"retro\", size: \"default\" },\n});\n\nexport type BitToggleGroupProps = React.ComponentPropsWithoutRef<\n  typeof ToggleGroupPrimitive.Root\n> &\n  VariantProps<typeof toggleGroupVariants>;\n\nexport type BitToggleGroupItemProps = React.ComponentPropsWithoutRef<\n  typeof ToggleGroupPrimitive.Item\n> &\n  VariantProps<typeof toggleGroupVariants>;\n\nfunction ToggleGroup({ ...props }: BitToggleGroupProps) {\n  const { className, font, children } = props;\n\n  return (\n    <ShadcnToggleGroup\n      className={cn(\"gap-3\", className, font !== \"normal\" && \"retro\")}\n      {...props}\n    >\n      {\" \"}\n      {children}{\" \"}\n    </ShadcnToggleGroup>\n  );\n}\nfunction ToggleGroupItem({ ...props }: BitToggleGroupItemProps) {\n  const { className, font, children, variant } = props;\n  return (\n    <ShadcnToggleGroupItem\n      className={cn(\n        \"relative transition-transform active:translate-x-1 active:translate-y-1\",\n        className,\n        font !== \"normal\" && \"retro\"\n      )}\n      {...props}\n    >\n      {\" \"}\n      {children}{\" \"}\n      {variant === \"outline\" && (\n        <>\n          {\" \"}\n          <div\n            className=\"absolute inset-0 -my-1.5 border-y-6 border-foreground dark:border-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />{\" \"}\n          <div\n            className=\"absolute inset-0 -mx-1.5 border-x-6 border-foreground dark:border-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />{\" \"}\n        </>\n      )}{\" \"}\n    </ShadcnToggleGroupItem>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n",
+      "content": "import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  ToggleGroup as ShadcnToggleGroup,\r\n  ToggleGroupItem as ShadcnToggleGroupItem,\r\n} from \"../toggle-group\";\r\nimport \"./styles/retro.css\";\r\n\r\nexport const toggleGroupVariants = cva(\"\", {\r\n  variants: {\r\n    font: { normal: \"\", retro: \"retro\" },\r\n    variant: {\r\n      default: \"bg-transparent\",\r\n      outline:\r\n        \"bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-2 min-w-9\",\r\n      sm: \"h-4 px-1.5 min-w-4\",\r\n      lg: \"h-10 px-2.5 min-w-10\",\r\n    },\r\n  },\r\n  defaultVariants: { variant: \"default\", font: \"retro\", size: \"default\" },\r\n});\r\n\r\nexport type BitToggleGroupProps = React.ComponentPropsWithoutRef<\r\n  typeof ToggleGroupPrimitive.Root\r\n> &\r\n  VariantProps<typeof toggleGroupVariants>;\r\n\r\nexport type BitToggleGroupItemProps = React.ComponentPropsWithoutRef<\r\n  typeof ToggleGroupPrimitive.Item\r\n> &\r\n  VariantProps<typeof toggleGroupVariants>;\r\n\r\nfunction ToggleGroup({ ...props }: BitToggleGroupProps) {\r\n  const { className, font, children } = props;\r\n\r\n  return (\r\n    <ShadcnToggleGroup\r\n      className={cn(\"gap-3\", className, font !== \"normal\" && \"retro\")}\r\n      {...props}\r\n    >\r\n      {\" \"}\r\n      {children}{\" \"}\r\n    </ShadcnToggleGroup>\r\n  );\r\n}\r\nfunction ToggleGroupItem({ ...props }: BitToggleGroupItemProps) {\r\n  const { className, font, children, variant } = props;\r\n  return (\r\n    <ShadcnToggleGroupItem\r\n      className={cn(\r\n        \"relative transition-transform active:translate-x-1 active:translate-y-1\",\r\n        className,\r\n        font !== \"normal\" && \"retro\"\r\n      )}\r\n      {...props}\r\n    >\r\n      {\" \"}\r\n      {children}{\" \"}\r\n      {variant === \"outline\" && (\r\n        <>\r\n          {\" \"}\r\n          <div\r\n            className=\"absolute inset-0 -my-1.5 border-y-6 border-foreground dark:border-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />{\" \"}\r\n          <div\r\n            className=\"absolute inset-0 -mx-1.5 border-x-6 border-foreground dark:border-ring pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />{\" \"}\r\n        </>\r\n      )}{\" \"}\r\n    </ShadcnToggleGroupItem>\r\n  );\r\n}\r\n\r\nexport { ToggleGroup, ToggleGroupItem };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/toggle-group.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-toggle.json b/public/r/8bit-toggle.json
index 11e300b4..a9766588 100644
--- a/public/r/8bit-toggle.json
+++ b/public/r/8bit-toggle.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/toggle.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Toggle as ShadcnToggle } from \"@/components/ui/toggle\";\n\nimport \"./styles/retro.css\";\n\nconst toggleVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-transparent\",\n      outline:\n        \"bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n    },\n    size: {\n      default: \"h-9 px-2 min-w-9\",\n      sm: \"h-8 px-1.5 min-w-8\",\n      lg: \"h-10 px-2.5 min-w-10\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    font: \"retro\",\n    size: \"default\",\n  },\n});\n\nexport interface BitToggleProps\n  extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,\n    VariantProps<typeof toggleVariants> {}\n\nfunction Toggle({ children, font, ...props }: BitToggleProps) {\n  const { variant, className } = props;\n\n  return (\n    <ShadcnToggle\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative border-none active:translate-x-1\",\n        \"data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n    >\n      {children}\n\n      <>\n        {variant === \"outline\" && (\n          <>\n            <div\n              className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n              aria-hidden=\"true\"\n            />\n\n            <div\n              className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n              aria-hidden=\"true\"\n            />\n          </>\n        )}\n      </>\n    </ShadcnToggle>\n  );\n}\n\nexport { Toggle, toggleVariants };\n",
+      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport { Toggle as ShadcnToggle } from \"@/components/ui/toggle\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nconst toggleVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n    variant: {\r\n      default: \"bg-transparent\",\r\n      outline:\r\n        \"bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\r\n    },\r\n    size: {\r\n      default: \"h-9 px-2 min-w-9\",\r\n      sm: \"h-8 px-1.5 min-w-8\",\r\n      lg: \"h-10 px-2.5 min-w-10\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    font: \"retro\",\r\n    size: \"default\",\r\n  },\r\n});\r\n\r\nexport interface BitToggleProps\r\n  extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,\r\n    VariantProps<typeof toggleVariants> {}\r\n\r\nfunction Toggle({ children, font, ...props }: BitToggleProps) {\r\n  const { variant, className } = props;\r\n\r\n  return (\r\n    <ShadcnToggle\r\n      {...props}\r\n      className={cn(\r\n        \"rounded-none active:translate-y-1 transition-transform relative border-none active:translate-x-1\",\r\n        \"data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\r\n        font !== \"normal\" && \"retro\",\r\n        className\r\n      )}\r\n    >\r\n      {children}\r\n\r\n      <>\r\n        {variant === \"outline\" && (\r\n          <>\r\n            <div\r\n              className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n              aria-hidden=\"true\"\r\n            />\r\n\r\n            <div\r\n              className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          </>\r\n        )}\r\n      </>\r\n    </ShadcnToggle>\r\n  );\r\n}\r\n\r\nexport { Toggle, toggleVariants };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/toggle.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }
diff --git a/public/r/8bit-tooltip.json b/public/r/8bit-tooltip.json
index 119cb2c5..a9aa0f2a 100644
--- a/public/r/8bit-tooltip.json
+++ b/public/r/8bit-tooltip.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "components/ui/8bit/tooltip.tsx",
-      "content": "\"use client\";\n\nimport type * as React from \"react\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Tooltip as ShadcnTooltip,\n  TooltipContent as ShadcnTooltipContent,\n  TooltipProvider as ShadcnTooltipProvider,\n  TooltipTrigger as ShadcnTooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\nimport \"./styles/retro.css\";\n\nexport const tooltipVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitTooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltipContent>,\n    VariantProps<typeof tooltipVariants> {}\n\nfunction TooltipContent({\n  className,\n  children,\n  font,\n  ...props\n}: BitTooltipContentProps) {\n  const color = tooltipVariants({ font });\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      <ShadcnTooltipContent\n        {...props}\n        data-slot=\"tooltip-content\"\n        className={cn(\"rounded-none\", color, className)}\n      >\n        {children}\n        <div\n          className={cn(\n            \"absolute top-1.5 bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-primary\",\n            color\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1.5 bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-primary \",\n            color\n          )}\n        />\n      </ShadcnTooltipContent>\n    </div>\n  );\n}\n\nexport interface BitTooltipProps\n  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltip>,\n    VariantProps<typeof tooltipVariants> {}\n\nfunction Tooltip({ children, ...props }: BitTooltipProps) {\n  return (\n    <ShadcnTooltip data-slot=\"tooltip\" {...props}>\n      {children}\n    </ShadcnTooltip>\n  );\n}\n\nexport interface BitTooltipProviderProps\n  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltipProvider> {\n  delayDuration?: number;\n}\n\nfunction TooltipProvider({\n  children,\n  delayDuration = 0,\n  ...props\n}: BitTooltipProviderProps) {\n  return (\n    <ShadcnTooltipProvider delayDuration={delayDuration} {...props}>\n      {children}\n    </ShadcnTooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  children,\n  asChild = true,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ShadcnTooltipTrigger>) {\n  return (\n    <ShadcnTooltipTrigger\n      data-slot=\"tooltip-trigger\"\n      asChild={asChild}\n      {...props}\n    >\n      {children}\n    </ShadcnTooltipTrigger>\n  );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n",
+      "content": "\"use client\";\r\n\r\nimport type * as React from \"react\";\r\n\r\nimport { type VariantProps, cva } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nimport {\r\n  Tooltip as ShadcnTooltip,\r\n  TooltipContent as ShadcnTooltipContent,\r\n  TooltipProvider as ShadcnTooltipProvider,\r\n  TooltipTrigger as ShadcnTooltipTrigger,\r\n} from \"@/components/ui/tooltip\";\r\n\r\nimport \"./styles/retro.css\";\r\n\r\nexport const tooltipVariants = cva(\"\", {\r\n  variants: {\r\n    font: {\r\n      normal: \"\",\r\n      retro: \"retro\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    font: \"retro\",\r\n  },\r\n});\r\n\r\nexport interface BitTooltipContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltipContent>,\r\n    VariantProps<typeof tooltipVariants> {}\r\n\r\nfunction TooltipContent({\r\n  className,\r\n  children,\r\n  font,\r\n  ...props\r\n}: BitTooltipContentProps) {\r\n  const color = tooltipVariants({ font });\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-flex\", className)}>\r\n      <ShadcnTooltipContent\r\n        {...props}\r\n        data-slot=\"tooltip-content\"\r\n        className={cn(\"rounded-none\", color, className)}\r\n      >\r\n        {children}\r\n        <div\r\n          className={cn(\r\n            \"absolute top-1.5 bottom-1.5 -left-1.5 h-1/2 w-1.5 bg-primary\",\r\n            color\r\n          )}\r\n        />\r\n        <div\r\n          className={cn(\r\n            \"absolute top-1.5 bottom-1.5 -right-1.5 h-1/2 w-1.5 bg-primary \",\r\n            color\r\n          )}\r\n        />\r\n      </ShadcnTooltipContent>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport interface BitTooltipProps\r\n  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltip>,\r\n    VariantProps<typeof tooltipVariants> {}\r\n\r\nfunction Tooltip({ children, ...props }: BitTooltipProps) {\r\n  return (\r\n    <ShadcnTooltip data-slot=\"tooltip\" {...props}>\r\n      {children}\r\n    </ShadcnTooltip>\r\n  );\r\n}\r\n\r\nexport interface BitTooltipProviderProps\r\n  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltipProvider> {\r\n  delayDuration?: number;\r\n}\r\n\r\nfunction TooltipProvider({\r\n  children,\r\n  delayDuration = 0,\r\n  ...props\r\n}: BitTooltipProviderProps) {\r\n  return (\r\n    <ShadcnTooltipProvider delayDuration={delayDuration} {...props}>\r\n      {children}\r\n    </ShadcnTooltipProvider>\r\n  );\r\n}\r\n\r\nfunction TooltipTrigger({\r\n  children,\r\n  asChild = true,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<typeof ShadcnTooltipTrigger>) {\r\n  return (\r\n    <ShadcnTooltipTrigger\r\n      data-slot=\"tooltip-trigger\"\r\n      asChild={asChild}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ShadcnTooltipTrigger>\r\n  );\r\n}\r\n\r\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/tooltip.tsx"
     },
     {
       "path": "components/ui/8bit/styles/retro.css",
-      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
+      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\r\n\r\n.retro {\r\n  font-family:\r\n    \"Press Start 2P\",\r\n    system-ui,\r\n    -apple-system,\r\n    sans-serif;\r\n  line-height: 1.5;\r\n  letter-spacing: 0.5px;\r\n}\r\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
     }